Spaces:

KwabsHug
/

GameConfigIdea

Running on Zero

App Files Files Community

KwabsHug commited on Jan 29

Commit

68f5a46

verified ·

1 Parent(s): f498f82

Upload 10 files

Browse files

Files changed (11) hide show

.gitattributes +8 -0
MovingDotSpaceExport/MovingDotSpaceStandalone.html +1014 -0
MovingDotSpaceExport/backgrounds/1stGameLoc123.png +3 -0
MovingDotSpaceExport/backgrounds/2ndGameLoc123.png +3 -0
MovingDotSpaceExport/backgrounds/ConstructionGameLoc.png +3 -0
MovingDotSpaceExport/backgrounds/CyberpunkGameLoc.png +3 -0
MovingDotSpaceExport/backgrounds/MedievalFantasyGameLoc.png +3 -0
MovingDotSpaceExport/backgrounds/SpaceOdysseyGameLoc.png +3 -0
MovingDotSpaceExport/backgrounds/SuperTeacherGameLoc.png +3 -0
MovingDotSpaceExport/backgrounds/eldoria_background.png +3 -0
MovingDotSpaceExport/gameConfig.json +436 -0

.gitattributes CHANGED Viewed

@@ -35,3 +35,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 testmedia/Stable[[:space:]]Audio[[:space:]]-[[:space:]]Raindrops,[[:space:]]output.wav filter=lfs diff=lfs merge=lfs -text
 testmedia/SVD[[:space:]]-[[:space:]]random[[:space:]]squiggles[[:space:]]as[[:space:]]roads[[:space:]]video[[:space:]]004484.mp4 filter=lfs diff=lfs merge=lfs -text

 *tfevents* filter=lfs diff=lfs merge=lfs -text
 testmedia/Stable[[:space:]]Audio[[:space:]]-[[:space:]]Raindrops,[[:space:]]output.wav filter=lfs diff=lfs merge=lfs -text
 testmedia/SVD[[:space:]]-[[:space:]]random[[:space:]]squiggles[[:space:]]as[[:space:]]roads[[:space:]]video[[:space:]]004484.mp4 filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/1stGameLoc123.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/2ndGameLoc123.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/ConstructionGameLoc.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/CyberpunkGameLoc.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/eldoria_background.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/MedievalFantasyGameLoc.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/SpaceOdysseyGameLoc.png filter=lfs diff=lfs merge=lfs -text
+MovingDotSpaceExport/backgrounds/SuperTeacherGameLoc.png filter=lfs diff=lfs merge=lfs -text

MovingDotSpaceExport/MovingDotSpaceStandalone.html ADDED Viewed

	@@ -0,0 +1,1014 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Moving Dot Space Game</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background: #f0f0f0;
