game: Code tidyup

frontend/game/src/App.scss

@@ -1,7 +1,13 @@
 .app {
   &__pixi {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    h2 {
+      padding-top: 0.25rem;
+      margin: 0;
+    }
   }
 
   &__main {

frontend/game/src/App.tsx

@@ -1,12 +1,11 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import useGameState from './hooks/useGameState'
 import PixiApp from './containers/PixiApp'
 import CharacterSelect from './containers/CharacterSelect'
+import GameMessage from './containers/GameMessage'
 import Character from './components/Character'
 import Header from './components/Header'
 import Toast from './components/Toast'
-import WaitPanel from './components/WaitPanel'
-import { formatOrdinals } from './utils/helper'
 import { CharacterSelectData } from './types'
 import { GameState } from './hooks/useGameState'
 
@@ -19,31 +18,6 @@ const App: React.FC = () => {
   })
   const { gameData, sendMessage } = useGameState()
 
-  const renderGameState = (state: GameState) => {
-    switch (state) {
-      case GameState.CharacterSelect:
-      default:
-        return (
-          <CharacterSelect sendMessage={sendMessage} updatePlayer={setPlayer} />
-        )
-
-      case GameState.WaitPlayers:
-        return <WaitPanel msg={'Waiting for Players'} />
-
-      case GameState.WaitGame:
-        return <WaitPanel msg={'Game in Progress'} />
-
-      case GameState.Results:
-        return (
-          <WaitPanel
-            msg={`You finished ${formatOrdinals(
-              (gameData?.position ?? 0) + 1,
-            )}`}
-          />
-        )
-    }
-  }
-
   return (
     <div className="app">
       <Header
@@ -57,8 +31,23 @@ const App: React.FC = () => {
             <PixiApp width={200} height={200}>
               <Character width={200} height={200} player={player} />
             </PixiApp>
+            <h2>
+              {player.name && player?.name?.length > 0 ? player.name : '-'}
+            </h2>
+          </div>
+          <div className="app__main">
+            {gameData.gameState === GameState.CharacterSelect ? (
+              <CharacterSelect
+                sendMessage={sendMessage}
+                updatePlayer={setPlayer}
+              />
+            ) : (
+              <GameMessage
+                gameState={gameData.gameState}
+                position={gameData?.position ?? 0}
+              />
+            )}
           </div>
-          <div className="app__main">{renderGameState(gameData.gameState)}</div>
         </>
       )}
     </div>

frontend/game/src/_form.scss

@@ -21,11 +21,10 @@
     &-row {
       display: flex;
       flex-direction: row;
-      gap: 0.5rem;
+      gap: 0.25rem;
 
       label {
         margin-bottom: 0 !important;
-        padding-right: 0.5rem;
       }
     }
   }
