game v0.111

gameState.js

@@ -1,83 +0,0 @@
-class GameState {
-  constructor() {
-    // Initialize the lists of possible locations and targets
-    this.rooms = [
-      "main hallway",
-      "living room",
-      "guest bedroom",
-      "office",
-      "bathroom",
-      "kitchen",
-      "dining room",
-      "north hallway",
-      "storage",
-    ];
-
-    this.hideTargets = ["closet", "bed"];
-    this.searchTargets = ["dresser", "drawer"];
-    this.useTargets = ["flashlight", "knife"];
-
-    // Track current game state
-    this.currentRoom = "main hallway";
-    this.inventory = [];
-  }
-
-  // Method to generate the prompt with current game state
-  getPrompt() {
-    return `You are an AI assistant roleplaying as the user's girlfriend. Your task is to respond to the user's messages by selecting an appropriate action and target, then formatting your response as a JSON object.
-
-Here are the possible actions and their associated targets:
-
-- go: [${this.rooms.join(", ")}]
-- hide: [${this.hideTargets.join(", ")}]
-- search: [${this.searchTargets.join(", ")}]
-- use: [${this.useTargets.join(", ")}]
-
-You will receive a message from the user in the following format:
-<user_message>
-{{USER_MESSAGE}}
-</user_message>
-
-To process the user's message and generate a response, follow these steps:
-
-1. Analyze the user's message to determine the most appropriate action from the list: go, hide, search, or use.
-2. Based on the chosen action, select an appropriate target from the associated list. If the action is "use", the target can be any object mentioned in the user's message.
-3. Create a brief, natural-sounding response message that acknowledges the user's request or command.
-4. Construct a JSON object with the following structure:
-{
-"message": "Your response message here",
-"action": "chosen action",
-"target": "chosen target"
-}
-
-Here are two examples to guide you:
-
-Example 1:
-<user_message>Go to the bathroom, now!</user_message>
-Response:
-{
-"message": "Okay, I'm on my way to the bathroom.",
-"action": "go",
-"target": "bathroom"
-}
-
-Example 2:
-<user_message>Quick, hide under the bed!</user_message>
-Response:
-{
-"message": "Alright, I'm hiding under the bed right away.",
-"action": "hide",
-"target": "bed"
-}
-
-Remember:
-- Always respond in the JSON format specified above.
-- Choose the most appropriate action and target based on the user's message.
-- Keep your response message brief and natural-sounding.
-- If the user's message doesn't clearly indicate an action or target from the provided lists, use your best judgment to select the most relevant options.
-- Do not include any explanation or additional text outside of the JSON object in your response.`;
-  }
-}
-
-// Export the class for use in other files
-export default GameState;

static/assets/css/style.css

