littlejsengine 1.17.11 → 1.17.15

package/examples/electron/{build.js → build.mjs}

@@ -1,19 +1,24 @@
-#!/usr/bin/env node
-
 /** 
  * LittleJS Build System
  */
 
 'use strict';
 
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 const PROGRAM_TITLE = 'Little JS Electron Project';
 const PROGRAM_NAME = 'game';
-const BUILD_FOLDER = 'build';
+const BUILD_FOLDER = join(__dirname, 'build');
 const USE_ROADROLLER = false; // enable for extra compression
 const sourceFiles =
 [
-    '../../dist/littlejs.release.js',
-    'game.js',
+    join(__dirname, '../../dist/littlejs.release.js'),
+    join(__dirname, 'game.js'),
     // add your game's files here
 ];
 const dataFiles =
@@ -24,24 +29,22 @@ const dataFiles =
 
 console.log(`Building ${PROGRAM_NAME}...`);
 const startTime = Date.now();
-const fs = require('node:fs');
-const child_process = require('node:child_process');
 
 // rebuild engine
-//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+//execSync(`npm run build`, { stdio: 'inherit' });
 
 // remove old files and setup build folder
 fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
-fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.rmSync(join(__dirname, `${PROGRAM_NAME}.zip`), { force: true });
 fs.mkdirSync(BUILD_FOLDER);
 
 // copy data files
 for (const file of dataFiles)
-    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+    fs.copyFileSync(join(__dirname, file), join(BUILD_FOLDER, file));
 
 Build
 (
-    `${BUILD_FOLDER}/index.js`,
+    join(BUILD_FOLDER, 'index.js'),
     sourceFiles,
     USE_ROADROLLER ? 
         [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, electronBuildStep] :
@@ -77,21 +80,21 @@ function closureCompilerStep(filename)
     // use closer compiler to minify the code
     const filenameTemp = filename + '.tmp';
     fs.copyFileSync(filename, filenameTemp);
-    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
+    execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
     fs.rmSync(filenameTemp);
-};
+}
 
 function uglifyBuildStep(filename)
 {
     console.log('Running uglify...');
-    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
-};
+    execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+}
 
 function roadrollerBuildStep(filename)
 {
     console.log('Running roadroller...');
-    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
-};
+    execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
+}
 
 function htmlBuildStep(filename)
 {
@@ -108,17 +111,17 @@ function htmlBuildStep(filename)
     buffer += `<script src='index.js'></script>`;
 
     // output html file
-    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
-};
+    fs.writeFileSync(join(BUILD_FOLDER, 'index.html'), buffer, {flag: 'w+'});
+}
 
 function electronBuildStep(filename)
 {
     console.log('Building executable with electron...');
 
     // copy elecron files to build folder
-    fs.copyFileSync('electron.js', `${BUILD_FOLDER}/electron.js`);
-    fs.copyFileSync('package.json', `${BUILD_FOLDER}/package.json`);
+    fs.copyFileSync(join(__dirname, 'electron.js'), join(BUILD_FOLDER, 'electron.js'));
+    fs.copyFileSync(join(__dirname, 'package.json'), join(BUILD_FOLDER, 'package.json'));
 
     // run electron packager
-    child_process.execSync(`npx electron-packager ./${BUILD_FOLDER} --overwrite`, {stdio: 'inherit'});
-};
+    execSync(`npx electron-packager "${BUILD_FOLDER}" --overwrite --out="${__dirname}"`, {stdio: 'inherit'});
+}

package/examples/electron/game.js

