Change to Node-based system

README.md

@@ -1,39 +1,82 @@
-# HyperFlipBX90000Dominator
-A stand-alone webpage that flips through the glyphs of a font. The page uses `opentype.js` to achieve this, it is in the header so no internet connection is needed.
+# The BX90000 Font Presenter Super Suite
+This is a collection of three webpages that enables you to present fonts in three different ways.
+
+## HyperFlip BX90000 Dominator
+Will animate single glyphs from the font you drop on the window.
+
+## WordMaster BX90000 Excelsior
+Will animate words rendered in the font you drop on the window.
+
+## GalleyProof BX90000 Zenith
+Will render a column of text in the font you drop on the window.
 
 ## License
 Like the included `opentype.js` this software is licensed under the MIT license.
 
-##  How to use the HyperFlip BX 90000 Dominator
-Open the HTML page in a browser and drop a font on it. It will read OTF or TTF, static and variable.
-![Open the HTML page](images/1.png)
+## Requirements
+These pages needs to be served with the `http_server` webserver component from Node, so this must be installed before using these pages. The `serve.sh` script will detect and alert you if this component is not installed.
+
+The `serve.sh` and `serve.bat` scripts are configured to find and use the Chrome browser.
 
-## Keyboard shortcuts
-Pressing the `Space` key on your keyboard pauses/resumes the animation. Pressing either `arrow left` or `h` moves ten glyphs back, and pressing either `arrow right` or `l` moves ten glyphs forward. Pressing either `arrow up` or `k` moves one glyph forward, and pressing either `arrow down` or `j` will move one glyph back.
+##  How to use the BX90000 Font Presenter Super Suite
+Execute the `serve.sh` (Linux or MacOS) or `serve.bat` (Windows). These scripts will check for the presence of the `http_server`, warn you if it isn’t installed, otherwise proceed with detecting your operating system, finding the Chrome executable, and open the `index.html` in an Incognito window.
+![The BX90000 Font Presenter Super Suite](images/initial_page.png)
 
-**HyperFlipBX90000Dominator** will display the most common axes present in your font, if your font is variable.
-![Adjust the values](images/3.png)
+Click on one of the three options.
 
-The control panel will become invisible when you move out your mouse cursor.
-![Clean interface](images/4.png)
+## HyperFlip BX90000 Dominator
+Will animate single glyphs from the font you drop on the window.
+![The HyperFlip BX90000 Dominator](images/hyperflip.png)
 
-If you like a negative rendering there is button for that.
-![Colour toggle](images/5.png)
+### Options
+- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
+- Pause/continue the glyph animation by pressing your `space` key
+- Jump ten glyphs forward by pressing the `l` or `▶︎` key
+- Jump one glyph forward by pressing the `k` or `▲` key
+- Jump ten glyphs backwards by pressing the `h` or `◀︎` key
+- Jump one glyph backwards by pressing the `j` or `▼` key
 
-If you want to see some information about the font there is a button for that.
-![Font info](images/font-info.png)
+The page has a control panel that will appear when you hover the mouse over the bottom of the page
+- Show font info
+- Show glyph info
+- Show a metrics grid overlay
+- Swap colours
+- Randomise glyph order
+- Adjust the font size
+- Adjust the vertical position
+- Adjust the animation delay
+- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)
 
-If you want to see some information about the currently displayed glyph there is a button for that.
-![Glyph info](images/glyph-info.png)
+## WordMaster BX90000 Excelsior
+Will animate words rendered in the font you drop on the window.
+![The WordMaster BX90000 Excelsior](images/wordmaster.png)
 
-If you want to see the vertical and horizontal metrics there is a button for that.
-![Glyph info](images/metrics.png)
+### Options
+- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
+- Pause/continue the glyph animation by pressing your `space` key
 
-In the upper right corner there is a `Fullscreen` button. It full-screens **HyperFlipBX90000Dominator**.
+The page has a control panel that will appear when you hover the mouse over the bottom of the page
+- Show font info
+- Swap colours
+- Toggle Stylistic Alternates and small-caps
+- Adjust the font size
+- Adjust the animation delay
+- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)
 