@@ -0,0 +1,424 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.blood {
+  position: absolute;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 350px;
+  opacity: 50%;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  position: absolute;
+  bottom: -120px;
+  right: -50px;
+  opacity: 40%;
+}
+
+.blood-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  margin: 20px 20px 0px 0px;
+  transform: rotate(30deg);
+}
+
+.splatter {
+  position: absolute;
+  opacity: 60%;
+  bottom: 240px;
+  left: 30%;
+  transform: translateX(-50%);
+  transform: rotate(20deg);
+  width: 400px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+  z-index: 1;
+  margin-top: 200px;
+}
+
+.logo {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: flicker 4s linear infinite;
+}
+
+.logo img {
+  width: 230px;
+  height: auto;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  position: relative;
+}
+
+.menu::after {
+  content: "";
+  position: absolute;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0) 70%
+  );
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu-item {
+  font-family: "HorrorBrush", cursive;
+  font-size: 48px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+}
+
+.new-game {
+  color: #9b0000;
+}
+
+.menu-item:hover {
+  color: #9b0000;
+}
+
+.how-to-play:hover {
+  color: #9b0000;
+}
+
+.level-maker:hover {
+  color: #9b0000;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    opacity: 0.9;
+  }
+  10% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.4;
+  }
+  16% {
+    opacity: 1;
+  }
+  17% {
+    opacity: 0.4;
+  }
+  18% {
+    opacity: 1;
+  }
+  35% {
+    opacity: 1;
+  }
+  36% {
+    opacity: 0.3;
+  }
+  37% {
+    opacity: 1;
+  }
+  38% {
+    opacity: 0.5;
+  }
+  39% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0.7;
+  }
+  52% {
+    opacity: 1;
+  }
+  53% {
+    opacity: 0.4;
+  }
+  54% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  86% {
+    opacity: 0.6;
+  }
+  87% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0.4;
+  }
+  89% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.3;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.2;
+  }
+  99% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+  95% {
+    opacity: 0.7;
+  }
+  96% {
+    opacity: 0.2;
+  }
+  97% {
+    opacity: 0.7;
+  }
+  98% {
+    opacity: 0.1;
+  }
+  99% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* How to Play Page Styles */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 20px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  letter-spacing: 4px;
+}
+
+.back-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back-button:hover {
+  color: #9b0000;
+}
+
+.character {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  animation: characterFlicker 6s infinite;
+}
+
+.character img {
+  width: 450px;
+  height: auto;
+}
+
+@keyframes characterFlicker {
+  0% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  42% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  43% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+  44% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  45% {
+    opacity: 0.6;
+    filter: brightness(1.3);
+  }
+  46% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  47% {
+    opacity: 0.2;
+    filter: brightness(1.5);
+  }
+  48% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  49% {
+    opacity: 0.4;
+    filter: brightness(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  80% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  81% {
+    opacity: 0.5;
+    filter: brightness(1.3);
+  }
+  82% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}

static/game/game-with-chat.html

@@ -1,537 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Get Me Out! - Apartment Escape Game with Chat</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
-    <style>
-        /* Layout */
-        body {
-            margin: 0;
-            font-family: Arial, sans-serif;
-            display: flex;
-            height: 100vh;
-        }
-        #gameContainer {
-            display: flex;
-            width: 100%;
-            height: 100%;
-        }
-        #mapSection {
-            flex: 1;
-            position: relative;
-            background: #f5f5f5;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        /* We'll place the P5 canvas in here */
-        .map-wrapper {
-            margin: 20px;
-            transform-origin: top left;
-        }
-
-        #chatSection {
-            width: 400px;
-            border-left: 1px solid #ddd;
-            display: flex;
-            flex-direction: column;
-            background: white;
-        }
-        #chatHistory {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: #f8f9fa;
-        }
-        #chatControls {
-            padding: 20px;
-            border-top: 1px solid #ddd;
-            background: white;
-        }
-        .chat-message {
-            padding: 10px;
-            margin: 5px 0;
-            border-radius: 16px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .user-message {
-            background: #007AFF;
-            color: white;
-            margin-left: auto;
-            border-radius: 16px 16px 4px 16px;
-        }
-        .assistant-message {
-            background: #E9E9EB;
-            color: black;
-            margin-right: auto;
-            border-radius: 16px 16px 16px 4px;
-        }
-        textarea {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            margin-bottom: 10px;
-            resize: none;
-            font-family: inherit;
-        }
-        button {
-            padding: 8px 16px;
-            background: #007AFF;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #0056b3;
-        }
-        .loading-dots {
-            display: inline-flex;
-            gap: 4px;
-            padding: 5px;
-            margin: 5px 0;
-        }
-        .dot {
-            width: 8px;
-            height: 8px;
-            background: #6c757d;
-            border-radius: 50%;
-            animation: wave 1.3s linear infinite;
-        }
-        .dot:nth-child(2) { animation-delay: -1.1s; }
-        .dot:nth-child(3) { animation-delay: -0.9s; }
-        @keyframes wave {
-            0%, 60%, 100% { transform: translateY(0); }
-            30% { transform: translateY(-4px); }
-        }
-
-        /* Modal for API key (if needed) */
-        #apiKeyModal {
-            display: none;
-            position: fixed;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            background: rgba(0,0,0,0.5);
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-content {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            width: 300px;
-        }
-        #apiKey {
-            width: 100%;
-            margin: 10px 0;
-            padding: 8px;
-        }
-    </style>
-</head>
-<body>
-    <div id="gameContainer">
-        <div id="mapSection">
-            <div id="mapWrapper" class="map-wrapper">
-                <!-- P5.js canvas goes here -->
-            </div>
-        </div>
-        <div id="chatSection">
-            <div id="chatHistory"></div>
-            <div id="chatControls">
-                <textarea id="prompt" placeholder="Type your message..." rows="3"></textarea>
-                <button onclick="sendMessage()">Send</button>
-            </div>
-        </div>
-    </div>
-    <div id="apiKeyModal">
-        <div class="modal-content">
-            <h3>Enter Mistral API Key</h3>
-            <input type="password" id="apiKey" placeholder="Enter your API key">
-            <button onclick="saveApiKey()">Save</button>
-        </div>
-    </div>
-
-    <script>
-        /* 
-         * This script loads ./apt.json to set up the map,
-         * draws it in p5.js, and provides a chat interface on the right.
-         */
-
-        // Constants and variables for the map
-        const CELL_SIZE = 30;
-        let GRID_COLS = 0;
-        let GRID_ROWS = 0;
-        let grid = [];
-        let rooms = new Map();
-        let characterPos = null;
-        let path = [];
-        let isMoving = false;
-        let moveInterval = null;
-
-        // Chat variables
-        let apiKey = localStorage.getItem('mistralApiKey');
-        const systemPrompt = `You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can send instructions through text.
-
-RESPONSE FORMAT:
-You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message.
-
-1. For movement instructions ("go" action):
-{
-    "action": "go",
-    "to": "[room name]",
-    "textMessage": "[girlfriend's response]"
-}
-
-2. For any other input or unclear instructions:
-{
-    "textMessage": "[girlfriend's response]"
-}
-
-VALID ROOMS:
-Only these rooms are recognized for movement:
-- Main Bathroom
-- Guest Toilet
-- Dining Room
-- Kitchen
-- TV Room
-- Living Room
-- Hallway
-- Office
-- Bedroom
-
-CHARACTER BEHAVIOR:
-The girlfriend is aware of the danger and extremely distressed. Her text responses should be:
-- Brief and urgent
-- Reflect genuine fear and panic
-- Written like real text messages (short, quick responses)
-- No time for pleasantries or long explanations
-- May include typos or rushed writing due to stress
-`;
-
-        // Load apt.json upon page start
-        async function loadAptJson() {
-            try {
-                const response = await fetch('./apt.json');
-                if (!response.ok) {
-                    alert("Failed to load apt.json!");
-                    return;
-                }
-                const data = await response.json();
-                // Update local variables from apt.json
-                GRID_COLS = data.gridCols || 40;
-                GRID_ROWS = data.gridRows || 20;
-                grid = data.grid || [];
-                rooms = new Map(data.rooms);
-                characterPos = data.characterPos || { x: 0, y: 0 };
-
-                // Once loaded, initialize the P5 canvas with correct dims
-                let canvas = createCanvas(GRID_COLS * CELL_SIZE, GRID_ROWS * CELL_SIZE);
-                canvas.parent('mapWrapper');
-                adjustScale();
-
-            } catch (e) {
-                console.error("Error loading apt.json:", e);
-            }
-        }
-
-        function adjustScale() {
-            const availableWidth = window.innerWidth - 400 - 40; // space for chat + margins
-            const actualCanvasWidth = GRID_COLS * CELL_SIZE;
-            const scale = availableWidth / actualCanvasWidth;
-            const mapWrapper = document.querySelector('#mapSection .map-wrapper');
-            if (mapWrapper) {
-                // use CSS zoom or transform
-                mapWrapper.style.zoom = scale;
-            }
-        }
-
-        window.addEventListener('resize', adjustScale);
-
-        // p5.js setup
-        function setup() {
-            // We'll wait to createCanvas until apt.json is loaded
-            loadAptJson();
-        }
-
-        // p5.js draw loop
-        function draw() {
-            if (!grid || grid.length === 0) {
-                // No grid loaded yet or apt.json not ready
-                return;
-            }
-            background(255);
-            drawGrid();
-            drawRooms();
-            drawWallsAndDoors();
-            drawPath();
-            drawCharacter();
-        }
-
-        function drawGrid() {
-            stroke(200);
-            for (let x = 0; x <= GRID_COLS; x++) {
-                line(x * CELL_SIZE, 0, x * CELL_SIZE, GRID_ROWS*CELL_SIZE);
-            }
-            for (let y = 0; y <= GRID_ROWS; y++) {
-                line(0, y * CELL_SIZE, GRID_COLS*CELL_SIZE, y * CELL_SIZE);
-            }
-        }
-
-        function drawRooms() {
-            for (let [roomName, cells] of rooms) {
-                const hue = stringToHue(roomName);
-                fill(hue, 30, 95, 0.3);
-                noStroke();
-                for (let cell of cells) {
-                    rect(cell.x * CELL_SIZE, cell.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                }
-                if (cells.length > 0) {
-                    fill(0);
-                    textAlign(CENTER, CENTER);
-                    textSize(10);
-                    text(roomName, 
-                        cells[0].x * CELL_SIZE + CELL_SIZE/2, 
-                        cells[0].y * CELL_SIZE + CELL_SIZE/2
-                    );
-                }
-            }
-        }
-
-        function drawWallsAndDoors() {
-            for (let y = 0; y < GRID_ROWS; y++) {
-                for (let x = 0; x < GRID_COLS; x++) {
-                    const cell = grid[y][x];
-                    if (cell.type === 'wall') {
-                        fill(0);
-                        noStroke();
-                        rect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                    } else if (cell.type === 'door') {
-                        fill(255, 0, 0);
-                        noStroke();
-                        rect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
-                    }
-                }
-            }
-        }
-
-        function drawPath() {
-            if (path.length > 0 && isMoving) {
-                noFill();
-                stroke(0, 255, 0);
-                strokeWeight(2);
-                line(
-                    characterPos.x * CELL_SIZE + CELL_SIZE/2,
-                    characterPos.y * CELL_SIZE + CELL_SIZE/2,
-                    path[0].x * CELL_SIZE + CELL_SIZE/2,
-                    path[0].y * CELL_SIZE + CELL_SIZE/2
-                );
-                for (let i = 0; i < path.length - 1; i++) {
-                    line(
-                        path[i].x * CELL_SIZE + CELL_SIZE/2,
-                        path[i].y * CELL_SIZE + CELL_SIZE/2,
-                        path[i + 1].x * CELL_SIZE + CELL_SIZE/2,
-                        path[i + 1].y * CELL_SIZE + CELL_SIZE/2
-                    );
-                }
-                strokeWeight(1);
-            }
-        }
-
-        function drawCharacter() {
-            if (characterPos) {
-                textSize(CELL_SIZE * 0.8);
-                textAlign(CENTER, CENTER);
-                text('👧', 
-                    characterPos.x * CELL_SIZE + CELL_SIZE/2, 
-                    characterPos.y * CELL_SIZE + CELL_SIZE/2
-                );
-            }
-        }
-
-        function stringToHue(str) {
-            let hash = 0;
-            for (let i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            }
-            return hash % 360;
-        }
-
-        // Simple BFS for pathfinding
-        function findPath(start, end) {
-            const queue = [[start]];
-            const visited = new Set();
-            const key = pos => `${pos.x},${pos.y}`;
-            visited.add(key(start));
-
-            while (queue.length > 0) {
-                const currentPath = queue.shift();
-                const current = currentPath[currentPath.length - 1];
-
-                if (current.x === end.x && current.y === end.y) {
-                    return currentPath;
-                }
-                const neighbors = [
-                    { x: current.x, y: current.y - 1 },
-                    { x: current.x+1, y: current.y },
-                    { x: current.x, y: current.y+1 },
-                    { x: current.x-1, y: current.y }
-                ];
-                for (const next of neighbors) {
-                    if (next.x < 0 || next.x >= GRID_COLS || next.y < 0 || next.y >= GRID_ROWS) continue;
-                    if (visited.has(key(next))) continue;
-
-                    const cell = grid[next.y][next.x];
-                    if (cell.type === 'wall') continue;
-
-                    visited.add(key(next));
-                    queue.push([...currentPath, next]);
-                }
-            }
-            return [];
-        }
-
-        function moveToRoom(roomName) {
-            const targetRoom = Array.from(rooms.entries())
-                .find(([name]) => name.toLowerCase() === roomName.toLowerCase());
-            if (!targetRoom || !characterPos) return false;
-
-            const [_, cells] = targetRoom;
-            if (cells.length === 0) return false;
-            path = findPath(characterPos, cells[0]);
-            if (path.length > 0) {
-                isMoving = true;
-                moveCharacterAlongPath();
-                return true;
-            }
-            return false;
-        }
-
-        function moveCharacterAlongPath() {
-            if (moveInterval) clearInterval(moveInterval);
-            moveInterval = setInterval(() => {
-                if (path.length === 0) {
-                    isMoving = false;
-                    clearInterval(moveInterval);
-                    return;
-                }
-                const nextPos = path.shift();
-                characterPos = nextPos;
-            }, 200);
-        }
-
-        /* Chat / Mistral-related code */
-        function createLoadingIndicator() {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'chat-message assistant-message';
-            loadingDiv.innerHTML = `
-                <div class="loading-dots">
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                </div>
-            `;
-            return loadingDiv;
-        }
-
-        function addMessageToChat(role, content) {
-            const chatHistory = document.getElementById('chatHistory');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `chat-message ${role}-message`;
-            messageDiv.textContent = content;
-            chatHistory.appendChild(messageDiv);
-            chatHistory.scrollTop = chatHistory.scrollHeight;
-        }
-
-        async function sendMessage() {
-            const prompt = document.getElementById('prompt').value.trim();
-            if (!prompt) return;
-
-            if (!apiKey) {
-                alert('Please enter your Mistral API key first');
-                document.getElementById('apiKeyModal').style.display = 'flex';
-                return;
-            }
-
-            // Add user message to the chat
-            addMessageToChat('user', prompt);
-            document.getElementById('prompt').value = '';
-
-            // Add loading indicator
-            const chatHistory = document.getElementById('chatHistory');
-            const loadingIndicator = createLoadingIndicator();
-            chatHistory.appendChild(loadingIndicator);
-
-            try {
-                // Make call to Mistral or any AI endpoint
-                const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${apiKey}`
-                    },
-                    body: JSON.stringify({
-                        model: 'mistral-large-latest',
-                        messages: [
-                            { role: 'system', content: systemPrompt },
-                            { role: 'user', content: prompt }
-                        ]
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const data = await response.json();
-                const assistantResponse = data.choices[0].message.content || "";
-
-                try {
-                    const jsonStart = assistantResponse.indexOf('{');
-                    const jsonEnd = assistantResponse.lastIndexOf('}') + 1;
-                    const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
-                    const jsonResponse = JSON.parse(jsonContent);
-
-                    if (jsonResponse.textMessage) {
-                        addMessageToChat('assistant', jsonResponse.textMessage);
-                    }
-                    if (jsonResponse.action === 'go' && jsonResponse.to) {
-                        moveToRoom(jsonResponse.to);
-                    }
-                } catch (e) {
-                    console.error('Error parsing JSON from response:', e);
-                    addMessageToChat('assistant', 'Sorry, I had trouble understanding that response.');
-                }
-            } catch (error) {
-                addMessageToChat('assistant', `Error: ${error.message}`);
-            } finally {
-                loadingIndicator.remove();
-            }
-        }
-
-        function saveApiKey() {
-            const key = document.getElementById('apiKey').value.trim();
-            if (key) {
-                apiKey = key;
-                localStorage.setItem('mistralApiKey', key);
-                document.getElementById('apiKeyModal').style.display = 'none';
-            }
-        }
-
-        // Allow sending message with Enter
-        document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('prompt').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-
-            if (!apiKey) {
-                document.getElementById('apiKeyModal').style.display = 'flex';
-            }
-        });
-    </script>
-</body>
-</html> 

static/game/gameState.js

@@ -0,0 +1,83 @@
+
+        // Game state management
+        class GameState {
+          constructor() {
+              // Initialize with rooms from apt.json
+              this.rooms = [
+                "Kichen",
+                "Storage",
+                "My Bedroom",
+                "Bathroom",
+                "Main Hallway",
+                "Living Room",
+                "Guest Bedroom",
+                "Dining Room",
+                "Office",
+                "North Hallway"
+              ];
+      
+              this.hideTargets = ["bed", "coat closet", "table", "shower"];
+              this.searchTargets = ["dresser", "stove", "desk", "cabinet", "fridge", "bookcase"];
+              this.items = ["lock pick", "flashlight", "knife", "remote"];
+              this.useTargets = ["bedroom door", "main door", "TV"];
+      
+              // Track current game state
+              this.currentRoom = this.rooms[0];
+              this.inventory = [];
+              this.isHiding = false;
+          }
+      
+          handleAction(action, target) {
+              switch (action) {
+                  case 'go':
+                      this.currentRoom = target;
+                      break;
+                  case 'hide':
+                      this.isHiding = true;
+                      break;
+                  case 'search':
+                      // Could add found items to inventory
+                      break;
+                  case 'use':
+                      // Handle item usage
+                      break;
+              }
+          }
+      
+          getPrompt() {
+              return `You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can give instructions through text.
+
+Current state:
+- Room: ${this.currentRoom}
+- Hiding: ${this.isHiding}
+- Inventory: ${this.inventory.join(", ") || "empty"}
+
+RESPONSE FORMAT:
+You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message.
+
+1. For movement instructions ("go" action):
+{
+  "action": "go",
+  "to": "[room name]",
+  "textMessage": "[girlfriend's response]"
+}
+
+2. For any other input or unclear instructions:
+{
+  "textMessage": "[girlfriend's response]"
+}
+
+VALID ROOMS:
+Only these rooms are recognized for movement:
+${this.rooms.join('\n')}
+
+CHARACTER BEHAVIOR:
+The girlfriend is aware of the danger and extremely distressed. Her text responses should be:
+- Brief and urgent
+- Reflect genuine fear and panic
+- Written like real text messages (short, quick responses)
+- No time for pleasantries or long explanations
+- May include typos or rushed writing due to stress`;
+          }
+
+}

static/game/index.html

@@ -3,6 +3,7 @@
 <head>
     <title>Get Me Out! - Apartment Escape Game with Chat</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script src="/static/game/gameState.js"></script>
     <style>
         /* Layout */
         body {
@@ -47,6 +48,8 @@
             padding: 20px;
             border-top: 1px solid #ddd;
             background: white;
+            display: flex;
+            gap: 10px;
         }
         .chat-message {
             padding: 10px;
@@ -67,13 +70,11 @@
             margin-right: auto;
             border-radius: 16px 16px 16px 4px;
         }
-        textarea {
-            width: 100%;
+        input {
+            flex: 1;
             padding: 10px;
             border: 1px solid #ddd;
             border-radius: 4px;
-            margin-bottom: 10px;
-            resize: none;
             font-family: inherit;
         }
         button {
@@ -140,8 +141,8 @@
         <div id="chatSection">
             <div id="chatHistory"></div>
             <div id="chatControls">
-                <textarea id="prompt" placeholder="Type your message..." rows="3"></textarea>
-                <button onclick="sendMessage()">Send</button>
+                <input type="text" id="prompt" placeholder="Type your message...">
+                <button onclick="Message()">▶</button>
             </div>
         </div>
     </div>
@@ -170,45 +171,12 @@
         let isMoving = false;
         let moveInterval = null;
 
+        // Initialize game state
+        const gameState = new GameState();
+
         // Chat variables
         let apiKey = localStorage.getItem('mistralApiKey');
-        const systemPrompt = `You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can send instructions through text.
-
-RESPONSE FORMAT:
-You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message.
-
-1. For movement instructions ("go" action):
-{
-    "action": "go",
-    "to": "[room name]",
-    "textMessage": "[girlfriend's response]"
-}
-
-2. For any other input or unclear instructions:
-{
-    "textMessage": "[girlfriend's response]"
-}
-
-VALID ROOMS:
-Only these rooms are recognized for movement:
-- Main Bathroom
-- Guest Toilet
-- Dining Room
-- Kitchen
-- TV Room
-- Living Room
-- Hallway
-- Office
-- Bedroom
-
-CHARACTER BEHAVIOR:
-The girlfriend is aware of the danger and extremely distressed. Her text responses should be:
-- Brief and urgent
-- Reflect genuine fear and panic
-- Written like real text messages (short, quick responses)
-- No time for pleasantries or long explanations
-- May include typos or rushed writing due to stress
-`;
+        let chatMessages = []; // Array to store chat history
 
         // Load apt.json upon page start
         async function loadAptJson() {
@@ -473,9 +441,12 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
             messageDiv.textContent = content;
             chatHistory.appendChild(messageDiv);
             chatHistory.scrollTop = chatHistory.scrollHeight;
+
+            // Store message in chat history
+            chatMessages.push({ role, content });
         }
 
-        async function sendMessage() {
+        async function Message() {
             const prompt = document.getElementById('prompt').value.trim();
             if (!prompt) return;
 
@@ -485,17 +456,24 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                 return;
             }
 
-            // Add user message to the chat
             addMessageToChat('user', prompt);
             document.getElementById('prompt').value = '';
 
-            // Add loading indicator
             const chatHistory = document.getElementById('chatHistory');
             const loadingIndicator = createLoadingIndicator();
             chatHistory.appendChild(loadingIndicator);
 
             try {
-                // Make call to Mistral or any AI endpoint
+                // Get last 5 messages from chat history
+                const recentMessages = chatMessages.slice(-5);
+                
+                // Prepare messages array for Mistral
+                const messages = [
+                    { role: 'system', content: gameState.getPrompt() },
+                    ...recentMessages,
+                    { role: 'user', content: prompt }
+                ];
+
                 const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
                     method: 'POST',
                     headers: {
@@ -504,10 +482,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                     },
                     body: JSON.stringify({
                         model: 'mistral-large-latest',
-                        messages: [
-                            { role: 'system', content: systemPrompt },
-                            { role: 'user', content: prompt }
-                        ]
+                        messages: messages
                     })
                 });
 
@@ -516,6 +491,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                 }
 
                 const data = await response.json();
+                console.log('Mistral response:', data.choices[0].message.content);
                 const assistantResponse = data.choices[0].message.content || "";
 
                 try {
@@ -523,6 +499,7 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
                     const jsonEnd = assistantResponse.lastIndexOf('}') + 1;
                     const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
                     const jsonResponse = JSON.parse(jsonContent);
+                    console.log('Parsed JSON response:', jsonResponse);
 
                     if (jsonResponse.textMessage) {
                         addMessageToChat('assistant', jsonResponse.textMessage);
@@ -550,12 +527,12 @@ The girlfriend is aware of the danger and extremely distressed. Her text respons
             }
         }
 
-        // Allow sending message with Enter
+        // Allow ing message with Enter
         document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('prompt').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
+                if (e.key === 'Enter') {
                     e.preventDefault();
-                    sendMessage();
+                    Message();
                 }
             });
 

static/game/test prompt.txt

@@ -0,0 +1,39 @@
+You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can  instructions through text.
+
+RESPONSE FORMAT:
+You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message.
+
+1. For movement instructions ("go" action):
+{
+    "action": "go",
+    "to": "[room name]",
+    "textMessage": "[girlfriend's response]"
+}
+
+2. For any other input or unclear instructions:
+{
+    "textMessage": "[girlfriend's response]"
+}
+
+VALID ROOMS:
+Only these rooms are recognized for movement:
+- Main Bathroom
+- Guest Toilet
+- Dining Room
+- Kitchen
+- TV Room
+- Living Room
+- Hallway
+- Office
+- Bedroom
+
+CHARACTER BEHAVIOR:
+The girlfriend is aware of the danger and extremely distressed. Her text responses should be:
+- Brief and urgent
+- Reflect genuine fear and panic
+- Written like real text messages (short, quick responses)
+- No time for pleasantries or long explanations
+- May include typos or rushed writing due to stress
+
+
+      

static/how-to-play.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="public/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="public/help.png" alt="" class="blood blood-top-right" />
+      <img src="public/splatter.png" alt="" class="blood splatter" />
+      <img src="public/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <!-- Contenu à ajouter -->
+      </div>
+
+      <a href="index.html" class="back-button">Back to Menu</a>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

static/index.html

@@ -1,150 +1,35 @@
 <!DOCTYPE html>
-<html>
-<head>
-    <title>The Last Message - Horror Escape Game</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-            color: #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-
-        .container {
-            text-align: center;
-            padding: 2rem;
-            max-width: 800px;
-            position: relative;
-            z-index: 1;
-        }
-
-        h1 {
-            font-size: 4rem;
-            margin-bottom: 1rem;
-            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
-            animation: flicker 4s infinite;
-            letter-spacing: 2px;
-        }
-
-        .subtitle {
-            font-size: 1.2rem;
-            color: #bb0000;
-            margin-bottom: 3rem;
-            text-shadow: 0 0 5px #ff0000;
-        }
-
-        .menu {
-            display: grid;
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-
-        .menu-item {
-            background: rgba(20, 20, 20, 0.8);
-            padding: 1.5rem;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            color: white;
-            border: 1px solid #440000;
-            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
-        }
-
-        .menu-item:hover {
-            transform: scale(1.05);
-            background: rgba(40, 0, 0, 0.8);
-            border-color: #ff0000;
-            box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
-        }
-
-        .menu-item h2 {
-            margin: 0 0 0.5rem 0;
-            font-size: 1.8rem;
-            color: #ff0000;
-        }
-
-        .menu-item p {
-            margin: 0;
-            color: #cccccc;
-            font-size: 1rem;
-        }
-
-        @keyframes flicker {
-            0%, 100% { opacity: 1; }
-            92% { opacity: 1; }
-            93% { opacity: 0.8; }
-            94% { opacity: 1; }
-            95% { opacity: 0.9; }
-            96% { opacity: 1; }
-        }
-
-        /* Blood drips */
-        .blood-drip {
-            position: fixed;
-            top: 0;
-            width: 3px;
-            height: 60px;
-            background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.8));
-            animation: drip 4s infinite;
-            opacity: 0.7;
-        }
-
-        @keyframes drip {
-            0% {
-                transform: translateY(-60px);
-                opacity: 0;
-            }
-            50% {
-                opacity: 0.7;
-            }
-            100% {
-                transform: translateY(100vh);
-                opacity: 0;
-            }
-        }
-
-      
-    </style>
-</head>
-<body>
-    <!-- Blood drip effects -->
-    <div class="blood-drip" style="left: 15%"></div>
-    <div class="blood-drip" style="left: 35%; animation-delay: 1.5s"></div>
-    <div class="blood-drip" style="left: 55%; animation-delay: 2.5s"></div>
-    <div class="blood-drip" style="left: 75%; animation-delay: 1s"></div>
-    <div class="blood-drip" style="left: 95%; animation-delay: 2s"></div>
-
-    <div class="container">
-        <h1>THE LAST MESSAGE</h1>
-        <div class="subtitle">Will your final words save them?</div>
-
-        <div class="menu">
-            <a href="game/" class="menu-item">
-                <h2>📱 PLAY THE STORY</h2>
-                <p>Experience the original nightmare</p>
-            </a>
-
-            <a href="maker/" class="menu-item">
-                <h2>🏗️ CREATE & PLAY</h2>
-                <p>Design and play your own horror scenario</p>
-            </a>
-        </div>
-
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
     </div>
 
-    <script>
-        // Add random delay and duration to blood drips
-        document.querySelectorAll('.blood-drip').forEach(drip => {
-            drip.style.animationDuration = (3 + Math.random() * 2) + 's';
-        });
-    </script>
-</body>
-</html>
+    <main>
+      <div class="logo">
+        <img src="assets/img/logo.png" alt="Through Their Eyes" />
+      </div>
+
+      <nav class="menu">
+        <a href="game/" class="menu-item new-game">NEW GAME</a>
+        <a href="how-to-play.html" class="menu-item how-to-play">HOW TO PLAY</a>
+        <a href="maker/" class="menu-item level-maker">LEVEL MAKER</a>
+      </nav>
+      <div class="character">
+        <img src="assets/img/perso.png" alt="Character" />
+      </div>
+    </main>
+  </body>
+</html>

static/mistral/index.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mistral Chat Test Bed</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+        
+        /* System Prompt Section */
+        #systemPromptSection {
+            margin-bottom: 20px;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        
+        textarea {
+            width: 100%;
+            height: 150px;
+            margin: 10px 0;
+            padding: 8px;
+            font-family: monospace;
+        }
+        
+        /* Chat Section */
+        #chatHistory {
+            max-height: 400px;
+            overflow-y: auto;
+            margin: 20px 0;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        
+        .chat-message {
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 4px;
+        }
+        
+        .user-message {
+            background: #e3f2fd;
+        }
+        
+        .assistant-message {
+            background: #f5f5f5;
+            white-space: pre-wrap;
+        }
+        
+        /* Raw JSON Section */
+        .raw-json {
+            font-family: monospace;
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 5px;
+            padding: 5px;
+            background: #f8f9fa;
+            border-left: 3px solid #007bff;
+        }
+        
+        /* Controls */
+        #controls {
+            display: flex;
+            gap: 10px;
+            margin: 20px 0;
+        }
+        
+        input[type="text"] {
+            flex: 1;
+            padding: 8px;
+        }
+        
+        button {
+            padding: 8px 16px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        button:hover {
+            background: #0056b3;
+        }
+        
+        /* Display Options */
+        .display-options {
+            margin: 10px 0;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Mistral Chat Test Bed</h1>
+    
+    <div id="systemPromptSection">
+        <h3>System Prompt</h3>
+        <textarea id="systemPrompt">You are the game master of "Get Me Out!", a single-player text-based survival game. The scenario: a player must guide their girlfriend to safety via text messages while she's being hunted by a murderous clown in their apartment. The player has access to security cameras and can give instructions through text.
+
+Current state:
+- Room: Main Bathroom
+- Hiding: false
+- Inventory: empty
+
+RESPONSE FORMAT:
+You must ALWAYS respond with a JSON object. The response should reflect the girlfriend's reaction to the player's message.
+
+1. For movement instructions ("go" action):
+{
+    "action": "go",
+    "to": "[room name]",
+    "textMessage": "[girlfriend's response]"
+}
+
+2. For any other input or unclear instructions:
+{
+    "textMessage": "[girlfriend's response]"
+}
+
+VALID ROOMS:
+Only these rooms are recognized for movement:
+Main Bathroom
+Guest Toilet
+Dining Room
+Kitchen
+TV Room
+Living Room
+Hallway
+Office
+Bedroom
+
+CHARACTER BEHAVIOR:
+The girlfriend is aware of the danger and extremely distressed. Her text responses should be:
+- Brief and urgent
+- Reflect genuine fear and panic
+- Written like real text messages (short, quick responses)
+- No time for pleasantries or long explanations
+- May include typos or rushed writing due to stress</textarea>
+    </div>
+
+    <div class="display-options">
+        <label>
+            <input type="checkbox" id="showRawJson" checked> 
+            Show Raw JSON Response
+        </label>
+    </div>
+
+    <div id="chatHistory"></div>
+
+    <div id="controls">
+        <input type="text" id="userInput" placeholder="Type your message...">
+        <button onclick="sendMessage()">Send</button>
+    </div>
+
+    <div id="apiKeySection">
+        <h3>API Key</h3>
+        <input type="password" id="apiKey" placeholder="Enter Mistral API Key">
+        <button onclick="saveApiKey()">Save API Key</button>
+    </div>
+
+    <script>
+        let apiKey = localStorage.getItem('mistralApiKey');
+        
+        if (apiKey) {
+            document.getElementById('apiKey').value = apiKey;
+        }
+
+        function saveApiKey() {
+            const key = document.getElementById('apiKey').value.trim();
+            if (key) {
+                apiKey = key;
+                localStorage.setItem('mistralApiKey', key);
+                alert('API key saved!');
+            }
+        }
+
+        function addMessage(role, content, rawJson = null) {
+            const chatHistory = document.getElementById('chatHistory');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${role}-message`;
+            messageDiv.textContent = content;
+            
+            if (rawJson && document.getElementById('showRawJson').checked) {
+                const jsonDiv = document.createElement('div');
+                jsonDiv.className = 'raw-json';
+                jsonDiv.textContent = JSON.stringify(rawJson, null, 2);
+                messageDiv.appendChild(jsonDiv);
+            }
+            
+            chatHistory.appendChild(messageDiv);
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+        }
+
+        async function sendMessage() {
+            const userInput = document.getElementById('userInput');
+            const message = userInput.value.trim();
+            
+            if (!message) return;
+            if (!apiKey) {
+                alert('Please enter your Mistral API key first');
+                return;
+            }
+
+            // Add user message to chat
+            addMessage('user', message);
+            userInput.value = '';
+
+            try {
+                const response = await fetch('https://api.mistral.ai/v1/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`
+                    },
+                    body: JSON.stringify({
+                        model: 'mistral-large-latest',
+                        messages: [
+                            { 
+                                role: 'system', 
+                                content: document.getElementById('systemPrompt').value 
+                            },
+                            { 
+                                role: 'user', 
+                                content: message 
+                            }
+                        ]
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const data = await response.json();
+                const assistantResponse = data.choices[0].message.content;
+
+                try {
+                    // Extract JSON from response
+                    const jsonStart = assistantResponse.indexOf('{');
+                    const jsonEnd = assistantResponse.lastIndexOf('}') + 1;
+                    const jsonContent = assistantResponse.substring(jsonStart, jsonEnd);
+                    const jsonResponse = JSON.parse(jsonContent);
+
+                    // Add assistant message with both text and raw JSON
+                    addMessage('assistant', jsonResponse.textMessage, jsonResponse);
+
+                } catch (e) {
+                    console.error('Error parsing JSON from response:', e);
+                    addMessage('assistant', assistantResponse);
+                }
+
+            } catch (error) {
+                addMessage('assistant', `Error: ${error.message}`);
+            }
+        }
+
+        // Allow sending message with Enter key
+        document.getElementById('userInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    </script>
+</body>
+</html>