@@ -10,47 +10,13 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
-// fix texture bleeding by shrinking tile slightly
-setTileDefaultBleed(.5);
-
 // sound effects
 const sound_click = new Sound([1,.5]);
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
-    // create tile collision and visible tile layer
-    const pos = vec2();
-    const tileLayer = new TileCollisionLayer(pos, vec2(32,16));
-
-    // get level data from the tiles image
-    const tileImage = textureInfos[0].image;
-    mainContext.drawImage(tileImage,0,0);
-    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
-    for (pos.x = tileLayer.size.x; pos.x--;)
-    for (pos.y = tileLayer.size.y; pos.y--;)
-    {
-        // check if this pixel is set
-        const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
-        if (!imageData[4*i])
-            continue;
-        
-        // set tile data
-        const tileIndex = 1;
-        const direction = randInt(4)
-        const mirror = randBool();
-        const color = randColor();
-        const data = new TileLayerData(tileIndex, direction, mirror, color);
-        tileLayer.setData(pos, data);
-        tileLayer.setCollisionData(pos);
-    }
-
-    // draw tile layer with new data
-    tileLayer.redraw();
-
-    // setup camera
-    setCameraPos(vec2(16,8));
-    setCameraScale(32);
+    setCanvasClearColor(GRAY);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -61,37 +27,26 @@ function gameUpdate()
         // play sound when mouse is pressed
         sound_click.play(mousePos);
     }
-
-    if (mouseWheel)
-    {
-        // zoom in and out with mouse wheel
-        cameraScale -= sign(mouseWheel)*cameraScale/5;
-        cameraScale = clamp(cameraScale, 10, 300);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost()
 {
-
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background
-    drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6));
-    
     // draw the logo as a tile
-    drawTile(vec2(21,5), vec2(4.5), tile(3,128));
+    drawTile(vec2(sin(time)*4, 0), vec2(10), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    drawTextScreen('LittleJS Electron Demo', 
-        vec2(mainCanvasSize.x/2, 70), 80,   // position, size
-        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
+    drawTextScreen('LittleJS\nElectron Demo', 
+        vec2(mainCanvasSize.x/2, 100), 80, // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));       // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.17.11></script>
+<script src=../../dist/littlejs.js></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.17.11></script>
+<script src=game.js></script>

package/examples/index.html

@@ -58,6 +58,7 @@ Theme:
 <select id=selectExample onchange=setExample() size=2></select>
 </div>
 </div>
+<a href="https://github.com/KilledByAPixel/LittleJS" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 <script>
 'use strict';
 

package/examples/module/{build.js → build.mjs}

@@ -1,20 +1,25 @@
-#!/usr/bin/env node
-
 /** 
  * LittleJS Build System
  */
 
 'use strict';
 
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 const PROGRAM_TITLE = 'Little JS Starter Project';
 const PROGRAM_NAME = 'game';
-const BUILD_FOLDER = 'build';
+const BUILD_FOLDER = join(__dirname, 'build');
 const sourceFiles =
 [
     'game.js',
     // add your game's source files here
 ];
-const engineFile = '../../dist/littlejs.esm.min.js'; // Use the minified ES module
+const engineFile = join(__dirname, '../../dist/littlejs.esm.min.js'); // Use the minified ES module
 const dataFiles =
 [
     'tiles.png',
@@ -23,23 +28,21 @@ const dataFiles =
 
 console.log(`Building ${PROGRAM_NAME}...`);
 const startTime = Date.now();
-const fs = require('node:fs');
-const child_process = require('node:child_process');
 
 // rebuild engine
-//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+//execSync(`npm run build`, { stdio: 'inherit' });
 
 // remove old files and setup build folder
 fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
-fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.rmSync(join(__dirname, `${PROGRAM_NAME}.zip`), { force: true });
 fs.mkdirSync(BUILD_FOLDER);
 
 // copy data files
 for (const file of dataFiles)
-    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+    fs.copyFileSync(join(__dirname, file), join(BUILD_FOLDER, file));
 
 // copy engine module
-fs.copyFileSync(engineFile, `${BUILD_FOLDER}/littlejs.esm.min.js`);
+fs.copyFileSync(engineFile, join(BUILD_FOLDER, 'littlejs.esm.min.js'));
 
 Build
 (
@@ -59,8 +62,8 @@ function Build(files=[], buildSteps=[])
     // process each source file separately (don't concatenate modules!)
     for (const file of files)
     {
-        const outputFile = `${BUILD_FOLDER}/${file}`;
-        fs.copyFileSync(file, outputFile);
+        const outputFile = join(BUILD_FOLDER, file);
+        fs.copyFileSync(join(__dirname, file), outputFile);
         moduleFixStep(outputFile);
         uglifyBuildStep(outputFile);
     }
@@ -89,8 +92,8 @@ function moduleFixStep(filename)
 function uglifyBuildStep(filename)
 {
     console.log('Running uglify...');
-    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
-};
+    execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+}
 
 function htmlBuildStep()
 {
@@ -108,14 +111,14 @@ function htmlBuildStep()
     buffer += '</body>';
 
     // output html file
-    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
-};
+    fs.writeFileSync(join(BUILD_FOLDER, 'index.html'), buffer, {flag: 'w+'});
+}
 
 function zipBuildStep()
 {
     console.log('Zipping...');
     const sources = ['index.html', 'littlejs.esm.min.js', ...sourceFiles, ...dataFiles];
     const sourceList = sources.join(' ');
-    child_process.execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
-    console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(`${PROGRAM_NAME}.zip`).size} bytes`);
-};
+    execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
+    console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(join(__dirname, `${PROGRAM_NAME}.zip`)).size} bytes`);
+}

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.17.11></script>
+<script src=../../dist/littlejs.js?1.17.15></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/hillGlideGame.js

@@ -57,7 +57,7 @@ function gameRender()
         pos.y = getGroundHeight(x);
         drawRect(pos, sizeTop, BLACK);
         pos.y -= h/2;
-        color.setHSLA(.2+.2*wave(.2,1,x), .7, .5);
+        color.setHSLA(.2+.2*oscillate(.2,1,x), .7, .5);
         drawRect(pos, size, color);
     }
 }

