Use CSS modules

Author: miorel

src/App.css src/App.module.csssrc/App.css renamed to src/App.module.css

@@ -1,4 +1,4 @@
-.App-container {
+.container {
   width: 100vmin;
   aspect-ratio: 1;
 

src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import "./App.css";
+import styles from "./App.module.css";
 
 import { MOVE_CONFIG, MOVES, type Move } from "./constants";
 import MoveButton from "./MoveButton";
@@ -13,7 +13,7 @@ function getRandomMove(): Move {
 
 function getGameResult(
   moveA: Move,
-  moveB: Move,
+  moveB: Move
 ): ["a" | "b", string] | ["tie", null] {
   const aBeatsB = MOVE_CONFIG[moveA][moveB];
   if (aBeatsB != null) {
@@ -34,7 +34,7 @@ function App() {
   const [computerMove, setComputerMove] = React.useState<Move>(getRandomMove());
   const [playerMove, setPlayerMove] = React.useState<Move | null>(null);
   const [{ wins, losses, draws }, setGameResults] = React.useState<GameResults>(
-    { wins: 0, losses: 0, draws: 0 },
+    { wins: 0, losses: 0, draws: 0 }
   );
 
   const handleMove = (move: Move) => {
@@ -57,7 +57,7 @@ function App() {
 
   if (playerMove == null) {
     return (
-      <div className="App-container centered-container">
+      <div className={`${styles.container} centered-container`}>
         <h1>Make your move!</h1>
         {MOVES.map((move, i) => (
           <MoveButton

src/MoveButton.css src/MoveButton.module.csssrc/MoveButton.css renamed to src/MoveButton.module.css

@@ -1,5 +1,5 @@
-.MoveButton-button,
-.MoveButton-emoji {
+.button,
+.emoji {
   width: 16vmin;
   aspect-ratio: 1;
 
@@ -8,23 +8,37 @@
   user-select: none;
 
   overflow: hidden;
-
-  backface-visibility: hidden;
-  will-change: transform;
 }
 
-.MoveButton-button {
-  position: absolute;
-  left: calc(50% - 8vmin);
-  top: calc(50% - 8vmin);
-
+.button {
   border-radius: 50%;
   padding: 0;
+
+  margin-left: -50%;
+  margin-top: -50%;
+}
+
+.container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .MoveButton-button:focus .MoveButton-emoji,
-  .MoveButton-button:hover .MoveButton-emoji {
+  .button,
+  .emoji {
+    backface-visibility: hidden;
+    will-change: transform;
+  }
+
+  .button:focus,
+  .button:hover {
+    scale: 1.2;
+    transition: scale 0.1s;
+  }
+
+  .button:focus .emoji,
+  .button:hover .emoji {
     animation: wiggle infinite 0.4s linear;
   }
 

src/MoveButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import "./MoveButton.css";
+import styles from "./MoveButton.module.css";
 
 import { MOVE_EMOJI, type Move } from "./constants";
 
@@ -12,12 +12,13 @@ type Props = {
 
 export default function MoveButton({ move, onClick, transform }: Props) {
   return (
-    <button
-      onClick={onClick}
-      className="MoveButton-button centered-container"
-      style={{ transform }}
-    >
-      <div className="MoveButton-emoji">{MOVE_EMOJI[move]}</div>
-    </button>
+    <div className={styles.container} style={{ transform }}>
+      <button
+        onClick={onClick}
+        className={`${styles.button} centered-container`}
+      >
+        <div className={styles.emoji}>{MOVE_EMOJI[move]}</div>
+      </button>
+    </div>
   );
 }