You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
5.2 KiB
120 lines
5.2 KiB
2 years ago
|
import {createEffect} from "solid-js";
|
||
|
|
|
||
|
|
import Direction from "./input/Direction.jsx";
|
||
|
|
import Value from "./input/Value.jsx";
|
||
|
|
|
||
|
|
import styles from "./RightPane.module.css";
|
||
|
|
import input_styles from "./input/input.module.css";
|
||
|
|
|
||
|
|
|
||
|
|
export const DIRECTIONS = [
|
||
|
|
"Up",
|
||
|
|
"Right",
|
||
|
|
"Down",
|
||
|
|
"Left"
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Signal(props) {
|
||
|
|
let {signal, setSignal} = props;
|
||
|
|
|
||
|
|
return (<Show when={signal()} fallback={<i class={styles.gray}>No signal</i>}>
|
||
|
|
<div class={styles.indent}>
|
||
|
|
<h3 class={styles.h3}>Direction:</h3>
|
||
|
|
<Show when={setSignal} fallback={signal()?.direction}>
|
||
|
|
<Direction value={() => signal()?.direction} setValue={(dir) => {
|
||
|
|
setSignal((signal) => {
|
||
|
|
signal.direction = dir;
|
||
|
|
return signal;
|
||
|
|
});
|
||
|
|
}} />
|
||
|
|
</Show>
|
||
|
|
<h3 class={styles.h3}>Stack:</h3>
|
||
|
|
<ol class={styles.stack}>
|
||
|
|
<For each={signal()?.stack} fallback={<i class={styles.empty}>(Empty)</i>}>
|
||
|
|
{(item, index) => {
|
||
|
|
let setValue = setSignal ? (new_value) => {
|
||
|
|
if (typeof new_value === "function") {
|
||
|
|
new_value = new_value(item);
|
||
|
|
}
|
||
|
|
setSignal((signal) => {
|
||
|
|
signal.stack[index()] = new_value;
|
||
|
|
return signal;
|
||
|
|
});
|
||
|
|
} : null;
|
||
|
|
|
||
|
|
return <li><Value value={() => item} setValue={setValue} /></li>;
|
||
|
|
|
||
|
|
// if (setSignal) {
|
||
|
|
// if ("Number" in item) {
|
||
|
|
// // Return number input for the `index()`-th element
|
||
|
|
// return <li>
|
||
|
|
// <input
|
||
|
|
// class={input_styles.input}
|
||
|
|
// type="number"
|
||
|
|
// value={item["Number"]}
|
||
|
|
// onChange={(evt) => {
|
||
|
|
// console.log("input");
|
||
|
|
// setSignal((signal) => {
|
||
|
|
// signal.stack[index()] = {"Number": +evt.currentTarget.value};
|
||
|
|
// return signal;
|
||
|
|
// });
|
||
|
|
// }}
|
||
|
|
// />
|
||
|
|
// </li>;
|
||
|
|
// } else if ("String" in item) {
|
||
|
|
// // Return string input for the `index()`-th element
|
||
|
|
// return <li>"
|
||
|
|
// <input
|
||
|
|
// class={input_styles.input}
|
||
|
|
// type="string"
|
||
|
|
// value={item["String"]}
|
||
|
|
// onChange={(evt) => {
|
||
|
|
// setSignal((signal) => {
|
||
|
|
// signal.stack[index()] = {"String": evt.currentTarget.value};
|
||
|
|
// return signal;
|
||
|
|
// });
|
||
|
|
// }}
|
||
|
|
// />
|
||
|
|
// "</li>;
|
||
|
|
// }
|
||
|
|
// } else {
|
||
|
|
// if (item?.["Number"]) {
|
||
|
|
// return <li>{item["Number"]}</li>;
|
||
|
|
// } else if (item?.["String"]) {
|
||
|
|
// return <li>"{item["String"]}"</li>;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}}
|
||
|
|
</For>
|
||
|
|
<Show when={setSignal}>
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
class={input_styles.button}
|
||
|
|
aria-label="Remove a value from the stack"
|
||
|
|
title="Pop value"
|
||
|
|
disabled={!signal() || signal().stack.length == 0}
|
||
|
|
onClick={(evt) => {
|
||
|
|
setSignal((signal) => {
|
||
|
|
signal.stack.pop();
|
||
|
|
return signal;
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>-</button>
|
||
|
|
<button
|
||
|
|
class={input_styles.button}
|
||
|
|
aria-label="Add a value to the stack"
|
||
|
|
title="Push value"
|
||
|
|
onClick={(evt) => {
|
||
|
|
setSignal((signal) => {
|
||
|
|
signal.stack.push({"Number": 0.0});
|
||
|
|
return signal;
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>+</button>
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</Show>);
|
||
|
|
}
|