diff --git a/docs/css/styles.css b/docs/css/styles.css
index c1938c2..d7c4793 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -7,7 +7,6 @@
font-style: normal;
}
-
html,
body {
overflow: hidden;
@@ -18,6 +17,12 @@ body {
}
#screen {
- white-space: pre-wrap;
- position: relative;
+ height: 100vh;
+ width: 100vw;
}
+
+.line {
+ white-space: pre;
+ position: relative;
+ margin: 0;
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index d2a3fd8..882c5ce 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,12 +8,13 @@
-
+
+
+---------------------------- Loading ----------------------------+
diff --git a/docs/scripts/fontsize.js b/docs/scripts/fontsize.js
new file mode 100644
index 0000000..e002147
--- /dev/null
+++ b/docs/scripts/fontsize.js
@@ -0,0 +1,22 @@
+async function adjustFontSize() {
+ const screenElem = document.getElementById('screen');
+ let fontSize = 10;
+ const screenWidth = window.innerWidth;
+
+ screenElem.style.fontSize = `${fontSize}px`;
+
+ while (screenElem.scrollWidth <= screenWidth && fontSize < 100) {
+ fontSize += 1;
+ screenElem.style.fontSize = `${fontSize}px`;
+ }
+
+ screenElem.style.fontSize = `${fontSize - 1}px`;
+}
+
+window.addEventListener('load', async () => {
+ await adjustFontSize();
+});
+
+window.addEventListener('resize', async () => {
+ await adjustFontSize();
+});
diff --git a/docs/scripts/main.js b/docs/scripts/main.js
index 94b213d..7149d0c 100644
--- a/docs/scripts/main.js
+++ b/docs/scripts/main.js
@@ -1,16 +1,30 @@
class Screen {
- constructor(text = '', duration = 0) {
- this.text = text;
- this.duration = duration;
+ constructor() {
+ this.duration;
+ this.lines = [];
+ }
+
+ get text() {
+ return this.lines.join('\n');
+ }
+ set text(value) {
+ this.lines = [];
+ for (const line of value.split('\n')) {
+ this.lines.push(line);
+ }
}
}
const lineQueue = [];
let isRunning = false;
-let screenElem = document.getElementById('screen');
+let screenElem;
+
+window.addEventListener('load', () => {
+ screenElem = document.getElementById('screen');
+ main();
+});
async function main() {
- // Assuming Data.StarWars is a string with your text data
const data = await getData();
const lines = data.split('\n');
if (!lines || lines.length === 0) return;
@@ -32,8 +46,12 @@ function loadScreens(lines) {
}
sb.push(line);
+
if (index === 13) {
- lineQueue.push(new Screen(sb.join('\n'), timeDuration * 70));
+ const screen = new Screen();
+ screen.duration = timeDuration * 70;
+ screen.lines = sb;
+ lineQueue.push(screen);
sb = [];
index = 0;
} else {
@@ -59,10 +77,17 @@ async function printScreens() {
}
function printScreen(screen) {
- if (!screen) return Promise.resolve();
- if (!screenElem)
- screenElem = document.getElementById('screen');
- screenElem.textContent = screen.text;
+ if (!screen)
+ return Promise.resolve();
+
+ let screensInnerHTML = '';
+ for (const line of screen.lines) {
+ screensInnerHTML += `
${line}
`;
+ }
+ screensInnerHTML += '
';
+
+ screenElem.innerHTML = screensInnerHTML;
+
return new Promise(resolve => setTimeout(resolve, screen.duration));
}
@@ -75,7 +100,3 @@ async function getData() {
console.error('There has been a problem with your fetch operation:', error);
}
}
-
-
-// Example usage
-main();