Working on game layout

apps/quippy/src/lib/quippy/Countdown.svelte

@@ -0,0 +1,7 @@
+<script>  
+  export let percentage = 0;
+</script>
+
+<div class="small-space border">
+  <div class="progress left light-green" style='clip-path: polygon(0% 0%, 0% 100%, {percentage}% 100%, {percentage}% 0%);'/>
+</div>

apps/quippy/src/pages/Play.svelte

@@ -6,6 +6,7 @@
   import { pb, currentUser } from "../lib/pocketbase";
   import { createAvatar } from "@dicebear/core";
   import { initials } from "@dicebear/collection";
+  import Countdown from "../lib/quippy/Countdown.svelte";
 
   import { io } from "socket.io-client";
   const socket = io("ws://localhost:3000");
@@ -23,8 +24,8 @@
     console.log("Looking for game with id: " + params.id);
   });
 
-  function makeAvatar(name){
-    return createAvatar(initials,{seed: name}).toDataUriSync();
+  function makeAvatar(name) {
+    return createAvatar(initials, { seed: name }).toDataUriSync();
   }
 </script>
 
@@ -40,19 +41,51 @@
       </button>
     </nav>
     <h6>Players</h6>
-    <div class="small-divider"></div>
-    <div class="row">
+    <div class="small-divider" />
+    <div class="row center-align">
       {#if $currentUser.avatar}
         <img class="circle" src={$currentUser.avatar} alt="avatar" />
       {:else}
         <img class="circle" src={svg} alt="avatar" />
       {/if}
 
-      {#each ["foobar", "fizzbuzz", "John Doe"] as player}
-          <!-- svelte-ignore a11y-missing-attribute -->
-          <!-- svelte-ignore a11y-missing-content -->
-          <img class="circle" src={makeAvatar(player)}/>
+      {#each ["Austin Powers", "Clark Kent", "John Doe"] as player}
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <!-- svelte-ignore a11y-missing-content -->
+        <img class="circle" src={makeAvatar(player)} />
       {/each}
     </div>
   </header>
+
+  <article class="round">
+      <h3 class="center-align">Something you would not say at a wedding</h3>
+      <div class="small-divider"></div>
+      <Countdown percentage={30} />
+      <div class="space" />
+    <nav class="no-space center-align" class:hidden={false}>
+      <div class="field border left-round">
+        <input />
+      </div>
+      <button class="large right-round">Submit</button>
+    </nav>
+    <div class="space" />
+  </article>
+
+  <article class="round">
+      <div class="row">
+        <img class="circle" src={svg} alt="avatar" />
+        {#if false}
+            <h5>Text</h5>
+        {:else}
+            <span class="max" style="height: 2rem; background-color: var(--secondary-container"></span>
+        {/if}
+      </div>
+
+  </article>
 </GameLayout>
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>