feat(doppio): fancier score indicator and faction selection

PascalHonegger · May 16, 2021 · 82880ba · 82880ba
1 parent 08f21bd
commit 82880ba
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 16 deletions.
diff --git a/frontend/public/global.css b/frontend/public/global.css
@@ -107,7 +107,6 @@ button:focus {
     left: 0;
     z-index: 10;
     display: grid;
-    align-items: center;
-    justify-items: center;
+    place-items: center;
     background-color: #2022253d;
 }
diff --git a/frontend/src/components/Cell.svelte b/frontend/src/components/Cell.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-    import type {Cell} from "../lib/GameState";
+    import twemoji from "../lib/Twemoji";
+    import type { Cell } from "../lib/GameState";
     import Piece from "./Piece.svelte";
 
     export let cell: Cell;
 </script>
 
-<div class="cell" class:scored={cell.scored}>
+<div class="cell">
     {#if cell.piece}
-        <Piece piece={cell.piece}/>
+        <Piece piece={cell.piece}>
+            {#if cell.scored}
+                <div class="score-indicator" use:twemoji>⭐</div>
+            {/if}
+        </Piece>
     {/if}
 </div>
 
@@ -28,7 +33,12 @@
         border-top-width: 2px;
     }
 
-    .scored {
-        background: gold;
+    .score-indicator {
+        position: absolute;
+        display: flex;
+        place-content: center;
+        place-items: center;
+        width: var(--piece-size);
+        height: var(--piece-size);
     }
 </style>
diff --git a/frontend/src/components/FactionSelect.svelte b/frontend/src/components/FactionSelect.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import twemoji from "../lib/Twemoji";
     import type { Faction } from "../gen/game_pb";
     import { startPlaying } from "../lib/ChaosConnectClient";
-import type { Player } from "../lib/GameState";
+    import type { Player } from "../lib/GameState";
     import { authMetadata } from "../stores/Auth";
     import { playersByFaction } from "../stores/GameState";
     import Piece from "./Piece.svelte";
@@ -59,18 +60,55 @@ import type { Player } from "../lib/GameState";
         <Spinner />
     {:else}
         <h2>Choose Your Faction</h2>
-        {#each [...$playersByFaction] as [faction, players]}
-            <button disabled={isUnbalanced(faction)} on:click={() => chooseFaction(faction)}>
-                <Piece {faction} />
-                {countConnected(players)} Player{#if countConnected(players) !== 1}s{/if}
-            </button>
-        {/each}
+        <div class="wrapper">
+            {#each [...$playersByFaction] as [faction, players], i}
+                {#if i !== 0}
+                    <span use:twemoji class="vs-button">🆚</span>
+                {/if}
+                <button
+                    disabled={isUnbalanced(faction)}
+                    on:click={() => chooseFaction(faction)}
+                >
+                    <span class="piece-wrapper">
+                        <Piece {faction} />
+                    </span>
+                    <span>
+                        {countConnected(players)} Player{#if countConnected(players) !== 1}s{/if}
+                    </span>
+                </button>
+            {/each}
+        </div>
     {/if}
 </div>
 
 <style>
     .faction-select {
         text-align: center;
-        align-self: center;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .vs-button {
+        font-size: 2em;
+        display: flex;
+        margin: 0 var(--spacing);
+    }
+
+    .piece-wrapper {
+        position: relative;
+        display: block;
+        width: var(--piece-size);
+        height: var(--piece-size);
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    button {
+        margin: 0;
     }
 </style>
diff --git a/frontend/src/components/Piece.svelte b/frontend/src/components/Piece.svelte
@@ -15,7 +15,7 @@
     class:yellow={faction === Faction.YELLOW}
     class:red={faction === Faction.RED}
     title={playerName != null ? `Placed by ${playerName}` : undefined}
-/>
+><slot /></div>
 
 <style>
     .piece {