Improve Styling

client/assets/styles/colour-cards.css

@@ -15,6 +15,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
+  justify-content: center;
 
   font-family: Poppins, sans-serif;
   font-weight: 400;

client/assets/styles/main.css

@@ -6,11 +6,51 @@
 body {
   --dxw-white: #f9f8f5;
   --dxw-black: #243746;
-
-  padding: 1rem;
-
+  --regular: 300;
+  --bold: 600;
+
+  /* Base spacing unit. */
+  --spacing-unit: 1rem;
+
+  /* typography - font sizes */
+  --font-body: calc(var(--font-size-x-small) * var(--spacing-unit));
+  --font-title-small: calc(var(--font-size-small) * var(--spacing-unit));
+  --font-title-medium: calc(var(--font-size-medium) * var(--spacing-unit));
+  --font-title-large: calc(var(--font-size-large) * var(--spacing-unit));
+
+  /* font-size */
+  --font-size-x-small: 1.125;
+  --font-size-small: 1.25;
+  --font-size-medium: 1.5;
+  --font-size-large: 1.875;
+
+
+  /* spacing */
+  --tiny: 0.5;
+  --small: 1;
+  --medium-small: 1.5;
+  --base: 2;
+  --medium-large: 3;
+  --large: 4;
+  --x-large: 6;
+  --xx-large: 9;
+  --spacing-tiny: calc(var(--tiny) * var(--spacing-unit));
+  --spacing-small: calc(var(--small) * var(--spacing-unit));
+  --spacing-medium-small: calc(var(--medium-small) * var(--spacing-unit));
+  --spacing-base: calc(var(--base) * var(--spacing-unit));
+  --spacing-medium-large: calc(var(--medium-large) * var(--spacing-unit));
+  --spacing-large: calc(var(--large) * var(--spacing-unit));
+  --spacing-x-large: calc(var(--x-large) * var(--spacing-unit));
+  --spacing-xx-large: calc(var(--xx-large) * var(--spacing-unit));
+  --body-height: calc(100vh - calc(var(--spacing-base) * 2));
+  --body-width: calc(100vw - calc(var(--spacing-base) * 2));
+  --header-height: var(--spacing-x-large);
+  --main-height: calc(var(--body-height) - var(--header-height));
+
+  padding: var(--spacing-small);
+
   font-family: Merriweather, serif;
-  font-weight: 300;
+  font-weight: var(--regular);
   color: var(--dxw-black);
 
   background-color: var(--dxw-white);
@@ -23,36 +63,71 @@ h4,
 h5,
 h6 {
   font-family: Poppins, sans-serif;
-  font-weight: 600;
+  font-weight: var(--bold);
 }
 
 h1 {
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-small);
   text-align: center;
 }
 
 h1::before {
   content: url("/assets/images/favicon/favicon-32x32.png");
-  height: 2rem;
-  margin-right: 0.5rem;
+  height: var(--spacing-base);
+  margin-right: var(--spacing-tiny);
   vertical-align: middle;
 }
 
-#connection-status {
-  position: absolute;
-  top: 1.5rem;
-  right: 1rem;
+
+header {
+  height: var(--header-height);
 }
 
-#player-name {
+main {
+  display: flex;
+  height: var(--main-height);
+}
+
+#gameplay-column{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: calc(calc(var(--body-width) / 3) * 2);
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    label {
+      margin-bottom: var(--spacing-tiny);
+    }
+
+    input {
+      margin-bottom: var(--spacing-small);
+    }
+  }
+}
+
+#players-and-scores-column{
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--body-width) / 3);
+}
+
+#connection-status-icon {
   position: absolute;
-  top: 1.5rem;
-  left: 1rem;
+  top: var(--spacing-medium-small);
+  right: var(--spacing-base);
 }
 
-#player-list {
-  padding-inline-start: 0;
-  list-style: none;
+#player-name {
+  position: absolute;
+  top: var(--spacing-medium-small);
+  left: var(--spacing-base);
 }
 
 #bonus-points {
