Slight cleanup, switched from WASD to touch controls
This commit is contained in:
parent
e620de66cc
commit
4e606b3669
4 changed files with 37445 additions and 107 deletions
40
README.md
40
README.md
|
@ -1,38 +1,2 @@
|
|||
# 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.
|
||||
# Map viewer for Scratch Empires
|
||||
This is the unofficial map viewer for [https://scratch.mit.edu/discuss/topic/647837/](Scratch Empires S2).
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 left = 0;
|
||||
var isMouse = false;
|
||||
|
||||
var keys = {};
|
||||
|
||||
var vel = [0,0];
|
||||
var pos = [0,0];
|
||||
|
||||
function keydown(e) {
|
||||
keys[e.key.toLowerCase()] = true;
|
||||
function mouseDown(e) {
|
||||
isMouse = true;
|
||||
};
|
||||
|
||||
function keyup(e) {
|
||||
keys[e.key.toLowerCase()] = false;
|
||||
function mouseUp(e) {
|
||||
isMouse = 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);
|
||||
function mouseMove(e) {
|
||||
posMouse = [e.clientX,e.clientY];
|
||||
|
||||
vel[0] *= 0.9;
|
||||
vel[1] *= 0.9;
|
||||
if (isMouse) {
|
||||
for (var i = 0; i < 2; i++) {
|
||||
var deltaPos = posMouse[i] - posMouseHook[i];
|
||||
pos[i] += deltaPos;
|
||||
|
||||
pos[0] += vel[0];
|
||||
pos[1] += vel[1];
|
||||
var viewOffset = mapDimensions[i] - docDimensions[i];
|
||||
viewPos[i] = (pos[i] - viewOffset / 2) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
left = (pos[0] - mapW/2 + docW/2) + 'px';
|
||||
top = (pos[1] - mapH/2 + docH/2) + 'px';
|
||||
},10);
|
||||
posMouseHook = posMouse;
|
||||
|
||||
};
|
||||
</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='area' bind:clientWidth={mapW} bind:clientHeight={mapH} style='top: {top}; left: {left}'>
|
||||
<div class='document' bind:clientWidth={docDimensions[0]} bind:clientHeight={docDimensions[1]} >
|
||||
<div class='area' bind:clientWidth={mapDimensions[0]} bind:clientHeight={mapDimensions[1]} style='top: {viewPos[1]}; left: {viewPos[0]}'>
|
||||
<img src='/map.svg' >
|
||||
</div>
|
||||
</div>
|
||||
|
|
37447
static/map.svg
37447
static/map.svg
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.8 MiB |
Loading…
Reference in a new issue