ESM, Howler y base64 assets

package.json

@@ -2,6 +2,7 @@
   "name": "wollok-web-tools",
   "version": "1.1.10",
   "description": "Wollok Web Tools library for web development",
+  "type": "module",
   "main": "dist/index.js",
   "repository": "https://github.com/uqbar-project/wollok-web-tools",
   "author": "Uqbar",
@@ -16,16 +17,20 @@
     "diagram"
   ],
   "scripts": {
-    "test": "TS_NODE_PROJECT='./tsconfig.test.json' mocha --parallel -r ts-node/register/transpile-only test/**/*.spec.ts",
+    "test": "mocha --loader=ts-node/esm --parallel test/**/*.spec.ts",
     "test:game": "http-server -o ./test/game",
     "watch": "npm run build:lib && webpack watch --mode development",
     "build:lib": "rimraf dist && tsc -p ./tsconfig.build.json",
     "build": "npm run build:lib && webpack --mode production",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "dependencies": {
-    "cytoscape": "3.30.2",
+    "cytoscape": "3.33.1",
+    "howler": "2.2.4",
     "p5": "1.11.0",
     "path": "0.12.7",
     "socket.io": "4.8.0",
@@ -34,6 +39,8 @@
   "devDependencies": {
     "@stylistic/eslint-plugin-ts": "2.8.0",
     "@types/chai": "4.3.6",
+    "@types/cytoscape": "3.31.0",
+    "@types/howler": "2.2.4",
     "@types/mocha": "10.0.8",
     "@types/p5": "1.4.0",
     "@types/sinon": "17.0.3",

src/game/game-index.ts

@@ -8,9 +8,7 @@ declare global {
 import p5 from 'p5'
 global.p5 = p5
 
-import { LocalGame, SocketGame } from './game'
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-require('p5/lib/addons/p5.sound')
+import { LocalGame, SocketGame } from './game.js'
 
 window.LocalGame = LocalGame
 window.SocketGame = SocketGame

src/game/game.ts

@@ -1,17 +1,18 @@
 import p5 from 'p5'
 import { Socket } from 'socket.io'
 import { Environment, Id, Interpreter, WRENatives, buildEnvironment, interpret } from 'wollok-ts'
-import { GameProject, MediaFile, getProgramIn } from './gameProject'
-import { GameSound } from './gameSound'
-import { step } from './render'
-import sketch from './sketch'
-import { Asset, BoardState, Resolution, SoundState, VisualState, boardState, buildKeyPressEvent, canvasResolution, flushEvents, queueEvent, soundState, visualState } from './utils'
+import { GameProject, MediaFile, getProgramIn } from './gameProject.js'
+import { GameSound } from './gameSound.js'
+import { step } from './render.js'
+import { sketch } from './sketch.js'
+import { Howl } from 'howler'
+import { Asset, BoardState, Resolution, SoundState, VisualState, boardState, buildKeyPressEvent, canvasResolution, flushEvents, queueEvent, soundState, visualState } from './utils.js'
 
 const { round } = Math
 
 interface GameState {
   images: Map<string, p5.Image>
-  sounds: Map<Id, p5.SoundFile>
+  sounds: Map<Id, Howl>
   currentSounds: Map<Id, GameSound>
   gamePaused: boolean
   audioMuted: boolean
@@ -40,9 +41,9 @@ export class LocalGame implements Game {
     this.interpreter = interpret(this.environment, WRENatives)
   }
 
-  start(canvasParent?: Element): p5 {
+  start(canvasParent?: HTMLElement): p5 {
     this.interpreter.exec(getProgramIn(this.project.main, this.environment))
-    return new p5(sketch(this, this.project.images, this.project.sounds, canvasParent))
+    return new p5(sketch(this, this.project.images, this.project.sounds, canvasParent), canvasParent)
   }
 
   get running(): boolean { return this.gameObject.get('running')!.innerBoolean! }
@@ -112,9 +113,9 @@ export class SocketGame implements Game {
     socket.on('error', data => console.log(data))
   }
 
-  start(canvasParent?: Element): p5 {
+  start(canvasParent?: HTMLElement): p5 {
     this.running = true
-    return new p5(sketch(this, this.images, this.sounds, canvasParent))
+    return new p5(sketch(this, this.images, this.sounds, canvasParent), canvasParent)
   }
 
   get canvasResolution(): Resolution {

src/game/gameProject.ts

@@ -1,5 +1,5 @@
 import { Environment, Node, Package, Program, PROGRAM_FILE_EXTENSION, WOLLOK_FILE_EXTENSION } from 'wollok-ts'
-import { VALID_IMAGE_EXTENSIONS, VALID_SOUND_EXTENSIONS } from './utils'
+import { VALID_IMAGE_EXTENSIONS, VALID_SOUND_EXTENSIONS } from './utils.js'
 
 const EXPECTED_WOLLOK_EXTENSIONS = [WOLLOK_FILE_EXTENSION, PROGRAM_FILE_EXTENSION]
 

src/game/gameSound.ts

@@ -1,31 +1,30 @@
-// import 'p5'
-import { SoundFile } from 'p5'
-import { SoundState } from './utils'
+import { SoundState } from './utils.js'
+import { Howl } from 'howler'
 
 export class GameSound {
   private lastSoundState: SoundState
-  private soundFile: SoundFile
+  private soundFile: Howl
   private started: boolean
   public toBePlayed: boolean
 
-  constructor(lastSoundState: SoundState, soundFile: SoundFile) {
+  constructor(lastSoundState: SoundState, soundFile: Howl) {
     this.lastSoundState = lastSoundState
     this.soundFile = soundFile
     this.started = false
     this.toBePlayed = false
   }
 
   public isLoaded(): boolean {
-    return this.soundFile.isLoaded()
+    return this.soundFile.state() === 'loaded'
   }
 
   public canBePlayed(newSoundState: SoundState): boolean {
     return (this.lastSoundState.status !== newSoundState.status || !this.started) && this.isLoaded()
   }
 
   public update(newSoundState: SoundState): void {
-    this.soundFile.setLoop(newSoundState.loop)
-    this.soundFile.setVolume(newSoundState.volume)
+    this.soundFile.loop(newSoundState.loop)
+    this.soundFile.volume(newSoundState.volume)
     this.toBePlayed = this.canBePlayed(newSoundState)
     this.lastSoundState = newSoundState
   }

src/game/messages.ts

@@ -1,4 +1,4 @@
-import { Position } from './utils'
+import { Position } from './utils.js'
 
 export interface DrawableMessage {
   message: string;

src/game/render.ts

@@ -1,9 +1,10 @@
-import p5, { Renderer, SoundFile } from 'p5'
+import p5, { Renderer } from 'p5'
 import { Id } from 'wollok-ts'
-import Game from './game'
-import { GameSound } from './gameSound'
-import { DrawableMessage, TEXT_SIZE, TEXT_STYLE, drawMessage } from './messages'
-import { hexaToColor, Position } from './utils'
+import Game from './game.js'
+import { GameSound } from './gameSound.js'
+import { DrawableMessage, TEXT_SIZE, TEXT_STYLE, drawMessage } from './messages.js'
+import { hexaToColor, Position } from './utils.js'
+import { Howl } from 'howler'
 
 const { round, min } = Math
 
@@ -103,7 +104,7 @@ interface StepAssets {
   sketch: p5
   game: Game
   images: Map<Id, p5.Image>
-  sounds: Map<Id, SoundFile>
+  sounds: Map<Id, Howl>
   currentSounds: Map<Id, GameSound>
   audioMuted: boolean
   gamePaused: boolean
@@ -129,7 +130,7 @@ export function step(assets: StepAssets): void {
   }
 }
 
-export function updateSound(game: Game, sounds: Map<string, SoundFile>, currentSounds: Map<Id, GameSound>, audioMuted: boolean): void {
+export function updateSound(game: Game, sounds: Map<string, Howl>, currentSounds: Map<Id, GameSound>, audioMuted: boolean): void {
   const { soundStates } = game
 
   for (const [id, sound] of currentSounds.entries()) {

src/game/sketch.ts

@@ -1,16 +1,18 @@
-import p5, { SoundFile } from 'p5'
+import p5 from 'p5'
 import { Id } from 'wollok-ts'
-import Game from './game'
-import { MediaFile } from './gameProject'
-import { GameSound } from './gameSound'
-import { resizeCanvas } from './render'
-import { wKeyCode } from './utils'
+import Game from './game.js'
+import { MediaFile } from './gameProject.js'
+import { GameSound } from './gameSound.js'
+import { resizeCanvas } from './render.js'
+import { wKeyCode } from './utils.js'
+import { Howl } from 'howler'
 import BASE64_IMAGES from './images'
 
-export default (game: Game, projectImages: MediaFile[], projectSounds: MediaFile[], canvasParent?: Element) => (p: p5): void => {
+export const sketch = (game: Game, projectImages: MediaFile[], projectSounds: MediaFile[], canvasParent?: HTMLElement) => (p: p5): void => {
   const images = new Map<string, p5.Image>()
-  const sounds = new Map<Id, SoundFile>()
+  const sounds = new Map<Id, Howl>()
   const currentSounds = new Map<Id, GameSound>()
+  const baseRemove = p.remove
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let stop = false
@@ -23,15 +25,18 @@ export default (game: Game, projectImages: MediaFile[], projectSounds: MediaFile
     )
     const fallbackImage = images.get('wko.png')
     projectImages.forEach(({ possiblePaths, url }) =>
-      possiblePaths.forEach(path =>
-        images.set(path, p.loadImage(url + `?cb=${Date.now()}`, () => {}, () => {
+      possiblePaths.forEach(path => {
+        // We can also load images as base64 strings,
+        // dont append a cache buster to those
+        const isDataUrl = url.startsWith('data:')
+        images.set(path, p.loadImage(url + (isDataUrl ? '' : `?cb=${Date.now()}`), () => {}, () => {
           images.set(path, fallbackImage)
         }))
-      )
+      })
     )
     projectSounds.forEach(({ possiblePaths, url }) =>
       possiblePaths.forEach(path =>
-        sounds.set(path, new SoundFile(url))
+        sounds.set(path, new Howl({ src: url }))
       )
     )
   }
@@ -60,4 +65,9 @@ export default (game: Game, projectImages: MediaFile[], projectSounds: MediaFile
 
     return false
   }
+
+  p.remove = () => {
+    baseRemove.call(p)
+    sounds.forEach( sound => sound.unload())
+  }
 }

src/index.ts

@@ -1,7 +1,9 @@
 // Module Dependencies
 
 // Dynamic Diagram
-export * from './dynamicDiagram/diagram-generator'
+export * from './dynamicDiagram/diagram-generator.js'
 
 // Game
-export * from './game/utils'
+export * from './game/utils.js'
+
+export { LocalGame } from './game/game.js'

test/dynamicDiagram/diagram-generator.spec.ts

@@ -1,7 +1,7 @@
 import { should, use } from 'chai'
 import { buildEnvironment, DynamicDiagramElement, Evaluation, getDynamicDiagramData, interprete, Interpreter, REPL, WRENatives } from 'wollok-ts'
-import { diagramAssertions } from './diagram-assertions'
-import { getDataDiagram } from '../../src/dynamicDiagram/diagram-generator'
+import { diagramAssertions } from './diagram-assertions.js'
+import { getDataDiagram } from '../../src/dynamicDiagram/diagram-generator.js'
 
 use(diagramAssertions)
 should()

test/game/index.html

@@ -1,7 +1,9 @@
 <html>
   <head>
-    <link rel="stylesheet" href="game.css">
-    <script>var process = {};</script>
+    <link rel="stylesheet" href="game.css" />
+    <script>
+      var process = {};
+    </script>
     <script src="../../dist/web/game-index.js"></script>
   </head>
   <body>
@@ -10,4 +12,4 @@
     </main>
     <script src="./test.js"></script>
   </body>
-</html>
+</html>

test/game/pepita.txt

@@ -12,7 +12,7 @@ program juego {
     game.addVisualCharacter(pepita)
     keyboard.space().onPressDo({ 
         game.say(pepita, "Ouch") 
-        // game.sound('musica.mp3').play()
+        game.sound('musica.mp3').play()
     })
     game.start()
 }

tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es2017",
-    "module": "commonjs",
-  },
-}
+    "target": "ES2020",
+    "module": "ES2022"
+  }
+}

tsconfig.json

@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
     // "baseUrl": "./src",
     "outDir": "./dist",
     "sourceMap": true,
@@ -10,14 +8,10 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "downlevelIteration": true,
-    "moduleResolution": "node",
-    "lib": [
-      "es2016",
-      "dom",
-      "es5"
-    ]
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "lib": ["ES2020", "dom"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-}
+  "include": ["src/**/*.ts"]
+}

tsconfig.test.json

@@ -1,25 +1,17 @@
 {
   "compilerOptions": {
-    "target": "es2017",
-    "module": "commonjs",
+    "target": "ES2020",
+    "module": "ES2022",
     "outDir": "temp",
-    "lib": [
-      "es2021"
-    ],
+    "lib": ["ES2021"],
     "declaration": true,
     "strict": true,
     "removeComments": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "experimentalDecorators": true
   },
-  "include": [
-    "./test/**/*.ts",
-  ],
-  "exclude": [
-    "**/*.js",
-    "build",
-    "node_modules",
-  ]
-}
+  "include": ["./test/**/*.ts"],
+  "exclude": ["**/*.js", "build", "node_modules"]
+}