Skip to content

Commit 302e873

Browse files
TheApplePieGodTheApplePieGod
committed
Cleanup
1 parent 37ee51c commit 302e873

File tree

4 files changed

+107
-123
lines changed

4 files changed

+107
-123
lines changed

‎client/src/client-config.tsx‎

Lines changed: 67 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,68 @@ export function getDefaultConfig(): ClientConfig {
8585
return config
8686
}
8787

88-
//const ColorRow = (props: { displayName: string, colorName: Colors }) => {
89-
// return (
90-
// <>
91-
// <ColorPicker name={colorName} />
92-
// </>
93-
// )
94-
//}
88+
export const ConfigPage: React.FC<Props> = (props) => {
89+
if (!props.open) return null
90+
91+
return (
92+
<div className={'flex flex-col'}>
93+
<div className="mb-2">Edit Client Config:</div>
94+
{Object.entries(DEFAULT_CONFIG).map(([k, v]) => {
95+
const key = k as keyof ClientConfig
96+
if (typeof v === 'string') return <ConfigStringElement configKey={key} key={key} />
97+
if (typeof v === 'boolean') return <ConfigBooleanElement configKey={key} key={key} />
98+
if (typeof v === 'number') return <ConfigNumberElement configKey={key} key={key} />
99+
})}
100+
101+
<ColorConfig />
102+
</div>
103+
)
104+
}
105+
106+
const ColorConfig = () => {
107+
const context = useAppContext()
108+
109+
/* TODO: [future] do this dynamically rather than hardcoding sections */
110+
111+
return (
112+
<>
113+
<div className="m-0 mt-4">
114+
Customize Colors:
115+
<div className="text-sm pb-1 pt-1">Interface</div>
116+
<SingleColorPicker displayName={'Background'} colorName={Colors.GAMEAREA_BACKGROUND} />
117+
<SingleColorPicker displayName={'Sidebar'} colorName={Colors.SIDEBAR_BACKGROUND} />
118+
<div className="text-sm pb-1">General</div>
119+
<SingleColorPicker displayName={'Walls'} colorName={Colors.WALLS_COLOR} />
120+
<SingleColorPicker displayName={'Tiles'} colorName={Colors.TILE_COLOR} />
121+
<div className="text-sm pb-1">Silver</div>
122+
<SingleColorPicker displayName={'Text'} colorName={Colors.TEAM_ONE} />
123+
<SingleColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMONE_ONE} />
124+
<SingleColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMONE_TWO} />
125+
<div className="text-sm pb-1">Gold</div>
126+
<SingleColorPicker displayName={'Text'} colorName={Colors.TEAM_TWO} />
127+
<SingleColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMTWO_ONE} />
128+
<SingleColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMTWO_TWO} />
129+
</div>
130+
<div className="flex flex-row mt-8">
131+
<BrightButton
132+
className=""
133+
onClick={() => {
134+
resetGlobalColors()
135+
136+
context.setState((prevState) => ({
137+
...prevState,
138+
config: { ...prevState.config, colors: { ...DEFAULT_GLOBAL_COLORS } }
139+
}))
140+
}}
141+
>
142+
Reset Colors
143+
</BrightButton>
144+
</div>
145+
</>
146+
)
147+
}
95148

