npm - littlejsengine - Versions diffs - 1.12.6 → 1.13.1 - Mend

littlejsengine 1.12.6 → 1.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/littlejs.d.ts +387 -177
package/dist/littlejs.esm.js +5934 -5294
package/dist/littlejs.esm.min.js +4 -1
package/dist/littlejs.js +5887 -5263
package/dist/littlejs.min.js +4 -1
package/dist/littlejs.release.js +5426 -4829
package/examples/box2d/game.js +1 -1
package/examples/box2d/gameObjects.js +7 -6
package/examples/box2d/index.html +1 -1
package/examples/box2d/scenes.js +7 -7
package/examples/breakout/game.js +1 -1
package/examples/breakout/gameObjects.js +2 -2
package/examples/breakout/index.html +1 -1
package/examples/breakoutTutorial/README.md +2 -2
package/examples/breakoutTutorial/game.js +1 -1
package/examples/breakoutTutorial/index.html +1 -1
package/examples/empty/index.html +1 -1
package/examples/htmlMenu/index.html +1 -1
package/examples/index.html +396 -153
package/examples/module/game.js +1 -1
package/examples/module/index.html +1 -1
package/examples/platformer/game.js +4 -4
package/examples/platformer/gameCharacter.js +6 -6
package/examples/platformer/gameEffects.js +74 -57
package/examples/platformer/gameLevel.js +61 -70
package/examples/platformer/gameObjects.js +4 -4
package/examples/platformer/index.html +1 -1
package/examples/puzzle/index.html +1 -1
package/examples/shorts/base.html +23 -3
package/examples/shorts/box2dCar.js +8 -12
package/examples/shorts/flappyGame.js +52 -0
package/examples/shorts/helloWorld.js +6 -3
package/examples/shorts/hillGlideGame.js +56 -0
package/examples/shorts/landerGame.js +32 -0
package/examples/shorts/maze.js +47 -0
package/examples/shorts/medals.js +42 -0
package/examples/shorts/nineSlice.js +21 -0
package/examples/shorts/piano.js +52 -0
package/examples/shorts/platformer.js +24 -20
package/examples/shorts/{pong.js → pongGame.js} +1 -1
package/examples/shorts/raycasting.js +71 -0
package/examples/shorts/slidingPuzzle.js +42 -0
package/examples/shorts/spaceGame.js +56 -0
package/examples/shorts/starfield.js +17 -0
package/examples/shorts/tileLayer.js +3 -5
package/examples/shorts/tiles.png +0 -0
package/examples/shorts/tiltedView.js +8 -7
package/examples/shorts/topDown.js +18 -26
package/examples/shorts/uiSystem.js +4 -7
package/examples/starter/build.bat +6 -1
package/examples/starter/game.js +2 -2
package/examples/starter/index.html +23 -13
package/examples/stress/index.html +2 -3
package/examples/style.css +136 -0
package/examples/typescript/build.js +1 -2
package/examples/typescript/game.js +2 -2
package/examples/typescript/game.ts +1 -1
package/examples/typescript/index.html +1 -1
package/examples/uiSystem/game.js +8 -24
package/examples/uiSystem/index.html +1 -1
package/package.json +1 -1
package/plugins/box2d.js +8 -8
package/plugins/drawUtilities.js +126 -0
package/plugins/newgrounds.js +1 -1
package/plugins/pluginExport.js +7 -1
package/plugins/postProcess.js +2 -2
package/plugins/uiSystem.js +153 -65
package/plugins/zzfxm.js +1 -1
package/reference.md +10 -10
package/src/engine.js +50 -29
package/src/engineAudio.js +14 -5
package/src/engineBuild.bat +6 -1
package/src/engineBuild.js +20 -5
package/src/engineDebug.js +53 -26
package/src/engineDraw.js +108 -57
package/src/engineExport.js +21 -9
package/src/engineInput.js +109 -37
package/src/engineObject.js +68 -67
package/src/engineParticles.js +26 -9
package/src/engineSettings.js +15 -16
package/src/engineTileLayer.js +312 -153
package/src/engineUtilities.js +182 -130
package/src/engineWebGL.js +47 -36

package/examples/index.html CHANGED Viewed

@@ -1,102 +1,41 @@
 <!DOCTYPE html><head>
 <title>LittleJS Example Browser</title>
 <link rel=icon type=image/png href=favicon.png>
+<link rel=stylesheet href=style.css?4>
 <meta charset=utf-8>
