From 0fd9fb097552686f2257c1aa689d797e80057bd1 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <elizabeth.hunt@simponic.xyz>
Date: Wed, 19 Jul 2023 20:38:24 -0700
Subject: initial commit

---
 client/src/components/GameCanvas.svelte      | 28 ++++++++++++++++++++++++++++
 client/src/components/LeaderBoard.svelte     | 25 +++++++++++++++++++++++++
 client/src/components/LeaderBoardCard.svelte | 20 ++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 client/src/components/GameCanvas.svelte
 create mode 100644 client/src/components/LeaderBoard.svelte
 create mode 100644 client/src/components/LeaderBoardCard.svelte

(limited to 'client/src/components')

diff --git a/client/src/components/GameCanvas.svelte b/client/src/components/GameCanvas.svelte
new file mode 100644
index 0000000..766a08a
--- /dev/null
+++ b/client/src/components/GameCanvas.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { Game } from "../../lib/Game";
+  import { Render } from "../../lib/systems";
+  import { Floor } from "../../lib/entities";
+  import { loadAssets } from "../../lib/config";
+  import { JumpStorm } from "../../lib/JumpStorm";
+
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
+
+  export let width: number;
+  export let height: number;
+
+  let jumpStorm: JumpStorm;
+
+  onMount(() => {
+    ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+
+    loadAssets().then(() => {
+      jumpStorm = new JumpStorm(ctx);
+      jumpStorm.play();
+    });
+  });
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
diff --git a/client/src/components/LeaderBoard.svelte b/client/src/components/LeaderBoard.svelte
new file mode 100644
index 0000000..d6e4ce3
--- /dev/null
+++ b/client/src/components/LeaderBoard.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { type LeaderBoardEntry } from "../../lib/interfaces";
+  import LeaderBoardCard from "./LeaderBoardCard.svelte";
+
+  const MAX_ENTRIES = 8;
+
+  export let entries: LeaderBoardEntry[] = [];
+</script>
+
+<div class="leaderboard">
+  {#each entries
+    .sort((a, b) => b.score - a.score)
+    .slice(0, MAX_ENTRIES) as entry}
+    <LeaderBoardCard {entry} />
+  {/each}
+</div>
+
+<style>
+  .leaderboard {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+  }
+</style>
diff --git a/client/src/components/LeaderBoardCard.svelte b/client/src/components/LeaderBoardCard.svelte
new file mode 100644
index 0000000..446d734
--- /dev/null
+++ b/client/src/components/LeaderBoardCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { type LeaderBoardEntry } from "../../lib/interfaces";
+
+  export let entry: LeaderBoardEntry = {
+    name: "simponic",
+    score: 100,
+  };
+</script>
+
+<div class="entry">
+  <span class="name">{entry.name}</span>
+  <span class="score">{entry.score}</span>
+</div>
+
+<style>
+  .entry {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
-- 
cgit v1.2.3-70-g09d2