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/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) {