@@ -472,7 +472,7 @@ | |||
this.ctx.scale(this.scale * pixelRatio, this.scale * pixelRatio); | |||
this.ctx.translate(-this.x, -this.y); | |||
this.ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"; | |||
this.ctx.strokeStyle = "rgba(255, 255, 255, 0.2)"; | |||
this.ctx.lineWidth = 1 / this.scale; | |||
let gridStartX = Math.floor(this.x - canWidth / 2); | |||
@@ -514,8 +514,8 @@ | |||
} | |||
} | |||
this.ctx.strokeStyle = "black"; | |||
this.ctx.lineWidth = 0.1; | |||
this.ctx.strokeStyle = "rgba(255, 255, 255, 1)"; | |||
this.ctx.lineWidth = 0.05; | |||
this.ctx.setLineDash([0.2, 0.1]); | |||
for (let node of this.selectedNodes) { | |||
this.ctx.beginPath(); | |||
@@ -562,7 +562,7 @@ | |||
} | |||
if (this.currentLink != null) { | |||
this.ctx.strokeStyle = "black"; | |||
this.ctx.strokeStyle = "brown"; | |||
let from = this.currentLink.from; | |||
let fromX = from.node.x; |
@@ -2,7 +2,7 @@ | |||
<h1>Game</h1> | |||
<ul> | |||
<li><a on:click={play} href="#/play">Start</a></li> | |||
<li><a on:click={play} href="#/play">Story Mode</a></li> | |||
<li><a href="#/sandbox">Sandbox Mode</a></li> | |||
</ul> | |||
</main> |
@@ -1,31 +1,54 @@ | |||
<main> | |||
<svelte:component this={element} /> | |||
<svelte:component this={currentElement} {...currentProps} /> | |||
</main> | |||
<script> | |||
import MainMenu from "./MainMenu.svelte"; | |||
import SceneSelector from "./SceneSelector.svelte"; | |||
import Sandbox from "./Sandbox.svelte"; | |||
export let routes; | |||
let routes = { | |||
"/": MainMenu, | |||
"/play": SceneSelector, | |||
"/sandbox": Sandbox, | |||
}; | |||
let routeMap = new Map(); | |||
for (let route of routes) { | |||
let [descriptor, el] = route; | |||
let parts = descriptor.split("/:"); | |||
let props = parts.slice(1); | |||
let base = parts[0] + "@" + props.length; | |||
let element = null; | |||
routeMap.set(base, {props, el}); | |||
} | |||
let currentElement = null; | |||
let currentProps = null; | |||
function route() { | |||
let path = location.hash.substr(1); | |||
if (path == "") { | |||
if (path[0] != "/") { | |||
console.error("Illegal path:", path); | |||
path = "/"; | |||
} | |||
if (routes[path] != null) { | |||
element = routes[path]; | |||
} else { | |||
element = routes["/"]; | |||
let parts = path.split("/").filter(el => el != ""); | |||
let base = "/" + parts.join("/") + "@0"; | |||
let propVals = []; | |||
let route = routeMap.get(base); | |||
// Check if we match anything, removing one path component every iteration | |||
while (route == null && parts.length > 0) { | |||
propVals.push(parts.pop()); | |||
base = "/" + parts.join("/") + "@" + propVals.length; | |||
route = routeMap.get(base); | |||
} | |||
if (route == null) { | |||
console.warn("No route matches", path); | |||
route = routeMap.get("/@0"); | |||
} | |||
let props = {}; | |||
for (let propName of route.props) { | |||
props[propName] = propVals.pop(); | |||
} | |||
currentElement = route.el; | |||
currentProps = props; | |||
} | |||
route(); |
@@ -4,7 +4,13 @@ | |||
<script> | |||
import Scene from './Scene.svelte'; | |||
import level01 from './levels/01-intro.js'; | |||
import * as levels from "./levels.js"; | |||
let level = level01; | |||
export let levelId = "001"; | |||
let level = levels["level" + levelId]; | |||
if (level == null) { | |||
console.warn("Unknown level ID:", levelId); | |||
level = levels["level001"]; | |||
} | |||
</script> |
@@ -0,0 +1 @@ | |||
export {default as level001} from "./levels/001-intro.js"; |
@@ -1,5 +1,17 @@ | |||
import MainMenu from "./MainMenu.svelte"; | |||
import SceneSelector from "./SceneSelector.svelte"; | |||
import Sandbox from "./Sandbox.svelte"; | |||
import Router from './Router.svelte'; | |||
export default new Router({ | |||
target: document.body, | |||
props: { | |||
routes: [ | |||
["/", MainMenu], | |||
["/play/:levelId", SceneSelector], | |||
["/play", SceneSelector], | |||
["/sandbox", Sandbox], | |||
], | |||
}, | |||
}); |