initial commit

7 files changed, 125 insertions, 0 deletions

diff --git a/client/src/App.svelte b/client/src/App.svelte
new file mode 100644
index 0000000..e76c187
--- /dev/null
+++ b/client/src/App.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { Router, Link, Route } from "svelte-routing";
+  import Home from "./routes/Home.svelte";
+
+  export let url = "/";
+</script>
+
+<Router {url}>
+  <div class="main">
+    <div class="header">
+      <div class="nav">
+        <h1>jumpstorm</h1>
+      </div>
+    </div>
+    <div class="content">
+      <Route path="/"><Home /></Route>
+    </div>
+    <div class="footer">
+      <span>
+        built by
+        <a href="https://github.com/simponic" target="_blank" class="tf">
+          simponic
+        </a>
+      </span>
+      <span>
+        | inspired by
+        <a href="https://www.youtube.com/watch?v=6qBcG31eiJY">carykh</a>
+      </span>
+    </div>
+  </div>
+</Router>
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>
diff --git a/client/src/main.ts b/client/src/main.ts
new file mode 100644
index 0000000..5332616
--- /dev/null
+++ b/client/src/main.ts
@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;
diff --git a/client/src/routes/Home.svelte b/client/src/routes/Home.svelte
new file mode 100644
index 0000000..935ed69
--- /dev/null
+++ b/client/src/routes/Home.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import GameCanvas from "../components/GameCanvas.svelte";
+  import LeaderBoard from "../components/LeaderBoard.svelte";
+
+  let width: number = 600;
+  let height: number = 800;
+</script>
+
+<div class="centered-game">
+  <GameCanvas {width} {height} />
+  <LeaderBoard />
+</div>
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/client/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />