📕

function dom(tar) {
    return document.getElementById(tar)
}
//we need to make a another lg command or a lg mode
// because sometiems we want to output to the dom instead of the console
function lg(tar) {
    if (tar==undefined) {
      throw "lg tar cant be undefined"
    }
    console.log("jamessteele",tar)
    return tar
}
function lg2(a,b) {
    if (a==undefined) {
      throw "lg2 target cant be undefined"
    }
    console.log(a,b)
    return b
}
// if pOs is detected its replaced into "position:absolute;"
// if youre going to use shortform always set the background last
// this is an example of shortform
// 25s25o#900c@
//todo make something to make like a signifier for incoming innerhtml
//todo make something so that div$ gets ONLY RECOGNISED AS DIV
function ap(tar,style) {
	let ap = []
    style = JSON.parse(JSON.stringify(style).replaceAll("pOs","position:absolute;"))
	let subject = dom(tar)
    let bassty;
    bassty = subject.style.csstext
    let stylefromshort = ""
    if (style.join("").includes("@")) {
        lg("in")
        let alive = true
        let tick = 0
        let nocrash = 255
        let op = ""
        let shortformspot = (
            style.filter(/./.test, /\@/)[0]
        )
        let rep = [
            "w","width:numberpx;",
            "h","height:numberpx;",
            "s","width:numberpx;height:numberpx;",
            "l","left:numberpx;",
            "t","top:numberpx;",
            "o","left:numberpx;top:numberpx;",
            "c","background:numberpx;"
        ]
        let repq="";
        rep.forEach(function (val,ind,arr) {
            if (ind%2==0) {
                repq+=val
            }
        })
        lg(repq)
        let opn = ""
        lg2("this is what were working with:",shortformspot)
        if (/[oltbr]/g.test(shortformspot)) {
            op+="position:absolute;"
        }
        lg(shortformspot)
        while (alive && nocrash>0) {
            let s = shortformspot[tick]
            //lg2("this is s",s)
            if (/[0-9]/g.test(s) || s=="#" || /[ABCDEF]/g.test(s)) {
                opn+=s
                lg("outcome1")
            } else if (repq.includes(s)) {
                lg("outcome2")
                // i returns the key not the number.
                for (i in rep) {
                    lg2(i, typeof i)
                    lg2(rep[Number(i)],s)
                    if (rep[Number(i)]==s) {
                        op+=rep[Number(i)+1].replaceAll(
                            "number",opn
                        )
                        opn=""
                        break;
                    }
                    lg({opn,op,tick})
                }
            } else {
                lg("outcome3")
                alive = false
                break;
            }
            lg({opn,op,tick})
            nocrash--
            tick++
        }
        let res1 = op.slice(0,op.indexOf("#"))
        let res2 = op.slice(op.indexOf("#")).replaceAll("px","")
        stylefromshort = res1+res2
        lg(stylefromshort)
    }
    if (subject.style.csstext==undefined) {
        bassty=""
    }
    if (style[0].includes("@") && style.length==1) {
        bassty = stylefromshort
    } else {
        if (style.length==1) {
            bassty += style[0]
        } else {
            for (styleelement of style) {
                if (/\:/g.test(styleelement)) {
                    ap.push(styleelement)
                } else if (/\=/g.test(styleelement)) {
                    let li = styleelement.split("=")
                    subject.setAttribute(li[0],li[1])
                }
            }
            bassty += ap.join(";")
        }
        bassty += ";"+stylefromshort
    }
    subject.style.cssText = bassty
	return subject
}
var libidAt = 0
function libgetid() {
	libidAt++
	return libidAt
}
function rem(tar,pare) {
    var res = tar
    if (pare==null) {
        res = dom(tar)
    } else {
        res = tar.parentElement
    }
    res.parentElement.removeChild(res)
}
//if you put a dollar sign in the name then it gets replaced with the latest id
function cre(pare,name,kind) {
	let opkind = "div"
    let kindlist = "div canvas img svg span p"
    if (kindlist.includes(name)) {
        opkind = name
    }
	let creid= libgetid()
	let formparent = "none"
	if (kind!=null) {
		opkind = kind
	}
	if (name!=null) {
		creid= name.replace(/\$/g,libgetid())
	}
	if (name==null) {
		lg("passing on")
		creid= libgetid()+"hei"
	}
	if (pare!=null) {
	  formparent = dom(pare)
	} else {
	  formparent = document.body
      if (formparent==null) {
        throw "you didint define document body";
      }
	}
	let box = document.createElement(opkind)
    try {
	    formparent.appendChild(box)
    } catch {
        throw `hey bro, you didint make anything named '${pare}' beforehand`
    }
	if (kind=="button") {
		box.textContent = creid.replace(/\_/g," ")
		box.setAttribute("onclick",creid+"buttonaction()")
	}
	box.id=creid
	
	return box
}
var twin = {
   degrees:function(radians)
    {
      var pi = Math.PI;
      return radians * (180/pi);
    },
    radians:function (degrees) {
        var TAU = 2 * Math.PI;
        return degrees * TAU / 360;
    },
    // ok axis means if you want to output the x or the y value
	angmov:function(angle,dist,axis) {
        if (axis==0) {
            lg("x:"+dist)
            return dist*Math.cos(twin.radians(angle))
        }
        if (axis==1) {
            lg("y:"+dist)
            return dist*Math.sin(twin.radians(angle))
        }
    },
    pytha:function(x,y) {
        return Math.sqrt(Math.pow(x,2)+Math.pow(y,2))
    },
    //btw , rememeber. atan2 accepts the aguments like
    // Y and then X
    atan2:function(x,y){
        return twin.degrees(Math.atan2(x,y))
    },
}

let predoc = ""
function docuadd(tar) {
    predoc += tar
}
function docuset() {
    document.body.innerHTML = predoc
}