package/examples/shorts/nineSlice.js

@@ -6,7 +6,7 @@ function gameRender()
     {
         // draw nine slice with thin border and color
         const pos = vec2(-7,4);
-        const size = vec2(11+wave(.5,2), 6);
+        const size = vec2(11+oscillate(.5,2), 6);
         const color = hsl(.1,.5,.9);
         const border = .5;
         drawNineSlice(pos, size, nineSliceTile, color, border);
@@ -25,7 +25,7 @@ function gameRender()
         // draw three slice with variable border and additive color
         const pos = vec2(-7,-4);
         const size = vec2(9, 7);
-        const border = 2 + wave(.2)*2;
+        const border = 2 + oscillate(.2)*2;
         const additive = hsl(time/30,.5,.5);
         drawThreeSlice(pos, size, threeSliceTile, WHITE, border, additive);
         drawText('Three Slice\nVariable\nBorder', pos, 1, BLACK);
@@ -33,7 +33,7 @@ function gameRender()
     {
         // draw three slice in screen space with changing size        
         const pos = vec2(700,420);
-        const size = vec2(350-wave(.3,90),120+wave(.3,60));
+        const size = vec2(350-oscillate(.3,90),120+oscillate(.3,60));
         drawThreeSliceScreen(pos, size, threeSliceTile);
         drawTextScreen('Three Slice\nScreen Space', pos, 30, BLACK);
     }

package/examples/shorts/shapes.js

@@ -2,7 +2,7 @@ function gameRender()
 {
     // circles and ellipses
     drawEllipse(vec2(-6,5), vec2(3,2), YELLOW, .5);
-    drawCircle(vec2(0,5), 2+wave(.5), RED);
+    drawCircle(vec2(0,5), 2+oscillate(.5), RED);
     drawEllipse(vec2(6,5), vec2(2,4), CLEAR_BLACK, .3, .5, CYAN)
 
     // polygon shapes

package/examples/shorts/uiSystem.js

@@ -9,43 +9,44 @@ function gameInit()
 
     // setup example menu
     let navigationIndex = 0;
-    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(600,450));
+    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(700,450));
     canvasClearColor = hsl(0,0,.8);
 
     // example text
