added font scaling

Der-Floh · May 29, 2024 · 7562365 · 7562365
1 parent ab218e6
commit 7562365
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 19 deletions.
diff --git 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;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -8,12 +8,13 @@
   <title>Star Wars</title>
   <link href="css/styles.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" />
+  <script type="text/javascript" src="scripts/fontsize.js"></script>
   <script type="text/javascript" src="scripts/main.js"></script>
 </head>
 
 <body>
-  <div id="starwars">
-    <p id="screen"></p>
+  <div id="screen">
+    <p id="size-line" class="line">+---------------------------- Loading ----------------------------+</p>
   </div>
 </body>
 

diff --git a/docs/scripts/fontsize.js 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
@@ -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 += `<p class="line">${line}</p>`;
+  }
+  screensInnerHTML += '<p id="size-line" class="line">                                                                   </p>';
+
+  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();