36 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/views/kda/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Kda, KdaProps } from "./Kda";
3 | import { storiesOf, Story } from "@storybook/react";
4 | import { GameStateIntegration } from "../../dataTypes";
5 | import Team = GameStateIntegration.Team;
6 |
7 | export const props: KdaProps = {
8 | kill: 1,
9 | death: 99,
10 | assist: 0,
11 | team: Team.CT,
12 | };
13 |
14 | storiesOf("KDA", module)
15 | .add("KDA情報を表示できる", () => {
16 | return
37 |
40 | K
38 | {this.props.kill}
39 |
41 |
44 | A
42 | {this.props.assist}
43 |
45 |
48 | D
46 | {this.props.death}
47 |
99 | {icon}
100 |
101 |
102 | );
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/views/percentageTimer/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf } from "@storybook/react";
3 | import { PercentageTimer, ProgressBarAxis, ProgressBarDirection } from "./PercentageTimer";
4 | import { BlinkingC4Icon } from "../blinkingC4Icon/BlinkingC4Icon";
5 | interface Props {
6 | progressBarType: {
7 | axis: ProgressBarAxis;
8 | direction: ProgressBarDirection;
9 | };
10 | }
11 | interface State {
12 | value: number;
13 | }
14 | class PercentageTimerWrapper extends React.Component
39 |
41 | );
42 | }
43 | }
44 |
45 | storiesOf("PercentageTimer", module)
46 | .add("縦軸で増加していくプログレスバーが表示されるタイマーを表示できる", () => {
47 | const progressBarType = {
48 | axis: ProgressBarAxis.Vertical,
49 | direction: ProgressBarDirection.Fill,
50 | };
51 | return
272 | {this.createSecondaryWeaponInfo()}
273 | {this.createRoundKillCountInfo()}
274 | {this.createHighExplosiveAmountInfo()}
275 | {this.createSmokeAmountInfo()}
276 | {this.createFlashBangAmountInfo()}
277 | {this.createMolotovAmountInfo()}
278 | {this.createIncGrenadeAmountAmountInfo()}
279 | {this.createDecoyAmountInfo()}
280 |
281 | );
282 | };
283 | createDefuseKitInfo = (): JSX.Element => {
284 | if (!this.props.hasDefuseKit) {
285 | return null;
286 | }
287 | return (
288 |
289 |
325 |
365 | );
366 | }
367 | }
368 |
369 | export {
370 | Player as Component,
371 | PlayerProps as Props,
372 | };
373 |
--------------------------------------------------------------------------------
/src/views/player/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Player, PlayerProps } from "./Player";
3 | import { storiesOf } from "@storybook/react";
4 | import { number, select, withKnobs } from "@storybook/addon-knobs";
5 | import { props as kdaProps } from "../kda/Story";
6 | import { GameStateIntegration } from "../../dataTypes";
7 | import Team = GameStateIntegration.Team;
8 | import { type } from "os";
9 |
10 | export const props = (
11 | primaryWeapon: string = "weapon_ak47",
12 | secondaryWeapon: string = "weapon_hkp2000",
13 | isSpectatingByObserver: boolean = false,
14 | ): PlayerProps => {
15 | const observerSlot = select("observerSlot", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
16 | const team = select("team", [Team.T, Team.CT], Team.T);
17 | const health = number("health", 100);
18 | return {
19 | name: "Foo",
20 | money: 16000,
21 | health,
22 | armor: 100,
23 | hasHelmet: true,
24 | hasDefuseKit: true,
25 | showKda: true,
26 | kda: {
27 | ...kdaProps,
28 | team,
29 | },
30 | roundKillCount: 1,
31 | roundKillByHeadShotCount: 0,
32 | weapon: {
33 | activeWeapon: primaryWeapon,
34 | primary: primaryWeapon,
35 | secondary: secondaryWeapon,
36 | flashBangAmount: 2,
37 | smokeAmount: 1,
38 | highExplosiveAmount: 1,
39 | decoyAmount: 0,
40 | molotovAmount: 0,
41 | incGrenadeAmount: 0,
42 | hasC4: false,
43 | },
44 | team,
45 | // select を経由すると型は number だが実態は string になってしまう
46 | observerSlot: parseInt(observerSlot as any, 10),
47 | isSpectatingByObserver,
48 | };
49 | };
50 |
51 | storiesOf("Player", module)
52 | .addDecorator(withKnobs)
53 | .add("プレイヤー情報を表示できる", () => {
54 | return
326 |
361 |
327 | {this.createHealthBar()}
328 |
333 | {this.props.health}
334 |
335 |
341 | {this.props.name}
342 |
343 | {this.createPrimaryWeaponInfo()}
344 |
345 |
346 |
350 | {this.props.observerSlot}
351 |
352 | {this.createArmorInfo()}
353 |
354 | ${this.props.money}
355 |
356 | {this.createDefuseKitInfo()}
357 | {this.createC4Info()}
358 | {this.createItemInfo()}
359 |
360 |
362 |
364 |
28 | R
29 | {this.props.currentRound}
30 | /
31 | {this.props.maxRound}
32 |
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/views/roundCounter/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf, Story } from "@storybook/react";
3 | import { RoundCounter, RoundCounterProps } from "./RoundCounter";
4 |
5 | export const props: RoundCounterProps = {
6 | currentRound: 10,
7 | maxRound: 30,
8 | };
9 |
10 | storiesOf("RoundCounter", module)
11 | .add("ラウンドカウンターを表示できる", () => {
12 | return
167 | {this.props.activeWeapon.ammoClip}
168 | /
169 | {this.props.activeWeapon.ammoReserve}
170 |
171 | );
172 | };
173 |
174 | private createPlayerInfo = (): JSX.Element => {
175 | if (!this.props.twitterId) {
176 | return ;
177 | }
178 | return (
179 | {this.props.twitterId}
180 | ); 181 | }; 182 | 183 | render() { 184 | if (!this.props.name) { 185 | return null; 186 | } 187 | const playerImage = PlayerImageResolver.resolve(this.props.image); 188 | return ( 189 |
195 |
242 | );
243 | }
244 | }
245 |
--------------------------------------------------------------------------------
/src/views/spectatingPlayer/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf } from "@storybook/react";
3 | import { GameStateIntegration } from "../../dataTypes";
4 | import { SpectatingPlayer, SpectatingPlayerProps } from "./SpectatingPlayer";
5 | import WeaponType = GameStateIntegration.WeaponType;
6 |
7 | export const props = (team: GameStateIntegration.Team, hasPlayerImage: boolean, inline: boolean = true): SpectatingPlayerProps => ({
8 | showSpectatingPlayer: true,
9 | name: "FooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFoo",
10 | twitterId: "@thiry_sk",
11 | image: hasPlayerImage ? "shroud.jpg" : null,
12 | imageInline: inline,
13 | activeWeapon: {
14 | name: "weapon_ak47",
15 | ammoClip: 29,
16 | ammoClipMax: 30,
17 | ammoReserve: 30,
18 | state: "active",
19 | type: WeaponType.Rifle,
20 | },
21 | flashBangAmount: 1,
22 | smokeAmount: 1,
23 | highExplosiveAmount: 1,
24 | molotovAmount: 1,
25 | incGrenadeAmount: 1,
26 | decoyAmount: 1,
27 | health: 70,
28 | armor: 100,
29 | hasHelmet: true,
30 | kill: 11,
31 | death: 10,
32 | assist: 19,
33 | team,
34 | });
35 |
36 | storiesOf("SpectatingPlayer", module)
37 | .add("CTのSpectatingPlayer情報を表示できる", () => {
38 | return
196 | {playerImage &&
197 | 
203 | }
204 |
217 |
205 |
208 | {this.props.name}
206 | {this.createPlayerInfo()} 207 |
209 | K
210 | {this.props.kill}
211 | A
212 | {this.props.assist}
213 | D
214 | {this.props.death}
215 |
216 |
218 |
241 |
219 | ![]({MiscIconResolver.resolve("health")})
220 | {this.props.health}
221 | 
229 | {this.props.armor}
230 |
231 |
232 | {createHighExplosiveAmountInfo(this.props)}
233 | {createSmokeAmountInfo(this.props)}
234 | {createFlashBangAmountInfo(this.props)}
235 | {createMolotovAmountInfo(this.props)}
236 | {createIncGrenadeAmountAmountInfo(this.props)}
237 | {createDecoyAmountInfo(this.props)}
238 |
239 | {this.createAmmoInfo()}
240 |
40 | ![]({MiscIconResolver.resolve("team")})
46 | ![]({MiscIconResolver.resolve("equipment")})
68 |
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/views/teamMoney/team_money.scss:
--------------------------------------------------------------------------------
1 | @import "../theme/color.scss";
2 | $width: 465px;
3 | .team-money {
4 | composes: base from "../theme/common.scss";
5 | height: 85px;
6 | width: $width;
7 | &[data-slot-side="right"] {
8 | background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 295px, rgba(0, 0, 0, 0.65) 295px, rgba(0, 0, 0, 0.5) $width, rgba(0, 0, 0, 0.0) $width);
9 | }
10 | &[data-slot-side="left"] {
11 | background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 295px, rgba(0, 0, 0, 0.65) 295px, rgba(0, 0, 0, 0.5) $width, rgba(0, 0, 0, 0.0) $width);
12 | }
13 | &[data-show-team-money=true] {
14 | transition: all 1s;
15 | opacity: 1;
16 | }
17 | &[data-show-team-money=false] {
18 | transition: all 1s;
19 | opacity: 0;
20 | }
21 | &:after {
22 | content:" ";
23 | display: block;
24 | clear: both;
25 | }
26 | }
27 |
28 | .team-icon {
29 | filter: invert(100%);
30 | max-height: 70%;
31 | &[data-slot-side="right"] {
32 | float: right;
33 | margin: 10px 10px 0 0;
34 | }
35 | &[data-slot-side="left"] {
36 | float:left;
37 | margin: 10px 0 0 10px;
38 | }
39 | }
40 |
41 | .money-info {
42 | width: 170px;
43 | color: #add28b;
44 | text-shadow: 0 0 8px #000;
45 | &[data-slot-side="right"] {
46 | float: right;
47 | text-align: right;
48 | }
49 | &[data-slot-side="left"] {
50 | float:left;
51 | text-align: left;
52 | }
53 | }
54 |
55 | .money-title {
56 | height: 35px;
57 | width: 170px;
58 | display: table-cell;
59 | vertical-align: bottom;
60 | }
61 |
62 | .total-money {
63 | font-weight: 600;
64 | height: 60%;
65 | font-size: 30px;
66 | margin: -10px auto auto auto;
67 | }
68 |
69 | .equipment-icon {
70 | filter: invert(100%);
71 | max-height: 70%;
72 | margin: 10px 0 0 0;
73 | &[data-slot-side="right"] {
74 | float: right;
75 | }
76 | &[data-slot-side="left"] {
77 | float: left;
78 | }
79 | }
80 |
81 | .equipment-info {
82 | width: 130px;
83 | color: #f7bf16;
84 | text-shadow: 0 0 8px #000;
85 | &[data-slot-side="right"] {
86 | float: right;
87 | text-align: right;
88 | }
89 | &[data-slot-side="left"] {
90 | float: left;
91 | text-align: left;
92 | }
93 | }
94 |
95 | .equipment-title {
96 | height: 35px;
97 | width: 130px;
98 | display: table-cell;
99 | vertical-align: bottom;
100 | }
101 |
102 | .total-equipment {
103 | font-weight: 600;
104 | height: 60%;
105 | font-size: 30px;
106 | margin: -10px auto auto auto;
107 | }
108 |
--------------------------------------------------------------------------------
/src/views/teamStats/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf, Story } from "@storybook/react";
3 | import { props as kdaProps } from "../kda/Story";
4 | import { GameStateIntegration } from "../../dataTypes";
5 | import { TeamStats, TeamStatsProps } from "./TeamStats";
6 | import { props as createTeamMoneyProps } from "../teamMoney/Story";
7 | import { PlayerProps } from "../player/Player";
8 | import { select, withKnobs } from "@storybook/addon-knobs";
9 | import { SlotSide } from "../../util/slotSideResolver";
10 | const playerProps = (team: GameStateIntegration.Team, observerSlot: number, isSpectatingByObserver: boolean): PlayerProps => ({
11 | name: "Foo",
12 | money: 16000,
13 | health: 100,
14 | armor: 100,
15 | hasHelmet: true,
16 | hasDefuseKit: team === GameStateIntegration.Team.CT,
17 | showKda: true,
18 | kda: {
19 | ...kdaProps,
20 | team,
21 | },
22 | roundKillCount: 1,
23 | roundKillByHeadShotCount: 0,
24 | weapon: {
25 | activeWeapon: "weapon_ak47",
26 | primary: "weapon_ak47",
27 | secondary: "weapon_hkp2000",
28 | flashBangAmount: 0,
29 | smokeAmount: 0,
30 | highExplosiveAmount: 1,
31 | decoyAmount: 1,
32 | molotovAmount: 1,
33 | incGrenadeAmount: 1,
34 | hasC4: team === GameStateIntegration.Team.T,
35 | },
36 | team,
37 | observerSlot,
38 | isSpectatingByObserver,
39 | });
40 | export const props = (team: GameStateIntegration.Team, initialObserverSlot: number): TeamStatsProps => {
41 | let slot = initialObserverSlot;
42 | const slotSide = select
47 |
62 | 52 | Team money: 53 |
54 |59 | ${this.props.totalTeamMoney} 60 |
61 |
69 |
84 | 74 | Equipment value: 75 |
76 |81 | ${this.props.totalEquipmentValue} 82 |
83 |
20 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/views/teamStats/team_stats.scss:
--------------------------------------------------------------------------------
1 | @import "../theme/color.scss";
2 | .team-stats {
3 | composes: base from "../theme/common.scss";
4 | width: 465px;
5 | height: 67 * 5px;
6 | position: fixed;
7 | display: flex;
8 | flex-wrap: wrap;
9 | align-items: flex-end;
10 | &[data-slot-side="right"] {
11 | bottom: 290px;
12 | right: 10px;
13 | }
14 | &[data-slot-side="left"] {
15 | bottom: 290px;
16 | left: 10px;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/views/template/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf } from "@storybook/react";
3 | import { GameStateIntegration } from "../../dataTypes";
4 | import { Template, TemplateProps } from "./Template";
5 | import { props as createPlayerProps } from "../teamStats/Story";
6 | import { props as createTeamMoneyProps } from "../teamMoney/Story";
7 | import { props as createSpectatingPlayerProps } from "../spectatingPlayer/Story";
8 | import { props as topBarProps } from "../topBar/Story";
9 | import { props as createWinnerTeamAnnounceProps } from "../winnerTeamAnnounce/Story";
10 | import CurrentPhase = GameStateIntegration.CurrentPhase;
11 | import { SlotSide } from "../../util/slotSideResolver";
12 | const createProps = (showTeamMoney: boolean): TemplateProps => ({
13 | visible: true,
14 | players: [
15 | ...createPlayerProps(GameStateIntegration.Team.CT, 1).players,
16 | ...createPlayerProps(GameStateIntegration.Team.T, 6).players,
17 | ],
18 | teamMoney: {
19 | ct: createTeamMoneyProps(GameStateIntegration.Team.CT, showTeamMoney),
20 | t: createTeamMoneyProps(GameStateIntegration.Team.T, showTeamMoney),
21 | },
22 | spectatingPlayer: createSpectatingPlayerProps(GameStateIntegration.Team.CT, true),
23 | topBar: topBarProps(CurrentPhase.live, 91, 4),
24 | winnerTeamAnnounce: createWinnerTeamAnnounceProps(GameStateIntegration.Team.CT),
25 | slotSide: {
26 | t: SlotSide.Right,
27 | ct: SlotSide.Left,
28 | },
29 | });
30 | storiesOf("テンプレート", module)
31 | .add("テンプレートを表示できる", () => {
32 | return ;
33 | })
34 | .add("チームの所持金を表示しないテンプレートを表示できる", () => {
35 | return ;
36 | });
37 |
--------------------------------------------------------------------------------
/src/views/template/Template.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { BaseComponent } from "../util/baseComponent";
3 | import { PlayerProps } from "../player/Player";
4 | import { GameStateIntegration } from "../../dataTypes";
5 | import { TeamStats } from "../teamStats/TeamStats";
6 | import { TeamMoneyProps } from "../teamMoney/TeamMoney";
7 | import { SpectatingPlayer, SpectatingPlayerProps } from "../spectatingPlayer/SpectatingPlayer";
8 | import { TopBar, TopBarProps } from "../topBar/TopBar";
9 | import { WinnerTeamAnnounce, WinnerTeamAnnounceProps } from "../winnerTeamAnnounce/WinnerTeamAnnounce";
10 | import { SlotSide } from "../../util/slotSideResolver";
11 | export interface TemplateProps {
12 | visible: boolean;
13 | players: PlayerProps[];
14 | teamMoney: {
15 | ct: TeamMoneyProps,
16 | t: TeamMoneyProps,
17 | };
18 | spectatingPlayer: SpectatingPlayerProps;
19 | topBar: TopBarProps;
20 | winnerTeamAnnounce?: WinnerTeamAnnounceProps;
21 | slotSide: {
22 | ct: SlotSide,
23 | t: SlotSide,
24 | };
25 | }
26 | export interface TemplateState {
27 |
28 | }
29 | export class Template extends BaseComponent
36 | player.team === GameStateIntegration.Team.CT)}
40 | team={GameStateIntegration.Team.CT}
41 | teamMoney={this.props.teamMoney.ct}
42 | slotSide={this.props.slotSide.ct}
43 | />
44 | player.team === GameStateIntegration.Team.T)}
46 | team={GameStateIntegration.Team.T}
47 | teamMoney={this.props.teamMoney.t}
48 | slotSide={this.props.slotSide.t}
49 | />
50 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/views/theme/color.scss:
--------------------------------------------------------------------------------
1 | $ct-color: #0092C9;
2 | $t-color: #DA8A31;
3 |
--------------------------------------------------------------------------------
/src/views/theme/common.scss:
--------------------------------------------------------------------------------
1 | .base {
2 | @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
3 | @import url(https://fonts.googleapis.com/css?family=Saira);
4 | font-family: "Saira","Noto Sans JP", sans-serif;
5 | color: white;
6 | background-color: rgba(0, 0, 0, 0);
7 | }
8 |
--------------------------------------------------------------------------------
/src/views/timer/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf, Story } from "@storybook/react";
3 | import { Timer, TimerProps } from "./Timer";
4 |
5 | export const props: TimerProps = {
6 | time: 61,
7 | };
8 |
9 | storiesOf("Timer", module)
10 | .add("タイマーを表示できる", () => {
11 | return
31 | {time.minutes}
32 | :
33 | {leftPad(time.seconds, 2, "0")}
34 |
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/views/timer/timer.scss:
--------------------------------------------------------------------------------
1 | .timer {
2 | font-size: 35px;
3 | text-align: center;
4 | font-weight: bold;
5 | }
6 |
7 | .minutes {
8 | /*!*/
9 | }
10 |
11 | .separator {
12 | /*!*/
13 | }
14 |
15 | .seconds {
16 | /*!*/
17 | }
18 |
--------------------------------------------------------------------------------
/src/views/topBar/Story.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { storiesOf } from "@storybook/react";
3 | import { TopBar, TopBarProps } from "./TopBar";
4 | import { props as roundCounterProps } from "../roundCounter/Story";
5 | import { GameStateIntegration } from "../../dataTypes";
6 | import CurrentPhase = GameStateIntegration.CurrentPhase;
7 | import { BlinkingC4Icon } from "../blinkingC4Icon/BlinkingC4Icon";
8 | import { BaseComponent } from "../util/baseComponent";
9 | import { ProgressBarAxis, ProgressBarDirection } from "../percentageTimer/PercentageTimer";
10 | import { select, withKnobs } from "@storybook/addon-knobs";
11 | import { SlotSide } from "../../util/slotSideResolver";
12 |
13 | export const props = (currentPhase: CurrentPhase, roundTimer: number, defuseTimer: number): TopBarProps => ({
14 | teamInfo: {
15 | ct: {
16 | score: 15,
17 | name: "COUNTER TERRORISTaaaaaaaaaaaaaaaaa",
18 | logo: "magixgod.png",
19 | },
20 | t: {
21 | score: 15,
22 | name: "TERRORIST",
23 | logo: "magixgod.png",
24 | },
25 | },
26 | currentPhase,
27 | roundTimer: {
28 | time: roundTimer,
29 | },
30 | c4Timer: {
31 | value: roundTimer,
32 | max: 35,
33 | icon: {
34 | component: BlinkingC4Icon,
35 | props: {
36 | visible: true,
37 | },
38 | },
39 | progressBarType: {
40 | axis: ProgressBarAxis.Vertical,
41 | direction: ProgressBarDirection.Fill,
42 | },
43 | },
44 | defuseTimer: {
45 | value: defuseTimer,
46 | max: 10,
47 | progressBarType: {
48 | axis: ProgressBarAxis.Horizontal,
49 | direction: ProgressBarDirection.Empty,
50 | },
51 | },
52 | roundCounter: roundCounterProps,
53 | slotSide: {
54 | ct: select
96 |
99 | );
100 | } else {
101 | return null;
102 | }
103 | })();
104 | const roundCounter = (() => {
105 | if (this.props.currentPhase === CurrentPhase.bomb
106 | || this.props.currentPhase === CurrentPhase.defuse) {
107 | return null;
108 | } else {
109 | return DEFUSING
97 |
114 | {timer}
115 | {roundCounter}
116 | {defuseTimer}
117 |
118 | );
119 | };
120 |
121 | createTeamInfo = (team: GameStateIntegration.Team, teamInfo: TeamInfo, slotSide: SlotSide): JSX.Element => {
122 | return (
123 |
124 |
131 | );
132 | };
133 |
134 | render() {
135 | if (isNaN(this.props.teamInfo.ct.score)) {
136 | return null;
137 | }
138 | const ctTeamInfo = this.createTeamInfo(GameStateIntegration.Team.CT, this.props.teamInfo.ct, this.props.slotSide.ct);
139 | const tTeamInfo = this.createTeamInfo(GameStateIntegration.Team.T, this.props.teamInfo.t, this.props.slotSide.t);
140 | return (
141 | {teamInfo.score}
125 |
126 | {teamInfo.logo &&
127 | })
}
128 |
129 | {teamInfo.name}
130 |
142 |
154 | );
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/src/views/topBar/top_bar.scss:
--------------------------------------------------------------------------------
1 | @import "../theme/color.scss";
2 | .top-bar {
3 | composes: base from "../theme/common.scss";
4 | position: fixed;
5 | top: 10px;
6 | left: 50%;
7 | transform: translateX(-50%);
8 | }
9 | .match-info {
10 | display: flex;
11 | flex-flow: row nowrap;
12 | justify-content: center;
13 | align-items: center;
14 | }
15 |
16 | .team-info {
17 | background: rgba(0, 0, 0, 0.55);
18 | height: 70px;
19 | font-size: 24px;
20 | font-weight: 600;
21 | display: flex;
22 | flex-wrap: nowrap;
23 | justify-content: center;
24 | align-items: center;
25 | text-align: center;
26 | &[data-slot-side="left"] {
27 | flex-direction: row-reverse;
28 | }
29 | &[data-slot-side="right"] {
30 | flex-direction: row;
31 | }
32 | }
33 | .team-score {
34 | font-size: 45px;
35 | width: 85px;
36 | height: 70px;
37 | line-height: 70px;
38 | margin: 0;
39 | display: flex;
40 | flex-flow: row nowrap;
41 | justify-content: center;
42 | align-items: center;
43 | &[data-team="CT"] {
44 | color: #4BA5D4;
45 | }
46 | &[data-team="T"] {
47 | color: #C18B32;
48 | }
49 | }
50 | .team-logo {
51 | height: 70px;
52 | width: 70px;
53 | display: flex;
54 | flex-flow: row nowrap;
55 | justify-content: center;
56 | align-items: center;
57 | > img {
58 | height: 70%;
59 | }
60 | }
61 | .team-name {
62 | width: 315px;
63 | white-space: nowrap;
64 | overflow: hidden;
65 | margin-top: 0;
66 | margin-bottom: 0;
67 | padding: 0 5px;
68 | box-sizing: border-box;
69 | &[data-slot-side="left"] {
70 | margin-right: 10px;
71 | text-align: right;
72 | }
73 | &[data-slot-side="right"] {
74 | margin-left: 10px;
75 | text-align: left;
76 | }
77 | &[data-team="CT"] {
78 | color: #4BA5D4;
79 | }
80 | &[data-team="T"] {
81 | color: #C18B32;
82 | }
83 | }
84 |
85 | .round-info {
86 | background: rgba(0, 0, 0, 0.65);
87 | width: 150px;
88 | height: 70px;
89 | display: flex;
90 | flex-flow: column nowrap;
91 | justify-content:center;
92 | align-items: center;
93 | }
94 |
95 | .round-counter {
96 | composes: round-counter from "../roundCounter/round_counter.scss";
97 | font-size: 14px;
98 | height: 20px;
99 | line-height: 20px;
100 | text-align: center;
101 | }
102 |
103 | .timer {
104 | composes: timer from "../timer/timer.scss";
105 | composes: base from "../theme/common.scss";
106 | height: 50px;
107 | line-height: 50px;
108 | }
109 |
110 | .c4-timer {
111 | composes: c4 from "../blinkingC4Icon/blinking_c4_icon.scss";
112 | position: relative;
113 | z-index: 1;
114 | width: 40px;
115 | height: auto;
116 | top: 50%;
117 | left: 50%;
118 | transform: translate(-50%, -50%);
119 | }
120 | .defuse-timer-wrapper {
121 | background: rgba(0, 0, 0, 0.65);
122 | position: absolute;
123 | width: 150px;
124 | height: 47px;
125 | bottom: -47px;
126 | padding: 0 3px 3px 3px;
127 | box-sizing: border-box;
128 | }
129 | .defuse-timer-label {
130 | color: #4BA5D4;
131 | margin: 0;
132 | }
133 | .defuse-timer {
134 | composes: percentage-timer from "../percentageTimer/percentage_timer.scss";
135 | background: #1d3d49;
136 | height: 20px;
137 | > [class*=__percentage-bar__] {
138 | background: #4BA5D4;
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/src/views/util/baseComponent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | export class BaseComponent
143 | {this.props.slotSide.ct === SlotSide.Left
144 | ? ctTeamInfo
145 | : tTeamInfo
146 | }
147 | {this.createRoundInfo()}
148 | {this.props.slotSide.ct === SlotSide.Right
149 | ? ctTeamInfo
150 | : tTeamInfo
151 | }
152 |
153 |
35 | WINS THE ROUND!
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/views/winnerTeamAnnounce/winner_team_announce.scss:
--------------------------------------------------------------------------------
1 | // 2つの keyframe を @function に置き換えられそう
2 | @keyframes slideInDownForLeftSlot {
3 | from {
4 | transform: translate(calc(-1 * 1110px / 2), -100%);
5 | visibility: visible;
6 | }
7 | to {
8 | transform: translate(calc(-1 * 1110px / 2), 0);
9 | }
10 | }
11 | @keyframes slideInDownForRightSlot {
12 | from {
13 | transform: translate(calc(1110px / 2 - 480px), -100%);
14 | visibility: visible;
15 | }
16 | to {
17 | transform: translate(calc(1110px / 2 - 480px), 0);
18 | }
19 | }
20 | .winner-team-announce {
21 | composes: base from "../theme/common.scss";
22 | width: 480px;
23 | height: 45px;
24 | line-height: 45px;
25 | background: rgba(0, 0, 0, 0.55);
26 | font-size: 36px;
27 | font-weight: 600;
28 | text-align: center;
29 | position: fixed;
30 | top: 10 + 70px;
31 | left: 50%;
32 | &[data-slot-side="left"] {
33 | transform: translate(calc(-1 * 1110px / 2), 0);
34 | animation: slideInDownForLeftSlot 0.5s;
35 | }
36 | &[data-slot-side="right"] {
37 | transform: translate(calc(1110px / 2 - 480px), 0);
38 | animation: slideInDownForRightSlot 0.5s;
39 | }
40 | }
41 |
42 | .label {
43 | overflow: hidden;
44 | &[data-team="CT"] {
45 | color: #4BA5D4;
46 | }
47 | &[data-team="T"] {
48 | color: #C18B32;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/test/fixtures/c4Planted.json:
--------------------------------------------------------------------------------
1 | {
2 | "provider": {
3 | "name": "Counter-Strike: Global Offensive",
4 | "appid": 730,
5 | "version": 13627,
6 | "steamid": "76561198005627722",
7 | "timestamp": 1519147295
8 | },
9 | "map": {
10 | "mode": "competitive",
11 | "name": "de_dust2",
12 | "phase": "live",
13 | "round": 6,
14 | "team_ct": {
15 | "score": 1,
16 | "timeouts_remaining": 1,
17 | "matches_won_this_series": 0
18 | },
19 | "team_t": {
20 | "score": 5,
21 | "timeouts_remaining": 1,
22 | "matches_won_this_series": 0
23 | },
24 | "num_matches_to_win_series": 0,
25 | "current_spectators": 0,
26 | "souvenirs_total": 0
27 | },
28 | "round": {
29 | "phase": "live",
30 | "bomb": "planted"
31 | },
32 | "player": {
33 | "steamid": "76561197960265738",
34 | "name": "Neil",
35 | "observer_slot": 1,
36 | "team": "CT",
37 | "activity": "playing",
38 | "state": {
39 | "health": 100,
40 | "armor": 100,
41 | "helmet": true,
42 | "flashed": 0,
43 | "smoked": 0,
44 | "burning": 0,
45 | "money": 1100,
46 | "round_kills": 0,
47 | "round_killhs": 0,
48 | "equip_value": 2400
49 | }
50 | },
51 | "allplayers": {
52 | "76561197960265738": {
53 | "name": "Neil",
54 | "observer_slot": 1,
55 | "team": "CT",
56 | "state": {
57 | "health": 100,
58 | "armor": 100,
59 | "helmet": true,
60 | "flashed": 0,
61 | "burning": 0,
62 | "money": 1100,
63 | "round_kills": 0,
64 | "round_killhs": 0,
65 | "equip_value": 2400
66 | },
67 | "match_stats": {
68 | "kills": 1,
69 | "assists": 0,
70 | "deaths": 3,
71 | "mvps": 1,
72 | "score": 2
73 | },
74 | "weapons": {
75 | "weapon_0": {
76 | "name": "weapon_knife",
77 | "paintkit": "default",
78 | "type": "Knife",
79 | "state": "holstered"
80 | },
81 | "weapon_1": {
82 | "name": "weapon_hkp2000",
83 | "paintkit": "default",
84 | "type": "Pistol",
85 | "ammo_clip": 13,
86 | "ammo_clip_max": 13,
87 | "ammo_reserve": 52,
88 | "state": "holstered"
89 | },
90 | "weapon_2": {
91 | "name": "weapon_nova",
92 | "paintkit": "default",
93 | "type": "Shotgun",
94 | "ammo_clip": 8,
95 | "ammo_clip_max": 8,
96 | "ammo_reserve": 32,
97 | "state": "active"
98 | }
99 | },
100 | "position": "-1478.08, 2743.98, 11.24"
101 | }
102 | },
103 | "phase_countdowns": {
104 | "phase": "bomb",
105 | "phase_ends_in": "14.7"
106 | },
107 | "previously": {
108 | "allplayers": {
109 | "76561197960265738": {
110 | "position": "-1497.75, 2741.69, 8.88"
111 | }
112 | },
113 | "phase_countdowns": {
114 | "phase_ends_in": "14.9"
115 | }
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/test/fixtures/c4Refusing.json:
--------------------------------------------------------------------------------
1 | {
2 | "provider": {
3 | "name": "Counter-Strike: Global Offensive",
4 | "appid": 730,
5 | "version": 13627,
6 | "steamid": "76561198005627722",
7 | "timestamp": 1519147295
8 | },
9 | "map": {
10 | "mode": "competitive",
11 | "name": "de_dust2",
12 | "phase": "live",
13 | "round": 6,
14 | "team_ct": {
15 | "score": 1,
16 | "timeouts_remaining": 1,
17 | "matches_won_this_series": 0
18 | },
19 | "team_t": {
20 | "score": 5,
21 | "timeouts_remaining": 1,
22 | "matches_won_this_series": 0
23 | },
24 | "num_matches_to_win_series": 0,
25 | "current_spectators": 0,
26 | "souvenirs_total": 0
27 | },
28 | "round": {
29 | "phase": "live",
30 | "bomb": "planted"
31 | },
32 | "player": {
33 | "steamid": "76561197960265738",
34 | "name": "Neil",
35 | "observer_slot": 1,
36 | "team": "CT",
37 | "activity": "playing",
38 | "state": {
39 | "health": 100,
40 | "armor": 100,
41 | "helmet": true,
42 | "flashed": 0,
43 | "smoked": 0,
44 | "burning": 0,
45 | "money": 1100,
46 | "round_kills": 0,
47 | "round_killhs": 0,
48 | "equip_value": 2400
49 | }
50 | },
51 | "allplayers": {
52 | "76561197960265738": {
53 | "name": "Neil",
54 | "observer_slot": 1,
55 | "team": "CT",
56 | "state": {
57 | "health": 100,
58 | "armor": 100,
59 | "helmet": true,
60 | "flashed": 0,
61 | "burning": 0,
62 | "money": 1100,
63 | "round_kills": 0,
64 | "round_killhs": 0,
65 | "equip_value": 2400
66 | },
67 | "match_stats": {
68 | "kills": 1,
69 | "assists": 0,
70 | "deaths": 3,
71 | "mvps": 1,
72 | "score": 2
73 | },
74 | "weapons": {
75 | "weapon_0": {
76 | "name": "weapon_knife",
77 | "paintkit": "default",
78 | "type": "Knife",
79 | "state": "holstered"
80 | },
81 | "weapon_1": {
82 | "name": "weapon_hkp2000",
83 | "paintkit": "default",
84 | "type": "Pistol",
85 | "ammo_clip": 13,
86 | "ammo_clip_max": 13,
87 | "ammo_reserve": 52,
88 | "state": "holstered"
89 | },
90 | "weapon_2": {
91 | "name": "weapon_nova",
92 | "paintkit": "default",
93 | "type": "Shotgun",
94 | "ammo_clip": 8,
95 | "ammo_clip_max": 8,
96 | "ammo_reserve": 32,
97 | "state": "active"
98 | }
99 | },
100 | "position": "-1478.08, 2743.98, 11.24"
101 | }
102 | },
103 | "phase_countdowns": {
104 | "phase": "defuse",
105 | "phase_ends_in": "9.8"
106 | },
107 | "previously": {
108 | "phase_countdowns": {
109 | "phase": "bomb",
110 | "phase_ends_in": "14.7"
111 | }
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/test/util/loadFixture.ts:
--------------------------------------------------------------------------------
1 | import * as fs from "fs";
2 |
3 | /**
4 | * load file as string
5 | */
6 | export const loadFixture = (path: string, basePath: string = "test/fixtures/"): string => fs.readFileSync(basePath + path, "utf8");
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "target": "es2015",
5 | "noImplicitAny": true,
6 | "sourceMap": true,
7 | "jsx": "react",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "skipLibCheck": true,
11 | "outDir": "build",
12 | "newLine": "LF"
13 | },
14 | "exclude": [
15 | "node_modules",
16 | "src/**/__tests__/*",
17 | "src/**/__mocks__/*",
18 | "test/**/*.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/tsconfig.server.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "target": "es2015",
5 | "noImplicitAny": true,
6 | "sourceMap": true,
7 | "jsx": "react",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "skipLibCheck": true,
11 | "outDir": "server",
12 | "newLine": "LF"
13 | },
14 | "exclude": [
15 | "node_modules",
16 | "src/**/__tests__/*",
17 | "src/**/__mocks__/*",
18 | "test/**/*.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "curly": true,
5 | "eofline": true,
6 | "forin": true,
7 | "indent": false,
8 | "label-position": true,
9 | "max-line-length": [
10 | true,
11 | 140
12 | ],
13 | "no-arg": true,
14 | "no-bitwise": false,
15 | "no-console": [
16 | true,
17 | "debug",
18 | "info",
19 | "time",
20 | "timeEnd",
21 | "trace"
22 | ],
23 | "no-construct": true,
24 | "no-debugger": true,
25 | "no-duplicate-variable": true,
26 | "no-eval": true,
27 | "no-floating-promises": true,
28 | "no-invalid-this": true,
29 | "no-irregular-whitespace": true,
30 | "no-string-literal": true,
31 | "no-switch-case-fall-through": true,
32 | "no-trailing-whitespace": [true, "ignore-comments", "ignore-jsdoc", "ignore-template-strings"],
33 | "no-unused-expression": true,
34 | "no-unused-variable": false,
35 | "no-use-before-declare": true,
36 | "one-line": [
37 | true,
38 | "check-open-brace",
39 | "check-catch",
40 | "check-else",
41 | "check-whitespace"
42 | ],
43 | "ordered-imports": false,
44 | "quotemark": [
45 | true,
46 | "double"
47 | ],
48 | "radix": true,
49 | "semicolon": [true, "always", "ignore-bound-class-methods"],
50 | "switch-final-break": [true, "always"],
51 | "trailing-comma": [true, {"multiline": "always", "singleline": "never"}],
52 | "triple-equals": [
53 | true,
54 | "allow-null-check"
55 | ],
56 | "variable-name": false,
57 | "whitespace": [
58 | true,
59 | "check-branch",
60 | "check-decl",
61 | "check-separator",
62 | "check-type"
63 | ]
64 | }
65 | }
66 |
67 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require("webpack");
2 | const path = require("path");
3 |
4 | module.exports = {
5 | entry: {
6 | index: ["babel-polyfill", path.join(__dirname, "src/index.tsx")],
7 | },
8 | resolve: {
9 | extensions: [".js", ".jsx", ".ts", ".tsx", ".scss"],
10 | },
11 | plugins: [
12 | new webpack.DefinePlugin({
13 | "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
14 | }),
15 | ],
16 | output: {
17 | path: path.join(__dirname, "build"),
18 | filename: "[name].js",
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /(\.ts|\.tsx)$/,
24 | exclude: [/__tests__/, /__mocks__/, /node_modules/],
25 | use: [
26 | {
27 | loader: "babel-loader",
28 | options: {
29 | presets: [
30 | ["es2015", { modules: false }],
31 | ],
32 | plugins: ["syntax-dynamic-import"],
33 | cacheDirectory: true,
34 | },
35 | },
36 | {
37 | loader: "ts-loader",
38 | options: {
39 | compilerOptions: {
40 | // import 文を require に書き換えない.
41 | "module": "esnext",
42 | "moduleResolution": "node",
43 | },
44 | },
45 | },
46 | ]
47 | },
48 | {
49 | test: /\.scss$/,
50 | use: [
51 | "style-loader",
52 | {
53 | loader: "css-loader",
54 | options: {
55 | modules: true,
56 | camelCase: true,
57 | importLoaders: 2,
58 | localIdentName: "___[local]___[hash:base64:5]",
59 | },
60 | },
61 | "sass-loader",
62 | ],
63 | include: [path.join(__dirname, "./src/views")],
64 | },
65 | {
66 | test: /\.(png|jpg|gif)$/,
67 | use: [
68 | {
69 | loader: "file-loader",
70 | options: {
71 | name: "[path][name].[ext]",
72 | publicPath: "http://127.0.0.1:3000/",
73 | }
74 | }
75 | ],
76 | include: [path.join(__dirname, "./src/resources")],
77 | },
78 | ],
79 | },
80 | externals: {
81 | "nw.gui": "nw.gui",
82 | }
83 | };
84 |
--------------------------------------------------------------------------------