Working on CSS module for PlayerScores

client/src/components/screens/PlayerScores/LinkedGame.jsx

@@ -1,28 +1,15 @@
-import React from "react";
-import styled from "styled-components";
-import { dispatch } from '../../../domain/gameStore';
+import React from 'react';
 import { linkGame } from '../../../domain/apiMethods';
+import { dispatch } from '../../../domain/gameStore';
 import GameCreationForm from '../../util/GameCreationForm';
-
-const LinkedGameContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 1em;
-  margin-bottom: 1em;
-`
-
-const StyledButton = styled.button`
-  margin-top: 0.5em;
-`
+import styles from './PlayerScores.module.css';
 
 export default React.memo(({ linkedGame, gameId }) => (
-  <LinkedGameContainer>
-    {
-      linkedGame
-        ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
-            Continue to Linked Game Lobby
-          </StyledButton>
-        : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
-    }
-  </LinkedGameContainer>
-));
+  <div className={styles.linked}>
+    {linkedGame ? (
+      <button onClick={() => dispatch.goToLobby(linkedGame)}>Continue to Linked Game Lobby</button>
+    ) : (
+      <GameCreationForm afterCreate={(linkId) => linkGame(gameId, linkId)} />
+    )}
+  </div>
+));

client/src/components/screens/PlayerScores/PlayerScoreTile.jsx

@@ -1,49 +1,22 @@
-import React from "react";
-import styled from "styled-components";
-
-const Tile = styled.div`
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  min-width: 10em;
-`
-
-const Name = styled.span`
-  font-size: 1.4em;
-  font-weight: 800;
-`
-
-const TotalScore = styled.span`
-  font-size: 1.1em;
-  margin-left: .5em;
-`
-
-const List = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
-  margin-bottom: 20%;
-  margin-left: 1em;
-  list-style: none;
-`
-
-const Score = styled.span`
-`
+import React from 'react';
+import styles from './PlayerScores.module.css';
 
 export default ({ name, guesses, totalScore }) => (
-  <Tile>
-    <Name>{name}</Name>
-    <TotalScore>Score: {totalScore}</TotalScore>
-    <List>
-      {
-        Object.entries(guesses)
-          .map(([k, v]) => [parseInt(k), v])
-          .sort(([k1], [k2]) => k1 < k2 ? -1 : k1 > k2 ? 1 : 0)
-          .map(([num, { score }]) => score !== undefined ? <Score key={num}>{num}: {score ?? 0}</Score> : null)
-      }
-    </List>
-  </Tile>
+  <div className={styles.tile}>
+    <span className={styles.name}>{name}</span>
+    <span className={styles.total}>Score: {totalScore}</span>
+    <div className={styles.scores}>
+      {Object.entries(guesses)
+        .map(([ k, v ]) => [ parseInt(k), v ])
+        .sort(([ k1 ], [ k2 ]) => (k1 < k2 ? -1 : k1 > k2 ? 1 : 0))
+        .map(
+          ([ num, { score } ]) =>
+            score !== undefined ? (
+              <span key={num}>
+                {num}: {score ?? 0}
+              </span>
+            ) : null
+        )}
+    </div>
+  </div>
 );

client/src/components/screens/PlayerScores/PlayerScores.module.css

@@ -0,0 +1,35 @@
+.linked {
+  display: flex;
+  justify-content: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.tile {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 10em;
+}
+
+.name {
+  font-size: 1.4em;
+  font-weight: 800;
+}
+
+.total {
+  font-size: 1.1em;
+  margin-left: .5em;
+}
+
+.scores {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-bottom: 20%;
+  margin-left: 1em;
+  list-style: none;
+}