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 @@ Star Wars + -
-

+
+

+---------------------------- 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();