-    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(400, 80),
+    uiMenu.addChild(new UIText(vec2(-100,-120), vec2(450, 80),
         'LittleJS UI\nSystem Demo'));
 
     // example image
-    uiMenu.addChild(new UITile(vec2(200,-140), vec2(128), tile(3, 128)));
+    uiMenu.addChild(new UITile(vec2(230,-140), vec2(170), tile(3, 128)));
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-80,0), vec2(50));
+    const checkbox = new UICheckbox(vec2(-170,0), vec2(50));
     checkbox.navigationIndex = ++navigationIndex;
     checkbox.onChange = ()=> button1.disabled = checkbox.checked;
     uiMenu.addChild(checkbox);
 
     // example button
-    const button1 = new UIButton(vec2(80,0), vec2(140, 80), 'Test');
-    button1.textHeight = 60;
-    button1.navigationIndex = ++navigationIndex;
-    uiMenu.addChild(button1);
-    button1.onClick = ()=> canvasClearColor = randColor();
+    const textInput = new UITextInput(vec2(50,0), vec2(300, 80), 'Text Input');
+    textInput.textHeight = 60;
+    textInput.maxLength = 16;
+    textInput.navigationIndex = ++navigationIndex;
+    uiMenu.addChild(textInput);
+    textInput.onChange = ()=> canvasClearColor = randColor();
 
     // example scrollbar
-    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), 
+    const scrollbar = new UIScrollbar(vec2(0,90), vec2(400, 50), 
         soundVolume, 'Volume');
     scrollbar.navigationIndex = ++navigationIndex;
     uiMenu.addChild(scrollbar);
     scrollbar.onChange = ()=> setSoundVolume(scrollbar.value);
 
     // exit button
-    const button2 = new UIButton(vec2(0,170), vec2(300, 50), 'Exit Menu');
-    button2.textHeight = 40;
-    button2.navigationIndex = ++navigationIndex;
-    button2.navigationAutoSelect = true;
-    uiMenu.addChild(button2);
-    button2.onClick = ()=> uiSystem.showConfirmDialog('Exit menu?',
+    const button1 = new UIButton(vec2(0,170), vec2(200, 50), 'Exit Menu');
+    button1.textHeight = 40;
+    button1.navigationIndex = ++navigationIndex;
+    button1.navigationAutoSelect = true;
+    uiMenu.addChild(button1);
+    button1.onClick = ()=> uiSystem.showConfirmDialog('Exit menu?',
         ()=> { uiMenu.visible=false; buttonBack.visible=true; });
 
     // example button that returns to menu

package/examples/starter/build.bat

@@ -1,5 +1,5 @@
 rem LittleJS Build Script
-call node build.js
+call node build.mjs
 if %errorlevel% neq 0 (
     echo Build failed with error level %errorlevel%
     pause

package/examples/starter/{build.js → build.mjs}

@@ -1,19 +1,24 @@
-#!/usr/bin/env node
-
 /** 
  * LittleJS Build System
  */
 
 'use strict';
 
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 const PROGRAM_TITLE = 'Little JS Starter Project';
 const PROGRAM_NAME = 'game';
-const BUILD_FOLDER = 'build';
+const BUILD_FOLDER = join(__dirname, 'build');
 const USE_ROADROLLER = false; // enable for extra compression
 const sourceFiles =
 [
-    '../../dist/littlejs.release.js',
-    'game.js',
+    join(__dirname, '../../dist/littlejs.release.js'),
+    join(__dirname, 'game.js'),
     // add your game's files here
 ];
 const dataFiles =
@@ -24,24 +29,22 @@ const dataFiles =
 
 console.log(`Building ${PROGRAM_NAME}...`);
 const startTime = Date.now();
-const fs = require('node:fs');
-const child_process = require('node:child_process');
 
 // rebuild engine
-//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+//execSync(`npm run build`, { stdio: 'inherit' });
 
 // remove old files and setup build folder
 fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
-fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.rmSync(join(__dirname, `${PROGRAM_NAME}.zip`), { force: true });
 fs.mkdirSync(BUILD_FOLDER);
 
 // copy data files
 for (const file of dataFiles)
-    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+    fs.copyFileSync(join(__dirname, file), join(BUILD_FOLDER, file));
 
 Build
 (
-    `${BUILD_FOLDER}/index.js`,
+    join(BUILD_FOLDER, 'index.js'),
     sourceFiles,
     USE_ROADROLLER ? 
         [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep] :
@@ -77,21 +80,21 @@ function closureCompilerStep(filename)
     // use closer compiler to minify the code
     const filenameTemp = filename + '.tmp';
     fs.copyFileSync(filename, filenameTemp);
-    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
+    execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, {stdio: 'inherit'});
     fs.rmSync(filenameTemp);
-};
+}
 
 function uglifyBuildStep(filename)
 {
     console.log('Running uglify...');
-    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
-};
+    execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+}
 
 function roadrollerBuildStep(filename)
 {
     console.log('Running roadroller...');
-    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
-};
+    execSync(`npx roadroller ${filename} -o ${filename}`, {stdio: 'inherit'});
+}
 
 function htmlBuildStep(filename)
 {
@@ -110,14 +113,14 @@ function htmlBuildStep(filename)
     buffer += '</script>';
 
     // output html file
-    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
-};
+    fs.writeFileSync(join(BUILD_FOLDER, 'index.html'), buffer, {flag: 'w+'});
+}
 
 function zipBuildStep(filename)
 {
     console.log('Zipping...');
     const sources = ['index.html', ...dataFiles];
     const sourceList = sources.join(' ');
-    child_process.execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
-    console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(`${PROGRAM_NAME}.zip`).size} bytes`);
-};
+    execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
+    console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(join(__dirname, `${PROGRAM_NAME}.zip`)).size} bytes`);
+}

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.17.11></script>
+<script src=../../dist/littlejs.js?1.17.15></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
@@ -32,4 +32,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.17.11></script>
+<script src=game.js?1.17.15></script>

