Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finishes dynamic resize for pseudo-tui #1

Merged
merged 1 commit into from
Oct 21, 2021
Merged

Finishes dynamic resize for pseudo-tui #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
/* define variables */
:root {
--background-color: #fff;
--tui-div-line-height: 20px;
}

/* remove body padding and color background */
Expand All @@ -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);
}
4 changes: 0 additions & 4 deletions home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
import './nim';
// Holds UI logic and communicates with nim.js
function coolio() {
document.getElementById('test').textContent = 'heyo';
}
7 changes: 5 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@
<link rel="stylesheet" href="home.css">
</head>
<body>
<span id="test">Simple text and button</span><br/>
<button onclick="coolio()">Click me</button>
<!-- Creates basic structure -->
<div id="tui">
<span id="tui-test">|</span>
</div>

<script src="tui.js"></script>
<script src="home.js"></script>
</body>
</html>
108 changes: 100 additions & 8 deletions tui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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", `<span x='${x}'>x</span>`)};

// 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", `<div y='${y}'>
${Array.from({length:x}, (_, i) => `<span x='${i}'>y</span>`).join('')}</div>`)};

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}]'`);
Expand All @@ -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}]'`);
Expand Down