Bunch of styling

Author: miorel

src/App.module.css

@@ -11,7 +11,6 @@
 }
 
 .guess {
-  width: min-content;
   min-width: 50%;
   max-width: 100%;
   text-align: center;

src/App.tsx

@@ -1,15 +1,24 @@
 import React, { type ReactNode } from "react";
 
 import styles from "./App.module.css";
-import FinishedRounds from "./FinishedRounds";
-import useAppState from "./hooks/useAppState";
+import Rounds from "./Rounds";
+import useAppState, { type Round } from "./hooks/useAppState";
 import useLoadData from "./hooks/useLoadData";
 import countIf from "./util/countIf";
 import pluralize from "./util/pluralize";
 
-function Container({ children }: { children: ReactNode }) {
+function Container({
+  children,
+  finishedRounds = [],
+  currentRound,
+}: {
+  children: ReactNode;
+  currentRound?: Round;
+  finishedRounds?: readonly Round[];
+}) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
+      <Rounds finishedRounds={finishedRounds} currentRound={currentRound} />
       {children}
     </div>
   );
@@ -27,7 +36,10 @@ export default function App() {
 
       return (
         <Container>
-          <div>Word pack is ready with {state.wordPack.length} words!</div>
+          <div>
+            Word pack (<strong>fruits</strong>) is ready with{" "}
+            {pluralize(state.wordPack.length, "word")}!
+          </div>
           <button onClick={() => dispatch({ type: "start-game" })}>
             Begin
           </button>
@@ -37,11 +49,10 @@ export default function App() {
 
     case "in-game": {
       return (
-        <Container>
-          <FinishedRounds
-            rounds={state.finishedRounds}
-            currentRound={state.currentRound}
-          />
+        <Container
+          finishedRounds={state.finishedRounds}
+          currentRound={state.currentRound}
+        >
           <label className={`${styles.guessLabel} centered-container flex-col`}>
             <input
               type="text"
@@ -52,7 +63,7 @@ export default function App() {
                 dispatch({ type: "update-guess", newGuess: ev.target.value })
               }
             />
-            <div>Guess the word!</div>
+            <div>Unscramble the word!</div>
           </label>
           <div className={`${styles.buttonRow} centered-container flex-row`}>
             <button onClick={() => dispatch({ type: "skip-word" })}>
@@ -69,13 +80,12 @@ export default function App() {
     case "post-game": {
       const wordsGuessed = countIf(
         state.finishedRounds,
-        (round) => round.didGuess
+        (round) => round.didGuess,
       );
       const wordsSkipped = state.finishedRounds.length - wordsGuessed;
 
       return (
-        <Container>
-          <FinishedRounds rounds={state.finishedRounds} />
+        <Container finishedRounds={state.finishedRounds}>
           <div>
             You guessed {pluralize(wordsGuessed, "word")} and skipped{" "}
             {pluralize(wordsSkipped, "word")}.

src/FinishedRounds.module.css src/Rounds.module.csssrc/FinishedRounds.module.css renamed to src/Rounds.module.css

@@ -1,9 +1,9 @@
 .container {
-  gap: 1.5vw;
   height: 35%;
+  mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%));
   overflow: hidden;
 
-  mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%));
+  gap: 1.5vw;
 }
 
 /* double specificity to override other style */

src/FinishedRounds.tsx src/Rounds.tsxsrc/FinishedRounds.tsx renamed to src/Rounds.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 
-import styles from "./FinishedRounds.module.css";
+import styles from "./Rounds.module.css";
 import type { Round } from "./hooks/useAppState";
 import Word from "./Word";
 
 type Props = {
-  rounds: readonly Round[];
+  finishedRounds: readonly Round[];
   currentRound?: Round;
 };
 
-export default function FinishedRounds({ currentRound, rounds }: Props) {
+export default function Rounds({ currentRound, finishedRounds }: Props) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
-      {rounds.map(({ wordUnscrambled: word, didGuess }, index) => (
+      {finishedRounds.map(({ wordUnscrambled: word, didGuess }, index) => (
         <Word
           key={index}
           word={word}

src/index.css

@@ -10,7 +10,7 @@ button {
   -moz-osx-font-smoothing: grayscale;
 
   font-size: calc(max(12px, 1.5vw));
-  line-height: 120%;
+  line-height: 150%;
 }
 
 html,
@@ -52,8 +52,8 @@ code {
   flex-direction: row;
 }
 
-button {
-  background: color-mix(in oklch, cornflowerblue 25%, transparent);
+button,
+input {
   border: calc(max(1px, 0.3vmin)) solid black;
   border-radius: 1vmin;
 
@@ -62,6 +62,10 @@ button {
   overflow: hidden;
 }
 
+button {
+  background: color-mix(in oklch, cornflowerblue 25%, transparent);
+}
+
 button:hover,
 button:focus {
   background: color-mix(in oklch, cornflowerblue 45%, transparent);