-<style>
-html, body
-{
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-#container1
-{
-    height: 100%;
-    display: flex;
-}
-#container2
-{
-    display: flex;
-    flex-direction: column;
-}
-#iframeContainer
-{
-    border: 2px solid;
-    background: #000;
-}
-iframe
-{
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-#selectExample
-{
-    flex-grow: 1;
-}
-#textareaCode
-{
-    flex-grow: 1;
-    padding: 5px;
-    resize: none;
-    color: #fff;
-    background: #000;
-}
-#textareaError
-{
-    flex-grow: .3;
-    padding: 5px;
-    resize: none;
-    display: none;
-    color:#f22;
-    background: #111;
-}
-#container3
-{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-#titleInfo
-{
-    margin: 5px;
-    text-align: center;
-    font-size: 50px;
-}
-#exampleLink
-{
-    margin: 0px;
-    text-align: center;
-    font-size: 30px;
-}
-#exampleInfo
-{
-    margin: 0px;
-    text-align: center;
-    font-size: 22px;
-}
-select
-{
-    color:#fff;
-    background-color: #111;
-    width:100%;
-}
-</style>
 </head><body>
 <div id=container1>
 <div id=container3>
 <p id=titleInfo>LittleJS Example Browser</p>
-<a id=exampleLink target="_blank">Example LINK</a>
-<p id=exampleInfo>Example Info</p>
+<p id=exampleInfo></p>
+<a id=exampleLink target='_blank'></a>
+<hr>
+<div>
+Theme:
+<select style=width:120px onchange=loadTheme() id=selectTheme></select>
+<select style=width:40px onchange=loadTheme() id=selectFontSize>
+    <option value=10px>XS</option>
+    <option value=13px>S</option>
+    <option value=16px selected>M</option>
+    <option value=20px>L</option>
+    <option value=24px>XL</option>
+</select>
+<input type=checkbox id=checkboxLiveEdit checked>Live Edit
+<button id=buttonRefresh onclick=refreshCode()>Refresh</button>
+</div>
 <textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
 <textarea id=textareaError readonly spellcheck=false></textarea>
-<div><input type=checkbox id=checkboxLiveEdit checked>Live Edit
-<button id=buttonScreenshot>Screenshot</button>
-</div>
+<textarea id=textareaConsole readonly spellcheck=false></textarea>
 </div>
 <div id=container2>
 <div id=iframeContainer></div>
+<div>
+<input id=inputSearch placeholder='Search examples...' oninput=filterExamples() onkeydown='if(event.key=="Escape")filterExamples(1)'>
+<button onclick=filterExamples(1)>Clear</button>
+<button id=buttonPause>Pause</button>
+<button id=buttonScreenshot>Screenshot</button>
+<button id=buttonFullscreen>Fullscreen</button>
+</div>
 <select id=selectExample autofocus onchange=setExample() size=2></select>
 </div>
 </div>
@@ -105,21 +44,21 @@ select
 class ExampleInfo
 {
-    constructor(name, filename, description, fullExample=false)
+    constructor(name, filename, description='', largeExample=false)
     {
-        if (filename && !fullExample)
-            filename = 'shorts/' + filename; // short examples folder
+        if (filename && !largeExample)
+            filename = 'shorts/' + filename;
         this.name = name;
         this.filename = filename;
         this.description = description;
-        this.fullExample = fullExample;
+        this.largeExample = largeExample;
     }
 }
 const exampleList =
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
-    new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal example'),
     new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
     new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
     new ExampleInfo('Blending', 'blending.js', 'How to use blending modes'),
@@ -132,15 +71,27 @@ const exampleList =
     new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
     new ExampleInfo('Clock', 'clock.js', 'Simple clock showing the time'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use the tile layer object'),
+    new ExampleInfo('Piano', 'piano.js', 'A simple piano keyboard demo'),
+    new ExampleInfo('Maze Generator', 'maze.js', 'Generates a random maze'),
+    new ExampleInfo('Starfield', 'starfield.js', 'A moving starfield effect'),
+    new ExampleInfo('Medals', 'medals.js', 'How to use the medal system'),
+    new ExampleInfo('--- MINI GAMES ---'),
     new ExampleInfo('Platformer Game', 'platformer.js', 'Platformer jumping game'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'Rop down adventure game'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Top down adventure game'),
     new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D view with tilted camera'),
-    new ExampleInfo('Pong Game', 'pong.js', 'Simple pong game'),
+    new ExampleInfo('Space Game', 'spaceGame.js', 'Space ship game with parallax starfield'),
+    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander style game'),
+    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird style game'),
+    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style game'),
+    new ExampleInfo('Pong Game', 'pongGame.js', 'Simple pong style game'),
+    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', 'Sliding tile puzzle game'),
+    new ExampleInfo('Raycasting Game', 'raycasting.js', 'Pseudo 3D raycasting system'),
+    new ExampleInfo('--- PLUGINS ---'),
     new ExampleInfo('Box2d Demo', 'box2d.js', 'Demo of the Box2D physics plugin'),
     new ExampleInfo('Box2d Car', 'box2dCar.js', 'Controllable vehicle using the Box2D physics plugin'),
-    new ExampleInfo('Post Processing', 'postProcess.js', 'Example of the post processing plugin'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Post processing plugin demo'),
     new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Simple example of LittleJS UI plugin'),
+    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Demo of nine slice and three slice drawing'),
     new ExampleInfo('--- FULL EXAMPLES ---'),
     new ExampleInfo('Starter', 'starter', 'Clean starter project', true),
     new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Tutorial Breakout example', true),
@@ -150,25 +101,23 @@ const exampleList =
     new ExampleInfo('Stress Test', 'stress', 'Max sprite/object test and music system demo', true),
     new ExampleInfo('Box2D Plugin', 'box2d', 'Demo of the Box2D physics plugin', true),
     new ExampleInfo('HTML Menus', 'htmlMenu', 'Shows how to combine HTML with LittleJS', true),
-    new ExampleInfo('UI System Plugin', 'uiSystem', 'Example of how to use LittleJS UI plugin', true),
-    // Add more examples here!
+    new ExampleInfo('UI System Plugin', 'uiSystem', 'How to use LittleJS UI plugin', true),
 ];
 ///////////////////////////////////////////////////////////////////////////////
-let iframeExample, inputTimeout;
+// global variables
+let iframeExample, inputTimeout, codeMirror, consoleAutoScroll, errorLineMarker, codeIsJS;
 // load the examples into the list
-for (const example of exampleList)
-{
-    const text = example.name + (example.description?' - ' + example.description : '');
-    const o = new Option(text);
-    o.disabled = !example.filename;
-    selectExample.add(o);
-}
+filterExamples();
 // set the selected example from the URL hash
-selectExample.selectedIndex = location.hash.split`#`[1] | 0
+const selectedExample = location.hash.split`#`[1] || '';
+let exampleIndex = exampleList.findIndex((example) => example.filename == selectedExample);
+if (exampleIndex < 0)
+    exampleIndex = 1;
+selectExample.selectedIndex = exampleIndex;
 setExample();
 onresize = () =>
@@ -179,55 +128,67 @@ onresize = () =>
     let h = w / aspect | 0;
     iframeContainer.style.width = w + 'px';
     iframeContainer.style.height = h + 'px';
+    // fix code mirror width
+    container3.style.width = w-30 + 'px';
 }
 onresize();
 ///////////////////////////////////////////////////////////////////////////////
+// setting examples
 function setExample()
 {
-    if (selectExample.selectedIndex < 1 || selectExample.selectedIndex >= exampleList.length)
-        selectExample.selectedIndex = 1;  // reset to default
-    let example = exampleList[selectExample.selectedIndex];
-    if (!example.filename)
-        example = exampleList[selectExample.selectedIndex = 1]; // reset to default
+    // get the original index if this is a filtered result
+    const selectedOption = selectExample.options[selectExample.selectedIndex];
+    let exampleIndex = selectedOption && selectedOption.originalIndex ?
+        parseInt(selectedOption.originalIndex) :
+        selectExample.selectedIndex;
+    // make sure we have a valid example
+    if (exampleIndex < 0 || exampleIndex >= exampleList.length)
+        exampleIndex = 1;  // reset to default
+    if (!exampleList[exampleIndex].filename)
+        exampleIndex = 1;
+    // load the example
+    const example = exampleList[exampleIndex];
     exampleInfo.innerText = example.name + (example.description ? ' - ' + example.description : '');
     const filename = 'examples/' + example.filename;
     exampleLink.href = 'https://github.com/KilledByAPixel/LittleJS/tree/main/' + filename;
     exampleLink.innerText = filename;
-    loadFile(example.filename, example.fullExample);
-    location.hash = selectExample.selectedIndex;
-}
-function codeInput()
-{
-    if (!checkboxLiveEdit.checked)
-        return;
-    // debounce input
-    clearTimeout(inputTimeout);
-    inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
+    location.hash = example.filename;
+    loadFile(example.filename, example.largeExample);
 }
-async function loadFile(filename, fullExample)
+async function loadFile(filename, largeExample)
 {
-    textareaCode.disabled = fullExample;
-    if (fullExample)
+    if (codeMirror)
+        codeMirror.setOption('readOnly', largeExample);
+    else
+        textareaCode.disabled = largeExample;
+    // disable buttons in large example mode
+    buttonPause.disabled = largeExample;
+    buttonRefresh.disabled = largeExample;
+    buttonScreenshot.disabled = largeExample;
+    buttonFullscreen.disabled = largeExample;
+    if (largeExample)
     {
-        if (iframeExample)
-            iframeContainer.removeChild(iframeExample);
-        setErrorMessage();
-        iframeExample = document.createElement('iframe');
-        iframeContainer.appendChild(iframeExample);
-        iframeExample.onload = () =>
+        // Show message in code view that full examples can't be edited
+        const text = 'Code view not available for large examples.';
+        setCode(text, filename);
+        codeIsJS = false;
+        if (codeMirror)
         {
-            const iframeContent = iframeExample.contentWindow;
-            const iframeDocument = iframeContent.document;
-            //textareaCode.value = iframeDocument.body.innerHTML;
-            textareaCode.value = 'Editor code view not available for large examples.\n';
+            codeMirror.off('change', codeInput);
+            codeMirror.setOption('mode', 'text');
+            codeMirror.setValue(text);
         }
-        iframeExample.src = filename;
+        else
+            textareaCode.value = text;
+        clearTimeout(inputTimeout);
         return;
     }
@@ -237,7 +198,19 @@ async function loadFile(filename, fullExample)
         if (!response.ok)
             throw new Error('Could not load file: ' + filename);
         const text = await response.text();
-        setCode(textareaCode.value = text, fullExample);
+        // set the code in both code mirror and textarea
+        codeIsJS = true;
+        if (codeMirror)
+        {
+            codeMirror.on('change', codeInput);
+            codeMirror.setOption('mode', 'javascript');
+            codeMirror.setValue(text);
+        }
+        else
+            textareaCode.value = text;
+        clearTimeout(inputTimeout);
+        setCode(text);
     }
     catch (error)
     {
@@ -245,17 +218,77 @@ async function loadFile(filename, fullExample)
     }
 }
-function setCode(code, largeExample)
+function filterExamples(reset=0)
+{
+    if (reset)
+        inputSearch.value = '';
+    // clear current options
+    selectExample.options.length = 0;
+    // filter and add matching examples
+    const searchTerm = inputSearch.value.toLowerCase().trim();
+    for (let i = 0; i < exampleList.length; i++)
+    {
+        // check if search term matches name or description
+        const example = exampleList[i];
+        const text = example.name + (example.description ? ` - ${example.description}` : '');
+        if (example.name.toLowerCase().includes(searchTerm) ||
+            example.description.toLowerCase().includes(searchTerm))
+        {
+            const o = new Option(text);
+            o.disabled = !example.filename;
+            o.originalIndex = i;
+            selectExample.add(o);
+        }
+    }
+    if (!selectExample.options.length)
+    {
+        // show a message if no matches
+        const o = new Option('No examples found matching "' + searchTerm + '"');
+        o.disabled = true;
+        selectExample.add(o);
+    }
+}
+///////////////////////////////////////////////////////////////////////////////
+// setting code
+function codeInput()
+{
+    if (!checkboxLiveEdit.checked)
+        return;
+    // debounce input - get content from code mirror if available, otherwise from textarea
+    clearTimeout(inputTimeout);
+    const code = codeMirror ? codeMirror.getValue() : textareaCode.value;
+    inputTimeout = setTimeout(() => setCode(code), 500);
+}
+function refreshCode()
+{
+    // manually refresh/run the code regardless of live edit setting
+    const code = codeMirror ? codeMirror.getValue() : textareaCode.value;
+    setCode(code);
+}
+function setCode(code, textFilename)
 {
+    const largeExample = !!textFilename;
     clearTimeout(inputTimeout);
     if (iframeExample)
         iframeContainer.removeChild(iframeExample);
-    setErrorMessage();
+    unsetErrorMessage();
+    unsetConsoleMessage();
     iframeExample = document.createElement('iframe');
     iframeContainer.appendChild(iframeExample);
-    iframeExample.onload = () =>
+    iframeExample.onload = ()=>
     {
+        if (largeExample)
+            return;
         const iframeContent = iframeExample.contentWindow;
         const iframeDocument = iframeContent.document;
@@ -266,24 +299,68 @@ function setCode(code, largeExample)
             if (lineno)
                 text += ` (Line:${lineno}, Column:${colno})`
             if (error && error.stack)
-                text += `\n\n` + error.stack;
+                text += `\n` + error.stack;
             setErrorMessage(text);
+            setErrorLine(lineno);
         }
         iframeContent.onunhandledrejection = (event) =>
         {
             let text = event.reason;
-            if (event.reason.stack)
+            if (event.reason && event.reason.stack)
+            {
                 text += `\n\n` + event.reason.stack;
+                // try to extract line number from stack trace
+                const lineMatch = event.reason.stack.match(/:(\d+):(\d+)/);
+                setErrorLine(parseInt(lineMatch[1]));
+            }
             setErrorMessage(text);
         };
+        // intercept console methods
+        const originalConsole = iframeContent.console;
+        function interceptConsole(method)
+        {
+            const original = originalConsole[method];
+            iframeContent.console[method] = function(...args)
+            {
+                const message = args.map(m=>stringifyMessage(m)).join('\n');
+                setConsoleMessage(message);
+                original.apply(originalConsole, args);
+            };
+        }
+        ['log','info','warn','error','debug'].forEach(f=>interceptConsole(f));
+        // intercept asserts
         const originalAssert = iframeContent.console.assert;
         iframeContent.console.assert = function (condition, output)
         {
-            if (!condition)
+           if (!condition)
                 setErrorMessage('Assertion failed!\n' + (output || '') + '\n' + (new Error).stack);
             originalAssert.apply(this, arguments);
         };
+        buttonScreenshot.onclick = () =>
+        {
+            if (iframeContent.debugScreenshot)
+                iframeContent.debugScreenshot();
+        }
+        // pause/resume functionality
+        buttonPause.onclick = () =>
+        {
+            if (!iframeContent.getPaused || !iframeContent.setPaused)
+                return;
+            const paused = !iframeContent.getPaused();
+            iframeContent.setPaused(paused);
+            buttonPause.textContent = paused ? 'Resume' : 'Pause';
+        }
+        buttonPause.textContent = 'Pause';
+        // fullscreen functionality
+        buttonFullscreen.onclick = ()=> iframeContent.toggleFullscreen();
         // create a script element that overrides the default functions
         const overrideScript = iframeDocument.createElement('script');
         iframeDocument.body.appendChild(overrideScript);
@@ -293,23 +370,189 @@ function setCode(code, largeExample)
             return; // stop if script error
         // start LittleJS engine
-        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?1']);
+        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?'+Date.now()]);
+    }
+    iframeExample.src = textFilename || 'shorts/base.html?' + Date.now();
+}
-        buttonScreenshot.onclick = () =>
+///////////////////////////////////////////////////////////////////////////////
+// error and console messages
+function stringifyMessage(message)
+{
+    // make sure message is a string
+    if (message === null)
+        return 'null';
+    if (Number.isNaN(message))
+        return 'NaN';
+    if (message === undefined)
+        return 'undefined';
+    if (message === 0)
+        return '0';
+    if (message === false)
+        return 'false';
+    return message;
+}
+function setMessage(message, element, clear=true)
+{
+    message = stringifyMessage(message);
+    if (clear || !element.value)
+        element.value = message;
+    else
+        element.value += '\n' + message;
+    element.style.display = message ? 'block' : 'none';
+    if (element == textareaConsole)
+    {
+        const maxConsoleLines = 100;
+        const lines = element.value.split('\n');
+        if (lines.length > maxConsoleLines)
         {
-            if (iframeContent.debugScreenshot)
-                iframeContent.debugScreenshot();
+            // limit max lines, prevents slowdown from too many lines
+            const excessLines = lines.length - maxConsoleLines;
+            element.value = lines.slice(excessLines).join('\n');
         }
+        // auto scroll to bottom only if user hasn't manually scrolled
+        if (consoleAutoScroll)
+            element.scrollTop = element.scrollHeight;
     }
-    iframeExample.src = 'shorts/base.html';
 }
-function setErrorMessage(message='')
+function unsetMessage(element)
+{
+    element.style.display = 'none';
+    element.value = '';
+}
+function clearErrorLine()
 {
-    textareaError.value = message
-    textareaError.style.display = message ? 'block' : 'none';
+    if (!codeMirror || !errorLineMarker)
+        return;
+    codeMirror.getDoc().removeLineClass(errorLineMarker, 'background', 'error-line');
+}
+function setErrorLine(lineNumber)
+{
+    if (!codeMirror || !(lineNumber > 0))
+        return;
+    clearErrorLine();
+    --lineNumber; // codeMirror uses 0-based line numbers
+    errorLineMarker = codeMirror.getDoc().addLineClass(lineNumber, 'background', 'error-line');
+    //codeMirror.scrollIntoView({line: lineNumber});
+}
+function setErrorMessage(message)
+{
+    // prevent overwriting an existing error message
+    const errorMessageIsVisible = textareaError.style.display == 'block';
+    if (!errorMessageIsVisible)
+        setMessage(message, textareaError);
+}
+function unsetErrorMessage() { unsetMessage(textareaError); clearErrorLine(); }
+function setConsoleMessage(message) { setMessage(message, textareaConsole, false); }
+function unsetConsoleMessage() { unsetMessage(textareaConsole); consoleAutoScroll = true; }
+function onScrollConsole()
+{
+    // only auto scroll console is it is scrolled to bottom
+    const tolerance = 5; // pixels of tolerance
+    consoleAutoScroll = Math.abs(textareaConsole.scrollTop - (textareaConsole.scrollHeight - textareaConsole.clientHeight)) < tolerance;
+}
+textareaConsole.addEventListener('scroll', onScrollConsole);
+///////////////////////////////////////////////////////////////////////////////
+// setup code mirror
+const defaultTheme = 'littlejs';
+const defaultFontSize = '16px';
+const themes =
+[
+    'littlejs',
+    '3024-night',
+    'abcdef',
+    'ambiance',
+    'blackboard',
+    'monokai',
+    'duotone-light',
+    'icecoder',
+    'lesser-dark',
+    'night',
+    'yonce'
+];
+// Load saved preferences from localStorage
+const savedTheme = localStorage.getItem('littleJS-theme') || defaultTheme;
+const savedFontSize = localStorage.getItem('littleJS-fontSize') || defaultFontSize;
+for (const theme of themes)
+{
+    if (theme != 'littlejs')
+        addCodeMirrorElement(`theme/${theme}.min.css`, 'link', 'stylesheet');
+    const o = new Option(theme);
+    o.selected = theme == savedTheme;
+    selectTheme.add(o);
+}
+// Set the saved font size
+selectFontSize.value = savedFontSize;
+textareaCode.style.fontSize = savedFontSize;
+addCodeMirrorElement('codemirror.min.css', 'link', 'stylesheet');
+addCodeMirrorElement('codemirror.min.js', 'script').onload = ()=>
+addCodeMirrorElement('addon/edit/matchbrackets.js', 'script').onload = ()=>
+addCodeMirrorElement('mode/javascript/javascript.min.js', 'script').onload = ()=>
+initCodeMirror();
+function initCodeMirror()
+{
+    const textareaCode = document.getElementById('textareaCode');
+    codeMirror = CodeMirror.fromTextArea(textareaCode,
+    {
+        theme: savedTheme,
+        indentUnit: 4,
+        mode: codeIsJS ? 'javascript' : 'text',
+        lineNumbers: true,
+        lineWrapping: true,
+        matchBrackets: true,
+    });
+    codeMirror.on('change', codeInput);
+    loadTheme();
+}
+function addCodeMirrorElement(filename, type, rel)
+{
+    // add element for code mirror
+    const e = document.createElement(type);
+    e.rel = rel;
+    filename = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/' + filename;
+    if (type == 'link')
+        e.href = filename;
+    else
+        e.src = filename;
+    e.crossOrigin = 'anonymous';
+    document.head.appendChild(e);
+    return e;
+}
+function loadTheme()
+{
+    const theme = selectTheme.value;
+    const size = selectFontSize.value;
+    // Save preferences to localStorage
+    localStorage.setItem('littleJSExamples_theme', theme);
+    localStorage.setItem('littleJSExamples_fontSize', size);
+    // Apply the theme and font size
+    textareaCode.style.fontSize = size;
+    if (codeMirror)
+    {
+        codeMirror.getWrapperElement().style.fontSize = size;
+        codeMirror.setOption('theme', theme);
+    }
 }
 </script>
 </body>
-</html>
+</html>