package/examples/typescript/build.mjs

@@ -0,0 +1,60 @@
+/**
+ * LittleJS TypeScript Example Build System
+ */
+
+'use strict';
+
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = join(__dirname, 'build');
+
+// Define TypeScript source files
+const tsSourceFiles = [
+    'game.ts',
+    // add your TypeScript files here
+];
+
+// Corresponding JS output files
+const jsSourceFiles = tsSourceFiles.map(file => file.replace('.ts', '.js'));
+
+console.log(`Building TypeScript for ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+
+console.log(`Removing old build folder...`);
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+
+console.log(`Compiling TypeScript...`);
+
+// Use tsconfig.json for compilation settings
+try
+{
+    const result = execSync(`npx -p typescript tsc`, {cwd: __dirname, encoding: 'utf8', stdio: 'pipe'});
+    console.log(result);
+} catch (error)
+{
+    console.error('TypeScript compilation errors:');
+    if (error.stdout) console.log(error.stdout);
+    if (error.stderr) console.error(error.stderr);
+    console.error('TypeScript compilation failed!');
+    process.exit(1);
+}
+
+console.log(`Copying js files back to root...`);
+for (const file of jsSourceFiles)
+{
+    // TypeScript outputs to build/examples/typescript/ because of relative paths
+    const buildFile = join(BUILD_FOLDER, 'examples', 'typescript', file);
+    const targetFile = join(__dirname, file);
+    console.log(`Copying ${file}...`);
+    if (fs.existsSync(buildFile))
+        fs.copyFileSync(buildFile, targetFile);
+    else
+        console.error(`✗ Build file not found: ${buildFile}`);
+}
+
+console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);

package/examples/typescript/game.js

@@ -61,7 +61,7 @@ function gameInit() {
     .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch as it moves
+    particleEmitter.trailScale = 2; // stretch stretch as it moves
     particleEmitter.velocityInheritance = .3; // inherit emitter velocity
 }
 ///////////////////////////////////////////////////////////////////////////////
@@ -97,4 +97,4 @@ function gameRenderPost() {
 }
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);