-In the control panel there is a `Randomize glyph order` button. It randomises the glyph order. Press it again and it reverts to sequential glyph order.
+## GalleyProof BX90000 Zenith
+Will render a column of text in the font you drop on the window.
+![The GalleyProof BX90000 Zenith](images/galleyproof.png)
 
-Once you have found a setting you like you can let it animate.
-![Animate](images/animation.gif)
+### Options
+- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
 
-Yes I will be accepting pull requests. Don’t ask me for new features, make them yourself and pull request me.
+The page has a control panel that will appear when you hover the mouse over the bottom of the page
+- Show font info
+- Swap colours
+- Toggle Stylistic Alternates and small-caps
+- Adjust the font size
+- Adjust the leading
+- Adjust the column width
+- Adjust the letter spacing
+- Adjust the word spacing
+- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)

http_root/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="/favicon.ico" sizes="32x32">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-    <title>The BX90000 Super Suite</title>
+    <title>The BX90000 Font Presenter Super Suite</title>
     <!-- Import our modular JavaScript as a module -->
     <script type="module" src="./shared/index.js"></script>
     <!-- Original CSS remains the same -->

http_root/wordmaster/WordMaster.js

@@ -77,7 +77,6 @@ class WordAnimator {
   updateFeatures(featureString) {
     if (this.container.firstChild) {
       this.container.firstChild.style.fontFeatureSettings = featureString;
-      // Re-fit text since some features might affect word width
       this.textFitter.fitText(this.container.firstChild, this.container);
     }
   }
@@ -116,33 +115,30 @@ class WordAnimator {
       }
     });
 
-    // Animation delay slider with debouncing
-    const delayContainer = sliders[1];
-    const delaySlider = delayContainer?.querySelector('input[type="range"]');
-    const delayValue = delayContainer?.querySelector('.value');
+    // Animation delay slider
+    const delaySlider = sliders[1]?.querySelector('input[type="range"]');
+    const delayValue = sliders[1]?.querySelector('.value');
+
+    if (delaySlider) {
+      // Set initial delay value
+      this.animationDelay = parseInt(delaySlider.value);
+    }
 
-    let delayTimeout;
     delaySlider?.addEventListener('input', (e) => {
       const newDelay = parseInt(e.target.value);
       if (delayValue) {
         delayValue.textContent = newDelay + 'ms';
       }
+      this.animationDelay = newDelay;
 
-      clearTimeout(delayTimeout);
-      delayTimeout = setTimeout(() => {
-        this.updateAnimationDelay(newDelay);
-      }, 200);
+      // If animation is running, update the timing
+      if (this.isAnimating) {
+        clearTimeout(this.animationTimer);
+        this.scheduleNextUpdate();
+      }
     });
   }
 
