thomascole/QuiplashClone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working on game layout

Browse Source
This commit is contained in:
Thomas Cole 2023-03-15 09:26:54 -04:00
parent 375b87ce0f
commit e6e2ffd3d2
3 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/quippy/src/lib/quippy/Countdown.svelte Normal file
View File

@ -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>

49
apps/quippy/src/pages/Play.svelte
View File

@ -6,6 +6,7 @@
import { pb, currentUser } from "../lib/pocketbase"; import { pb, currentUser } from "../lib/pocketbase";
import { createAvatar } from "@dicebear/core"; import { createAvatar } from "@dicebear/core";
import { initials } from "@dicebear/collection"; import { initials } from "@dicebear/collection";
import Countdown from "../lib/quippy/Countdown.svelte";
import { io } from "socket.io-client"; import { io } from "socket.io-client";
const socket = io("ws://localhost:3000"); const socket = io("ws://localhost:3000");
@ -23,8 +24,8 @@
console.log("Looking for game with id: " + params.id); console.log("Looking for game with id: " + params.id);
}); });
function makeAvatar(name){ function makeAvatar(name) {
return createAvatar(initials,{seed: name}).toDataUriSync(); return createAvatar(initials, { seed: name }).toDataUriSync();
} }
</script> </script>
@ -40,19 +41,51 @@
</button> </button>
</nav> </nav>
<h6>Players</h6> <h6>Players</h6>
<div class="small-divider"></div> <div class="small-divider" />
<div class="row"> <div class="row center-align">
{#if $currentUser.avatar} {#if $currentUser.avatar}
<img class="circle" src={$currentUser.avatar} alt="avatar" /> <img class="circle" src={$currentUser.avatar} alt="avatar" />
{:else} {:else}
<img class="circle" src={svg} alt="avatar" /> <img class="circle" src={svg} alt="avatar" />
{/if} {/if}
{#each ["foobar", "fizzbuzz", "John Doe"] as player} {#each ["Austin Powers", "Clark Kent", "John Doe"] as player}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-missing-content --> <!-- svelte-ignore a11y-missing-content -->
<img class="circle" src={makeAvatar(player)}/> <img class="circle" src={makeAvatar(player)} />
{/each} {/each}
</div> </div>
</header> </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> </GameLayout>
<style>
.hidden {
display: none;
}
</style>

0
apps/server/src/GameState.ts Normal file
View File