@@ -45,6 +44,18 @@
     }
   }
 
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+
+  legend {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+
   label {
     font-size: 0.9rem;
     font-weight: 600;

frontend/game/src/components/Character/Character.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 import { Container, Sprite } from '@pixi/react'
 import { AssetContext } from '../../context/AssetContext'
+import { TEXTURE_LOOKUP } from '../../defs'
 import type { CharacterSelectData } from '../../types'
 
 interface PlayerProps {
@@ -9,18 +10,9 @@ interface PlayerProps {
   player: CharacterSelectData
 }
 
-const TEXTURE_LOOKUP: Record<string, string> = {
-  'character-1': 'penguin',
-  'character-2': 'snowman',
-  'character-3': 'dalek',
-  'character-4': 'hippo',
-  'character-5': 'reindeer',
-  'character-6': 'grinch',
-}
-
 const Character: React.FC<PlayerProps> = ({ width, height, player }) => {
   const { textures, assetsLoaded } = useContext(AssetContext)
-  const textureName = TEXTURE_LOOKUP[`character-${player?.character ?? '0'}`]
+  const textureName = TEXTURE_LOOKUP[`character-${player?.character ?? '1'}`]
 
   return (
     <Container width={width} height={width}>

frontend/game/src/components/WaitPanel/WaitPanel.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './WaitPanel.scss'
 
 interface WaitPanelProps {

frontend/game/src/containers/CharacterSelect/CharacterSelect.scss

@@ -22,6 +22,8 @@
   &__options {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    padding-bottom: 0.25rem;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--brand-border);
   }
 }

frontend/game/src/containers/CharacterSelect/CharacterSelect.tsx

@@ -1,18 +1,10 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
+import { CHARACTER_OPTIONS } from '../../defs'
 import type { CharacterSelectData } from '../../types'
 
 import './CharacterSelect.scss'
 
-const CHARACTER_OPTIONS: Record<string, string> = {
-  penguin: 'Penguin',
-  snowman: 'Snowman',
-  dalek: 'Dalek',
-  hippo: 'Hippo',
-  reindeer: 'Reindeer',
-  grinch: 'Grinch',
-}
-
 interface CharacterSelectProps {
   sendMessage: (playerData: CharacterSelectData) => void
   updatePlayer: (PlayerData: CharacterSelectData) => void
@@ -46,67 +38,25 @@ const CharacterSelect: React.FC<CharacterSelectProps> = ({
           </label>
           <input id="name" {...register('name', { required: true })} />
         </div>
-        <div>
+        <fieldset>
+          <legend>Character</legend>
           <div className="character-select__options">
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="penguin"
-                value={1}
-                defaultChecked={true}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="penguin">Penguin</label>
-            </div>
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="snowman"
-                value={2}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="snowman">Snowman</label>
-            </div>
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="dalek"
-                value={3}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="dalek">Dalek</label>
-            </div>
+            {Object.keys(CHARACTER_OPTIONS).map((characterKey, index) => (
+              <div className="form__input-row" key={characterKey}>
+                <input
+                  type="radio"
+                  id={characterKey}
+                  value={index + 1}
+                  defaultChecked={index === 0 ? true : false}
+                  {...register('character', { required: true })}
+                />
+                <label htmlFor={characterKey}>
+                  {CHARACTER_OPTIONS[characterKey]}
+                </label>
+              </div>
+            ))}
           </div>
-          <div className="character-select__options">
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="hippo"
-                value={4}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="hippo">Hippo</label>
-            </div>
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="reindeer"
-                value={5}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="reindeer">Reindeer</label>
-            </div>
-            <div className="form__input-row">
-              <input
-                type="radio"
-                id="grinch"
-                value={6}
-                {...register('character', { required: true })}
-              />
-              <label htmlFor="grinch">Grinch</label>
-            </div>
-          </div>
-        </div>
+        </fieldset>
         <div className="form__input character-select__tint">
           <label className="label" htmlFor="tint">
             Tint

frontend/game/src/containers/GameMessage/GameMessage.tsx

@@ -0,0 +1,23 @@
+import WaitPanel from '../../components/WaitPanel'
+import { formatOrdinals } from '../../utils/helper'
+import { GameState } from '../../hooks/useGameState'
+
+interface GameMessageProps {
+  gameState: GameState
+  position: number
+}
+
+const GameMessage: React.FC<GameMessageProps> = ({ gameState, position }) => {
+  switch (gameState) {
+    case GameState.WaitPlayers:
+      return <WaitPanel msg={'Waiting for Players'} />
+
+    case GameState.WaitGame:
+      return <WaitPanel msg={'Game in Progress'} />
+
+    case GameState.Results:
+      return <WaitPanel msg={`You finished ${formatOrdinals(position + 1)}`} />
+  }
+}
+
+export default GameMessage

frontend/game/src/containers/GameMessage/index.ts

@@ -0,0 +1,2 @@
+import GameMessage from './GameMessage'
+export default GameMessage

frontend/game/src/defs.ts

@@ -0,0 +1,17 @@
+export const CHARACTER_OPTIONS: Record<string, string> = {
+  penguin: 'Penguin',
+  snowman: 'Snowman',
+  dalek: 'Dalek',
+  hippo: 'Hippo',
+  reindeer: 'Reindeer',
+  grinch: 'Grinch',
+}
+
+export const TEXTURE_LOOKUP: Record<string, string> = {
+  'character-1': 'penguin',
+  'character-2': 'snowman',
+  'character-3': 'dalek',
+  'character-4': 'hippo',
+  'character-5': 'reindeer',
+  'character-6': 'grinch',
+}