adjust styling to fit result and shapes more consistently

src/components/Game.js

@@ -31,13 +31,14 @@ function Game({dispatchGameState, gameState}) {
           ></Letter>
         ))}
       </div>
-      <div>
+      <div id="currentWord">
         {gameState.playedIndexes
           .map((index) => gameState.letters[index])
           .join("")
           .toUpperCase()}
       </div>
-      <div>{gameState.result}</div>
+      {gameState.result ? (<div id="wordResult" className="fadeOut">{gameState.result}</div>) : (<></>)}
+
 
       <div id="shapes">
         {gameState.shapes.map((shape) => (

src/logic/gameReducer.js

@@ -12,6 +12,7 @@ export function gameReducer(currentGameState, payload) {
     return {
       ...currentGameState,
       playedIndexes: [playedIndex],
+      result: "",
     };
   } else if (payload.action === "addLetter") {
     // exit early if a word isn't in progress
@@ -39,6 +40,7 @@ export function gameReducer(currentGameState, payload) {
     return {
       ...currentGameState,
       playedIndexes: newPlayedIndexes,
+      result: "",
     };
   } else if (payload.action === "removeLetter") {
     // exit early if a word isn't in progress
@@ -61,6 +63,7 @@ export function gameReducer(currentGameState, payload) {
     return {
       ...currentGameState,
       playedIndexes: newPlayedIndexes,
+      result: "",
     };
   } else if (payload.action === "endWord") {
     // exit early if a word isn't in progress

src/styles/App.css

@@ -100,6 +100,12 @@ button:disabled {
 
 #game {
   grid-area: game;
+  display: grid;
+  grid-template-areas:
+    "board"
+    "currentWord"
+    "shapes"
+    ;
 }
 
 #exitDaily {
@@ -114,6 +120,7 @@ button:disabled {
 
 #board {
   display: grid;
+  grid-area: board;
   background-color: var(--dark-color);
   touch-action: none;
   justify-content: center;
@@ -155,23 +162,49 @@ button:disabled {
 
 #shapes {
   display: grid;
+  grid-area: shapes;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   justify-items: center;
 }
 
 .shape {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 5vmin);
+  grid-template-rows: repeat(4, 5vmin);
   margin: 10px;
-}
-
-.shapeBox {
-  width: 5vmin;
-  height: 5vmin;
+  gap:0;
 }
 
 .shapeBox.filled {
   background-color: var(--light-color);
 }
+
+#currentWord {
+  grid-area: currentWord;
+  height: var(--default-font-size);
+  overflow: hidden;
+  justify-self: center;
+  align-self: center;
+}
+
+#wordResult {
+  grid-area: currentWord;
+  height: var(--default-font-size);
+  overflow: hidden;
+  justify-self: center;
+  align-self: center;
+}
+
+.fadeOut {
+  opacity: 0;
+  pointer-events: none;
+  animation-duration: 2s;
+  animation-name: fadeout;
+}
+
+@keyframes fadeout {
+  from {
+    opacity: 0.9;
+  }
+}