@@ -61,6 +136,21 @@ h1::before {
 
 #question {
   display: none;
+
+  h2 {
+    margin-bottom: var(--spacing-base);
+  }
+
+  dl {
+    display: grid;
+    grid: 1fr 1fr / 1fr 1fr;
+    width: calc(3 * var(--spacing-xx-large));
+    margin-bottom: var(--spacing-base);
+
+    dd {
+      font-weight: var(--bold);
+    }
+  }
 }
 
 .answer-form fieldset {
@@ -74,3 +164,29 @@ h1::before {
 #countdown-section {
   display: none;
 }
+
+#round-reset-button {
+  align-self: end;
+  width: var(--spacing-xx-large);
+  margin-top: auto;
+}
+
+#start-button {
+  align-self: center;
+  width: var(--spacing-xx-large);
+}
+
+#colour-section {
+  width: 30.5rem;
+  margin-bottom: var(--spacing-base);
+
+  fieldset {
+    margin-bottom: var(--spacing-base);
+  }
+
+  h2 {
+    margin-bottom: var(--spacing-medium-small);
+  }
+}
+
+

client/index.html

@@ -24,36 +24,40 @@
       <h1>Colour Me Knowledgeable!</h1>
     </header>
 
-    <main>  
-      <form id="name-form">
-        <input id="name" type="text" />
-        <label for="name">Display name</label>
+    <main> 
+      <div id="gameplay-column">
+        <form id="name-form"> 
+          <label for="name">Enter your name:</label>
+          <input id="name" type="text" />
 
-        <button type="submit">Join game</button>
-      </form>
-
-      <h2>Players</h2>
-
-      <ul id="player-list"></ul>
-
-      <button id="start-button" style="display: none">Start game!</button>
-      <button id="round-reset-button" style="display: none">Reset round</button>
+          <button type="submit">Join game</button>
+        </form>
+        <button id="start-button" style="display: none">Start game!</button>
+
 
-      <p id="bonus-points"></p>
-
       <section id="question">
         <h2>Which colours are in this thing?</h2>
         <dl>
-          <dt>Thing</dt>
+          <dt>Thing:</dt>
           <dd id="thing"></dd>
-          <dt>Number of colours</p>
+          <dt>Number of colours: </p>
           <dd id="number"></dd>
         </dl>
       </section>
 
       <section id="colour-section"></section>
 
       <section id="countdown-section"></section>
+    </div>
+
+      <div id="players-and-scores-column">
+
+        <h2>Players</h2>
+        <ul id="player-list"></ul>
+        <p id="bonus-points"></p>
+
+        <button id="round-reset-button" style="display: none">Reset round</button>
+      </div>
     </main>
 
     <template id="checkbox-template">

client/utils/domManipulationUtils/playerName.ts

@@ -5,7 +5,7 @@ import { getElementById } from "../getElementById";
 const renderPlayerName = (currentPlayer: Player): void => {
 	htmlElements.playerName ||= getElementById<HTMLDivElement>("player-name");
 
-	const targetText = `Name: ${currentPlayer.name}`;
+	const targetText = `Your name: ${currentPlayer.name}`;
 	htmlElements.playerName.innerText = targetText;
 };
 

e2e/app.test.ts

@@ -39,9 +39,7 @@ test("players can join and start the game", async () => {
 			await addName(playerPage, name);
 
 			//   Verify name is visible
-			await expect(
-				playerPage.getByText(`Name: ${name}`, { exact: true }),
-			).toBeVisible();
+			await expect(playerPage.getByText(name, { exact: true })).toBeVisible();
 		}),
 	);
 
@@ -96,7 +94,7 @@ const connect = async (page: Page) => {
 
 const addName = async (page: Page, name: Player["name"]) => {
 	//   Enter name
-	const displayNameInput = page.getByLabel("Display name");
+	const displayNameInput = page.getByLabel("Enter your name:");
 	await displayNameInput.fill(name);
 
 	//   Click join