Added LittleJS draft https://chatgpt.com/share/69288dea-0870-800f-9939-aad7ed2f54b3

2025-12-02 15:39:57 +00:00 · 2025-11-27 18:44:33 +01:00
parent 05ff3d3d61
commit ba26e5a53b
16 changed files with 809 additions and 0 deletions
--- a/group_vars/all/09_networks.yml
+++ b/group_vars/all/09_networks.yml
@@ -120,6 +120,8 @@ defaults_networks:
      subnet: 192.168.104.96/28
    web-app-suitecrm:
      subnet: 192.168.104.112/28
+    web-app-littlejs:
+      subnet: 192.168.104.128/28

    # /24 Networks / 254 Usable Clients
    web-app-bigbluebutton:
--- a/group_vars/all/10_ports.yml
+++ b/group_vars/all/10_ports.yml
@@ -85,6 +85,7 @@ ports:
      web-app-shopware: 8060
      web-svc-onlyoffice: 8061
      web-app-suitecrm: 8062
+      web-app-littlejs: 8063
      web-app-bigbluebutton: 48087    # This port is predefined by bbb. @todo Try to change this to a 8XXX port
  public:
    # The following ports should be changed to 22 on the subdomain via stream mapping
--- a/roles/web-app-littlejs/README.md
+++ b/roles/web-app-littlejs/README.md
@@ -0,0 +1,33 @@
+# LittleJS Playground
+
+## Description
+
+**LittleJS Playground** is a self-hosted web application that bundles the LittleJS engine, its official examples, and a minimal Infinito.Nexus launcher UI.  
+It provides a simple, tile-based overview of demos and games, allowing you to quickly explore LittleJS examples directly in your browser.
+
+## Overview
+
+LittleJS Playground is designed as a lightweight HTML5 game sandbox for education, prototyping, and fun.  
+It exposes the original LittleJS `examples/` browser and adds a Bootstrap-based landing page that lists all examples as clickable tiles and offers quick links to popular games such as platformers and arcade-style demos.  
+The app runs as a single Docker container and requires no additional database or backend services.
+
+## Features
+
+- **Self-hosted LittleJS environment** — run LittleJS demos and games under your own domain.
+- **Example browser integration** — direct access to the original LittleJS example browser.
+- **Tile-based launcher UI** — dynamically renders a catalog from the `exampleList` definition.
+- **Quick links for games** — navbar entries for selected games (e.g. platformer, pong, space shooter).
+- **Bootstrap-styled interface** — clean, minimalistic, and responsive layout.
+- **Docker-ready** — fully integrated into the Infinito.Nexus Docker stack.
+
+## Further Resources
+
+- 🕹 Upstream engine & examples: [KilledByAPixel/LittleJS](https://github.com/KilledByAPixel/LittleJS)
+- 📚 LittleJS README & docs: [GitHub – LittleJS](https://github.com/KilledByAPixel/LittleJS#readme)
+
+## Credits
+
+LittleJS is developed and maintained by **KilledByAPixel** and contributors.  
+This integration and role are developed and maintained by **Kevin Veen-Birkenbach**.  
+Learn more at [veen.world](https://www.veen.world).  
+Licensed under the [Infinito.Nexus NonCommercial License](https://s.infinito.nexus/license).
--- a/roles/web-app-littlejs/config/main.yml
+++ b/roles/web-app-littlejs/config/main.yml
@@ -0,0 +1,33 @@
+features:
+  matomo:       true
+  css:          true
+  desktop:      true
+  logout:       false
+
+server:
+  csp:
+    whitelist:
+      script-src-elem:
+        - "https://cdnjs.cloudflare.com"
+        - "https://cdn.jsdelivr.net"
+      style-src-elem:
+        - "https://cdn.jsdelivr.net"
+        - "https://cdnjs.cloudflare.com"
+      font-src:
+        - "https://cdnjs.cloudflare.com"
+        - "data:"
+      connect-src:
+        - "https://cdn.jsdelivr.net"
+      frame-src:
+        - "https://littlejs.{{ PRIMARY_DOMAIN }}"
+    flags:
+      style-src-attr:
+        unsafe-inline:  true
+      script-src-elem:
+        unsafe-inline:  true
+      script-src-attr:
+        unsafe-inline:  true
+  domains:
+    canonical:
+      - "littlejs.{{ PRIMARY_DOMAIN }}"
+    aliases: []
--- a/roles/web-app-littlejs/files/style.css
+++ b/roles/web-app-littlejs/files/style.css
@@ -0,0 +1,55 @@
+/* Global Base Styling */
+body {
+    /* Use Infinito.Nexus color scheme variables */
+    background-color: var(--color-01-90);
+    color: var(--color-01-05);
+    min-height: 100vh;
+    padding-bottom: 4rem; /* Space for footer bar */
+}
+
+/* Card Styling (Infinito.Nexus Homepage Style) */
+.app-card {
+    border-radius: 1rem;
+    background: radial-gradient(
+    circle at top left,
+    rgba(var(--color-rgb-01-10), 0.95),
+    rgba(var(--color-rgb-01-20), 0.90)
+    );
+    border: 1px solid rgba(var(--color-rgb-01-40), 0.35);
+    box-shadow: 0 18px 45px rgba(var(--color-rgb-01-90), 0.65);
+    transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
+}
+
+.app-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 22px 60px rgba(var(--color-rgb-01-90), 0.90);
+    border-color: rgba(var(--color-rgb-01-30), 0.70);
+}
+
+.app-icon {
+    font-size: 2.6rem;
+}
+
+.app-badge {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: .12em;
+}
+
+/* Footer Bar */
+.footer-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1030;
+}
+
+.footer-bar .btn-link {
+    text-decoration: none;
+    font-size: 0.8rem;
+}
+
+.footer-bar .btn-link:hover {
+    text-decoration: underline;
+}
--- a/roles/web-app-littlejs/meta/main.yml
+++ b/roles/web-app-littlejs/meta/main.yml
@@ -0,0 +1,28 @@
+# roles/web-app-littlejs/meta/main.yml
+galaxy_info:
+  author: "Kevin Veen-Birkenbach"
+  description: >
+    LittleJS Playground – self-hosted LittleJS example browser and
+    collection of HTML5 games and demos, wrapped as a Dockerized web app.
+  license: "Infinito.Nexus NonCommercial License"
+  license_url: "https://s.infinito.nexus/license"
+  company: |
+    Kevin Veen-Birkenbach
+    Consulting & Coaching Solutions
+    https://www.veen.world
+  galaxy_tags:
+    - infinito
+    - docker
+    - webapp
+    - game
+    - html5
+    - littlejs
+  repository: "https://s.infinito.nexus/code"
+  issue_tracker_url: "https://s.infinito.nexus/issues"
+  documentation: "https://docs.infinito.nexus"
+  logo:
+    class: "fa-solid fa-gamepad"
+  run_after:
+    - web-app-matomo
+
+dependencies: []
--- a/roles/web-app-littlejs/tasks/01_core.yml
+++ b/roles/web-app-littlejs/tasks/01_core.yml
@@ -0,0 +1,23 @@
+- name: "load docker, proxy for '{{ application_id }}'"
+  include_role:
+    name: sys-stk-full-stateless
+  vars:
+    docker_compose_flush_handlers: false
+
+- name: "Load LittleJS example metadata"
+  include_vars:
+    file: "examples.yml"
+
+- name: "Render LittleJS index.html"
+  template:
+    src:  "html/index.html.j2"
+    dest: "{{ LITTLEJS_INDEX_HOST_ABS }}"
+    mode: "0644"
+  notify:
+    - docker compose build
+    - docker compose up
+
+- name: "flush docker compose for '{{ application_id }}'"
+  meta: flush_handlers
+
+- include_tasks: utils/run_once.yml
--- a/roles/web-app-littlejs/tasks/main.yml
+++ b/roles/web-app-littlejs/tasks/main.yml
@@ -0,0 +1,3 @@
+---
+- include_tasks: 01_core.yml
+  when: run_once_web_app_littlejs is not defined
--- a/roles/web-app-littlejs/templates/Dockerfile.j2
+++ b/roles/web-app-littlejs/templates/Dockerfile.j2
@@ -0,0 +1,9 @@
+# roles/web-app-littlejs/templates/Dockerfile.j2
+FROM nginx:alpine
+
+# Static LittleJS assets – engine builds + examples
+COPY ./{{ LITTLEJS_APP_REL }}/examples /usr/share/nginx/html/examples
+COPY ./{{ LITTLEJS_APP_REL }}/dist     /usr/share/nginx/html/dist
+
+# Custom Infinito.Nexus landing page with Bootstrap menu and tiles
+COPY ./{{ LITTLEJS_INDEX_HOST_REL }} /usr/share/nginx/html/index.html
--- a/roles/web-app-littlejs/templates/docker-compose.yml.j2
+++ b/roles/web-app-littlejs/templates/docker-compose.yml.j2
@@ -0,0 +1,10 @@
+---
+{% include 'roles/docker-compose/templates/base.yml.j2' %}
+  {{ LITTLEJS_SERVICE }}:
+    container_name: {{ LITTLEJS_CONTAINER }}
+    {{ lookup('template', 'roles/docker-container/templates/build.yml.j2') | indent(4) }}
+    ports:
+      - 127.0.0.1:{{ ports.localhost.http[application_id] }}:80
+{% include 'roles/docker-container/templates/base.yml.j2' %}
+
+{% include 'roles/docker-compose/templates/networks.yml.j2' %}
--- a/roles/web-app-littlejs/templates/html/index.html.j2
+++ b/roles/web-app-littlejs/templates/html/index.html.j2
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>{{ LITTLEJS_TITLE }}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Bootstrap CSS -->
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            crossorigin="anonymous"
+        />
+
+        <!-- Font Awesome Icons -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            crossorigin="anonymous"
+        />
+    </head>
+
+    <body>
+    {% include "nav_top.html.j2" %}
+
+    {% include "main.html.j2" %}
+
+    {% include "nav_bottom.html.j2" %}
+    </body>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+</html>
--- a/roles/web-app-littlejs/templates/html/main.html.j2
+++ b/roles/web-app-littlejs/templates/html/main.html.j2
@@ -0,0 +1,58 @@
+<main class="container py-4">
+  <header class="mb-4">
+    <h1 class="h3 mb-2">LittleJS Examples &amp; Games</h1>
+    <p class="text-secondary small mb-0">
+      Browse and launch LittleJS demos rendered dynamically through Infinito.Nexus.
+    </p>
+  </header>
+
+  <section>
+    <div class="row g-4">
+
+      {% for key, cat in littlejs_examples|dictsort %}
+        {% for ex in cat['items'] %}
+          {% if ex.is_project %}
+            {% set href = "/examples/" ~ ex.file ~ "/" %}
+          {% else %}
+            {% set href = "/examples/shorts/base.html?file=" ~ ex.file %}
+          {% endif %}
+
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <div class="card app-card h-100">
+              <div class="card-body d-flex flex-column">
+
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                  <div class="app-icon text-primary-emphasis">
+                    <i class="{{ ex.icon }}"></i>
+                  </div>
+                  <span class="badge rounded-pill bg-primary-subtle text-primary app-badge">
+                    {{ cat.label|replace('---','')|trim }}
+                  </span>
+                </div>
+
+                <h2 class="h5 mb-2">{{ ex.name }}</h2>
+
+                {% if ex.description %}
+                <p class="small text-secondary mb-3">{{ ex.description }}</p>
+                {% endif %}
+
+                {% if ex.tags %}
+                <p class="small text-muted mb-3">{{ ex.tags }}</p>
+                {% endif %}
+
+                <div class="mt-auto">
+                  <a href="{{ href }}" class="btn btn-primary app-footer-btn">
+                    <i class="{{ ex.icon }} me-2"></i>Play {{ ex.name }}
+                  </a>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+        {% endfor %}
+      {% endfor %}
+
+    </div>
+  </section>
+</main>
--- a/roles/web-app-littlejs/templates/html/nav_bottom.html.j2
+++ b/roles/web-app-littlejs/templates/html/nav_bottom.html.j2
@@ -0,0 +1,23 @@
+<!-- Footer -->
+<nav class="navbar navbar-dark bg-dark border-top border-secondary footer-bar">
+  <div class="container-fluid d-flex justify-content-between">
+
+    <div class="d-flex align-items-center gap-3">
+      <a class="btn btn-sm btn-link text-light" href="{{ LITTLEJS_REPOSITORY_BASE }}" target="_blank">
+        <i class="fa-brands fa-github me-1"></i>LittleJS Repository
+      </a>
+
+      <a class="btn btn-sm btn-link text-light" href="https://s.infinito.nexus/littlejscode" target="_blank">
+        <i class="fa-solid fa-code me-1"></i>{{ LITTLEJS_HEADLINE }} Code
+      </a>
+    </div>
+
+    <div class="d-flex align-items-center">
+      <a class="btn btn-sm btn-link text-light" href="https://infinito.nexus" target="_blank">
+        <i class="fa-solid fa-globe me-1"></i>{{ SOFTWARE_NAME }}
+      </a>
+    </div>
+
+  </div>
+</nav>
+
--- a/roles/web-app-littlejs/templates/html/nav_top.html.j2
+++ b/roles/web-app-littlejs/templates/html/nav_top.html.j2
@@ -0,0 +1,68 @@
+<!-- Top Navigation -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-secondary">
+  <div class="container-fluid">
+    <a class="navbar-brand d-flex align-items-center" href="/">
+      <i class="fa-solid fa-gamepad me-2"></i>
+      <span>{{ LITTLEJS_HEADLINE }}</span>
+    </a>
+
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-auto">
+
+        <!-- Apps Dropdown (nested categories) -->
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
+            <i class="fa-solid fa-grid-2 me-1"></i>Apps
+          </a>
+
+          <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
+
+            {% for key, cat in littlejs_examples|dictsort %}
+
+              <li class="dropdown-submenu dropstart">
+                <a class="dropdown-item dropdown-toggle d-flex align-items-center" href="#" data-bs-toggle="dropdown">
+                  <i class="{{ cat.icon }} me-2"></i>
+                  {{ cat.label|replace('---','')|trim }}
+                </a>
+
+                <ul class="dropdown-menu dropdown-menu-dark">
+
+                  {# FIXED: cat['items'] #}
+                  {% for ex in cat['items'] %}
+                    {% if ex.is_project %}
+                      {% set href = "/examples/" ~ ex.file ~ "/" %}
+                    {% else %}
+                      {% set href = "/examples/shorts/base.html?file=" ~ ex.file %}
+                    {% endif %}
+
+                    <li>
+                      <a class="dropdown-item d-flex align-items-center" href="{{ href }}">
+                        <i class="{{ ex.icon }} me-2"></i>{{ ex.name }}
+                      </a>
+                    </li>
+                  {% endfor %}
+
+                </ul>
+              </li>
+
+              {% if not loop.last %}
+                <li><hr class="dropdown-divider"></li>
+              {% endif %}
+
+            {% endfor %}
+          </ul>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="/examples/">
+            <i class="fa-regular fa-folder-open me-1"></i>Browser
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
--- a/roles/web-app-littlejs/vars/examples.yml
+++ b/roles/web-app-littlejs/vars/examples.yml
@@ -0,0 +1,401 @@
+# roles/web-app-littlejs/vars/examples.yml
+# LittleJS examples for launcher UI (used to generate example tiles and menu)
+
+littlejs_examples:
+  basic:
+    label: "--- BASIC ---"
+    icon: "fa-solid fa-shapes"
+    items:
+      - name: "Hello World"
+        file: "helloWorld.js"
+        description: "Simple starter example"
+        is_project: false
+        tags: "beginner, gradient, text, tiles"
+        icon: "fa-solid fa-seedling"
+
+      - name: "Empty"
+        file: "empty.js"
+        description: "Empty example template"
+        is_project: false
+        tags: "beginner, text"
+        icon: "fa-regular fa-file"
+
+      - name: "Texture"
+        file: "texture.js"
+        description: "Texture display and manipulation"
+        is_project: false
+        tags: "sprites, loading, tiles"
+        icon: "fa-regular fa-image"
+
+      - name: "Animation"
+        file: "animation.js"
+        description: "Sprite animation system"
+        is_project: false
+        tags: "frames, loop, tiles, sprites"
+        icon: "fa-solid fa-film"
+
+      - name: "Shapes"
+        file: "shapes.js"
+        description: "Draw geometric shapes and primitives"
+        is_project: false
+        tags: "circle, ellipse, rectangle, polygon, lines"
+        icon: "fa-solid fa-draw-polygon"
+
+      - name: "Colors"
+        file: "colors.js"
+        description: "Color manipulation and HSL"
+        is_project: false
+        tags: "hue, saturation, blending, rectangle"
+        icon: "fa-solid fa-palette"
+
+      - name: "Sprite Atlas"
+        file: "spriteAtlas.js"
+        description: "Sprite atlas and tile rendering"
+        is_project: false
+        tags: "sheet, frames, tiles"
+        icon: "fa-solid fa-table-cells-large"
+
+      - name: "Blending"
+        file: "blending.js"
+        description: "Additive blending and transparency"
+        is_project: false
+        tags: "alpha, color, tiles, smooth"
+        icon: "fa-solid fa-droplet"
+
+      - name: "Tile Layer"
+        file: "tileLayer.js"
+        description: "Tile layer rendering system"
+        is_project: false
+        tags: "level, map, grid, particles"
+        icon: "fa-solid fa-border-all"
+
+      - name: "Particles"
+        file: "particles.js"
+        description: "Particle system"
+        is_project: false
+        tags: "effects, emitter, physics, fire, smoke"
+        icon: "fa-solid fa-burst"
+
+      - name: "Input"
+        file: "input.js"
+        description: "Input system demo for keyboard, mouse, touch, and gamepad."
+        is_project: false
+        tags: "input, control"
+        icon: "fa-regular fa-keyboard"
+
+      - name: "Timers"
+        file: "timers.js"
+        description: "Timer objects and UI"
+        is_project: false
+        tags: "delay, interval, slider"
+        icon: "fa-regular fa-clock"
+
+      - name: "Sound Effects"
+        file: "sound.js"
+        description: "ZzFX sound effect generator"
+        is_project: false
+        tags: "audio, volume, ui"
+        icon: "fa-solid fa-bell"
+
+      - name: "Music"
+        file: "music.js"
+        description: "Basic load, play, pause, and stop"
+        is_project: false
+        tags: "music, sound, audio, streaming, volume, ui"
+        icon: "fa-solid fa-headphones-simple"
+
+      - name: "Video"
+        file: "videoPlayer.js"
+        description: "Basic video play, pause, and stop"
+        is_project: false
+        tags: "movie, sound, audio, streaming, volume, ui"
+        icon: "fa-solid fa-video"
+
+      - name: "Font Image"
+        file: "fontImage.js"
+        description: "Bitmap font system with built-in system font"
+        is_project: false
+        tags: "text, characters"
+        icon: "fa-solid fa-font"
+
+      - name: "Medals"
+        file: "medals.js"
+        description: "Achievement system"
+        is_project: false
+        tags: "unlock, progress, newgrounds"
+        icon: "fa-solid fa-medal"
+
+      - name: "Tile Raycast"
+        file: "tileRaycast.js"
+        description: "Example of the tile layer raycast collision"
+        is_project: false
+        tags: "level, map, grid"
+        icon: "fa-solid fa-crosshairs"
+
+      - name: "Camera Mouse Drag"
+        file: "cameraDrag.js"
+        description: "Example of how to control camera with mouse"
+        is_project: false
+        tags: "ui, input, control"
+        icon: "fa-solid fa-arrows-up-down-left-right"
+
+      - name: "Debug Drawing"
+        file: "debugDraw.js"
+        description: "Debug drawing system"
+        is_project: false
+        tags: "debug, circle, line, rectangle"
+        icon: "fa-solid fa-bug"
+
+  advanced:
+    label: "--- ADVANCED ---"
+    icon: "fa-solid fa-rocket"
+    items:
+      - name: "Clock"
+        file: "clock.js"
+        description: "Animated analog clock"
+        is_project: false
+        tags: "time, rotation, lines, rectangle"
+        icon: "fa-regular fa-clock"
+
+      - name: "Starfield"
+        file: "starfield.js"
+        description: "Animated parallax starfield"
+        is_project: false
+        tags: "space, movement, depth, rectangle"
+        icon: "fa-solid fa-star"
+
+      - name: "Parallax"
+        file: "parallax.js"
+        description: "Parallax scrolling mountains"
+        is_project: false
+        tags: "generative, canvas, background"
+        icon: "fa-solid fa-mountain-sun"
+
+      - name: "Maze Generator"
+        file: "maze.js"
+        description: "Procedural maze generation"
+        is_project: false
+        tags: "generative, level, tiles, map, grid"
+        icon: "fa-solid fa-border-style"
+
+      - name: "Piano"
+        file: "piano.js"
+        description: "Interactive piano keyboard"
+        is_project: false
+        tags: "music, sound, audio, notes, ui, instrument"
+        icon: "fa-solid fa-music"
+
+      - name: "Step Sequencer"
+        file: "sequencer.js"
+        description: "Simple music loop creation tool"
+        is_project: false
+        tags: "music, sound, audio, notes, ui, instrument"
+        icon: "fa-solid fa-sliders"
+
+      - name: "Music Player"
+        file: "musicPlayer.js"
+        description: "Music player with audio seeking and drag and drop"
+        is_project: false
+        tags: "sound, loading, audio, ui"
+        icon: "fa-solid fa-compact-disc"
+
+  games:
+    label: "--- GAMES ---"
+    icon: "fa-solid fa-gamepad"
+    items:
+      - name: "Pong Game"
+        file: "pongGame.js"
+        description: "Classic paddle ball bouncing"
+        is_project: false
+        tags: "objects, collision"
+        icon: "fa-solid fa-table-tennis-paddle-ball"
+
+      - name: "Platformer Game"
+        file: "platformer.js"
+        description: "Jump and run side view"
+        is_project: false
+        tags: "objects, gravity, level, tiles, camera"
+        icon: "fa-solid fa-person-running"
+
+      - name: "Top Down Game"
+        file: "topDown.js"
+        description: "Top-down style camera"
+        is_project: false
+        tags: "objects, movement, exploration"
+        icon: "fa-solid fa-up-down-left-right"
+
+      - name: "Tilted View Game"
+        file: "tiltedView.js"
+        description: "Pseudo-3D oblique view"
+        is_project: false
+        tags: "isometric, depth"
+        icon: "fa-solid fa-cube"
+
+      - name: "Flappy Game"
+        file: "flappyGame.js"
+        description: "Flappy bird style game"
+        is_project: false
+        tags: "objects, obstacles"
+        icon: "fa-solid fa-dove"
+
+      - name: "Lander Game"
+        file: "landerGame.js"
+        description: "Lunar lander style game"
+        is_project: false
+        tags: "objects, physics"
+        icon: "fa-solid fa-rocket"
+
+      - name: "Hill Glide Game"
+        file: "hillGlideGame.js"
+        description: "Tiny wings style sliding game"
+        is_project: false
+        tags: "objects, physics, speed"
+        icon: "fa-solid fa-mountain"
+
+      - name: "Sliding Puzzle"
+        file: "slidingPuzzle.js"
+        description: "15 tile sliding puzzle"
+        is_project: false
+        tags: "objects, numbers, ui"
+        icon: "fa-solid fa-grip"
+
+      - name: "Space Game"
+        file: "spaceGame.js"
+        description: "Spaceship shooter with parallax"
+        is_project: false
+        tags: "objects, weapons, stars, camera, rotation"
+        icon: "fa-solid fa-meteor"
+
+      - name: "3D FPS Game"
+        file: "fps.js"
+        description: "Pseudo 3D raycasting demo"
+        is_project: false
+        tags: "3D, FPS, maze, camera"
+        icon: "fa-solid fa-bullseye"
+
+  plugins:
+    label: "--- PLUGINS ---"
+    icon: "fa-solid fa-puzzle-piece"
+    items:
+      - name: "Box2d Demo"
+        file: "box2d.js"
+        description: "Box2D physics plugin"
+        is_project: false
+        tags: "objects, mouse"
+        icon: "fa-solid fa-cubes"
+
+      - name: "Box2d Car"
+        file: "box2dCar.js"
+        description: "Drivable car with Box2D physics"
+        is_project: false
+        tags: "objects, vehicle, suspension, wheels"
+        icon: "fa-solid fa-car"
+
+      - name: "Box2d Pool"
+        file: "box2dPool.js"
+        description: "Billiard table pool game with Box2d physics"
+        is_project: false
+        tags: "objects, game"
+        icon: "fa-solid fa-pool-8-ball"
+
+      - name: "Box2d Tile Layer"
+        file: "box2dTileLayer.js"
+        description: "Tile layer with Box2d physics"
+        is_project: false
+        tags: "objects, level, map, grid"
+        icon: "fa-solid fa-border-all"
+
+      - name: "WebGL Shader"
+        file: "shader.js"
+        description: "Full canvas webgl shader"
+        is_project: false
+        tags: "webgl, visual, effect"
+        icon: "fa-solid fa-wand-magic-sparkles"
+
+      - name: "Post Processing"
+        file: "postProcess.js"
+        description: "Shader effects and filters"
+        is_project: false
+        tags: "webgl, visual, effect"
+        icon: "fa-solid fa-sparkles"
+
+      - name: "UI System"
+        file: "uiSystem.js"
+        description: "Buttons, sliders, and checkboxes"
+        is_project: false
+        tags: "objects, widgets, interactive"
+        icon: "fa-solid fa-sliders"
+
+      - name: "Nine Slice"
+        file: "nineSlice.js"
+        description: "Scalable UI panels"
+        is_project: false
+        tags: "three slice, stretch, corners, text, tiles"
+        icon: "fa-solid fa-vector-square"
+
+  full_examples:
+    label: "--- FULL EXAMPLES ---"
+    icon: "fa-solid fa-box-open"
+    items:
+      - name: "Starter"
+        file: "starter"
+        description: "Clean project template"
+        is_project: true
+        tags: "base, empty, particles"
+        icon: "fa-solid fa-seedling"
+
+      - name: "Breakout Tutorial"
+        file: "breakoutTutorial"
+        description: "Step-by-step breakout game tutorial"
+        is_project: true
+        tags: "objects, physics, score"
+        icon: "fa-solid fa-graduation-cap"
+
+      - name: "Breakout Game"
+        file: "breakout"
+        description: "Complete breakout game"
+        is_project: true
+        tags: "objects, physics, score"
+        icon: "fa-solid fa-table-tennis-paddle-ball"
+
+      - name: "Platforming Game"
+        file: "platformer"
+        description: "Platformer with level loading"
+        is_project: true
+        tags: "jump, world, tiles, pixel art, sprites"
+        icon: "fa-solid fa-person-running"
+
+      - name: "Puzzle Game"
+        file: "puzzle"
+        description: "Match 3 style puzzle game"
+        is_project: true
+        tags: "match, swap, sprites"
+        icon: "fa-solid fa-puzzle-piece"
+
+      - name: "Stress Test"
+        file: "stress"
+        description: "Performance and music test"
+        is_project: true
+        tags: "optimization, tiles, sprites"
+        icon: "fa-solid fa-gauge-high"
+
+      - name: "Box2D Plugin"
+        file: "box2d"
+        description: "Full Box2D physics demo"
+        is_project: true
+        tags: "objects, bodies, joints"
+        icon: "fa-solid fa-cubes"
+
+      - name: "HTML Menus"
+        file: "htmlMenu"
+        description: "HTML UI integration"
+        is_project: true
+        tags: "web, browser, overlay, button, slider, textbox"
+        icon: "fa-solid fa-code"
+
+      - name: "UI System Plugin Demo"
+        file: "uiSystem"
+        description: "Complete UI system demo"
+        is_project: true
+        tags: "menu, overlay, button, slider, checkbox"
+        icon: "fa-solid fa-sliders"
--- a/roles/web-app-littlejs/vars/main.yml
+++ b/roles/web-app-littlejs/vars/main.yml
@@ -0,0 +1,30 @@
+# General
+application_id: "web-app-littlejs"
+entity_name:    "{{ application_id | get_entity_name }}"
+
+# Features
+features:
+  css:      true
+  matomo:   true
+  desktop:  true
+
+LITTLEJS_HEADLINE:          ""
+
+LITTLEJS_TITLE:             "LittleJS Playground – {{ PRIMARY_DOMAIN | upper }}"
+
+# Base repository URL for LittleJS
+LITTLEJS_REPOSITORY_BASE:   "https://github.com/KilledByAPixel/LittleJS"
+
+# Git repository for LittleJS engine + examples
+docker_repository_address:  "{{ LITTLEJS_REPOSITORY_BASE }}.git"
+docker_pull_git_repository: true
+docker_repository_branch:   "main"
+
+# Relative path where sys-stk-full-stateless checks out the repo
+LITTLEJS_APP_REL:           "services/repository"
+LITTLEJS_INDEX_HOST_ABS:    "{{ [ docker_compose.directories.volumes, 'index.html' ] | path_join }}"
+LITTLEJS_INDEX_HOST_REL:    "volumes/index.html"
+
+# Helper variables
+LITTLEJS_CONTAINER:         "{{ entity_name }}"
+LITTLEJS_SERVICE:           "{{ entity_name }}"