From 814d4fb708a1f22b463a2cd0b3f6c039c6e56bc2 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 09:31:53 +0100 Subject: [PATCH 01/12] Add basic CSS vars We can use these as a rudimentary design system to ensure our styling stays consistent and DRY --- client/assets/styles/main.css | 46 ++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index eeef47de..dfc25bbf 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -6,9 +6,49 @@ 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; color: var(--dxw-black); From d21efe8474810d88a703416de4b76193f0648103 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 09:39:21 +0100 Subject: [PATCH 02/12] Implement vars using existing styles We've added the vars, lets use them. --- client/assets/styles/main.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index dfc25bbf..a1be13e9 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -50,7 +50,7 @@ body { padding: var(--spacing-small); font-family: Merriweather, serif; - font-weight: 300; + font-weight: var(--regular); color: var(--dxw-black); background-color: var(--dxw-white); @@ -63,31 +63,31 @@ 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; + top: var(--spacing-medium-small); + right: var(--spacing-base); } #player-name { position: absolute; - top: 1.5rem; - left: 1rem; + top: var(--spacing-medium-small); + left: var(--spacing-base); } #player-list { From 627738bce5398122c819b6138412bfdc9fa01081 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 09:45:29 +0100 Subject: [PATCH 03/12] Make main fill the viewport This ensures that main fills the full visible viewport --- client/assets/styles/main.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index a1be13e9..e103b42e 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -78,7 +78,17 @@ h1::before { vertical-align: middle; } -#connection-status { + +header { + height: var(--header-height); +} + +main { + display: flex; + height: var(--main-height); +} + +#connection-status-icon { position: absolute; top: var(--spacing-medium-small); right: var(--spacing-base); From d3fb44d1d82a60989572a5ff5ab13cc6ddd7be48 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 09:59:43 +0100 Subject: [PATCH 04/12] Add column layout This adds a simple column layout with the gameplay area (2/3rds of viewport) to the left and a column displaying meta information to the right (1/3 of viewport). --- client/assets/styles/main.css | 30 ++++++++++++++++++++++++++++++ client/index.html | 19 ++++++++++++------- e2e/app.test.ts | 2 +- 3 files changed, 43 insertions(+), 8 deletions(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index e103b42e..bbca69d3 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -88,6 +88,36 @@ main { 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: var(--spacing-medium-small); diff --git a/client/index.html b/client/index.html index c8234956..bc029997 100644 --- a/client/index.html +++ b/client/index.html @@ -24,15 +24,20 @@

Colour Me Knowledgeable!

-
-
- - - - -
+
+
+
+ + + +
+
+ +
+

Players

+
    diff --git a/e2e/app.test.ts b/e2e/app.test.ts index 51be63ce..e97d5b98 100644 --- a/e2e/app.test.ts +++ b/e2e/app.test.ts @@ -96,7 +96,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 From 2d33ba9277c2d8ef64ca46715b2981c327191e74 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 10:54:35 +0100 Subject: [PATCH 05/12] Change 'Name:' to 'Your name:' I think this is a little clearer --- client/utils/domManipulationUtils/playerName.ts | 2 +- e2e/app.test.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/client/utils/domManipulationUtils/playerName.ts b/client/utils/domManipulationUtils/playerName.ts index 67546401..1da001d2 100644 --- a/client/utils/domManipulationUtils/playerName.ts +++ b/client/utils/domManipulationUtils/playerName.ts @@ -5,7 +5,7 @@ import { getElementById } from "../getElementById"; const renderPlayerName = (currentPlayer: Player): void => { htmlElements.playerName ||= getElementById("player-name"); - const targetText = `Name: ${currentPlayer.name}`; + const targetText = `Your name: ${currentPlayer.name}`; htmlElements.playerName.innerText = targetText; }; diff --git a/e2e/app.test.ts b/e2e/app.test.ts index e97d5b98..cfc49ece 100644 --- a/e2e/app.test.ts +++ b/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(); }), ); From 24e982ffd8f865fccfdb98af022a2c2fe7924685 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 10:58:24 +0100 Subject: [PATCH 06/12] Move player list into Players & Scores column We also re-add the list styling as I think the bullet points add clarity --- client/assets/styles/main.css | 5 ----- client/index.html | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index bbca69d3..4019c9da 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -130,11 +130,6 @@ main { left: var(--spacing-base); } -#player-list { - padding-inline-start: 0; - list-style: none; -} - #bonus-points { display: none; } diff --git a/client/index.html b/client/index.html index bc029997..d3e122f7 100644 --- a/client/index.html +++ b/client/index.html @@ -37,9 +37,9 @@

    Colour Me Knowledgeable!

    Players

    +
      -
        From b9635f97a262668e35a071e9d722af6924c99dc1 Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 11:01:51 +0100 Subject: [PATCH 07/12] Move Start Button This ensures it displays in the correct place --- client/assets/styles/main.css | 5 +++++ client/index.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css index 4019c9da..2433c6f9 100644 --- a/client/assets/styles/main.css +++ b/client/assets/styles/main.css @@ -149,3 +149,8 @@ main { #countdown-section { display: none; } + +#start-button { + align-self: center; + width: var(--spacing-xx-large); +} diff --git a/client/index.html b/client/index.html index d3e122f7..a73f19a9 100644 --- a/client/index.html +++ b/client/index.html @@ -32,6 +32,7 @@

        Colour Me Knowledgeable!

        +
        @@ -41,7 +42,6 @@

        Players

        -

        From dd73161fd2137a90d9a02ff04e8016595e8905ba Mon Sep 17 00:00:00 2001 From: rich Date: Tue, 3 Sep 2024 11:04:28 +0100 Subject: [PATCH 08/12] Move gameplay components into their appropriate columns --- client/index.html | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/client/index.html b/client/index.html index a73f19a9..e3b8706b 100644 --- a/client/index.html +++ b/client/index.html @@ -33,19 +33,8 @@

        Colour Me Knowledgeable!

        - - -
        -

        Players

        -
          -
          - - - -

          -

          Which colours are in this thing?

          @@ -59,6 +48,19 @@

          Which colours are in this thing?

          + + +
          + +

          Players

          +
            +

            +
            + + + + +