Update Node and Dependencies for Pixi Seed Template

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 deploy
 .vscode/
+.DS_Store

.nvmrc

@@ -1 +1 @@
-v22.17.0
+v24.12.0

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.0] - Unreleased
+
+- Updated Node to 24.12.0
+- Included Captions example w/ CSS Styling
+- Updated dependencies 
+- Updated gitignore to not include .DS_Store files
+
 ## [2.2.0] - 2025-06-27
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "springroll-seed",
-  "version": "2.0.1",
+  "version": "2.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -24,13 +24,13 @@
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.75.0",
+    "webpack": "^5.105.0",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
     "@pixi/sound": "^6.0.1",
     "pixi.js": "^8.10.2",
-    "springroll": "^2.8.0"
+    "springroll": "^2.9.0"
   }
 }

src/game.js

@@ -5,6 +5,13 @@ import { Property, SafeScaleManager, Application } from 'springroll';
 import * as PIXI from 'pixi.js';
 import { sound } from '@pixi/sound';
 
+let selectedLanguage;
+
+const LANGUAGES = {
+	ENGLISH: "en",
+	SPANISH: "es",
+};
+
 export class Game
 {
     constructor(width, height)
@@ -84,6 +91,21 @@ export class Game
             {
                 this.application.state.scene.value = new TitleScene(this);
             });
+             /*
+            PlayOptions allows developers to pass values from the container environment to the SpringRoll environment. These values can contain any key value pairs the developer requires. This is typically how language selection is passed from the container to the game.
+            */
+            this.application.state.playOptions.subscribe(playOptions => 
+            {
+                console.log('New playOptions value set to', playOptions);
+
+                this.getLanguage();
+            });
+
+            /*Using a default playOptions value for this demo. In a real container environment, the container would set playOptions and pass it into the game automatically. This is just for demonstration purposes to show how playOptions can be used to pass values from the container to the game.
+            */
+            this.application.state.playOptions.value = {
+                language: LANGUAGES.ENGLISH
+            };
 
             // Dispatch a ready event after initializing the app
             this.emitter.emit('ready');
@@ -151,4 +173,37 @@ export class Game
         renderer.view.canvas.style.width = `${GAMEPLAY.WIDTH * scaleRatio}px`;
         renderer.view.canvas.style.height = `${GAMEPLAY.HEIGHT * scaleRatio}px`;
     }
+
+    getLanguage() {
+        if (selectedLanguage) {
+            return selectedLanguage;
+        }
+
+        // Check for language param in query string first, this allows us to override the language for testing purposes without having to change the app state or reload the page with new play options. Example: ?language=es
+        const urlParams = new URLSearchParams(window.location.search);
+
+        const queryLanguage = urlParams.get("language"); 
+
+        if (queryLanguage) {
+            selectedLanguage = queryLanguage.toLowerCase();
+            console.log(`Language set to ${selectedLanguage} from query string override!`);
+            return selectedLanguage;
+        }
+
+        const playOptions = this.application.state.playOptions;
+        const playOptionsLanguage = playOptions.value?.language;
+
+        const availableLanguages = [LANGUAGES.ENGLISH, LANGUAGES.SPANISH];
+
+        let language;
+
+        if (playOptionsLanguage && playOptionsLanguage.includes(LANGUAGES.SPANISH) && availableLanguages.includes(LANGUAGES.SPANISH)) {
+            language = LANGUAGES.SPANISH;
+        } else {
+            language = LANGUAGES.ENGLISH;
+        }
+        selectedLanguage = language;
+        console.log(`Language set to ${selectedLanguage} from playOptions`);
+        return selectedLanguage;
+    }
 }

src/styles.css

@@ -24,4 +24,27 @@ canvas {
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
+}
+#captions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  user-select: none;
+  cursor: default;
+  background: rgba(0,0,0,0.4);
+  padding: 1rem;
+}
+#captions p {
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  color: white;
+  line-height: 1.5em;
+  text-overflow: ellipsis;
+  width: 40ch;
+  margin: 0 auto;
 }

templates/Springroll.html

@@ -16,6 +16,9 @@
   <div id="frame">
     <div id="content">
     </div>
+    <div id="captions">
+      <p>I like it garlic, rye, and brown. Banana, honey bun. Brioche, focaccia. Naan, bagel, baguette, and</p>
+    </div>
   </div>
 </body>
 

webpack.config.js

@@ -29,17 +29,18 @@ module.exports = (env) => {
   let networkInfo = os.networkInterfaces();
   let ipAddress;
 
-  // Depending on operating system the network interface will be named differntly. Check if each exists to find the correct syntax
-  if (networkInfo.en0){
-    ipAddress = networkInfo.en0[1].address;
-  } else if (networkInfo.en7) {
-    ipAddress = networkInfo.en7[1].address;
-  } else  if (networkInfo['Wi-Fi']){
-    ipAddress = networkInfo['Wi-Fi'][1].address;
-  } else  if (networkInfo['Ethernet']){
-    ipAddress = networkInfo['Ethernet'][1].address;
-  } else  if (networkInfo.eth0){
-    ipAddress = networkInfo.eth0[1].address;
+  // Helper function to find IPv4 address from interface
+  const getIPv4Address = (interfaceArray) => {
+    if (!interfaceArray) return null;
+    const ipv4 = interfaceArray.find(addr => addr.family === 'IPv4' && !addr.internal);
+    return ipv4?.address;
+  };
+
+  // Try common interface names - check each for an IPv4 address
+  const interfaceNames = ['en0', 'en7', 'Wi-Fi', 'Ethernet', 'eth0'];
+  for (const name of interfaceNames) {
+    ipAddress = getIPv4Address(networkInfo[name]);
+    if (ipAddress) break;
   }
 
   if (ipAddress) {