Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 1x 9x 30x 30x 30x 18x 30x 30x 21x 30x 105x 105x 105x 105x 9x 96x 1x 290x 18x 12x 120x 114x 14x 12x 1x 144x 144x 144x 2x 144x 144x | /**
* @module Client.Game.States
* Display a bar
*/
import * as React from 'react';
export type BarColors = 'green' | 'red' | 'blue' | 'yellow' | 'gray' | 'none';
export interface BarProps {
actual: number;
max?: number;
ratio: number;
min?: number;
message: string;
large?: boolean;
backgroundColor?: BarColors;
valueColor?: BarColors;
}
export interface InfoBarProps {
message: string;
inverted?: boolean;
backgroundColor?: BarColors;
valueColor?: BarColors;
}
export interface SimpleBarProps {
actual: number;
message?: string;
inverted?: boolean;
backgroundColor?: BarColors;
valueColor?: BarColors;
}
export interface DoubleBarProps {
actual: number;
max: number;
min?: number;
inverted?: boolean;
large?: boolean;
backgroundColor?: BarColors;
valueColor?: BarColors;
}
// InfoBar are always green
export const InfoBar = ({ inverted, ...rest }: InfoBarProps) => !inverted ?
(
<Bar ratio={100} actual={1} {...rest} />
) :
(
<Bar ratio={0} actual={0} {...rest} />
);
// SimpleBar has two state : full (any value other than 0) and empty (0)
export const SimpleBar = ({ actual, message, inverted, ...rest }: SimpleBarProps) => {
let ratio = actual > 0 ? 100 : 0;
if (inverted) {
ratio = actual > 0 ? 0 : 100;
}
let msg = message;
if (!message || message === '') {
msg = String(actual);
}
return (
<Bar
actual={actual}
ratio={ratio}
message={msg}
{...rest}
/>
);
};
// DoubleBar receive two value, and display these value
export const DoubleBar = ({ actual, max, inverted, ...rest }: DoubleBarProps) => {
const ratio = Math.ceil(actual / max * 100);
const message = `${actual}/${max}`;
if (inverted) {
return (
<Bar
actual={actual}
max={max}
ratio={100 - ratio}
message={message}
{...rest}
/>
);
}
return (
<Bar
actual={actual}
max={max}
ratio={ratio}
message={message}
{...rest}
/>
);
};
const colorToClass = (color: BarColors): string | null => {
switch (color) {
case 'blue':
return '';
case 'gray':
return 'bg-info';
case 'green':
return 'bg-success';
case 'red':
return 'bg-danger';
case 'yellow':
return 'bg-warning';
case 'none':
default:
return null;
}
};
export const Bar = ({ ratio, actual, min, max, message, large, backgroundColor, valueColor }: BarProps) => {
let color = valueColor ? colorToClass(valueColor) : colorToClass('green');
const fillRatio = 100 - ratio;
if (!valueColor && large && ratio > 30 && ratio < 50) {
color = colorToClass('yellow');
}
const background = backgroundColor ? colorToClass(backgroundColor) : colorToClass('red');
return (
<div className="States__Bar progress">
<div
className={`progress-bar ${color}`}
role="progressbar"
style={{ width: `${ratio}%` }}
aria-valuenow={actual}
aria-valuemin={min || 0}
aria-valuemax={max || actual}
/>
{fillRatio > 0 && background !== null ? <div
className={`progress-bar ${background}`}
role="progressbar"
style={{ width: `${fillRatio}%` }}
aria-valuenow={fillRatio}
aria-valuemin={min || 0}
aria-valuemax={max || actual}
/> : null}
<span className="Label">{message}</span>
</div>
);
};
|