|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <main>
- {#if showIntro}
- <h1>{level.name}</h1>
-
- <div class="story">
- <p></p>
- {@html level.pages[page]}
- <p></p>
- </div>
-
- <div class="controls">
- {page + 1}/{level.pages.length}
- <button on:click={previous} disabled={page == 0}>Back</button>
- {#if page < level.pages.length - 1}
- <button on:click={next}>Next</button>
- {:else}
- <button on:click={begin}>Begin</button>
- {/if}
- <button on:click={begin} disabled={page == level.pages.length - 1}>Skip</button>
- </div>
- {:else}
- <CircuitSim components={components} nodes={nodes} />
- {/if}
- </main>
-
- <style>
- h1 {
- margin-bottom: 0px;
- text-align: center;
- }
-
- .story {
- max-width: 800px;
- margin: auto;
- }
-
- .story p:first-child {
- margin: 0px;
- }
-
- .controls {
- text-align: center;
- }
- </style>
-
- <script>
- export let level;
-
- import CircuitSim from './CircuitSim.svelte';
- import * as availableComponents from './circuit-components.js';
-
- let components = level.components.map(name => {
- if (availableComponents[name] == null) {
- throw new Error(name, "is not a valid component name");
- }
- return {name, ctor: availableComponents[name]};
- });
-
- let nodes = [];
- let y = 0;
- for (let name of level.inputs) {
- nodes.push(new availableComponents.Input(-4, y, name));
- y += 2;
- }
-
- y = 0;
- for (let name of level.outputs) {
- nodes.push(new availableComponents.Output(4, y, name));
- y += 2;
- }
-
- let page = 0;
- let showIntro = true;
-
- function previous() {
- if (page > 0) {
- page -= 1;
- }
- }
-
- function next() {
- if (page < level.pages.length - 1) {
- page += 1;
- }
- }
-
- function begin() {
- showIntro = false;
- }
- </script>
|