Stylistic tweaks

ProLoser · Oct 9, 2024 · cc40312 · cc40312
1 parent 1d165a4
commit cc40312
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 27 deletions.
diff --git a/src/Board/Dice.tsx b/src/Board/Dice.tsx
@@ -10,8 +10,8 @@ type DiceProps = {
 type ImageKey = keyof typeof IMAGES
 
 export default function Dice({ onClick, values, color }: DiceProps) {
-    const left: ImageKey = `${color ?? 'black'}${values[0] || 6}`
-    const right: ImageKey = `${color ?? 'white'}${values[1] || 6}`
+    const left: ImageKey = `${color && color || 'black'}${values[0] || 6}`
+    const right: ImageKey = `${color && color || 'white'}${values[1] || 6}`
     return <div className="dice" onClick={onClick}>
         <img src={IMAGES[left]} />
         <img src={IMAGES[right]} />

diff --git a/src/Dialogues/Friends.css b/src/Dialogues/Friends.css
@@ -1,5 +1,20 @@
 #friends {
     padding: 0 1em;
+
+    h1 {
+        vertical-align: text-top;
+        display: flex;
+        justify-content: space-between;
+
+        span {
+            display: flex;
+            overflow: hidden;
+            margin-right: .2em;
+        }
+    }  
+    menu {
+        right: 30px;
+    } 
 
     input {
         display: block;
@@ -10,32 +25,17 @@
     #people ul {
         list-style: none;
         padding: 0;
-
         li {
             display: flex;
             align-items: center;
             margin-bottom: 1em;
-
             h3 {
                 margin: 0;
-
-                    img {
+                img {
                     margin-right: 1em;
-
 
-                                                h1 {
-                                                        vertical-align: text-top;
-                                                        display: flex;
-                                                        justify-content: space-between;
-
-                span {
-                        display: flex;
-                        overflow: hidden;
-
-                    span {
-                            margin-right: .2em;
-
+                }
             }
         }
-                }
+    }
 }
diff --git a/src/Toolbar.css b/src/Toolbar.css
@@ -4,6 +4,9 @@
         font-weight: bold;
         font-size: 3em;
     }
+    .avatar {
+      width: 4em;
+    }
 
   /* Portrait layout (mobile) */
   @media (max-aspect-ratio: 1) {

diff --git a/src/Utils.ts b/src/Utils.ts
@@ -19,6 +19,8 @@ export const newGame = (oldGame?: GameType) => ({
     status: "",
     board: [...(oldGame?.board || DEFAULT_BOARD)],
     dice: oldGame?.dice || [6, 6],
+    color: oldGame?.color || null,
+    turn: oldGame?.turn || null,
     prison: oldGame?.prison || {
         black: 0,
         white: 0,

diff --git a/src/index.css b/src/index.css
@@ -123,11 +123,14 @@ dialog {
 
     /*** MENU ITEM ***/
     [role="menuitem"],
-    menu>li {
-      padding: .5em;
-      text-decoration: none;
-      display: block;
+    li {
       white-space: nowrap;
+      a {
+        display: block;
+        padding: .5em;
+        text-decoration: none;
+        color: black;
+      }
     }
   }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -33,6 +33,8 @@ firebase.initializeApp({
 // Start React
 ReactDOM.createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>)
 
+const diceSound = new Audio('./shake-and-roll-dice-soundbible.mp3');
+
 // React App
 export function App() {
   const database = firebase.database();
@@ -146,13 +148,20 @@ export function App() {
     return () => unregisterAuthObserver();
   }, []);
 
+  // Subscribe to match
   useEffect(() => {
     if (match?.game) {
       const gameRef = firebase.database().ref(`games/${match?.game}`)
       const onValue = (snapshot: firebase.database.DataSnapshot) => {
         const value = snapshot.val();
         if (value) {
-          setGame(value);
+          setGame(game => {
+            if (game.color && game.color !== value.color) {
+              diceSound.play();
+              vibrate();
+            }
+            return value
+          });
         } else {
           const blankGame = newGame();
           setGame(blankGame);
@@ -187,8 +196,7 @@ export function App() {
       });
     }
 
-    const audio = new Audio('./shake-and-roll-dice-soundbible.mp3');
-    audio.play();
+    diceSound.play();
     vibrate();
   }, [match?.game, game, user]);