diff --git a/editor-solidjs/src/Controls.jsx b/editor-solidjs/src/Controls.jsx
new file mode 100644
index 0000000..42f042b
--- /dev/null
+++ b/editor-solidjs/src/Controls.jsx
@@ -0,0 +1,67 @@
+import {onMount, onCleanup} from "solid-js";
+
+import styles from "./RightPane.module.css";
+import input_styles from "./input/input.module.css";
+
+import {World} from "../stackline-wasm/stackline_wasm.js";
+
+export default function Controls(props) {
+ let {settings, setSettings, world, setWorld} = props;
+ let save_button, reload_button;
+
+ function save() {
+ console.log("save");
+ window.localStorage.setItem("world", JSON.stringify(world().serialize()));
+ }
+
+ function reload() {
+ let new_world = window.localStorage.getItem("world");
+ if (!new_world) return;
+
+ new_world = JSON.parse(new_world);
+ new_world = World.deserialize(new_world);
+
+ setWorld(world => {
+ if (world.ptr) {
+ world.free();
+ }
+
+ return new_world;
+ });
+ }
+
+ function key_down(evt) {
+ if (evt.code === "KeyS" && evt.ctrlKey) {
+ evt.preventDefault();
+
+ save_button.classList.add(input_styles.active);
+ save();
+ setTimeout(() => {
+ save_button.classList.remove(input_styles.active);
+ }, 200);
+ }
+
+ if (evt.code === "KeyR" && evt.ctrlKey) {
+ evt.preventDefault();
+
+ reload_button.classList.add(input_styles.active);
+ reload();
+ setTimeout(() => {
+ reload_button.classList.remove(input_styles.active);
+ }, 200);
+ }
+ }
+
+ onMount(() => {
+ window.addEventListener("keydown", key_down, {capture: true});
+ });
+
+ onCleanup(() => {
+ window.removeEventListener("keydown", key_down);
+ });
+
+ return
+
+
+
+}
diff --git a/editor-solidjs/src/Editor.jsx b/editor-solidjs/src/Editor.jsx
index 06bc64f..bf53039 100644
--- a/editor-solidjs/src/Editor.jsx
+++ b/editor-solidjs/src/Editor.jsx
@@ -1,13 +1,18 @@
import {
createSignal,
+ onMount,
+ onCleanup,
} from "solid-js";
import {createStore} from "solid-js/store";
+import Tabbed from "./Tabbed.jsx";
import styles from "./Editor.module.css";
+import styles_RightPane from "./RightPane.module.css";
import LeftPane from "./LeftPane.jsx";
import MiddlePane from "./MiddlePane.jsx";
-import RightPane from "./RightPane.jsx";
+import Properties from "./Properties.jsx";
+import Controls from "./Controls.jsx";
import {World, Pane} from "../stackline-wasm/stackline_wasm.js";
@@ -76,12 +81,12 @@ export default function Editor() {
}
function keydown(event) {
- if (event.code === "Space") {
+ if (event.code === "KeyS") {
if (running()) {
pause();
} else if (event.shiftKey) {
play();
- } else {
+ } else if (!event.ctrlKey) {
step();
}
} else if (event.code === "KeyG") {
@@ -90,18 +95,18 @@ export default function Editor() {
}
}
- function mount() {
+ onMount(() => {
window.addEventListener("keydown", keydown);
- }
+ });
- function cleanup() {
+ onCleanup(() => {
window.removeEventListener("keydown", keydown);
if (running()) {
clearInterval(running());
setRunning(null);
}
- }
+ });
let [left_pane, presets] = LeftPane({settings, setSettings});
@@ -136,10 +141,18 @@ export default function Editor() {
}
return (
-
+
);
}
diff --git a/editor-solidjs/src/RightPane.jsx b/editor-solidjs/src/Properties.jsx
similarity index 96%
rename from editor-solidjs/src/RightPane.jsx
rename to editor-solidjs/src/Properties.jsx
index 47146ef..b8afdd5 100644
--- a/editor-solidjs/src/RightPane.jsx
+++ b/editor-solidjs/src/Properties.jsx
@@ -72,8 +72,8 @@ export default function RightPane(props) {
}
}
- return (
-
Nothing selected}>
+ return (
+
Nothing selected} onCleanup={cleanup}>
Coordinates:
({settings.selected[0]}, {settings.selected[1]})
State:
diff --git a/editor-solidjs/src/RightPane.module.css b/editor-solidjs/src/RightPane.module.css
index 3928f99..d489986 100644
--- a/editor-solidjs/src/RightPane.module.css
+++ b/editor-solidjs/src/RightPane.module.css
@@ -3,12 +3,15 @@
max-width: 25vw;
background: #18181b;
color: #d0d0d0;
- padding: 1.5em 1em;
font-family: monospace;
font-size: 15px;
flex-shrink: 0;
}
+.Properties {
+ padding: 1.5em 1em;
+}
+
.gray, .empty {
color: #a0a0a0;
}
diff --git a/editor-solidjs/src/Tabbed.jsx b/editor-solidjs/src/Tabbed.jsx
new file mode 100644
index 0000000..c280aa6
--- /dev/null
+++ b/editor-solidjs/src/Tabbed.jsx
@@ -0,0 +1,28 @@
+import {createEffect, createSignal} from "solid-js";
+import styles from "./Tabbed.module.css";
+
+export default function Tabbed(props) {
+ let [current_tab, set_current_tab] = createSignal(0);
+
+ let children = props.children;
+
+ return
+
+
+
+ {(item, index) => {
+ return - {item}
+ }}
+
+
+
+}
diff --git a/editor-solidjs/src/Tabbed.module.css b/editor-solidjs/src/Tabbed.module.css
new file mode 100644
index 0000000..05e2c67
--- /dev/null
+++ b/editor-solidjs/src/Tabbed.module.css
@@ -0,0 +1,71 @@
+.Tabbed {
+ height: 25vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
+}
+
+.header {
+ display: flex;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: stretch;
+ align-items: flex-start;
+ width: 100%;
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ background: #242830;
+}
+
+.header > li {
+ box-sizing: border-box;
+ height: 2em;
+ padding: 0.5em;
+ color: #d0d0d0;
+ cursor: pointer;
+ user-select: none;
+ border-top: 1px solid var(--border-color);
+ border-left: 1px solid var(--border-color);
+ border-right: 1px solid var(--border-color);
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ --border-color: transparent;
+}
+
+.header > li:hover {
+ color: white;
+ --border-color: #d0d0d0;
+}
+
+.header > li.active {
+ color: #f0f0f0;
+ background: #18181b;
+ --border-color: white;
+}
+
+.header > li.active:hover {
+ color: white;
+}
+
+.container {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ flex-grow: 1;
+}
+
+.body:not(.active) {
+ display: none;
+}
+
+.body {
+ height: 100%;
+ padding: 1.5em 1em;
+ overflow-y: auto;
+ overflow-x: hidden;
+ box-sizing: border-box;
+}
diff --git a/editor-solidjs/src/input/input.module.css b/editor-solidjs/src/input/input.module.css
index c113f8c..e3c5daf 100644
--- a/editor-solidjs/src/input/input.module.css
+++ b/editor-solidjs/src/input/input.module.css
@@ -77,6 +77,8 @@
border-radius: 2px;
margin-left: 2px;
margin-right: 2px;
+ font-family: inherit;
+ font-size: inherit;
}
.button[disabled] {
@@ -91,6 +93,6 @@
border: 1px solid white;
}
-.button:not([disabled]):active {
+.button:not([disabled]):active, .button:not([dissabled]).active {
background: rgb(64, 68, 96, 1.0);
}