diff --git a/connect.js b/connect.js
new file mode 100644
index 0000000..8449996
--- /dev/null
+++ b/connect.js
@@ -0,0 +1,44 @@
+import { _ } from "./stear/main.js";
+import { fadein, fadeout, wait } from "./stear/utils.js";
+import "./waitStyle.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%)",
+ }},[
+ _({class:"box"},[
+ _(), _(), _()
+ ])
+ ])
+]);
+
+export const call = async (stear,{find,resolve,render},{id,name}) => {
+ find.text._.innerText = "Connecting to: " + name + " (" + id + ")";
+ await fadein(find.main._, 200, true);
+ //do connection
+ await wait(1000);
+ var success = Math.random()>0.25;
+ if(success){
+ alert("success");
+ await fadeout(find.main._);
+ return resolve(true);
+ }else{
+ alert("error");
+ await fadeout(find.main._);
+ return resolve(false);
+ }
+}
diff --git a/empty.js b/empty.js
new file mode 100644
index 0000000..b066ab2
--- /dev/null
+++ b/empty.js
@@ -0,0 +1,16 @@
+import { _ } from "./stear/main.js";
+import { fadein, fadeout, wait } from "./stear/utils.js";
+
+
+export const preRender = true;
+
+export const render = ({}, {}) => {
+
+ return _({}, [
+
+ ]);
+}
+
+export const call = async (stear, { find, resolve, render }, { }) => {
+
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..41411e9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Stear
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..f54281b
--- /dev/null
+++ b/index.js
@@ -0,0 +1,28 @@
+import { Stear, SWindow } from "./stear/main.js";
+
+import * as connect from "./connect.js";
+import * as start from "./start.js";
+
+
+var stear = new Stear(document.querySelector("#stear"));
+
+stear.style({
+ backgroundColor: "#dde",
+ fontFamily: "Helvetica Neue",
+ fontWeight: "lighter",
+ fontSize: "0.9em",
+ color: "#2a2a2a",
+});
+
+stear.addElement("connect", new SWindow(connect));
+stear.addElement("start", new SWindow(start));
+
+stear.call(stear.g("start"), {});
+
+setTimeout(()=>{
+ document.dispatchEvent(new Event("deviceready"));
+},10);
+
+
+
+window.s = stear;
\ No newline at end of file
diff --git a/start.js b/start.js
new file mode 100644
index 0000000..74e005f
--- /dev/null
+++ b/start.js
@@ -0,0 +1,41 @@
+import { Stear, _ } from "./stear/main.js";
+import { fadein, fadeout, wait } from "./stear/utils.js";
+
+export const preRender = true;
+
+export const render = ({},{}) => {
+ 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%)"
+ }
+ });
+ console.log(wobel)
+
+ return _({style:{zindex:1000},find:"main"}, [
+ _({type:"img",src:"http://localhost:82/images/logo.png",style:{
+ width: "80vw",
+ maxWidth: "75vh",
+ position: "absolute",
+ left: "50%",
+ top: "50%",
+ transform: "translate(-50%, -50%)",
+ animation: `${wobel} 2s ease-in-out 0s infinite`,
+
+ }})
+ ]);
+}
+
+export const call = (stear, { find, resolve, render, call }, args) => {
+ document.addEventListener('deviceready', async ()=>{
+ await wait(Math.max(1, 1000 - performance.now()));
+ await fadeout(find.main._);
+ call(stear.g("connect"),{id:"id",name:"name"});
+ resolve();
+ }, false);
+}
diff --git a/stear/main.js b/stear/main.js
new file mode 100644
index 0000000..08a4293
--- /dev/null
+++ b/stear/main.js
@@ -0,0 +1,214 @@
+var counter = 0;
+
+var globalStyle = document.createElement("style");
+document.head.appendChild(globalStyle);
+
+String.prototype.map = Array.prototype.map;
+
+function toCssAttr(txt){
+ return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join("");
+}
+
+export class Stear{
+
+ #find = {};
+ elem;
+ #childs = {};
+
+ constructor(elem){
+ this.elem = elem;
+ elem.style.position="relative";
+ }
+
+ style(css){
+ Object.entries(css).forEach(([k, d]) => {
+ this.elem.style[k] = d;
+ });
+ }
+
+ addElement (id,elem){
+ if(!(elem instanceof SFrame))throw new TypeError("Cannot add Element not extending from SFrame");
+ this.#childs[id] = elem;
+ }
+
+ getElement (id) {
+ return this.g(id);
+ }
+
+ g(id){
+ return this.#childs[id];
+ }
+
+ async call (elem, args, layer = 1){
+ return await elem.call(this, args, layer);
+ }
+
+ static addGlobalStyleText(text){
+ globalStyle.innerHTML+="\n"+text;
+ }
+
+ static addAnimation(steps, name = "animation_" + counter++){
+ Stear.addGlobalStyleText(`@keyframes ${name} {
+${
+Object.entries(steps).map(([k,d])=>
+` ${k} {
+${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
+ }`).join("\n")
+}
+}`);
+
+ return name;
+ }
+ static addGlobalStyleJSON(json, name = ".class_" + counter++){
+ Stear.addGlobalStyleText(`
+${name} {
+${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
+}
+ `)
+ return name;
+ }
+}
+
+export class SFrame{
+ #preRender;
+ #render;
+ #call;
+
+ #lastRender;
+ constructor({ preRender, render, call }){
+ this.#preRender = preRender;
+ this.#render = render;
+ this.#call = call;
+ if(this.#preRender){
+ this.render();
+ }
+ }
+
+ render(args={}){
+ this.#lastRender = this.#render({}, args);
+ this.#lastRender.render;
+ return this.#lastRender;
+ }
+
+ async call(stear, args, layer = 1){
+ stear.elem.appendChild(this.#lastRender._);
+ this.#lastRender._.style.zIndex = layer;
+ var find = (this.#lastRender?.find) ?? {};
+ return new Promise((res,rej)=>{
+ this.#call(stear,{
+ find,
+ render: (args) => {
+ this.render(args);
+ for (var member in find) delete find[member];
+ Object.assign(find, (this.#lastRender?.find) ?? {});
+ return find;
+ },
+ resolve: (r)=>{
+ stear.elem.removeChild(this.#lastRender._);
+ res(r);
+ },
+ call: (elem, args)=>{
+ return stear.call(elem,args,layer+1);
+ }
+ }, args);
+ });
+ }
+
+}
+
+export class SWindow extends SFrame{
+
+ #Frame
+
+ constructor({ preRender, render, call }){
+ var Frame = _({
+ style: {
+ top:"0px",
+ left:"0px",
+ position: "absolute",
+ height: "100%",
+ width: "100%",
+ display: "block"
+ }
+ }, []);
+ super({ preRender, render:(settings,args)=>{
+ Frame.childs = [render(settings, args)];
+ return Frame;
+ }, call });
+ this.#Frame = Frame;
+ }
+
+}
+
+export class class_ {
+ #elem;
+ #childs;
+ #find;
+
+ constructor(settings,childs){
+ this.#elem = document.createElement(settings.type ?? "div");
+ this.#childs = childs;
+ var keys = Object.keys(settings);
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i];
+ if(key == "type"){} else if (key == "style"){
+ Object.entries(settings[key]).forEach(([k,d])=>{
+ this.#elem.style[k] = d;
+ });
+ } else if (key == "find"){
+ this.#find = settings[key];
+ }else{
+ this.#elem.setAttribute(key,settings[key]);
+ }
+ }
+ }
+
+ set childs(childs){
+ this.#childs = childs;
+ }
+
+ set settings(settings){
+ var keys = Object.keys(settings);
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i];
+ if (key == "type") { } else if (key == "style") {
+ Object.entries(settings[key]).forEach(([k, d]) => {
+ this.#elem.style[k] = d;
+ });
+ } else if (key == "find") {
+ this.#find = settings[key];
+ } else {
+ this.#elem.setAttribute(key, settings[key]);
+ }
+ }
+ }
+
+ get render (){
+ this.#elem.innerHTML = "";
+ for (let i = 0; i < this.#childs.length; i++) {
+ const elem = this.#childs[i];
+ if(typeof elem == "string"){
+ this.#elem.appendChild(document.createTextNode(elem));
+ }else{
+ this.#elem.appendChild(elem.render);
+ }
+ }
+ return this.#elem;
+ }
+
+ get _ (){
+ return this.#elem;
+ }
+
+ get find (){
+ var out = {};
+ this.#childs.forEach(d=>{
+ Object.assign(out,d.find);
+ });
+ if (this.#find) out[this.#find]=this;
+ return out;
+ }
+}
+export const _ = (settings = {}, childs = []) => new class_(settings,childs);
+
+
diff --git a/stear/utils.js b/stear/utils.js
new file mode 100644
index 0000000..a029291
--- /dev/null
+++ b/stear/utils.js
@@ -0,0 +1,39 @@
+export const wait = (ms) => {
+ return new Promise((res, rej) => {
+ setTimeout(res, ms);
+ });
+}
+
+export const fadeout = async (elems, ms = 200, force = false) => {
+ if (!Array.isArray(elems)) elems = [elems];
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].style.transition = `opacity ${ms}ms`;
+ if(force){
+ elems[i].style.opacity = "1";
+ elems[i].style.display = "";
+ }
+ }
+ await wait(10);
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].style.opacity = "0";
+ }
+ await wait(ms);
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].style.display = "none";
+ }
+}
+export const fadein = async (elems, ms = 200, force = false) => {
+ if (!Array.isArray(elems)) elems = [elems];
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].style.transition = `opacity ${ms}ms`;
+ elems[i].style.display = "";
+ if (force) {
+ elems[i].style.opacity = "0";
+ }
+ }
+ await wait(10);
+ for (let i = 0; i < elems.length; i++) {
+ elems[i].style.opacity = "1";
+ }
+ await wait(ms);
+}
diff --git a/waitStyle.js b/waitStyle.js
new file mode 100644
index 0000000..1edb1b6
--- /dev/null
+++ b/waitStyle.js
@@ -0,0 +1,42 @@
+import { Stear } from "./stear/main.js";
+
+var animation = Stear.addAnimation({
+ "0%": {left: "4%",top: "4%"},
+ "8.33%": {left: "52%",top: "4%"},
+ "25%": {left: "52%",top: "4%"},
+ "33.33%": {left: "52%",top: "52%"},
+ "50%": {left: "52%",top: "52%"},
+ "58.33%": {left: "4%",top: "52%"},
+ "75%": {left: "4%",top: "52%"},
+ "83.33%": {left: "4%",top: "4%"},
+ "100%": {left: "4%",top: "4%"},
+});
+
+Stear.addGlobalStyleJSON({
+ display: "inline-block",
+ position: "relative",
+ width: "80px",
+ height: "80px",
+},".box");
+
+Stear.addGlobalStyleJSON({
+ position: "absolute",
+ height: "44%",
+ width: "44%",
+ borderRadius: "25%",
+ backgroundColor: "#000",
+ animation: `${animation} 6s linear infinite`,
+},".box div");
+
+Stear.addGlobalStyleJSON({
+ animationDelay: "0s"
+}, ".box div:nth-child(1)");
+
+Stear.addGlobalStyleJSON({
+ animationDelay: "-2s"
+}, ".box div:nth-child(2)");
+
+Stear.addGlobalStyleJSON({
+ animationDelay: "-4s"
+}, ".box div:nth-child(3)");
+