sam/Quill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

state test working, added random experimental html

Browse Source
This commit is contained in:
metacryst
2025-12-26 01:36:04 -06:00
parent b08e2767f6
commit c4560aba37
5 changed files with 302 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Test/Pages/home.js
View File

@@ -1,7 +0,0 @@
class Home extends Page {
render = () => {
}
}
export default Home

71
Test/state/state.test.js Normal file
View File

@@ -0,0 +1,71 @@
window.testSuites.push( class testState {
SimpleState() {
class Home extends Shadow {
state = {
pathname: "/"
}
render() {
VStack(() => {
p("hi")
.top(() => {return (this.state.pathname === "/" ? [11, vw] : [7, vw])})
})
.onAppear(() => {
this.state.pathname = "/asd"
})
}
}
register(Home, randomName("home"))
window.Home()
if(!($("p").style.top === "7vw")) return "state was not respeccted"
}
StateArrayPush() {
class Home extends Shadow {
state = {
logs: []
}
render() {
VStack(() => {
p("hi")
.fontSize(() => {return this.state.logs.length > 0 ? [2, em] : [1, em]})
})
.onAppear(() => {
this.state.logs = ["one", "two"]
})
}
}
register(Home, randomName("home"))
window.Home()
if(!($("p").style.fontSize === "2em")) return "state did not update!"
}
SimpleStack() {
class Home extends Shadow {
state = {
logs: []
}
render() {
VStack(() => {
let asd = this.state.logs.length * 2
p("hi")
.fontSize(asd, vw)
})
.onAppear(() => {
this.state.logs = ["one", "two"]
})
}
}
register(Home, randomName("home"))
window.Home()
if(!($("p").style.fontSize === "4vw")) return "state did not update!"
}
})

7
Test/test.html
View File

@@ -6,13 +6,6 @@
<link rel="stylesheet" href=""> <link rel="stylesheet" href="">
<script src="../index.js"></script> <script src="../index.js"></script>
<script src="test.js" type="module"></script> <script src="test.js" type="module"></script>
<script type="module">
import Home from "./Pages/home.js";
window.routes = {
"/Test": Home
}
</script>
</head> </head>
<body style="background: rgb(242, 194, 147)"> <body style="background: rgb(242, 194, 147)">

9
Test/test.js
View File

