Merge pull request #157 from SpringRoll/story/190-191-30-update-node

Update Node and Dependencies for CreateJS Seed Template

Author: TensAndTwenties

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-deploy
+deploy
+.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-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "springroll-seed",
-  "version": "2.0.1",
+  "version": "2.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -26,12 +26,12 @@
     "source-map-loader": "^1.0.0",
     "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": {
     "createjs": "^1.0.1",
-    "springroll": "^2.8.0"
+    "springroll": "^2.9.0"
   }
 }

package.json

@@ -3,6 +3,13 @@ import { Property, SafeScaleManager, Application } from 'springroll';
 import { GAMEPLAY } from './constants';
 import createjs from 'createjs';
 
+let selectedLanguage;
+
+const LANGUAGES = {
+	ENGLISH: "en",
+	SPANISH: "es",
+};
+
 export class Game
 {
     constructor(width, height)
@@ -50,6 +57,23 @@ export class Game
         {
             this.isPaused = value;
         });
+
+        /*
+        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.app.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.app.state.playOptions.value = {
+            language: LANGUAGES.ENGLISH
+        };
+
         this.app.state.captionsMuted.subscribe(result => 
         {
             console.log('captionsMuted: ', result);
@@ -106,6 +130,39 @@ export class Game
         }
     }
 
+    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.app.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;
+    }
+
     update(tick)
     {
         this.stage.update();

src/game.js

@@ -25,4 +25,28 @@ body {
     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;
 }

src/styles.css

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