-  updateAnimationDelay(newDelay) {
-    this.animationDelay = newDelay;
-    if (this.isAnimating) {
-      this.stop();
-      this.start(newDelay);
-    }
-  }
-
   setupEventListeners() {
     // Fullscreen button
     const fullscreenButton = document.querySelector('#fullScreen button');
@@ -178,11 +174,14 @@ class WordAnimator {
     switch(event.key) {
       case ' ':
         event.preventDefault();
+        console.log('Space pressed. isAnimating:', this.isAnimating);
         if (this.isAnimating) {
+          console.log('Stopping animation');
           this.stop();
         } else {
-          const delaySlider = document.querySelector('.slider-container:nth-child(2) input[type="range"]');
-          this.start(parseInt(delaySlider?.value || this.animationDelay));
+          console.log('Starting animation');
+          // Get the current animation delay value directly from the class
+          this.start(this.animationDelay);
         }
         break;
       case 'f':
@@ -214,10 +213,10 @@ class WordAnimator {
         const random = Math.random();
         if (random < 0.15) {            // 15% uppercase
           return word.toUpperCase();
-        } else if (random < 0.50) {     // 35% capitalized (0.50 - 0.15 = 0.35)
+        } else if (random < 0.50) {     // 35% capitalized
           return word.charAt(0).toUpperCase() + word.slice(1);
         }
-        return word;  // Return original word if no capitalization
+        return word;
       }
       return word;
     });
@@ -231,12 +230,10 @@ class WordAnimator {
 
     this.container.style.fontFamily = `"${fontFamily}"`;
 
-    // Extract and set up OpenType features
     this.openTypeFeatures.clear();
     this.openTypeFeatures.extractFeatures(fontInfo);
     this.openTypeFeatures.createButtons();
 
-    // Create axis controls if font has variable axes
     if (fontInfo.axes) {
       this.variationAxes.createAxesControls(fontInfo.axes);
     }
@@ -245,7 +242,10 @@ class WordAnimator {
   }
 
   async start(interval = this.animationDelay) {
-    if (this.isAnimating) return;
+    console.log('Start called with interval:', interval);
+
+    clearTimeout(this.animationTimer);
+    clearTimeout(this.fadeTimer);
 
     this.isAnimating = true;
     this.animationDelay = interval;
@@ -254,53 +254,60 @@ class WordAnimator {
       await this.loadWordList();
     }
 
-    this.updateWord();
+    this.container.classList.remove('fade-out');
+
+    // Force an immediate word update
+    await this.updateWord();
     this.scheduleNextUpdate();
   }
 
   stop() {
+    console.log('Stop called');
     this.isAnimating = false;
     clearTimeout(this.animationTimer);
     clearTimeout(this.fadeTimer);
     this.animationTimer = null;
     this.fadeTimer = null;
+    this.container.classList.remove('fade-out');
   }
 
   scheduleNextUpdate() {
-    if (!this.isAnimating) return;
+    clearTimeout(this.animationTimer);
 
-    this.animationTimer = setTimeout(() => {
-      this.updateWord();
-      this.scheduleNextUpdate();
-    }, this.animationDelay);
+    if (this.isAnimating) {
+      this.animationTimer = setTimeout(() => {
+        this.updateWord();
+        this.scheduleNextUpdate();
+      }, this.animationDelay);
+    }
   }
 
   updateWord() {
-    if (this.wordList.length === 0 || !this.isAnimating) return;
-
-    clearTimeout(this.fadeTimer);
-    this.container.classList.add('fade-out');
-
-    this.fadeTimer = setTimeout(() => {
-      if (!this.isAnimating) return;
+    return new Promise((resolve) => {
+      this.container.classList.add('fade-out');
 
-      const word = this.getRandomWord();
-      const wordElement = document.createElement('div');
-      wordElement.textContent = word;
-      wordElement.style.whiteSpace = 'nowrap';
+      setTimeout(() => {
+        if (this.isAnimating) {
+          const word = this.getRandomWord();
+          console.log('Updating to new word:', word);
 
-      // Apply current OpenType features and variation settings
-      const currentFeatures = this.openTypeFeatures.getFeatureString();
-      wordElement.style.fontFeatureSettings = currentFeatures;
-      wordElement.style.fontVariationSettings = this.currentVariationSettings;
+          const wordElement = document.createElement('div');
+          wordElement.textContent = word;
+          wordElement.style.whiteSpace = 'nowrap';
 
-      this.container.innerHTML = '';
-      this.container.appendChild(wordElement);
+          const currentFeatures = this.openTypeFeatures.getFeatureString();
+          wordElement.style.fontFeatureSettings = currentFeatures;
+          wordElement.style.fontVariationSettings = this.currentVariationSettings;
 
-      this.textFitter.fitText(wordElement, this.container);
+          this.container.innerHTML = '';
+          this.container.appendChild(wordElement);
+          this.textFitter.fitText(wordElement, this.container);
+        }
 
-      this.container.classList.remove('fade-out');
-    }, 300);
+        this.container.classList.remove('fade-out');
+        resolve();
+      }, 300);
+    });
   }
 
   getRandomWord() {