parent
0b7596fc1c
commit
06040f2c89
@ -1,5 +1,77 @@
|
|||||||
|
import {createSignal} from "solid-js";
|
||||||
|
import {createStore} from "solid-js/store";
|
||||||
|
|
||||||
|
import styles from "./LeftPane.module.css";
|
||||||
|
|
||||||
|
import {available_tiles, Pane, FullTile} from "../stackline-wasm/stackline_wasm.js";
|
||||||
|
import TilePreset from "./TilePreset.jsx";
|
||||||
|
|
||||||
|
export const BASE_TILES = [];
|
||||||
|
|
||||||
|
export class Tile {
|
||||||
|
constructor(serialized, name) {
|
||||||
|
this.serialized = serialized;
|
||||||
|
this.name = name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function init() {
|
||||||
|
let pane = new Pane(1, 1);
|
||||||
|
BASE_TILES.push(new Tile(pane.serialize(), "Empty"));
|
||||||
|
pane.free();
|
||||||
|
|
||||||
|
for (let name of available_tiles().sort()) {
|
||||||
|
let pane = new Pane(1, 1);
|
||||||
|
|
||||||
|
let tile = new FullTile(name);
|
||||||
|
pane.set(0, 0, tile);
|
||||||
|
|
||||||
|
let serialized = pane.serialize();
|
||||||
|
|
||||||
|
pane.free();
|
||||||
|
BASE_TILES.push(new Tile(serialized, name));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default function LeftPane(props) {
|
export default function LeftPane(props) {
|
||||||
return (<div id="left-pane">
|
let [preset, setPresets] = createStore(BASE_TILES);
|
||||||
|
let {settings, setSettings} = props;
|
||||||
|
let left_pane;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
let width = document.body.clientWidth / 4;
|
||||||
|
if (width >= 390) {
|
||||||
|
width = 390;
|
||||||
|
} else if (width >= 255) {
|
||||||
|
width = 255;
|
||||||
|
} else {
|
||||||
|
width = 125;
|
||||||
|
}
|
||||||
|
|
||||||
|
left_pane.style.width = `${Math.round(width)}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_resize() {
|
||||||
|
setTimeout(() => {
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
resize();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove_resize() {
|
||||||
|
window.removeEventListener("resize", resize);
|
||||||
|
}
|
||||||
|
|
||||||
</div>);
|
return [<div class={styles.LeftPane_container}><div
|
||||||
|
class={styles.LeftPane}
|
||||||
|
ref={left_pane}
|
||||||
|
onMount={set_resize()}
|
||||||
|
onCleanup={remove_resize()}
|
||||||
|
>
|
||||||
|
<For each={BASE_TILES}>
|
||||||
|
{(item, index) => {
|
||||||
|
return <TilePreset pane={() => item.serialized} name={() => item.name} settings={settings} setSettings={setSettings} index={index} />;
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</div></div>, preset];
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,49 @@
|
|||||||
|
.LeftPane_container {
|
||||||
|
background: #18181b;
|
||||||
|
color: white;
|
||||||
|
padding: 1.5em 1em;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LeftPane {
|
||||||
|
width: 25vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, calc(8em));
|
||||||
|
grid-gap: 1em;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TilePreset {
|
||||||
|
width: calc(8em - 6px);
|
||||||
|
border: 1px solid #404040;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #d0d0d0;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TilePreset:hover {
|
||||||
|
border: 1px solid #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
font-family: "Stackline Classic", monospace;
|
||||||
|
font-size: 30px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TilePreset.picked {
|
||||||
|
color: white;
|
||||||
|
border: 4px solid #d0d0d0;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TilePreset.picked:hover {
|
||||||
|
border: 4px solid white;
|
||||||
|
}
|
@ -0,0 +1,37 @@
|
|||||||
|
import {createMemo, createUniqueId} from "solid-js";
|
||||||
|
|
||||||
|
import {Pane} from "../stackline-wasm/stackline_wasm.js";
|
||||||
|
|
||||||
|
import styles from "./LeftPane.module.css";
|
||||||
|
|
||||||
|
export default function TilePreset(props) {
|
||||||
|
let {settings, setSettings, index} = props;
|
||||||
|
|
||||||
|
let rendered = createMemo(() => {
|
||||||
|
let pane = Pane.deserialize(props.pane());
|
||||||
|
|
||||||
|
let text = pane.to_text();
|
||||||
|
let width = pane.width;
|
||||||
|
|
||||||
|
pane.free();
|
||||||
|
|
||||||
|
return {text, width};
|
||||||
|
});
|
||||||
|
|
||||||
|
let id = createUniqueId();
|
||||||
|
|
||||||
|
return (<div
|
||||||
|
class={styles.TilePreset}
|
||||||
|
class={settings.picked === index() ? styles.picked : ""}
|
||||||
|
onClick={() => {
|
||||||
|
if (settings.picked !== index()) {
|
||||||
|
setSettings("picked", index());
|
||||||
|
} else {
|
||||||
|
setSettings("picked", null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<pre class={styles.preview} style={{width: 30 * rendered().width + "px"}} id={id}>{rendered().text}</pre>
|
||||||
|
<div>{props.name}</div>
|
||||||
|
</div>);
|
||||||
|
}
|
Loading…
Reference in new issue