96-
const ColorPicker = (props: { displayName: string; colorName: Colors }) => {
149+
const SingleColorPicker = (props: { displayName: string; colorName: Colors }) => {
97150
const context = useAppContext()
98151
const value = context.state.config.colors[props.colorName]
99152
const ref = useRef<HTMLDivElement>(null)
@@ -110,26 +163,17 @@ const ColorPicker = (props: { displayName: string; colorName: Colors }) => {
110163
setDisplayColorPicker(false)
111164
}
112165

113-
//const handleClickOutside = (event) => {
114-
// if (wrapperRef && !wrapperRef.contains(event.target)) {
115-
// alert('You clicked outside of me!')
116-
// }
117-
//}
118-
119166
const handleClickOutside = (event: any) => {
120167
if (
121168
ref.current &&
122169
buttonRef.current &&
123170
!ref.current.contains(event.target) &&
124171
!buttonRef.current.contains(event.target)
125172
) {
126-
//alert('hi')
127173
handleClose()
128174
}
129175
}
130176

131-
addEventListener('mousedown', handleClickOutside)
132-
133177
const onChange = (newColor: any) => {
134178
updateGlobalColor(props.colorName, newColor.hex)
135179
context.setState((prevState) => ({
@@ -141,12 +185,15 @@ const ColorPicker = (props: { displayName: string; colorName: Colors }) => {
141185
}
142186

143187
const resetColor = () => {
144-
console.log(DEFAULT_GLOBAL_COLORS)
145-
console.log(props.colorName as Colors)
146-
console.log(DEFAULT_GLOBAL_COLORS[props.colorName as Colors])
147188
onChange({ hex: DEFAULT_GLOBAL_COLORS[props.colorName as Colors] })
148189
}
149190

191+
useEffect(() => {
192+
window.addEventListener('mousedown', handleClickOutside)
193+
194+
return () => window.removeEventListener('mousedown', handleClickOutside)
195+
}, [])
196+
150197
return (
151198
<>
152199
<div className={'ml-2 mb-2 text-xs flex flex-start justify-start items-center'}>
@@ -181,60 +228,6 @@ const ColorPicker = (props: { displayName: string; colorName: Colors }) => {
181228
)
182229
}
183230

184-
export const ConfigPage: React.FC<Props> = (props) => {
185-
if (!props.open) return null
186-
const context = useAppContext()
187-
188-
return (
189-
<div className={'flex flex-col'}>
190-
<div className="mb-2">Edit Client Config:</div>
191-
{Object.entries(DEFAULT_CONFIG).map(([k, v]) => {
192-
const key = k as keyof ClientConfig
193-
if (typeof v === 'string') return <ConfigStringElement configKey={key} key={key} />
194-
if (typeof v === 'boolean') return <ConfigBooleanElement configKey={key} key={key} />
195-
if (typeof v === 'number') return <ConfigNumberElement configKey={key} key={key} />
196-
})}
197-
198-
<div>
199-
<br></br>
200-
</div>
201-
<div className="color-pickers">
202-
{/*fake class*/}
203-
Customize Colors:
204-
<div className="text-sm pb-1 pt-1">Interface</div>
205-
<ColorPicker displayName={'Background'} colorName={Colors.GAMEAREA_BACKGROUND} />
206-
<ColorPicker displayName={'Sidebar'} colorName={Colors.SIDEBAR_BACKGROUND} />
207-
<div className="text-sm pb-1">General</div>
208-
<ColorPicker displayName={'Walls'} colorName={Colors.WALLS_COLOR} />
209-
<ColorPicker displayName={'Tiles'} colorName={Colors.TILE_COLOR} />
210-
<div className="text-sm pb-1">Silver</div>
211-
<ColorPicker displayName={'Text'} colorName={Colors.TEAM_ONE} />
212-
<ColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMONE_ONE} />
213-
<ColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMONE_TWO} />
214-
<div className="text-sm pb-1">Gold</div>
215-
<ColorPicker displayName={'Text'} colorName={Colors.TEAM_TWO} />
216-
<ColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMTWO_ONE} />
217-
<ColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMTWO_TWO} />
218-
</div>
219-
<div className="flex flex-row mt-8">
220-
<BrightButton
221-
className=""
222-
onClick={() => {
223-
resetGlobalColors()
224-
225-
context.setState((prevState) => ({
226-
...prevState,
227-
config: { ...prevState.config, colors: { ...DEFAULT_GLOBAL_COLORS } }
228-
}))
229-
}}
230-
>
231-
Reset Colors
232-
</BrightButton>
233-
</div>
234-
</div>
235-
)
236-
}
237-
238231
const ConfigBooleanElement: React.FC<{ configKey: keyof ClientConfig }> = ({ configKey }) => {
239232
const context = useAppContext()
240233
const value = context.state.config[configKey] as boolean

‎client/src/colors.ts‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
1-
import { GameRenderer } from "./playback/GameRenderer"
1+
import { GameRenderer } from './playback/GameRenderer'
2+
3+
/*
4+
* TODO: colors are defined in tailwind.config.js as well
5+
*/
26

37
export enum Colors {
4-
TEAM_ONE = 'TEAM_ONE', //'#8648d9'
5-
TEAM_TWO = 'TEAM_TWO', //'#ffadcd'
8+
TEAM_ONE = 'TEAM_ONE', //'#8648d9'
9+
TEAM_TWO = 'TEAM_TWO', //'#ffadcd'
610

7-
PAINT_TEAMONE_ONE = 'PAINT_TEAMONE_ONE', //'#1d4f6c'
11+
PAINT_TEAMONE_ONE = 'PAINT_TEAMONE_ONE', //'#1d4f6c'
812
PAINT_TEAMONE_TWO = 'PAINT_TEAMONE_TWO',
913
PAINT_TEAMTWO_ONE = 'PAINT_TEAMTWO_ONE',
1014
PAINT_TEAMTWO_TWO = 'PAINT_TEAMTWO_TWO',
11-
WALLS_COLOR = 'WALLS_COLOR', //'#3B6B4C'
12-
GAMEAREA_BACKGROUND = 'GAMEAREA_BACKGROUND', //'#313847'
15+
WALLS_COLOR = 'WALLS_COLOR', //'#3B6B4C'
16+
GAMEAREA_BACKGROUND = 'GAMEAREA_BACKGROUND', //'#313847'
1317
TILE_COLOR = 'TILE_COLOR',
14-
SIDEBAR_BACKGROUND = 'SIDEBAR_BACKGROUND',
18+
SIDEBAR_BACKGROUND = 'SIDEBAR_BACKGROUND'
1519
}
1620

1721
export const DEFAULT_GLOBAL_COLORS = {
18-
[Colors.TEAM_ONE]: '#cdcdcc',
19-
[Colors.TEAM_TWO]: '#fee493',
20-
21-
[Colors.PAINT_TEAMONE_ONE]: '#666666',
22-
[Colors.PAINT_TEAMONE_TWO]: '#565656',
23-
[Colors.PAINT_TEAMTWO_ONE]: '#b28b52',
24-
[Colors.PAINT_TEAMTWO_TWO]: '#997746',
25-
[Colors.WALLS_COLOR]: '#547f31',
26-
[Colors.TILE_COLOR]: '#4c301e',
27-
[Colors.GAMEAREA_BACKGROUND]: '#2e2323',
28-
[Colors.SIDEBAR_BACKGROUND]: '#3f3131'
22+
[Colors.TEAM_ONE]: '#cdcdcc',
23+
[Colors.TEAM_TWO]: '#fee493',
24+
25+
[Colors.PAINT_TEAMONE_ONE]: '#666666',
26+
[Colors.PAINT_TEAMONE_TWO]: '#565656',
27+
[Colors.PAINT_TEAMTWO_ONE]: '#b28b52',
28+
[Colors.PAINT_TEAMTWO_TWO]: '#997746',
29+
[Colors.WALLS_COLOR]: '#547f31',
30+
[Colors.TILE_COLOR]: '#4c301e',
31+
[Colors.GAMEAREA_BACKGROUND]: '#2e2323',
32+
[Colors.SIDEBAR_BACKGROUND]: '#3f3131'
2933
}
3034

3135
export const currentColors: Record<Colors, string> = { ...DEFAULT_GLOBAL_COLORS }
3236

3337
export const updateGlobalColor = (color: Colors, value: string) => {
3438
currentColors[color] = value
3539
localStorage.setItem('config-colors' + color, JSON.stringify(currentColors[color]))
36-
GameRenderer.fullRender();
40+
GameRenderer.fullRender()
3741
}
3842

3943
export const getGlobalColor = (color: Colors) => {
@@ -42,16 +46,21 @@ export const getGlobalColor = (color: Colors) => {
4246

4347
export const resetGlobalColors = () => {
4448
for (const key in currentColors) {
45-
//console.log("Hello. =^-w-^=")
46-
const test = key as Colors
47-
updateGlobalColor(test, DEFAULT_GLOBAL_COLORS[test])
49+
const typedKey = key as Colors
50+
updateGlobalColor(typedKey, DEFAULT_GLOBAL_COLORS[typedKey])
4851
}
4952
}
5053

5154
export const getPaintColors = () => {
52-
return ["#00000000", currentColors.PAINT_TEAMONE_ONE, currentColors.PAINT_TEAMONE_TWO, currentColors.PAINT_TEAMTWO_ONE, currentColors.PAINT_TEAMTWO_TWO]
55+
return [
56+
'#00000000',
57+
currentColors.PAINT_TEAMONE_ONE,
58+
currentColors.PAINT_TEAMONE_TWO,
59+
currentColors.PAINT_TEAMTWO_ONE,
60+
currentColors.PAINT_TEAMTWO_TWO
61+
]
5362
}
5463

5564
export const getTeamColors = () => {
5665
return [currentColors.TEAM_ONE, currentColors.TEAM_TWO]
57-
}
66+
}

‎client/src/constants.ts‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,7 @@ export const DIRECTIONS: Record<number, Array<number>> = {
2323

2424
export const ENGINE_BUILTIN_MAP_NAMES: string[] = ['DefaultSmall', 'DefaultMedium', 'DefaultLarge', 'DefaultHuge']
2525

26-
/*
27-
* Color constants (defined in tailwind.config.js as well)
28-
*/
29-
30-
//export const TEAM_WHITE = '#bfbaa8'
31-
//export const TEAM_BROWN = '#9c8362' //'#b99c76'
32-
33-
//export const TEAM_COLORS = [Colors.TEAM_ONE, Colors.TEAM_TWO]
34-
export const TEAM_COLOR_NAMES = ['Silver', 'Gold'] //!! need to change
35-
36-
//export const SPECIALTY_COLORS = [Colors.ATTACK_COLOR, Colors.BUILD_COLOR, Colors.HEAL_COLOR]
26+
export const TEAM_COLOR_NAMES = ['Silver', 'Gold']
3727

3828
export const INDICATOR_DOT_SIZE = 0.2
3929
export const INDICATOR_LINE_WIDTH = 0.1

‎client/src/playback/Map.ts‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,6 @@ export type Dimension = {
1919
height: number
2020
}
2121

22-
/*
23-
type FlagData = {
24-
id: number
25-
team: number
26-
location: Vector
27-
carrierId: number | null
28-
}
29-
*/
30-
3122
type SchemaPacket = {
3223
wallsOffset: number
3324
paintOffset: number
@@ -99,6 +90,8 @@ export class CurrentMap {
9990
hoveredTile?: Vector
10091
) {
10192
const dimension = this.dimension
93+
const paintColors = getPaintColors()
94+
const teamColors = getTeamColors()
10295
for (let i = 0; i < dimension.width; i++) {
10396
for (let j = 0; j < dimension.height; j++) {
10497
const schemaIdx = this.locationToIndexUnchecked(i, j)
@@ -115,14 +108,13 @@ export class CurrentMap {
115108
this,
116109
this.paint,
117110
() => {
118-
119-
ctx.fillStyle = getPaintColors()[paint]
111+
ctx.fillStyle = paintColors[paint]
120112
ctx.fillRect(coords.x, coords.y, 1.0, 1.0)
121113
},
122114
{ x: true, y: false }
123115
)
124116
} else {
125-
ctx.fillStyle = getPaintColors()[paint]
117+
ctx.fillStyle = paintColors[paint]
126118
ctx.fillRect(coords.x, coords.y, 1.0, 1.0)
127119
}
128120
}
@@ -132,7 +124,7 @@ export class CurrentMap {
132124

133125
const markerA = this.markers[0][schemaIdx]
134126
if (markerA) {
135-
ctx.fillStyle = getTeamColors()[0]
127+
ctx.fillStyle = teamColors[0]
136128
const label = markerA === 1 ? '1' : '2' // Primary/secondary
137129
ctx.font = '1px monospace'
138130
ctx.shadowColor = 'black'
@@ -146,7 +138,7 @@ export class CurrentMap {
146138

147139
const markerB = this.markers[1][schemaIdx]
148140
if (markerB) {
149-
ctx.fillStyle = getTeamColors()[1]
141+
ctx.fillStyle = teamColors[1]
150142
const label = markerB === 3 ? '1' : '2' // Primary/secondary
151143
ctx.font = '1px monospace'
152144
ctx.shadowColor = 'black'

0 commit comments

Comments
 (0)