+    }
+    #game-root {
+      max-width: 100%;
+      overflow-x: hidden;
+    }
+    /* Theme Selector */
+    #theme-selector {
+      padding: 10px;
+      background: #fff;
+      border-bottom: 1px solid #ccc;
+    }
+    #theme-selector select {
+      padding: 5px 10px;
+      font-size: 14px;
+    }
+    #theme-selector button {
+      margin-left: 10px;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    /* Game Container */
+    #game-container {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+      border: 1px solid black;
+      overflow: hidden;
+      background-size: cover;
+      background-position: center;
+      background-color: #333;
+    }
+    /* Moving Dot (Player) */
+    #moving-dot {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background-color: lightgreen;
+      border: 2px solid black;
+      cursor: pointer;
+      z-index: 10;
+    }
+    #moving-dot:focus {
+      outline: 3px solid yellow;
+    }
+    /* Targets */
+    .target {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background-color: red;
+    }
+    .target-label {
+      position: absolute;
+      color: white;
+      font-size: 12px;
+      text-shadow: 1px 1px 2px black;
+      pointer-events: none;
+      white-space: nowrap;
+    }
+    /* Overlay Text (HUD) */
+    #overlay-text {
+      position: absolute;
+      top: 3%;
+      left: 3%;
+      color: black;
+      background-color: white;
+      font-weight: bold;
+      font-size: 15px;
+      border: 2px solid black;
+      padding: 5px 10px;
+      max-width: 90%;
+    }
+    /* Modal Overlay (shared) */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+    }
+    .modal-overlay.open {
+      display: flex;
+    }
+    /* Modal Box */
+    .modal {
+      background-color: white;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      max-width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      min-width: 300px;
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-bottom: 1px solid #ddd;
+    }
+    .modal-header h2 {
+      margin: 0;
+    }
+    .modal-header button {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+    }
+    .modal-content {
+      padding: 16px;
+    }
+    .modal-content p {
+      margin-bottom: 15px;
+    }
+    .modal-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .modal-actions button {
+      padding: 10px 15px;
+      cursor: pointer;
+      background: #4a90d9;
+      color: white;
+      border: none;
+      border-radius: 4px;
+    }
+    .modal-actions button:hover {
+      background: #357abd;
+    }
+    .modal-image {
+      max-width: 100%;
+      margin-top: 10px;
+    }
+    /* Stats Panel */
+    #stats-panel {
+      border: 2px solid black;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+      padding: 10px;
+      background: #fff;
+    }
+    .stats-item {
+      border: 1px solid #ccc;
+      padding: 10px;
+    }
+    .stats-item h2, .stats-item h1 {
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+    .stats-item h6 {
+      font-size: 11px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+    .stats-item ul {
+      list-style: none;
+      padding: 0;
+    }
+    .stats-item li {
+      margin: 5px 0;
+    }
+    .stats-item button {
+      margin: 3px;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    /* Objectives styling */
+    #objectives-list .completed {
+      text-decoration: line-through;
+      color: green;
+    }
+    /* Color coding */
+    #stats-section { color: blue; }
+    #inventory-section { color: red; }
+    #skills-section { color: green; }
+    /* Responsive */
+    @media (max-width: 800px) {
+      #stats-panel {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    @media (max-width: 500px) {
+      #stats-panel {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="game-root">
+    <!-- Theme Selector -->
+    <div id="theme-selector">
+      Game Selector:
+      <select id="theme-dropdown"></select>
+      <button id="load-json-btn">Load gameConfig.json</button>
+      <button id="load-external-btn">Paste JSON Config</button>
+      <label style="margin-left:10px;">
+        Background: <input type="file" id="bg-file-input" accept="image/*" style="width:150px;">
+      </label>
+    </div>
+    <!-- Game Container -->
+    <div id="game-container">
+      <div id="overlay-text">Click game area and use arrow keys to move</div>
+      <div id="moving-dot" tabindex="0"></div>
+      <div id="targets-container"></div>
+    </div>
+    <!-- Simple Modal -->
+    <div id="simple-modal" class="modal-overlay">
+      <div class="modal">
+        <div class="modal-header">
+          <h2 id="simple-modal-title"></h2>
+          <button id="simple-modal-close">&times;</button>
+        </div>
+        <div class="modal-content">
+          <p id="simple-modal-content"></p>
+          <div id="simple-modal-actions" class="modal-actions"></div>
+        </div>
+      </div>
+    </div>
+    <!-- State Machine Modal -->
+    <div id="sm-modal" class="modal-overlay">
+      <div class="modal">
+        <div class="modal-header">
+          <h2 id="sm-modal-title"></h2>
+          <button id="sm-modal-close">&times;</button>
+        </div>
+        <div class="modal-content">
+          <p id="sm-modal-content"></p>
+          <div id="sm-modal-actions" class="modal-actions"></div>
+          <img id="sm-modal-image" class="modal-image" style="display:none;" alt="">
+        </div>
+      </div>
+    </div>
+    <!-- Stats Panel -->
+    <div id="stats-panel">
+      <div class="stats-item">
+        <h1>Objectives</h1>
+        <ul id="objectives-list"></ul>
+      </div>
+      <div class="stats-item" id="inventory-section">
+        <h2>Inventory</h2>
+        <h6>Affects movement and modal action options</h6>
+        <div id="inventory-list"></div>
+      </div>
+      <div class="stats-item" id="stats-section">
+        <h1>Player Stats</h1>
+        <h6>Affects Modal Interactions</h6>
+        <div id="player-stats"></div>
+      </div>
+      <div class="stats-item" id="skills-section">
+        <h2>Skill Tree / Abilities</h2>
+        <h6>Affects effectiveness of inventory</h6>
+        <ul id="skills-list"></ul>
+      </div>
+    </div>
+  </div>
+  <script>
+    // ===== GAME STATE =====
+    const gameState = {
+      dotPosition: { x: 900, y: 450 },
+      boundaries: { maxX: 1835, maxY: 890, minX: 0, minY: 0 },
+      step: 10,
+      currentTheme: 'Default',
+      currentThemeStage: 0,
+      inventory: [],
+      skills: [],
+      objectives: [],
+      targets: [],
+      persistentTargets: [],
+      playerStats: {
+        health: 100,
+        mana: 50,
+        strength: 10,
+        agility: 10,
+        intelligence: 10,
+        charisma: 10,
+        luck: 10,
+        money: 1000
+      },
+      // Modal state
+      isSimpleModalOpen: false,
+      isSMModalOpen: false,
+      currentSMModalStates: null,
+      currentSMModalState: 'default',
+      // Theme config
+      themes: {},
+      themeActions: {}
+    };
+    // ===== DOM REFERENCES =====
+    const elements = {
+      gameContainer: document.getElementById('game-container'),
+      movingDot: document.getElementById('moving-dot'),
+      targetsContainer: document.getElementById('targets-container'),
+      overlayText: document.getElementById('overlay-text'),
+      themeDropdown: document.getElementById('theme-dropdown'),
+      loadExternalBtn: document.getElementById('load-external-btn'),
+      // Simple Modal
+      simpleModal: document.getElementById('simple-modal'),
+      simpleModalTitle: document.getElementById('simple-modal-title'),
+      simpleModalContent: document.getElementById('simple-modal-content'),
+      simpleModalActions: document.getElementById('simple-modal-actions'),
+      simpleModalClose: document.getElementById('simple-modal-close'),
+      // State Machine Modal
+      smModal: document.getElementById('sm-modal'),
+      smModalTitle: document.getElementById('sm-modal-title'),
+      smModalContent: document.getElementById('sm-modal-content'),
+      smModalActions: document.getElementById('sm-modal-actions'),
+      smModalImage: document.getElementById('sm-modal-image'),
+      smModalClose: document.getElementById('sm-modal-close'),
+      // Stats
+      objectivesList: document.getElementById('objectives-list'),
+      inventoryList: document.getElementById('inventory-list'),
+      playerStats: document.getElementById('player-stats'),
+      skillsList: document.getElementById('skills-list')
+    };
+    // ===== MOVEMENT =====
+    function moveDot(newX, newY) {
+      const boundedX = Math.max(gameState.boundaries.minX, Math.min(newX, gameState.boundaries.maxX));
+      const boundedY = Math.max(gameState.boundaries.minY, Math.min(newY, gameState.boundaries.maxY));
+      gameState.dotPosition.x = boundedX;
+      gameState.dotPosition.y = boundedY;
+      renderDot();
+      checkCollisions();
+      updateOverlayText();
+    }
+    function handleKeyPress(e) {
+      if (gameState.isSimpleModalOpen || gameState.isSMModalOpen) return;
+      let newX = gameState.dotPosition.x;
+      let newY = gameState.dotPosition.y;
+      switch (e.key) {
+        case 'ArrowLeft': newX -= gameState.step; e.preventDefault(); break;
+        case 'ArrowRight': newX += gameState.step; e.preventDefault(); break;
+        case 'ArrowUp': newY -= gameState.step; e.preventDefault(); break;
+        case 'ArrowDown': newY += gameState.step; e.preventDefault(); break;
+        default: return;
+      }
+      moveDot(newX, newY);
+    }
+    // ===== COLLISION DETECTION =====
+    function checkCollisions() {
+      const dotPos = gameState.dotPosition;
+      gameState.targets.forEach(target => {
+        if (
+          dotPos.x < target.x + 10 &&
+          dotPos.x + 10 > target.x &&
+          dotPos.y < target.y + 10 &&
+          dotPos.y + 10 > target.y
+        ) {
+          handleCollision(target);
+        }
+      });
+    }
+    function handleCollision(target) {
+      // Handle subtargets notification
+      if (target.subtargets) {
+        alert("Subtargets found. Can be used as discovered locations.");
+        console.log(target.subtargets);
+      }
+      switch (target.collisionType) {
+        case "":
+          console.log("Nothing happened");
+          break;
+        case "alert":
+          alert(target.collisiontext);
+          break;
+        case "decision":
+          if (confirm(target.collisiontext)) {
+            alert("You said yes");
+          } else {
+            alert("You said no");
+          }
+          break;
+        case "modal":
+          openSimpleModal(target.modalConfig);
+          break;
+        case "smmodal":
+          openSMModal(target.modalStates);
+          break;
+        case "storypartchange":
+          changeStoryPart(target.transitionToPart);
+          break;
+        case "requirementsgated":
+          const currentStory = gameState.themes[gameState.currentTheme]?.story?.[gameState.currentThemeStage];
+          const objectives = currentStory?.objectives || [];
+          const allComplete = objectives.every(obj => obj.complete);
+          if (allComplete && (target.requirements || 0) > 5) {
+            alert(target.collisiontext);
+          } else {
+            alert("You have not journeyed enough to explore this area yet.");
+          }
+          break;
+        default:
+          console.log("Unknown collision type:", target.collisionType);
+      }
+    }
+    // ===== SIMPLE MODAL =====
+    function openSimpleModal(config) {
+      gameState.isSimpleModalOpen = true;
+      elements.simpleModalTitle.textContent = config.title || '';
+      elements.simpleModalContent.textContent = config.content || '';
+      // Render actions
+      elements.simpleModalActions.innerHTML = '';
+      (config.actions || []).forEach(action => {
+        const btn = document.createElement('button');
+        btn.textContent = action.label;
+        btn.addEventListener('click', () => {
+          closeSimpleModal();
+          executeAction(action.action);
+        });
+        elements.simpleModalActions.appendChild(btn);
+      });
+      elements.simpleModal.classList.add('open');
+    }
+    function closeSimpleModal() {
+      gameState.isSimpleModalOpen = false;
+      elements.simpleModal.classList.remove('open');
+      elements.movingDot.focus();
+    }
+    // ===== STATE MACHINE MODAL =====
+    function openSMModal(modalStates) {
+      gameState.isSMModalOpen = true;
+      gameState.currentSMModalStates = modalStates;
+      // Get first state key
+      const firstStateKey = Object.keys(modalStates)[0] || 'default';
+      gameState.currentSMModalState = firstStateKey;
+      renderSMModalState();
+      elements.smModal.classList.add('open');
+    }
+    function renderSMModalState() {
+      const states = gameState.currentSMModalStates;
+      const currentState = states[gameState.currentSMModalState];
+      if (!currentState) {
+        console.error("State not found:", gameState.currentSMModalState);
+        return;
+      }
+      elements.smModalTitle.textContent = currentState.title || '';
+      elements.smModalContent.textContent = currentState.content || '';
+      // Render actions
+      elements.smModalActions.innerHTML = '';
+      (currentState.items || []).forEach(item => {
+        const btn = document.createElement('button');
+        btn.textContent = item.label;
+        btn.addEventListener('click', () => handleSMModalAction(item));
+        elements.smModalActions.appendChild(btn);
+      });
+      // Handle image
+      if (currentState.modalimg) {
+        elements.smModalImage.src = currentState.modalimg;
+        elements.smModalImage.style.display = 'block';
+      } else {
+        elements.smModalImage.style.display = 'none';
+      }
+      // Execute consequences
+      (currentState.consequences || []).forEach(consequence => {
+        executeAction(consequence);
+      });
+    }
+    function handleSMModalAction(item) {
+      const action = item.action;
+      // Check if action is a state transition
+      if (gameState.currentSMModalStates[action]) {
+        gameState.currentSMModalState = action;
+        renderSMModalState();
+      } else {
+        // Execute as action and close
+        executeAction(action);
+        closeSMModal();
+      }
+    }
+    function closeSMModal() {
+      gameState.isSMModalOpen = false;
+      gameState.currentSMModalStates = null;
+      elements.smModal.classList.remove('open');
+      elements.movingDot.focus();
+    }
+    // ===== ACTIONS =====
+    function executeAction(actionName) {
+      if (gameState.themeActions && gameState.themeActions[actionName]) {
+        gameState.themeActions[actionName]();
+      } else {
+        console.log("Action executed:", actionName);
+      }
+    }
+    // ===== STORY PARTS =====
+    function changeStoryPart(partNumber) {
+      const theme = gameState.themes[gameState.currentTheme];
+      if (!theme) return;
+      gameState.currentThemeStage = partNumber;
+      const newStoryPart = theme.story?.find(part => part.part === partNumber);
+      if (newStoryPart) {
+        gameState.objectives = newStoryPart.objectives || [];
+        gameState.targets = [
+          ...(theme.persistentTargets || []),
+          ...(newStoryPart.targets || [])
+        ];
+        renderTargets();
+        renderStats();
+      }
+    }
+    // ===== THEME LOADING =====
+    function loadTheme(themeName) {
+      const theme = gameState.themes[themeName];
+      if (!theme) {
+        console.error("Theme not found:", themeName);
+        return;
+      }
+      gameState.currentTheme = themeName;
+      gameState.currentThemeStage = 0;
+      // Set background - supports: URLs, base64 data URIs, or solid colors (#hex/named)
+      if (theme.background) {
+        const bg = theme.background;
+        if (bg.startsWith('#') || bg.startsWith('rgb') || /^[a-z]+$/i.test(bg)) {
+          // Solid color
+          elements.gameContainer.style.backgroundImage = 'none';
+          elements.gameContainer.style.backgroundColor = bg;
+        } else {
+          // URL or base64
+          elements.gameContainer.style.backgroundImage = `url('${bg}')`;
+          elements.gameContainer.style.backgroundColor = theme.backgroundColor || '#333';
+        }
+      }
+      // Load inventory and skills
+      gameState.inventory = theme.inventory || [];
+      gameState.skills = theme.skills || [];
+      gameState.persistentTargets = theme.persistentTargets || [];
+      // Load actions
+      gameState.themeActions = theme.actions || {};
+      // Load initial story part
+      const initialStory = theme.story?.find(part => part.part === 0);
+      if (initialStory) {
+        gameState.objectives = initialStory.objectives || [];
+        // Combine persistent and story targets
+        const uniqueTargets = [
+          ...gameState.persistentTargets,
+          ...(initialStory.targets || []).filter(
+            target => !gameState.persistentTargets.some(pt => pt.name === target.name)
+          )
+        ];
+        gameState.targets = uniqueTargets;
+      } else {
+        gameState.objectives = [];
+        gameState.targets = [...gameState.persistentTargets];
+      }
+      renderAll();
+    }
+    // ===== RENDERING =====
+    function renderDot() {
+      elements.movingDot.style.left = gameState.dotPosition.x + 'px';
+      elements.movingDot.style.top = gameState.dotPosition.y + 'px';
+    }
+    function renderTargets() {
+      elements.targetsContainer.innerHTML = '';
+      gameState.targets.forEach(target => {
+        // Target box
+        const targetEl = document.createElement('div');
+        targetEl.className = 'target';
+        targetEl.style.left = target.x + 'px';
+        targetEl.style.top = target.y + 'px';
+        elements.targetsContainer.appendChild(targetEl);
+        // Label
+        const label = document.createElement('span');
+        label.className = 'target-label';
+        label.style.left = target.x + 'px';
+        label.style.top = (target.y - 15) + 'px';
+        label.textContent = target.name;
+        elements.targetsContainer.appendChild(label);
+      });
+    }
+    function renderStats() {
+      // Objectives
+      elements.objectivesList.innerHTML = '';
+      gameState.objectives.forEach(obj => {
+        const li = document.createElement('li');
+        li.className = obj.complete ? 'completed' : '';
+        li.textContent = `${obj.id}: ${obj.name}${obj.complete ? ' (Completed)' : ''}`;
+        elements.objectivesList.appendChild(li);
+      });
+      // Inventory
+      elements.inventoryList.innerHTML = '';
+      gameState.inventory.forEach(item => {
+        const btn = document.createElement('button');
+        btn.textContent = item.name;
+        btn.addEventListener('click', () => {
+          alert(`${item.name}\n${item.description}\nType: ${item.type}`);
+        });
+        elements.inventoryList.appendChild(btn);
+      });
+      // Player Stats
+      const stats = gameState.playerStats;
+      elements.playerStats.innerHTML = `
+        <div>Health: ${stats.health} | Mana: ${stats.mana} | Strength: ${stats.strength}</div>
+        <div>Agility: ${stats.agility} | Intelligence: ${stats.intelligence} | Charisma: ${stats.charisma}</div>
+        <div>Luck: ${stats.luck} | Money: ${stats.money}</div>
+      `;
+      // Skills
+      elements.skillsList.innerHTML = '';
+      gameState.skills.forEach(skill => {
+        const li = document.createElement('li');
+        li.textContent = `${skill.name}: ${skill.branch} - Learned: ${skill.learned ? 'Yes' : 'No'}`;
+        elements.skillsList.appendChild(li);
+      });
+    }
+    function updateOverlayText() {
+      elements.overlayText.textContent = `Position: ${gameState.dotPosition.x}, ${gameState.dotPosition.y} | Theme: ${gameState.currentTheme} | Stage: ${gameState.currentThemeStage}`;
+    }
+    function renderThemeDropdown() {
+      elements.themeDropdown.innerHTML = '';
+      Object.keys(gameState.themes).forEach(themeName => {
+        const option = document.createElement('option');
+        option.value = themeName;
+        option.textContent = themeName;
+        if (themeName === gameState.currentTheme) {
+          option.selected = true;
+        }
+        elements.themeDropdown.appendChild(option);
+      });
+    }
+    function renderAll() {
+      renderDot();
+      renderTargets();
+      renderStats();
+      renderThemeDropdown();
+      updateOverlayText();
+    }
+    // ===== INVENTORY HELPERS =====
+    function addInventoryItem(item) {
+      gameState.inventory.push(item);
+      renderStats();
+    }
+    function removeInventoryItem(itemName) {
+      gameState.inventory = gameState.inventory.filter(item => item.name !== itemName);
+      renderStats();
+    }
+    // ===== EVENT LISTENERS =====
+    function setupEventListeners() {
+      // Keyboard movement
+      elements.movingDot.addEventListener('keydown', handleKeyPress);
+      // Click to focus
+      elements.gameContainer.addEventListener('click', () => {
+        elements.movingDot.focus();
+      });
+      // Theme dropdown
+      elements.themeDropdown.addEventListener('change', (e) => {
+        loadTheme(e.target.value);
+      });
+      // Modal close buttons
+      elements.simpleModalClose.addEventListener('click', closeSimpleModal);
+      elements.smModalClose.addEventListener('click', closeSMModal);
+      // Click outside modal to close
+      elements.simpleModal.addEventListener('click', (e) => {
+        if (e.target === elements.simpleModal) closeSimpleModal();
+      });
+      elements.smModal.addEventListener('click', (e) => {
+        if (e.target === elements.smModal) closeSMModal();
+      });
+      // Load from gameConfig.json button
+      document.getElementById('load-json-btn').addEventListener('click', async () => {
+        try {
+          const response = await fetch('gameConfig.json');
+          if (!response.ok) throw new Error('gameConfig.json not found');
+          const config = await response.json();
+          initMovingDotSpace(config);
+          alert('Loaded ' + Object.keys(config.themes).length + ' themes from gameConfig.json');
+        } catch (e) {
+          alert("Error loading gameConfig.json: " + e.message);
+        }
+      });
+      // Paste external config button
+      elements.loadExternalBtn.addEventListener('click', () => {
+        const configStr = prompt("Paste JSON config:");
+        if (configStr) {
+          try {
+            const config = JSON.parse(configStr);
+            initMovingDotSpace(config);
+          } catch (e) {
+            alert("Invalid JSON: " + e.message);
+          }
+        }
+      });
+      // Background file input
+      const bgFileInput = document.getElementById('bg-file-input');
+      bgFileInput.addEventListener('change', async (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          await setBackgroundFromFile(file);
+        }
+      });
+    }
+    // ===== GRADIO INTEGRATION =====
+    // This function accepts config from Gradio or external sources
+    function initMovingDotSpace(config) {
+      // Handle single theme or multi-theme config
+      if (config.themes) {
+        // Multi-theme config
+        gameState.themes = config.themes;
+        const firstTheme = Object.keys(config.themes)[0];
+        if (firstTheme) {
+          loadTheme(firstTheme);
+        }
+      } else if (config.background || config.story) {
+        // Single theme config - wrap it
+        gameState.themes = { 'Custom': config };
+        loadTheme('Custom');
+      }
+      renderThemeDropdown();
+    }
+    // ===== DEFAULT CONFIG (for standalone testing) =====
+    // Background can be: URL path, solid color (#hex or color name), or base64 data URI
+    // To use local images, place them in backgrounds/ folder and reference as "backgrounds/filename.png"
+    const defaultConfig = {
+      themes: {
+        'Default': {
+          // Use local backgrounds folder - images should be in backgrounds/ subfolder
+          background: 'backgrounds/1stGameLoc123.png',
+          backgroundColor: '#2d5a27', // Fallback color if image doesn't load
+          inventory: [
+            { type: "book", name: "My Memories", description: "Currently I dont remember when I start this journey...." },
+            { type: "weapon", name: "Sword", description: "A sharp blade." },
+            { type: "armor", name: "Shield", description: "Protects against attacks." },
+            { type: "consumable", name: "Health Potion", description: "Restores health." }
+          ],
+          skills: [
+            { branch: "Combat", name: "Basic Attack", learned: false },
+            { branch: "Magic", name: "Fireball", learned: false },
+            { branch: "Stealth", name: "Sneak", learned: false }
+          ],
+          persistentTargets: [],
+          story: [
+            {
+              part: 0,
+              objectives: [
+                { id: "Main", name: "Explore the area", complete: false }
+              ],
+              targets: [
+                { name: "Target 1", x: 50, y: 50, collisionType: "alert", collisiontext: "You found Target 1!" },
+                { name: "Target 2", x: 100, y: 100, collisionType: "", collisiontext: "" },
+                { name: "State Machine Demo", x: 600, y: 600, collisionType: "smmodal", modalStates: {
+                  default: {
+                    title: "Entrance",
+                    content: "You've reached the Entrance. What's your next step?",
+                    items: [
+                      { label: "Ask for guidance", action: "guidance" },
+                      { label: "Buy an Axe", action: "buyAxe" }
+                    ],
+                    consequences: []
+                  },
+                  guidance: {
+                    title: "Entrance - Guidance",
+                    content: "The path to the north leads to the forest.",
+                    items: [
+                      { label: "Head North", action: "forest" },
+                      { label: "Return", action: "default" }
+                    ],
+                    consequences: []
+                  },
+                  forest: {
+                    title: "Forest",
+                    content: "You went to the forest. Leaves blow everywhere.",
+                    items: [],
+                    consequences: ['gainleaf']
+                  }
+                }},
+                { name: "Modal Demo", x: 300, y: 300, collisionType: "modal", modalConfig: {
+                  title: "Simple Modal",
+                  content: "This is a simple modal with action buttons.",
+                  actions: [
+                    { label: "Action 1", action: "action1" },
+                    { label: "Action 2", action: "action2" }
+                  ]
+                }},
+                { name: "Switch to Part 1", x: 700, y: 700, collisionType: "storypartchange", transitionToPart: 1 }
+              ]
+            },
+            {
+              part: 1,
+              objectives: [
+                { id: "Part2", name: "You made it to Part 1!", complete: false }
+              ],
+              targets: [
+                { name: "Part 1 Target", x: 50, y: 50, collisionType: "alert", collisiontext: "Welcome to Part 1!" },
+                { name: "Switch to Part 0", x: 600, y: 400, collisionType: "storypartchange", transitionToPart: 0 }
+              ]
+            }
+          ],
+          actions: {
+            action1: function() { alert("Action 1 executed!"); },
+            action2: function() { alert("Action 2 executed!"); },
+            buyAxe: function() {
+              alert("Bought an Axe!");
+              addInventoryItem({ type: "weapon", name: "Axe", description: "A sturdy axe." });
+            },
+            gainleaf: function() {
+              addInventoryItem({ type: "misc", name: "Leaf", description: "A random leaf blown by the wind." });
+            }
+          }
+        },
+        'Space Odyssey': {
+          background: 'backgrounds/SpaceOdysseyGameLoc.png',
+          backgroundColor: '#0a1628', // Fallback
+          inventory: [
+            { type: "weapon", name: "Laser Gun", description: "A powerful laser weapon." },
+            { type: "tool", name: "Repair Kit", description: "A kit for repairs." }
+          ],
+          skills: [
+            { branch: "Piloting", name: "Astro Navigation", learned: false },
+            { branch: "Engineering", name: "Repair Mastery", learned: false }
+          ],
+          persistentTargets: [
+            { name: "Space Station", x: 200, y: 300, collisionType: "alert", collisiontext: "Welcome to the Space Station!" }
+          ],
+          story: [
+            {
+              part: 0,
+              objectives: [
+                { id: "Space", name: "Explore the cosmos", complete: false }
+              ],
+              targets: [
+                { name: "Alien Planet", x: 500, y: 400, collisionType: "alert", collisiontext: "An alien planet! The inhabitants seem cautious." },
+                { name: "Asteroid Field", x: 800, y: 500, collisionType: "decision", collisiontext: "Navigate through the asteroid field?" }
+              ]
+            }
+          ],
+          actions: {}
+        }
+      }
+    };
+    // ===== HELPER: Convert image file to base64 =====
+    // Use this in browser console to convert local images:
+    // loadImageAsBase64(file) - pass a File object from input
+    function loadImageAsBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    }
+    // Helper to load image from file input and update current theme background
+    async function setBackgroundFromFile(file) {
+      const base64 = await loadImageAsBase64(file);
+      gameState.themes[gameState.currentTheme].background = base64;
+      elements.gameContainer.style.backgroundImage = `url('${base64}')`;
+      console.log("Background updated! Base64 length:", base64.length);
+    }
+    // Expose helpers
+    window.loadImageAsBase64 = loadImageAsBase64;
+    window.setBackgroundFromFile = setBackgroundFromFile;
+    // ===== INITIALIZATION =====
+    function init() {
+      setupEventListeners();
+      // Load default config
+      initMovingDotSpace(defaultConfig);
+      // Focus the dot
+      setTimeout(() => elements.movingDot.focus(), 100);
+    }
+    // Start on DOM ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+    // Expose for Gradio / external use
+    window.initMovingDotSpace = initMovingDotSpace;
+    window.gameState = gameState;
+    window.addInventoryItem = addInventoryItem;
+    window.removeInventoryItem = removeInventoryItem;
+    /* CONFIG_PLACEHOLDER */
+  </script>
+</body>
+</html>

MovingDotSpaceExport/backgrounds/1stGameLoc123.png ADDED Viewed

Git LFS Details

SHA256: e412a9be5d9bd002d2927f7d7563e3b862bf783e5f0832d5a60675d5c0690736
Pointer size: 132 Bytes
Size of remote file: 4.43 MB

MovingDotSpaceExport/backgrounds/2ndGameLoc123.png ADDED Viewed

Git LFS Details

SHA256: 33359a4c6ac6d3b896b27a34231c98db3ad994bb14b3f32bca84f09f5543c484
Pointer size: 132 Bytes
Size of remote file: 3.5 MB

MovingDotSpaceExport/backgrounds/ConstructionGameLoc.png ADDED Viewed

Git LFS Details

SHA256: ea5cd0a1ce33e1a2f81a9f0fb20b4cb19a1583084709bef3b35979147c4a0eba
Pointer size: 131 Bytes
Size of remote file: 852 kB

MovingDotSpaceExport/backgrounds/CyberpunkGameLoc.png ADDED Viewed

Git LFS Details

SHA256: 3e247407a73a61e273252a867b765b840ac7c1df1af558be02acdfe5f5394e94
Pointer size: 131 Bytes
Size of remote file: 606 kB

MovingDotSpaceExport/backgrounds/MedievalFantasyGameLoc.png ADDED Viewed

Git LFS Details

SHA256: 598ca39414f0ac7256034b5d7ff97847b4d9788245d57c1deca67ddd5156089c
Pointer size: 131 Bytes
Size of remote file: 539 kB

MovingDotSpaceExport/backgrounds/SpaceOdysseyGameLoc.png ADDED Viewed

Git LFS Details

SHA256: 1e56704158c8dfc347bc124bb9ec568af9eb579086f08418b5e3ae02ea20a8d6
Pointer size: 131 Bytes
Size of remote file: 440 kB

MovingDotSpaceExport/backgrounds/SuperTeacherGameLoc.png ADDED Viewed

Git LFS Details

SHA256: cf36d7b99e418961664e41ffb46b0649064332b44b496c5fdb2d175a72cc077b
Pointer size: 131 Bytes
Size of remote file: 521 kB

MovingDotSpaceExport/backgrounds/eldoria_background.png ADDED Viewed

Git LFS Details

SHA256: e7924b97a780869c7f95c81153ee27846a202295248833c570365f912c8120c0
Pointer size: 131 Bytes
Size of remote file: 779 kB

MovingDotSpaceExport/gameConfig.json ADDED Viewed

	@@ -0,0 +1,436 @@

+{
+  "themes": {
+    "User Custom - Template": {
+      "background": "backgrounds/theme_background.png",
+      "inventory": [
+        { "type": "weapon", "name": "Random weapon", "description": "A powerful weapon." }
+      ],
+      "skills": [
+        { "branch": "Skill Group 1", "name": "Skill One", "learned": false }
+      ],
+      "persistentTargets": [
+        { "name": "Background Target 1", "x": 500, "y": 500, "collisionType": "alert", "collisiontext": "First Test" }
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [
+            { "id": 1, "name": "Mission Details", "complete": false, "progress": 0, "inventoryRequired": [] }
+          ],
+          "targets": [
+            { "name": "Target 1", "x": 150, "y": 150, "collisionType": "alert", "collisiontext": "First Test" }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [
+            { "id": 2, "name": "Mission Details", "complete": false, "progress": 0, "inventoryRequired": [] }
+          ],
+          "targets": [
+            { "name": "Target 2", "x": 250, "y": 250, "collisionType": "alert", "collisiontext": "First Test" }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Default": {
+      "background": "backgrounds/1stGameLoc123.png",
+      "inventory": [
+        { "type": "book", "name": "My Memories", "description": "Currently I dont remember when I start this journey...." },
+        { "type": "weapon", "name": "Sword", "description": "A sharp blade." },
+        { "type": "armor", "name": "Shield", "description": "Protects against attacks." },
+        { "type": "consumable", "name": "Health Potion", "description": "Restores health." }
+      ],
+      "skills": [
+        { "branch": "Combat", "name": "Basic Attack", "learned": false },
+        { "branch": "Magic", "name": "Fireball", "learned": false },
+        { "branch": "Stealth", "name": "Sneak", "learned": false }
+      ],
+      "persistentTargets": [],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [],
+          "targets": [
+            { "name": "Target 1", "x": 50, "y": 50, "collisionType": "alert", "collisiontext": "First Test",
+              "subtargets": [
+                { "name": "Target 1 sub 1", "x": 100, "y": 75, "collisionType": "alert", "collisiontext": "First Test in Sub of First Test" }
+              ]
+            },
+            { "name": "Target 2", "x": 100, "y": 100, "collisionType": "", "collisiontext": "" },
+            { "name": "Target 2 - SM Demo", "x": 600, "y": 600, "collisionType": "smmodal", "modalStates": {
+              "default": {
+                "title": "Entrance",
+                "content": "You've reached the Entrance. What's your next step?",
+                "items": [
+                  { "label": "Ask for guidance on next move", "action": "guidance" },
+                  { "label": "Buy an Axe", "action": "buyAxe" }
+                ],
+                "consequences": [],
+                "modalimg": "backgrounds/1stGameLoc123.png"
+              },
+              "guidance": {
+                "title": "Entrance - Guidance",
+                "content": "The path to the north leads to the forest, and the path to the south leads to the village.",
+                "items": [
+                  { "label": "Head North", "action": "forest" },
+                  { "label": "Return", "action": "default" }
+                ],
+                "consequences": []
+              },
+              "forest": {
+                "title": "Forest",
+                "content": "Went to the forest",
+                "items": [],
+                "consequences": ["gainleaf"]
+              }
+            }},
+            { "name": "Entrance", "x": 995, "y": 660, "collisionType": "modal", "modalConfig": {
+              "title": "Entrance",
+              "content": "You've reached the Entrance. What's your next step?",
+              "actions": [
+                { "label": "Ask for guidance on next move", "action": "askforDirections" },
+                { "label": "Buy an Axe", "action": "buyAxeAlert" }
+              ]
+            }},
+            { "name": "Market Stall", "x": 200, "y": 300, "collisionType": "", "collisiontext": "" },
+            { "name": "Inn Entrance", "x": 400, "y": 450, "collisionType": "", "collisiontext": "" },
+            { "name": "Town Hall", "x": 600, "y": 350, "collisionType": "", "collisiontext": "" },
+            { "name": "Fountain", "x": 500, "y": 500, "collisionType": "", "collisiontext": "" },
+            { "name": "Bridge", "x": 1100, "y": 700, "collisionType": "", "collisiontext": "" },
+            { "name": "Waterfall", "x": 1300, "y": 800, "collisionType": "", "collisiontext": "" },
+            { "name": "Mountain Peak", "x": 1500, "y": 100, "collisionType": "", "collisiontext": "" },
+            { "name": "Switch Test 1", "x": 700, "y": 700, "collisionType": "storypartchange", "collisiontext": "First Test", "transitionToPart": 1 }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [],
+          "targets": [
+            { "name": "Target 1", "x": 50, "y": 50, "collisionType": "alert", "collisiontext": "First Test" },
+            { "name": "Switch Back Test 1", "x": 600, "y": 400, "collisionType": "storypartchange", "collisiontext": "First Test", "transitionToPart": 0 }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Space Odyssey": {
+      "background": "backgrounds/SpaceOdysseyGameLoc.png",
+      "inventory": [
+        { "type": "weapon", "name": "Laser Gun", "description": "A powerful laser weapon." },
+        { "type": "tool", "name": "Repair Kit", "description": "A kit for repairing various equipment." },
+        { "type": "tool", "name": "Mining Laser", "description": "A tool for extracting minerals from asteroids." }
+      ],
+      "skills": [
+        { "branch": "Piloting", "name": "Astro Navigation", "learned": false },
+        { "branch": "Engineering", "name": "Repair Mastery", "learned": false }
+      ],
+      "persistentTargets": [
+        { "name": "Space Station", "x": 200, "y": 300, "collisionType": "", "collisiontext": "" },
+        { "name": "Alien Planet", "x": 940, "y": 460, "collisionType": "alert", "collisiontext": "You have arrived at an alien planet. The inhabitants seem cautious but willing to negotiate." },
+        { "name": "Abandoned Spaceship", "x": 460, "y": 570, "collisionType": "alert", "collisiontext": "You have discovered an abandoned spaceship of ancient origin." },
+        { "name": "Colony", "x": 640, "y": 500, "collisionType": "modal", "modalConfig": {
+          "title": "Human Colony",
+          "content": "You have reached the human colony. Rest and prepare for your upcoming missions.",
+          "actions": [
+            { "label": "Request Mission Briefing", "action": "requestBriefing" },
+            { "label": "Purchase Upgrades", "action": "purchaseUpgrades" }
+          ]
+        }},
+        { "name": "Meteor Field", "x": 1100, "y": 470, "collisionType": "modal", "modalConfig": {
+          "title": "Dangerous Meteor Field",
+          "content": "You have entered a dense meteor field. Navigate carefully.",
+          "actions": [
+            { "label": "Activate Shields", "action": "activateShields" },
+            { "label": "Scan for Rare Minerals", "action": "scanMinerals" }
+          ]
+        }}
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [
+            { "id": 1, "name": "Dock at the Space Station", "complete": false, "progress": 0, "inventoryRequired": [] },
+            { "id": 2, "name": "Repair the Communication Array", "complete": false, "progress": 0, "inventoryRequired": ["Repair Kit"] }
+          ],
+          "targets": [
+            { "name": "Space Station Docking Bay", "x": 500, "y": 400, "collisionType": "alert", "collisiontext": "Welcome to the space station." },
+            { "name": "Communication Room", "x": 800, "y": 200, "collisionType": "alert", "collisiontext": "The communication array needs repair." },
+            { "name": "To Asteroid Field", "x": 900, "y": 100, "collisionType": "storypartchange", "transitionToPart": 1, "collisiontext": "Proceed to investigate the asteroid field." }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [
+            { "id": 3, "name": "Collect Rare Asteroid Minerals", "complete": false, "progress": 0, "inventoryRequired": ["Mining Laser"] }
+          ],
+          "targets": [
+            { "name": "Asteroid Field", "x": 1200, "y": 300, "collisionType": "alert", "collisiontext": "Scan asteroids for rare minerals." },
+            { "name": "Alien Encounter", "x": 1250, "y": 350, "collisionType": "alert", "collisiontext": "An alien ship approaches." },
+            { "name": "To Alien Homeworld", "x": 1100, "y": 200, "collisionType": "storypartchange", "transitionToPart": 2, "collisiontext": "Travel to the alien homeworld." }
+          ]
+        },
+        {
+          "part": 2,
+          "objectives": [
+            { "id": 4, "name": "Negotiate Peace with the Aliens", "complete": false, "progress": 0, "inventoryRequired": [] },
+            { "id": 5, "name": "Gather Alien Artifacts", "complete": false, "progress": 0, "inventoryRequired": ["Artifact Scanner"] }
+          ],
+          "targets": [
+            { "name": "Alien Council Chamber", "x": 600, "y": 250, "collisionType": "modal", "modalConfig": {
+              "title": "Alien Council Chamber",
+              "content": "Present your case for peace.",
+              "actions": [
+                { "label": "Present Peace Offer", "action": "presentPeaceOffer" },
+                { "label": "Listen to Alien Concerns", "action": "listenConcerns" }
+              ]
+            }},
+            { "name": "Alien Ruins", "x": 750, "y": 400, "collisionType": "alert", "collisiontext": "Ancient alien ruins discovered." },
+            { "name": "Return to Human Colony", "x": 800, "y": 150, "collisionType": "storypartchange", "transitionToPart": 3, "collisiontext": "Return to share findings." }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Medieval Fantasy": {
+      "background": "backgrounds/MedievalFantasyGameLoc.png",
+      "inventory": [
+        { "type": "weapon", "name": "Longsword", "description": "A sturdy steel blade." }
+      ],
+      "skills": [
+        { "branch": "Piloting", "name": "Astro Navigation", "learned": false }
+      ],
+      "persistentTargets": [
+        { "name": "Market Stall", "x": 200, "y": 300, "collisionType": "", "collisiontext": "" },
+        { "name": "Inn Entrance", "x": 400, "y": 450, "collisionType": "", "collisiontext": "" },
+        { "name": "Castle", "x": 940, "y": 460, "collisionType": "alert", "collisiontext": "The King summons you to find and release his champion." },
+        { "name": "Hidden Space", "x": 460, "y": 570, "collisionType": "alert", "collisiontext": "A hidden space. Nobody is here." },
+        { "name": "Home", "x": 640, "y": 500, "collisionType": "modal", "modalConfig": {
+          "title": "Your Space",
+          "content": "Rest and prepare for your tasks.",
+          "actions": [
+            { "label": "Ask for guidance", "action": "askforDirections" },
+            { "label": "Buy an Axe", "action": "buyAxeAlert" }
+          ]
+        }},
+        { "name": "Marketplace", "x": 1100, "y": 470, "collisionType": "modal", "modalConfig": {
+          "title": "Marketplace",
+          "content": "A bustling marketplace.",
+          "actions": [
+            { "label": "Ask for directions", "action": "askforDirections" },
+            { "label": "Buy an Axe", "action": "buyAxeAlert" },
+            { "label": "Ask about the knight", "action": "knightalert" }
+          ]
+        }},
+        { "name": "Mini Waterfall", "x": 500, "y": 640, "collisionType": "alert", "collisiontext": "A calming waterfall. There's a trail of water leading nearby." }
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [
+            { "id": 1, "name": "Investigate the Disappearances", "complete": false, "progress": 0, "inventoryRequired": [] },
+            { "id": 6, "name": "Rescue the Captured Knight", "complete": false, "progress": 0, "inventoryRequired": ["Longsword"] }
+          ],
+          "targets": [
+            { "name": "Village Elder's House", "x": 500, "y": 400, "collisionType": "alert", "collisiontext": "The village needs your help investigating disappearances." },
+            { "name": "Mysterious Forest", "x": 800, "y": 200, "collisionType": "alert", "collisiontext": "An eerie silence envelops the forest." },
+            { "name": "To Goblin Bandits", "x": 900, "y": 100, "collisionType": "storypartchange", "transitionToPart": 1, "collisiontext": "Follow the tracks deeper into the forest." }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [
+            { "id": 2, "name": "Defeat the Goblin Bandits", "complete": false, "progress": 0, "inventoryRequired": ["Longsword"] }
+          ],
+          "targets": [
+            { "name": "Bandit Camp", "x": 1200, "y": 300, "collisionType": "alert", "collisiontext": "Goblins attack! Prepare for battle!" },
+            { "name": "Prisoner Cages", "x": 1250, "y": 350, "collisionType": "alert", "collisiontext": "You free the villagers. They mention a sorcerer." },
+            { "name": "To Gather Information", "x": 1100, "y": 200, "collisionType": "storypartchange", "transitionToPart": 2, "collisiontext": "Gather information about the sorcerer." }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Cyberpunk": {
+      "background": "backgrounds/CyberpunkGameLoc.png",
+      "inventory": [
+        { "type": "weapon", "name": "Plasma Rifle", "description": "A high-tech firearm with plasma rounds." },
+        { "type": "armor", "name": "NanoSuit", "description": "Protects with reactive nano technology." },
+        { "type": "consumable", "name": "Stim Pack", "description": "Enhances reflexes temporarily." }
+      ],
+      "skills": [
+        { "branch": "Hacking", "name": "Cyber Intrusion", "learned": false },
+        { "branch": "Combat", "name": "Gun Kata", "learned": false },
+        { "branch": "Stealth", "name": "Cloaking", "learned": false }
+      ],
+      "persistentTargets": [],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [],
+          "targets": [
+            { "name": "Target 1", "x": 50, "y": 50, "collisionType": "alert", "collisiontext": "First Test" },
+            { "name": "MegaCorp Server", "x": 200, "y": 50, "collisionType": "alert", "collisiontext": "Corporate server detected" },
+            { "name": "City Police", "x": 50, "y": 250, "collisionType": "alert", "collisiontext": "Law enforcement nearby" },
+            { "name": "Rival Gang", "x": 550, "y": 550, "collisionType": "alert", "collisiontext": "Gang territory" }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Super Teacher": {
+      "background": "backgrounds/SuperTeacherGameLoc.png",
+      "inventory": [
+        { "type": "book", "name": "Math Advice", "description": "Useful topical knowledge." },
+        { "type": "book", "name": "Science Advice", "description": "Useful topical knowledge." },
+        { "type": "book", "name": "English Advice", "description": "Useful topical knowledge." },
+        { "type": "book", "name": "Economics Advice", "description": "Useful topical knowledge." }
+      ],
+      "skills": [
+        { "branch": "Multitask", "name": "Movement Speed", "learned": false },
+        { "branch": "Multitask", "name": "Stop Window Interference for 1 min", "learned": false }
+      ],
+      "persistentTargets": [
+        { "name": "Super Teacher Toolkit", "x": 1000, "y": 330, "collisionType": "alert", "collisiontext": "Teaching tools available" }
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [],
+          "targets": [
+            { "name": "Random Noise Interference", "x": 250, "y": 110, "collisionType": "alert", "collisiontext": "Distraction detected" },
+            { "name": "Student 1", "x": 310, "y": 620, "collisionType": "alert", "collisiontext": "Needs help with English" },
+            { "name": "Student 2", "x": 660, "y": 610, "collisionType": "alert", "collisiontext": "Doesn't speak English" },
+            { "name": "Student 3", "x": 1010, "y": 620, "collisionType": "alert", "collisiontext": "Needs help with Math" }
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Fantasy Adventure": {
+      "background": "backgrounds/eldoria_background.png",
+      "inventory": [
+        { "type": "book", "name": "Book of Eldrak", "description": "An ancient tome with half a map." },
+        { "type": "amulet", "name": "Peculiar Amulet", "description": "Reveals the unseen." },
+        { "type": "map", "name": "Tattered Map", "description": "Hints at Whispering Woods locations." },
+        { "type": "artifact", "name": "Magical Acorn", "description": "Gift from the forest spirit." },
+        { "type": "relic", "name": "Shrine Relic", "description": "Enhances magical abilities." },
+        { "type": "record", "name": "Echoing Cave Echoes", "description": "Reveals secrets and hidden paths." }
+      ],
+      "skills": [
+        { "branch": "Combat", "name": "Sword Mastery", "learned": false },
+        { "branch": "Magic", "name": "Elemental Control", "learned": false },
+        { "branch": "Lore", "name": "Ancient Lore", "learned": true },
+        { "branch": "Stealth", "name": "Eavesdropping", "learned": true },
+        { "branch": "Stealth", "name": "Stealth Movement", "learned": true },
+        { "branch": "Diplomacy", "name": "Negotiation", "learned": true },
+        { "branch": "Magic", "name": "Artifact Mastery", "learned": true }
+      ],
+      "persistentTargets": [
+        { "name": "Lila's Home", "x": 460, "y": 600, "collisionType": "alert", "collisiontext": "A cozy cottage where the quest begins." },
+        { "name": "Eldoria Library", "x": 360, "y": 620, "collisionType": "alert", "collisiontext": "A treasure trove of books and maps." }
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [],
+          "targets": [
+            { "name": "Eldoria Main Square", "x": 410, "y": 590, "collisionType": "requirementsgated", "collisiontext": "The heart of Eldoria.", "requirements": 8 },
+            { "name": "Whispering Forest Edge", "x": 830, "y": 700, "collisionType": "alert", "collisiontext": "The mysterious forest borders Eldoria." },
+            { "name": "Serene Hills", "x": 520, "y": 490, "collisionType": "alert", "collisiontext": "Gentle hills promise adventure." },
+            { "name": "Marketplace", "x": 360, "y": 560, "collisionType": "alert", "collisiontext": "Rumors of ancient artifacts." },
+            { "name": "Eldoria", "x": 490, "y": 420, "collisionType": "storypartchange", "collisiontext": "Your journey begins.", "transitionToPart": 1 },
+            { "name": "Old Sage's Hut", "x": 600, "y": 480, "collisionType": "alert", "collisiontext": "Seek the sage's wisdom." }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [],
+          "targets": [
+            { "name": "Library of Eldrak", "x": 620, "y": 600, "collisionType": "alert", "collisiontext": "You discover the ancient Book of Eldrak." },
+            { "name": "Meridia Market", "x": 750, "y": 590, "collisionType": "alert", "collisiontext": "A peculiar amulet catches your eye." },
+            { "name": "Suspicious Place", "x": 810, "y": 530, "collisionType": "decision", "collisiontext": "Do you know why you came here?" },
+            { "name": "The Ancient Oak", "x": 300, "y": 130, "collisionType": "modal", "modalConfig": {
+              "title": "The Ancient Oak Area",
+              "content": "The Ancient Oak stands before you.",
+              "actions": [
+                { "label": "Talk to the Ancient Oak", "action": "approachAncientOak" }
+              ]
+            }},
+            { "name": "Magical Acorn", "x": 400, "y": 140, "collisionType": "modal", "modalConfig": {
+              "title": "Magical Acorn Area",
+              "content": "A spirit appears as you approach the acorn.",
+              "actions": [
+                { "label": "Talk to the spirit", "action": "acquireMagicalAcorn" }
+              ]
+            }}
+          ]
+        }
+      ],
+      "actions": {}
+    },
+    "Construction": {
+      "background": "backgrounds/ConstructionGameLoc.png",
+      "inventory": [
+        { "type": "tool", "name": "Hammer", "description": "A sturdy hammer for construction." },
+        { "type": "tool", "name": "Screwdriver", "description": "For fastening screws." },
+        { "type": "equipment", "name": "Safety Helmet", "description": "Protects from falling objects." },
+        { "type": "equipment", "name": "Safety Vest", "description": "High-visibility vest." },
+        { "type": "consumable", "name": "Energy Bar", "description": "Provides energy." }
+      ],
+      "skills": [
+        { "branch": "Construction", "name": "Electrical Wiring", "learned": true },
+        { "branch": "Construction", "name": "Concrete Pouring", "learned": true },
+        { "branch": "Safety", "name": "Fall Protection", "learned": false },
+        { "branch": "Safety", "name": "Hazard Recognition", "learned": true },
+        { "branch": "Equipment Operation", "name": "Forklift Certification", "learned": false }
+      ],
+      "persistentTargets": [
+        { "name": "Blueprints", "x": 300, "y": 670, "collisionType": "alert", "collisiontext": "Consult the blueprints." },
+        { "name": "Water Cooler", "x": 490, "y": 650, "collisionType": "alert", "collisiontext": "Take a break and hydrate." }
+      ],
+      "story": [
+        {
+          "part": 0,
+          "objectives": [
+            { "id": "Objective1_1", "name": "Attend Morning Briefing", "complete": false },
+            { "id": "Objective1_2", "name": "Gather Required Tools", "complete": false }
+          ],
+          "targets": [
+            { "name": "Construction Site", "x": 470, "y": 310, "collisionType": "alert", "collisiontext": "You arrive at the construction site." },
+            { "name": "Foreman's Office", "x": 1270, "y": 690, "collisionType": "alert", "collisiontext": "Morning briefing with the foreman." },
+            { "name": "Tool Shed", "x": 430, "y": 540, "collisionType": "alert", "collisiontext": "Gather your tools." },
+            { "name": "Continue Construction", "x": 1100, "y": 520, "collisionType": "storypartchange", "transitionToPart": 1, "collisiontext": "Continue to tasks." }
+          ]
+        },
+        {
+          "part": 1,
+          "objectives": [
+            { "id": "Objective2_1", "name": "Install Electrical Wiring", "complete": false },
+            { "id": "Objective2_2", "name": "Assist with Concrete Pouring", "complete": false },
+            { "id": "Objective2_3", "name": "Attend Safety Training", "complete": false }
+          ],
+          "targets": [
+            { "name": "Electrical Room", "x": 37, "y": 13, "collisionType": "alert", "collisiontext": "Install electrical wiring." },
+            { "name": "Foundation Area", "x": 370, "y": 50, "collisionType": "alert", "collisiontext": "Pour concrete for the foundation." },
+            { "name": "Safety Meeting Point", "x": 530, "y": 160, "collisionType": "alert", "collisiontext": "Safety training session." },
+            { "name": "Lunch Break Area", "x": 820, "y": 540, "collisionType": "alert", "collisiontext": "Lunch break time." }
+          ]
+        },
+        {
+          "part": 2,
+          "objectives": [
+            { "id": "Objective3_1", "name": "Inspect Completed Work", "complete": false },
+            { "id": "Objective3_2", "name": "Clean Up and Secure Site", "complete": false }
+          ],
+          "targets": [
+            { "name": "Inspection Point", "x": 90, "y": 600, "collisionType": "alert", "collisiontext": "Inspect your work." },
+            { "name": "Equipment Storage", "x": 220, "y": 800, "collisionType": "alert", "collisiontext": "Store your equipment." },
+            { "name": "Site Exit", "x": 900, "y": 900, "collisionType": "alert", "collisiontext": "End of day. Good work!" }
+          ]
+        }
+      ],
+      "actions": {}
+    }
+  }
+}