diff --git a/home.css b/home.css index 2f7ef36..9e70468 100644 --- a/home.css +++ b/home.css @@ -7,6 +7,7 @@ /* define variables */ :root { --background-color: #fff; + --tui-div-line-height: 20px; } /* remove body padding and color background */ @@ -15,7 +16,16 @@ body { background-color: var(--background-color); } -#test { - background-color: lightblue; +#tui { + overflow: hidden; +} + +#tui span { + font-size: 20px; + background-color: var(--background-color); font-family: monospace; +} + +#tui div { + line-height: var(--tui-div-line-height); } \ No newline at end of file diff --git a/home.js b/home.js index 3503de4..6268d7c 100644 --- a/home.js +++ b/home.js @@ -1,5 +1 @@ -import './nim'; // Holds UI logic and communicates with nim.js -function coolio() { - document.getElementById('test').textContent = 'heyo'; -} diff --git a/index.html b/index.html index 080c108..38b06de 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,12 @@ - Simple text and button
- + +
+ | +
+ \ No newline at end of file diff --git a/tui.js b/tui.js index 7650de6..f56a0cc 100644 --- a/tui.js +++ b/tui.js @@ -1,10 +1,100 @@ +// Semi-library for creating a tui-like webpage -// !!! THIS STUFF MIGHT NOT WORK !!! IT WAS WRITTEN IN CS50 IDE -var charGeo = {x: 1, y: 1} +// Get the size of a character +let charGeo = { + x: document.getElementById("tui-test").getBoundingClientRect().width, + y: document.getElementById("tui-test").getBoundingClientRect().height, +}; +// Remove the test element and update the CSS for the div +// I have no idea why I have to -1 for line height but there's 1px of whitespace if I don't +// Thank you CSS +document.getElementById("tui-test").remove() +document.querySelector(":root").style.setProperty("--tui-div-line-height", `${charGeo.y-1}px`) + +// Initially no characters +geo = {x: 0, y: 0}; + +// Recreates the screen intelligently taking into account the current size +function recreateScreen(x, y) { + + // Adjust xs + if (x != geo.x) { + + // Get action for xs + let action = x < geo.x ? + (x, div) => {div.querySelector(`[x='${x-1}']`).remove()} : + (x, div) => {div.insertAdjacentHTML("beforeend", `x`)}; + + // If we're removing extra, we only need to remove the earlier xs + let yMax = y < geo.y ? y : geo.y; + + for (let i = 0; i < yMax; i++) { + // Get the div + let div = document.querySelector(`[y='${i}']`); + + for (let j = 0; j < Math.abs(x - geo.x); j++) { + action(x > geo.x ? geo.x + j : geo.x - j, div); + } + } + } + + // Adjust ys + if (y != geo.y) { + + // Get action for ys + // When adding new ones, it just creates a string containing the div and all the spans + let action = y < geo.y ? + (y) => {document.querySelector(`[y='${y-1}']`).remove()} : + (y) => {document.getElementById("tui").insertAdjacentHTML("beforeend", `
+ ${Array.from({length:x}, (_, i) => `y`).join('')}
`)}; + + for (let i = 0; i < Math.abs(y - geo.y); i++) { + action(y > geo.y ? geo.y + i : geo.y - i); + } + } + + // Update geo.x with new values + geo = {x: x, y: y}; + return true; +} + +// Screen resize event listener and initial recreation +recreateScreen( + Math.floor(window.innerWidth / charGeo.x), + Math.floor(window.innerHeight / charGeo.y)); + +window.addEventListener("resize", () => { + + // Get new possible x and y geometries + let x = Math.floor(window.innerWidth / charGeo.x); + let y = Math.floor(window.innerHeight / charGeo.y); + + if (geo.x != x || geo.y != y) { + recreateScreen(x, y) + } +}) + + +/***************************** + * MAIN API * + *****************************/ + +/** + * Clears some number of characters in a horizontal line + * + * @param {int} x The x-position + * @param {int} y The y-position + * @param {String} length The number of characters you want to clear + */ function clearAt(x, y, length) { - // length is hw many characters to clear + // length is how many characters to clear } +/** + * Clears the screen to --background-color or the color specified + * + * @param {String} background_color The background color to clear to + */ function clearScreen(background_color) { for(let y = 0; y < charGeo.y; y++) { let row = document.querySelectorAll(`[y = '${y}]'`); @@ -18,11 +108,13 @@ function clearScreen(background_color) { } /** - * @param {int} x - * @param {int} y - * @param {String} text - * @param {String} color - * @param {String} background_color + * Draws a string at the target position + * + * @param {int} x The x-position + * @param {int} y The y-position + * @param {String} text The text to set it to + * @param {String} color The color in string form of the text + * @param {String} background_color The color in string form of the background */ function drawAt(x, y, text, color, background_color) { const row = document.querySelectorAll(`[y = '${y}]'`);