@@ -1,13 +1,7 @@
console.log("Tests initializing.") console.log("Tests initializing.")
window.testSuites = []; window.testSuites = [];
await import ("./Skeleton/parse.test.js") await import ("./state/state.test.js")
await import ("./Skeleton/init.test.js")
await import ("./Skeleton/observedobject.test.js")
await import ("./Skeleton/parserender.test.js")
await import ("./Skeleton/state.test.js")
await import ("./Element/stacks.test.js")
await import ("./Element/Group.test.js")
window.randomName = function randomName(prefix) { window.randomName = function randomName(prefix) {
const sanitizedPrefix = prefix.toLowerCase().replace(/[^a-z0-9]/g, ''); const sanitizedPrefix = prefix.toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -43,6 +37,7 @@ window.test = async function() {
let test = suiteContents[i]; let test = suiteContents[i];
if(typeof suite[test] === 'function' && test !== "constructor") { if(typeof suite[test] === 'function' && test !== "constructor") {
testNum++; testNum++;
document.body.innerHTML = ""
console.log(`%c${testNum}. ${test}`, "margin-top: 10px; border-top: 2px solid #e9c9a0; color: #e9c9a0; border-radius: 10px; padding: 10px;"); console.log(`%c${testNum}. ${test}`, "margin-top: 10px; border-top: 2px solid #e9c9a0; color: #e9c9a0; border-radius: 10px; padding: 10px;");
let fail; let fail;

229
experiment.html Normal file
View File

@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Canvas Text Editor</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #d8cbb0;
overflow: hidden;
}
canvas {
display: block;
background: #e7dcc6;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
function resize() {
const w = window.innerWidth;
const h = window.innerHeight;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.width = Math.floor(w * dpr);
canvas.height = Math.floor(h * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener("resize", resize);
resize();
/* =====================
Editor State
===================== */
const fontSize = 13;
const lineHeight = 20;
const padding = 20;
const font = `${fontSize}px monospace`;
let lines = [""];
let cursor = { line: 0, col: 0 };
let blink = true;
let blinkEnabled = true;
let typingTimeout = null;
/* =====================
Rendering
===================== */
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#631414";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = font;
ctx.textBaseline = "top";
ctx.fillStyle = "#d2531a";
for (let i = 0; i < lines.length; i++) {
ctx.fillText(
lines[i],
padding,
padding + i * lineHeight
);
}
if (blink) {
const before = lines[cursor.line].slice(0, cursor.col);
const x = padding + ctx.measureText(before).width;
const y = padding - 2 + cursor.line * lineHeight;
ctx.fillRect(x, y, 2, fontSize + 2);
}
}
/* =====================
Cursor Blink Logic
===================== */
setInterval(() => {
if (!blinkEnabled) return;
blink = !blink;
draw();
}, 500);
function stopBlinkWhileTyping() {
blinkEnabled = false;
blink = true;
draw();
clearTimeout(typingTimeout);
typingTimeout = setTimeout(() => {
blinkEnabled = true;
blink = true;
draw();
}, 600);
}
/* =====================
Helpers
===================== */
function clampCursor() {
cursor.line = Math.max(0, Math.min(cursor.line, lines.length - 1));
cursor.col = Math.max(0, Math.min(cursor.col, lines[cursor.line].length));
}
function insertText(text) {
const line = lines[cursor.line];
lines[cursor.line] =
line.slice(0, cursor.col) +
text +
line.slice(cursor.col);
cursor.col += text.length;
}
function newline() {
const line = lines[cursor.line];
lines[cursor.line] = line.slice(0, cursor.col);
lines.splice(cursor.line + 1, 0, line.slice(cursor.col));
cursor.line++;
cursor.col = 0;
}
function backspace() {
if (cursor.col > 0) {
const line = lines[cursor.line];
lines[cursor.line] =
line.slice(0, cursor.col - 1) +
line.slice(cursor.col);
cursor.col--;
} else if (cursor.line > 0) {
const prevLen = lines[cursor.line - 1].length;
lines[cursor.line - 1] += lines[cursor.line];
lines.splice(cursor.line, 1);
cursor.line--;
cursor.col = prevLen;
}
}
/* =====================
Keyboard Input
===================== */
window.addEventListener("keydown", (e) => {
if (e.metaKey || e.ctrlKey) return;
let changed = true;
switch (e.key) {
case "ArrowLeft": cursor.col--; break;
case "ArrowRight": cursor.col++; break;
case "ArrowUp": cursor.line--; break;
case "ArrowDown": cursor.line++; break;
case "Backspace": backspace(); e.preventDefault(); break;
case "Enter": newline(); e.preventDefault(); break;
case "Tab": insertText(" "); e.preventDefault(); break;
default:
if (e.key.length === 1) {
insertText(e.key);
e.preventDefault();
} else {
changed = false;
}
}
clampCursor();
if (changed) {
stopBlinkWhileTyping();
}
draw();
});
/* =====================
Mouse → Cursor
===================== */
canvas.addEventListener("mousedown", (e) => {
ctx.font = font;
const mx = e.offsetX - padding;
const my = e.offsetY - padding;
cursor.line = Math.max(
0,
Math.min(Math.floor(my / lineHeight), lines.length - 1)
);
let x = 0;
cursor.col = 0;
for (let i = 0; i < lines[cursor.line].length; i++) {
const w = ctx.measureText(lines[cursor.line][i]).width;
if (x + w / 2 >= mx) break;
x += w;
cursor.col++;
}
blink = true;
blinkEnabled = true;
draw();
});
/* =====================
Initial Draw
===================== */
draw();
</script>
</body>
</html>