82 lines
3.9 KiB
JavaScript
82 lines
3.9 KiB
JavaScript
import * as color from "../js/color.js";
|
|
import { Stear, SWindow, _, s } from "../stear/main.js";
|
|
import { fadein } from "../stear/utils.js";
|
|
import led from "./leds_buttons/leds_buttons.jsx";
|
|
import remote from "./remote/remote.jsx";
|
|
import system from "./system/system.jsx";
|
|
|
|
const pool = Stear.addLanguagePool("home");
|
|
const connected = pool.add("conncted", "Connected to: {}");
|
|
const connect = pool.add("connect", "Connect");
|
|
const connectionlost = pool.add("connectionlost", "Connection lost from: {}");
|
|
|
|
export default new SWindow({
|
|
call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
|
|
|
|
event.onloaded = () => {
|
|
fadein(find.main, 200, true);
|
|
}
|
|
|
|
let mode = 0;
|
|
let window = 0;
|
|
|
|
let wins = [
|
|
include(system),
|
|
include(remote),
|
|
include(led),
|
|
];
|
|
|
|
return <div style={{ display: 'flex', flexDirection: "column", height: "100%", alignItems: "center" }}>
|
|
<div style={{ backgroundColor: color.mainBar, width: "100%", height: "5rem", display: "flex",alignItems: "center", boxShadow: "rgba(50, 50, 50, 0.2) 0px 8px 24px"}} find="menu">
|
|
<div style={{ display: "flex", height: "100%", flexDirection: "row", alignItems: "center", gap: "0.5rem", paddingLeft: "0.5rem", width:"100%" }}>
|
|
{() => {
|
|
return ["#0f0", "#00f", "#ff0"].map((d, i) => {
|
|
return <div style={
|
|
{ height: "2rem",
|
|
width: "2rem",
|
|
borderRadius: "2rem",
|
|
backgroundColor: d,
|
|
border: "5px solid " + (mode == i ? color.modeInUse() : color.modeNotInUse()) }
|
|
} event={{
|
|
pointerdown: () => {
|
|
mode = i;
|
|
find.menu.rerender();
|
|
}
|
|
}}></div>;
|
|
});
|
|
}}
|
|
</div>
|
|
<label style={{width:"100%",textAlign:"center",fontSize:"2rem"}}>JuPad</label>
|
|
<div style={{width:"100%",alignItems:"center",paddingRight:"0.5rem", display:"flex",flexDirection:"row-reverse", gap:"0.5rem"}}>
|
|
{() => {
|
|
return ["#eee", "#00f", "linear-gradient(90deg,rgba(255, 0, 0, 1) 0%,rgba(255, 154, 0, 1) 10%,rgba(208, 222, 33, 1) 20%,rgba(79, 220, 74, 1) 30%,rgba(63, 218, 216, 1) 40%,rgba(47, 201, 226, 1) 50%,rgba(28, 127, 238, 1) 60%,rgba(95, 21, 242, 1) 70%,rgba(186, 12, 248, 1) 80%,rgba(251, 7, 217, 1) 90%,rgba(255, 0, 0, 1) 100%)"].map((d, i) => {
|
|
return <div style={
|
|
{ height: "2rem",
|
|
width: "2rem",
|
|
borderRadius: "1rem",
|
|
background: d,
|
|
border: "4px solid " + (window == i ? color.modeInUse() : color.modeNotInUse()) }
|
|
} event={{
|
|
pointerdown: () => {
|
|
window = i;
|
|
find.main.rerender();
|
|
}
|
|
}}></div>;
|
|
});
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div style={{ width: "100%", height: "100%", position: "relative"}}>
|
|
{()=>{
|
|
wins[window].opts.render();
|
|
return wins[window].render({
|
|
style: {
|
|
height: "100%",
|
|
width: "100%"
|
|
}
|
|
});
|
|
}}
|
|
</div>
|
|
</div>;
|
|
}, backgroundColor: color.bg
|
|
});
|