Slight cleanup, switched from WASD to touch controls

README.md

@@ -1,38 +1,2 @@
-# create-svelte
+# Map viewer for Scratch Empires
-
+This is the unofficial map viewer for [https://scratch.mit.edu/discuss/topic/647837/](Scratch Empires S2).
-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.

src/app.html

@@ -7,5 +7,7 @@
 		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700:500&display=swap" rel="stylesheet">
         %sveltekit.head%
 	</head>
-	%sveltekit.body%
+    <div style="display: contents">
+        %sveltekit.body%
+    </div>
 </html>

src/routes/+page.svelte

@@ -1,37 +1,38 @@
 <script>
 
-let docW, mapW, docH, mapH;
+var docDimensions = [0,0];
+var mapDimensions = [0,0]; 
+var viewPos       = [0,0];
+var pos           = [0,0];
+var posMouse      = [0,0];
+var posMouseHook  = [0,0];
 
-var top = 0;
+var isMouse = false;
-var left = 0;
 
-var keys = {};
+function mouseDown(e) {
-
+    isMouse = true;
-var vel = [0,0];
-var pos = [0,0];
-
-function keydown(e) {
-    keys[e.key.toLowerCase()] = true;
 };
 
-function keyup(e) {
+function mouseUp(e) {
-    keys[e.key.toLowerCase()] = false;
+    isMouse = false;
 };
 
-setInterval(function() {
+function mouseMove(e) {
-    var isShift = keys['q'];
+    posMouse = [e.clientX,e.clientY];    
-    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;
+    if (isMouse) {
-    vel[1] *= 0.9;
+        for (var i = 0; i < 2; i++) {     
+            var deltaPos = posMouse[i] - posMouseHook[i];
+            pos[i] += deltaPos;
 
-    pos[0] += vel[0];
+            var viewOffset = mapDimensions[i] - docDimensions[i];
-    pos[1] += vel[1];
+            viewPos[i] = (pos[i] - viewOffset / 2) + 'px';
+        }
+    }
 
-    left = (pos[0] - mapW/2 + docW/2) + 'px';
+    posMouseHook = posMouse;
-    top = (pos[1] - mapH/2 + docH/2) + 'px';
+
-},10);
+};
 </script>
 
 <style>
@@ -58,24 +59,20 @@ setInterval(function() {
         z-index: 1;
     
         color: var(--light-1);
-    }
+    } 
-    
-    #ui-right {
-        text-align: right;
-    }
 
 </style>
 
-<svelte:window on:keydown={keydown} on:keyup={keyup}/>
+<svelte:window on:mousedown={mouseDown} on:mouseup={mouseUp} on:mousemove={mouseMove}/>
  
 <div id='ui-wrap'>
     <div>
-        WASD to pan or move map (+ Q to speed up) <br/>
+        Mouse to pan or move map <br/>
     </div> 
 </div>
 
-<div class='document'  bind:clientWidth={docW} bind:clientHeight={docH} >
+<div class='document'  bind:clientWidth={docDimensions[0]} bind:clientHeight={docDimensions[1]} >
-    <div class='area' bind:clientWidth={mapW} bind:clientHeight={mapH} style='top: {top}; left: {left}'>
+    <div class='area' bind:clientWidth={mapDimensions[0]} bind:clientHeight={mapDimensions[1]} style='top: {viewPos[1]}; left: {viewPos[0]}'>
         <img src='/map.svg'  >
     </div>
 </div>