stear/example/menu/start.jsx

42 lines
1.2 KiB
React
Raw Normal View History

2022-11-03 22:12:53 +01:00
import { Stear, SWindow, _,s } from "../../stear/main.js";
import { fadein, fadeout, wait } from "../../stear/utils.js";
2022-11-02 14:45:56 +01:00
//import connect from "./connect.js";
import menu from "./menu";
2022-06-09 15:29:53 +02:00
export const preRender = true;
2022-08-13 17:52:45 +02:00
var wobel = Stear.addAnimation({
"0%": {
transform: "translate(-50%, -50%) scale(100%)"
},
"50%": {
transform: "translate(-50%, -50%) scale(110%)"
},
"100%": {
transform: "translate(-50%, -50%) scale(100%)"
}
});
2022-06-09 15:29:53 +02:00
2022-08-13 17:52:45 +02:00
export const call = (stear, { find, resolve, render, call, event }, args) => {
event.onloaded = async ()=>{
2022-06-09 15:29:53 +02:00
await wait(Math.max(1, 1000 - performance.now()));
2022-08-13 17:52:45 +02:00
await fadeout(find.main);
2022-10-09 16:36:35 +02:00
call(menu/*, { id: "123-456", name: "Device" }*/);
2022-06-09 15:29:53 +02:00
resolve();
2022-08-13 17:52:45 +02:00
}
2022-11-02 14:45:56 +01:00
return <div style={{zIndex:1000}} find="main">
<img src="logo.png" style={{
2022-11-02 19:09:14 +01:00
width: "75vw",
2022-11-02 14:45:56 +01:00
maxWidth: "75vh",
2022-11-02 19:09:14 +01:00
maxHeight: "75vh",
2022-11-02 14:45:56 +01:00
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
2022-11-02 19:09:14 +01:00
animation: `${wobel} 1s ease-in-out 0s infinite`,
2022-11-02 14:45:56 +01:00
}}/>
</div>;
2022-06-09 15:29:53 +02:00
}
2022-08-13 17:52:45 +02:00
export default new SWindow({ preRender: true, call, backgroundColor:"#dde"});