stear/example/connect.js

import l1 from "../stear/extra/Elements/loading1.js";
import alert from "../stear/extra/Pages/alert.js";
import showStatus from "../stear/extra/Pages/showStatus.js";
import { _ } from "../stear/main.js";
import { fadein, fadeout, wait } from "../stear/utils.js";

export const preRender = true;

export const render = ({},{}) => 
_({find:"main"},[
    _({type:"p",find:"text",style:{
        position: "absolute",
        minWidth: "90%",
        textAlign: "center",
        top: "25%",
        left: "50%",
        transform: "translate(-50%,-50%)",
    }}),
    _({style:{
        position: "absolute",
        left: "50%",
        top: "50%",
        transform: "translate(-50%, -50%)",
    }}, l1())
]);

export const call = async (stear, { find, resolve, render, call }, {name,id}) => {
    find.text._.innerText = "Connecting to: " + name + " (" + id + ")";
    await fadein(find.main._, 200, true);  
    //do connection
    await wait(1000);
    if (Math.random() > 0.25){
        
        /*await call(alert, { text: "success" });*/

        call(showStatus, { text: "Connected" });

        await fadeout(find.main._);
        return resolve(true);
    }else{

        call(showStatus, { text: "Error while Connecting to: "+name, color:"red" });

        /*await call(alert, { text: "error" });*/
        await fadeout(find.main._);
        return resolve(false);
    }
}