Literally everything

2023-01-15 21:58:31 -05:00 · 2023-01-15 21:58:31 -05:00 · 773ac3fea6
commit 773ac3fea6
12 changed files with 1668 additions and 0 deletions
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700:500&display=swap" rel="stylesheet">
+        %sveltekit.head%
+	</head>
+	%sveltekit.body%
+</html>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,34 @@
+<style>
+    :global(:root) {
+        --light-1: rgb(255,255,255);
+        --light-2: rgb(228,230,232);
+        --light-3: rgb(208,210,212);
+
+        --dark-1: rgb(0,0,0);
+        --dark-2: rgb(18,20,22);
+        --dark-3: rgb(38,40,42);
+
+        font-family: 'Open Sans', sans-serif, serif;
+        font-size: 1.0rem;
+    }
+
+    body {
+        display: flex;
+
+        padding: 0;
+        margin: 0;
+
+        height: 100vh;
+        width: 100vw;
+
+        overflow: hidden;
+
+        color: var(--dark-1);
+
+        background: var(--light-1);
+    }
+</style>
+
+<body>
+    <slot />
+</body>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,81 @@
+<script>
+
+let docW, mapW, docH, mapH;
+
+var top = 0;
+var left = 0;
+
+var keys = {};
+
+var vel = [0,0];
+var pos = [0,0];
+
+function keydown(e) {
+    keys[e.key.toLowerCase()] = true;
+};
+
+function keyup(e) {
+    keys[e.key.toLowerCase()] = false;
+};
+
+setInterval(function() {
+    var isShift = keys['q'];
+    vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
+    vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);
+
+    vel[0] *= 0.9;
+    vel[1] *= 0.9;
+
+    pos[0] += vel[0];
+    pos[1] += vel[1];
+
+    left = (pos[0] - mapW/2 + docW/2) + 'px';
+    top = (pos[1] - mapH/2 + docH/2) + 'px';
+},10);
+</script>
+
+<style>
+    .document {
+        width: 100vw;
+        height: 100vh;
+        background: var(--dark-1);
+    
+        position: fixed;
+    }
+
+    .area {
+        position: absolute;
+    }
+
+    #ui-wrap {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        width: calc(100vw - 20px);
+        padding: 10px;
+
+        z-index: 1;
+    
+        color: var(--light-1);
+    }
+    
+    #ui-right {
+        text-align: right;
+    }
+
+</style>
+
+<svelte:window on:keydown={keydown} on:keyup={keyup}/>
+ 
+<div id='ui-wrap'>
+    <div>
+        WASD to pan or move map (+ Q to speed up) <br/>
+    </div> 
+</div>
+
+<div class='document'  bind:clientWidth={docW} bind:clientHeight={docH} >
+    <div class='area' bind:clientWidth={mapW} bind:clientHeight={mapH} style='top: {top}; left: {left}'>
+        <img src='/map.png'  >
+    </div>
+</div>