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/.gitignore
+++ b/.gitignore
@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,17 @@
+{
+	"name": "eod",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
+	},
+	"type": "module"
+}
--- 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>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/map.png
+++ b/static/map.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;