feat(bottom-bar): styling bottom bar components

Author: KatoakDR

electron/renderer/components/game/game-bottom-bar.tsx

@@ -1,24 +1,34 @@
 import type { ReactNode } from 'react';
 import { GameCommandInput } from './game-command-input.jsx';
 import { GameCompass } from './game-compass.jsx';
+import { GameHands } from './game-hands.jsx';
 import { GameRoundTime } from './game-roundtime.jsx';
 
 export const GameBottomBar: React.FC = (): ReactNode => {
   return (
     <div
       css={{
         display: 'flex',
-        alignItems: 'center',
+        flexDirection: 'column',
         gap: '5px',
         paddingTop: '5px',
         paddingBottom: '5px',
         paddingLeft: '5px',
-        paddingRight: '10px',
+        paddingRight: '5px',
       }}
     >
-      <GameRoundTime />
+      <div
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '5px',
+        }}
+      >
+        <GameRoundTime />
+        <GameCompass />
+        <GameHands />
+      </div>
       <GameCommandInput />
-      <GameCompass />
     </div>
   );
 };

electron/renderer/components/game/game-command-input.tsx

@@ -1,4 +1,4 @@
-import { EuiFieldText } from '@elastic/eui';
+import { EuiFieldText, EuiIcon } from '@elastic/eui';
 import type {
   ChangeEvent,
   KeyboardEvent,
@@ -42,6 +42,7 @@ export const GameCommandInput: React.FC = (): ReactNode => {
         value={input}
         compressed={true}
         fullWidth={true}
+        prepend={<EuiIcon type="arrowRight" size="s" color="primary" />}
         tabIndex={0}
         onKeyDown={onKeyDown}
         onChange={onChange}

electron/renderer/components/game/game-compass.tsx

@@ -8,11 +8,10 @@ import { useSubscribe } from '../../hooks/pubsub.jsx';
 import { runInBackground } from '../../lib/async/run-in-background.js';
 
 const compassStyle = css({
+  position: 'relative',
   display: 'flex',
-  flexWrap: 'wrap',
   justifyContent: 'center',
   alignItems: 'center',
-  position: 'relative',
   width: '50px',
   height: '50px',
 });
@@ -30,13 +29,13 @@ const compassPointStyle = (compassPoint: CompassPoint) => {
   const { rotation } = compassPoint;
   return css({
     position: 'absolute',
-    transform: `rotate(${rotation}deg) translate(20px) scale(1.2)`,
-    transformOrigin: 'center',
-    width: '12px',
-    height: '12px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '10px',
+    height: '10px',
+    transform: `rotate(${rotation}deg) translate(15px) scale(.8)`,
+    transformOrigin: 'center',
   });
 };
 
@@ -93,7 +92,7 @@ export const GameCompass: React.FC = () => {
         return (
           <div key={compassPoint.name} css={compassPointStyle(compassPoint)}>
             <EuiIcon
-              type="sortRight"
+              type="frameNext"
               color="danger"
               cursor="pointer"
               onClick={() => {
@@ -107,7 +106,7 @@ export const GameCompass: React.FC = () => {
       }
       return (
         <div key={compassPoint.name} css={compassPointStyle(compassPoint)}>
-          <EuiIcon type="sortRight" color="subdued" />
+          <EuiIcon type="frameNext" color="subdued" />
         </div>
       );
     });

electron/renderer/components/game/game-hands.tsx

@@ -0,0 +1,53 @@
+import { useEuiTheme } from '@elastic/eui';
+import { useState } from 'react';
+import type { GameEvent } from '../../../common/game/types.js';
+import { GameEventType } from '../../../common/game/types.js';
+import { useSubscribe } from '../../hooks/pubsub.jsx';
+
+export const GameHands: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
+
+  const [leftHand, setLeftHand] = useState<string>('Empty');
+  const [rightHand, setRightHand] = useState<string>('Empty');
+  const [spell, setSpell] = useState<string>('None');
+
+  useSubscribe(['game:event'], (gameEvent: GameEvent) => {
+    switch (gameEvent.type) {
+      case GameEventType.LEFT_HAND:
+        setLeftHand(gameEvent.item);
+        break;
+      case GameEventType.RIGHT_HAND:
+        setRightHand(gameEvent.item);
+        break;
+      case GameEventType.SPELL:
+        setSpell(gameEvent.spell);
+        break;
+    }
+  });
+
+  return (
+    <div
+      css={{
+        display: 'block',
+        justifyContent: 'center',
+        alignContent: 'center',
+        width: '300px',
+        height: '100%',
+        fontSize: euiTheme.size.m,
+      }}
+    >
+      {[
+        { label: 'Left', value: leftHand },
+        { label: 'Right', value: rightHand },
+        { label: 'Spell', value: spell },
+      ].map(({ label, value }) => (
+        <div key={label} css={{ display: 'flex', gap: '5px' }}>
+          <b css={{ textAlign: 'right', minWidth: '45px' }}>{label}:</b>
+          {value}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+GameHands.displayName = 'GameHands';