diff --git a/_projects/2026-04-12-TransBlog.ipynb b/_projects/2026-04-12-TransBlog.ipynb
new file mode 100644
index 000000000..b56e4d4ee
--- /dev/null
+++ b/_projects/2026-04-12-TransBlog.ipynb
@@ -0,0 +1,169 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "fc5fb345",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "layout: post\n",
+    "codemirror: true\n",
+    "title: Sprint 5 Transition Teaching Lesson\n",
+    "permalink: /sprintingsnails/transitions\n",
+    "author: Sophie Haas\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ad84857b",
+   "metadata": {},
+   "source": [
+    "Have you ever wanted to know how to add a transition screen to your game? Maybe when the game ends, you want to keep the player connected to the experience by flashing a massive:\n",
+    "\n",
+    "<h2 style=\"text-align: center; margin: 20px 0;\">\n",
+    "<strong style=\"color: #ff0000; text-shadow: 0 0 10px #ff0000; font-family: 'Arial Black', sans-serif;\">G A M E &nbsp; O V E R</strong>\n",
+    "</h2>\n",
+    "\n",
+    "...or build anticipation for the next challenge with a bold:\n",
+    "\n",
+    "<h2 style=\"text-align: center; margin: 20px 0;\">\n",
+    "<strong style=\"color: #ffd700; text-shadow: 0 0 10px #ffd700; font-family: 'Arial Black', sans-serif;\">L E V E L &nbsp; 1</strong>\n",
+    "</h2>\n",
+    "\n",
+    "Static games can feel \"stiff.\" Transition screens act as the theater curtain for your code—they hide the background logic, signal a change in state, and provide crucial feedback to the player.\n",
+    "\n",
+    "In this blog, we’re going to demonstrate how to use:\n",
+    "\n",
+    "Dynamic DOM Injection: Building UI elements on the fly.\n",
+    "\n",
+    "CSS Keyframe Animations: Adding movement and \"pulse\" to your screens.\n",
+    "\n",
+    "Logic Triggers: Timing your transitions to match game events."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e41d1cde",
+   "metadata": {},
+   "source": [
+    "<div style=\"display: flex; justify-content: center; margin-bottom: 30px;\">\n",
+    "    <a href=\"{{site.baseurl}}/gamify/timmycounter.html\" style=\"text-decoration: none;\">\n",
+    "        <div style=\"background: linear-gradient(45deg, #4a0b0b, #220505); color: white; padding: 15px 30px; border-radius: 8px; font-family: 'Bungee', cursive; border: 1px solid #ff0000; box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3); text-transform: uppercase; letter-spacing: 1px;\">\n",
+    "            View Kirby Maze Example\n",
+    "        </div>\n",
+    "    </a>\n",
+    "</div>\n",
+    "\n",
+    "# Understanding UI Transitions & Overlays\n",
+    "\n",
+    "A transition screen is a **UI Overlay** that sits on a higher \"layer\" than your game world. In game development, we call this the **HUD (Heads-Up Display)** or **UI Layer**.\n",
+    "\n",
+    "---\n",
+    "\n",
+    "### The Primary Jobs of a Transition Screen\n",
+    "* **State Signaling:** Letting the player know exactly what happened—whether they won, lost, or paused.\n",
+    "* **Input Blocking:** Creating a \"logical wall\" that prevents the player from moving or interacting with the game world while the screen is visible.\n",
+    "* **Scene Management:** Providing the \"Escape Hatch\"—buttons to restart the level or move to the next stage.\n",
+    "\n",
+    "---\n",
+    "\n",
+    "# How it Works in Your Code\n",
+    "Your implementation uses a **\"CSS-in-JS\"** approach. Since we are working in a Notebook environment, we can't easily jump between different HTML files, so we manipulate the **DOM** (the webpage structure) directly.\n",
+    "\n",
+    "### The \"Ghost\" Element\n",
+    "In your constructor, you create the `lossOverlay`. Crucially, you set `display: none`. This makes it a **ghost element**—it exists in the code’s memory and the page’s structure, but the player cannot see or touch it yet.\n",
+    "\n",
+    "> **Code Insight:**\n",
+    "> ```javascript\n",
+    "> lossOverlay.style.cssText = \"display:none; position:fixed; width:100%; height:100%; z-index:20000;\";\n",
+    "> ```\n",
+    "\n",
+    "---\n",
+    "\n",
+    "# The Trigger (The \"Watcher\")\n",
+    "To make the screen appear, you need a **\"Watcher.\"** In your code, this is the `setInterval` timer that constantly evaluates the state of the game.\n",
+    "\n",
+    "| Step | Component | Logic |\n",
+    "| :--- | :--- | :--- |\n",
+    "| **1** | **The Condition** | The Watcher checks: `window.timeLeft <= 0` |\n",
+    "| **2** | **The Action** | The Watcher flips the CSS from `display: none` to `display: flex`. |\n",
+    "| **3** | **The Result** | The screen \"appears\" instantly, covering the game. |\n",
+    "\n",
+    "---\n",
+    "\n",
+    "# Key Concepts in the \"Kirby Maze\"\n",
+    "The implementation uses three advanced techniques to make the transition feel professional:\n",
+    "<img width=\"195\" height=\"91\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/27c2a77d-882a-4bb2-9aba-7f1457d8a344\" />\n",
+    "<img width=\"798\" height=\"434\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8577b221-5000-4dc9-bb3e-a482530ec868\" />\n",
+    "### 1. Z-Indexing\n",
+    "By setting `z-index: 20000`, we ensure the Game Over screen stays above Kirby, the walls, and the background. It is mathematically the \"top-most\" item on the page.\n",
+    "\n",
+    "### 2. Input Gating\n",
+    "We use a `window.isPaused` variable as a \"gatekeeper.\" Even if the player mashes the **WASD** keys during the Game Over screen, the code checks this variable and refuses to move the character.\n",
+    "\n",
+    "### 3. Visual Polish\n",
+    "We injected a `<style>` tag with `@keyframes flash`. This allows the transition screen to have dynamic, moving parts (like flashing text) without needing a heavy video file or extra assets.\n",
+    "\n",
+    "---\n",
+    "\n",
+    "### Pro-Tip\n",
+    "Always ensure your transition screens have a clear **Call to Action** (like a \"Restart\" button). A transition screen without a way out is just a frozen game!\n",
+    "\n",
+    "### Where to implement this in your code\n",
+    "In our example level, we implemented our transition code in our window.addEventListener."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e2b6ee08",
+   "metadata": {
+    "vscode": {
+     "languageId": "javascript"
+    }
+   },
+   "outputs": [],
+   "source": [
+    " window.addEventListener(\"load\", () => {\n",
+    "  const lossOverlay = document.createElement(\"div\");\n",
+    "            lossOverlay.style.cssText = \"position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); display:none; justify-content:center; align-items:center; z-index:20000; flex-direction:column; text-align:center;\";\n",
+    "            lossOverlay.innerHTML = `\n",
+    "                <h1 class=\"huge-game-over\">GAME OVER</h1>\n",
+    "                <p class=\"flashing-text\">CLICK BELOW TO RESTART SYSTEM</p>\n",
+    "                <button onclick=\"location.reload()\" style=\"\n",
+    "                    padding:20px 40px; \n",
+    "                    cursor:pointer; \n",
+    "                    background:#ff0000; \n",
+    "                    color:white; \n",
+    "                    border:4px solid white; \n",
+    "                    font-size:80px; \n",
+    "                    font-family:'Arial Black'; \n",
+    "                    border-radius:10px; \n",
+    "                    box-shadow: 0 0 20px rgba(255,0,0,0.6);\n",
+    "                \">TRY AGAIN</button>"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.14.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/_projects/2026-04-22-multiblog.md b/_projects/2026-04-22-multiblog.md
new file mode 100644
index 000000000..730204342
--- /dev/null
+++ b/_projects/2026-04-22-multiblog.md
@@ -0,0 +1,113 @@
+---
+layout: post
+codemirror: True
+title: Sprint 5 Multiplayer Lesson
+permalink: /sprinting snails/multiplayer
+author: Salma Zaghloul
+---
+# Multiplayer Games
+## What are they?
+In our context, multiplayer games are our familair .js levels, however more than one player can connect to play at the same time. Think of Among Us, or Fortnite.
+---
+## How does it work, exactly?
+Our game file is connected to an external server in the backend, that is constantly communicating and exchanging information with the front end. The server handles connections, player counts, diconnections, and most importnantly, player identification.
+
+### Connection
+When a player connects, the server assigns them a randomly generated ID (SID).
+
+```py
+@socketio.on('connect')
+def handle_connect():
+    global playercount
+    sid = request.sid
+    # Spawn at random or default position
+    players[sid] = {"x": 100, "y": 100,}
+    playercount = playercount + 1
+    print(f"[SERVER] Player joined: {sid} and count = " + f" {playercount}")
+    socketio.emit('player_update', {"players": players})
+```
+Notes:
+- The server sets 'playercount' to a global variable, to allow communication between the front and backends.
+    - Explanation: If the variable is local, it cannot be printed, sent, etc.
+- In the instance someone joins, the server requests and generates a new id and assigns it to the player.
+- The server then increases the player count, before printing it in the console.
+![alt text](<Screenshot 2026-04-22 101721.png>)
+
+### Disconnection
+Similar to player connection, the server must handle the event of a player disconnecting.
+```py
+@socketio.on('disconnect')
+def handle_disconnect():
+    sid = request.sid
+    if sid in players:
+        del players[sid]
+        print(f"[SERVER] Player disconnected: {sid} and count = " f"{playercount}")
+        print(f"{playercount}")
+        socketio.emit('player_left', {"sid": sid})
+        socketio.emit('player_update', {"players": players})
+```
+Notes:
+- In the event of a disconnection, the server looks up the "identification" of the player.
+- It then deletes this person's SID
+- This action effectively lowers the player count on its own, so there is no need to include it in this string.
+---
+## How do I add this to my game?
+- First, update the .md file that generates your game level to contain this:
+```
+---
+layout: opencs
+title: Multiplayer
+permalink: /gamify/mylevel
+socket_io: true
+--- 
+```
+
+- Then, implement the server into your .js file. Here's ours as an example if needed:
+[]()
+<button onclick="window.location.href="">Multiplayer.js</button>
+<div class="button-container" id="btns">
+  <a href="https://mgithub.com/Salma-Zag/Tri2team/blob/main/assets/js/projects/multiplayer/levels/GameLevelMultiplayer.js'; class="button large btn-s5">SPRINT 5</a>
+</div>
+
+<div class="button-container" id="btns">
+  <a href="https://github.com/Salma-Zag/Tri2team/blob/main/assets/js/projects/multiplayer/levels/GameLevelMultiplayer.js" class="button large btn-start">Button</a>
+</div>
+
+
+Under your *const* definitions, add these strings of code.
+
+```js
+ // const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });
+const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+        
+        let myid = null;
+
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+        });
+```
+IMPORTANT TO NOTE:
+This line, "const socket = io("ws://localhost:8590", { transports: ["websocket"] });" is for local host use. When committing to deployed use, comment out this previous line and uncomment the one above it ("const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });").
+
+For context, when you deploy your level, this portion of code should now look like:
+```js
+const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });
+// const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+        
+        let myid = null;
+
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+        });
+```
+
+## Further Developements
+Our game level and engine are dynamic and are bound to update in the future. Keep an eye out!
+
+Additional features:
+- Physical sprites per player
+- Notifying the host when a player joins
+- Lobbies (to help people find one another)
+- Lobby codes
+- Levels
+- Gravity (jump logic, velocity)
\ No newline at end of file
diff --git a/_projects/Makefile b/_projects/Makefile
new file mode 100644
index 000000000..6f0f33531
--- /dev/null
+++ b/_projects/Makefile
@@ -0,0 +1,117 @@
+# CS Pathway Game Project Makefile
+# Generic targets: build, assets, clean, watch, docs, docs-clean
+# Called from main Makefile via: make -C _projects/cs-pathway-game <target>
+
+###########################################
+# CS Pathway Game Project Configuration
+###########################################
+
+# Project paths (relative to workspace root)
+DATE_OF_CREATION = 2026-04-02
+PROJECT_SRC = $(CURDIR)
+PROJECT_NAME = $(notdir $(PROJECT_SRC))
+NOTEBOOK_FILENAME = $(DATE_OF_CREATION)-$(PROJECT_NAME).ipynb
+
+# Workspace root (main Makefile directory - two levels up from here)
+WORKSPACE_ROOT = ../..
+
+# Distribution destinations (relative to workspace root, in .gitignore)
+JS_DEST = $(WORKSPACE_ROOT)/assets/js/projects/$(PROJECT_NAME)
+IMAGES_DEST = $(WORKSPACE_ROOT)/images/projects/$(PROJECT_NAME)
+NOTEBOOK_DEST = $(WORKSPACE_ROOT)/_notebooks/projects/$(PROJECT_NAME)
+DOCS_DEST = $(WORKSPACE_ROOT)/_posts/projects/$(PROJECT_NAME)
+
+###########################################
+# Build Targets
+###########################################
+
+# Main build target - copy notebook and call assets
+build:
+	@mkdir -p $(NOTEBOOK_DEST)
+	@cp notebook.src.ipynb $(NOTEBOOK_DEST)/$(NOTEBOOK_FILENAME) 2>/dev/null || true
+	@$(MAKE) assets
+	@$(MAKE) docs
+	@echo "✅ $(PROJECT_NAME) built successfully"
+	@echo "   Source: _projects/$(PROJECT_NAME)/"
+	@echo "   Notebook: _notebooks/projects/$(PROJECT_NAME)/$(NOTEBOOK_FILENAME)"
+	@echo "   JavaScript: assets/js/projects/$(PROJECT_NAME)/"
+	@echo "   Images: images/projects/$(PROJECT_NAME)/"
+	@echo "   Docs: _posts/projects/$(PROJECT_NAME)/"
+
+# Copy only JS and image assets (not notebook) - for watch triggers
+assets:
+	@mkdir -p $(JS_DEST)/levels
+	@cp levels/*.js $(JS_DEST)/levels/ 2>/dev/null || true
+	@mkdir -p $(JS_DEST)/model
+	@cp model/*.js $(JS_DEST)/model/ 2>/dev/null || true
+	@mkdir -p $(IMAGES_DEST)
+	@cp -r images/* $(IMAGES_DEST)/ 2>/dev/null || true
+
+# Clean distributed files (keeps source intact)
+clean:
+	@echo "🧹 Cleaning $(PROJECT_NAME) distribution..."
+	@rm -rf $(NOTEBOOK_DEST)
+	@rm -rf $(JS_DEST)
+	@rm -rf $(IMAGES_DEST)
+	@echo "✓ Distribution cleaned (source files preserved in _projects/$(PROJECT_NAME))"
+
+###########################################
+# Watch Target (for dev mode)
+###########################################
+
+# Watch project files and auto-copy on change
+watch:
+	@echo "👀 Watching $(PROJECT_NAME) project (auto-copy on save)..."
+	@if command -v fswatch >/dev/null 2>&1; then \
+		fswatch -l 0.3 -r $(PROJECT_SRC) 2>/dev/null | while read changed_file; do \
+			if echo "$$changed_file" | grep -q "notebook.src.ipynb"; then \
+				echo "  🔄 Notebook changed - copying and converting..."; \
+				mkdir -p $(NOTEBOOK_DEST); \
+				cp $(PROJECT_SRC)/notebook.src.ipynb $(NOTEBOOK_DEST)/$(NOTEBOOK_FILENAME) 2>/dev/null || true; \
+				cd $(WORKSPACE_ROOT) && make convert-single NOTEBOOK_FILE="$(NOTEBOOK_DEST)/$(NOTEBOOK_FILENAME)" 2>&1; \
+			elif echo "$$changed_file" | grep -q "/levels/"; then \
+				filename=$$(basename "$$changed_file"); \
+				echo "  🔄 Level changed: $$filename"; \
+				mkdir -p $(JS_DEST)/levels; \
+				cp "$$changed_file" $(JS_DEST)/levels/ 2>/dev/null || true; \
+			elif echo "$$changed_file" | grep -q "/model/"; then \
+				filename=$$(basename "$$changed_file"); \
+				echo "  🔄 Model changed: $$filename"; \
+				mkdir -p $(JS_DEST)/model; \
+				cp "$$changed_file" $(JS_DEST)/model/ 2>/dev/null || true; \
+			elif echo "$$changed_file" | grep -q "/images/"; then \
+				echo "  🔄 Images changed - copying all images..."; \
+				$(MAKE) assets 2>&1 | grep -v "cp:" | head -1; \
+			else \
+				echo "  🔄 File changed: $$changed_file (copying all assets)"; \
+				$(MAKE) assets 2>&1 | grep -v "cp:"; \
+			fi; \
+		done; \
+	else \
+		echo "⚠️  fswatch not installed (brew install fswatch for auto-watch)"; \
+		echo "   Falling back to manual: run 'make -C _projects/$(PROJECT_NAME) build' after edits"; \
+		while true; do sleep 3600; done; \
+	fi
+
+###########################################
+# Documentation Targets (serve mode only)
+###########################################
+
+# Publish documentation with date prefixes to _posts/
+docs:
+	@echo "📚 Publishing $(PROJECT_NAME) documentation..."
+	@mkdir -p $(DOCS_DEST)
+	@cp Multi.md $(DOCS_DEST)/$(DATE_OF_CREATION)-multiplayer.md 2>/dev/null || true
+	@for doc in docs/*.md; do \
+		if [ -f "$$doc" ]; then \
+			filename=$$(basename "$$doc"); \
+			cp "$$doc" "$(DOCS_DEST)/$(DATE_OF_CREATION)-$(PROJECT_NAME)-$$filename" 2>/dev/null || true; \
+		fi; \
+	done
+	@echo "✓ Documentation published to _posts/projects/$(PROJECT_NAME)/"
+
+# Clean documentation distribution
+docs-clean:
+	@rm -rf $(DOCS_DEST)
+
+.PHONY: build assets clean watch docs docs-clean
diff --git a/_projects/Multi.md b/_projects/Multi.md
new file mode 100644
index 000000000..12ee1bb27
--- /dev/null
+++ b/_projects/Multi.md
@@ -0,0 +1,40 @@
+---
+layout: opencs
+title: Multiplayer
+permalink: /gamify/multiplayer
+socket_io: true
+---
+
+
+<div id="gameContainer">
+    <div id="promptDropDown" class="promptDropDown" style="z-index: 9999"></div>
+    <!-- GameEnv will create canvas dynamically -->
+</div>
+
+
+<script type="module">
+    import Core from "{{site.baseurl}}/assets/js/GameEnginev1/essentials/Game.js";
+    import GameControl from "{{site.baseurl}}/assets/js/GameEnginev1/essentials/GameControl.js";
+    import GameLevelMultiplayer from "{{site.baseurl}}/assets/js/projects/multiplayer/levels/GameLevelMultiplayer.js";
+    import { pythonURI, javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+
+
+    const gameLevelClasses = [GameLevelMultiplayer];
+
+
+    // Web Server Environment data
+    const environment = {
+        path:"{{site.baseurl}}",
+        pythonURI: pythonURI,
+        javaURI: javaURI,
+        fetchOptions: fetchOptions,
+        gameContainer: document.getElementById("gameContainer"),
+        gameLevelClasses: gameLevelClasses
+
+
+    }
+    // Launch Adventure Game using the central core and adventure GameControl
+    Core.main(environment, GameControl);
+</script>
+
+
diff --git a/_projects/README.md b/_projects/README.md
new file mode 100644
index 000000000..cd78f8652
--- /dev/null
+++ b/_projects/README.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: Adventure Game - Overview
+description: README starting documentation for the adventure game 
+category: Gamify
+breadcrumb: true
+permalink: /gamify/overview
+---
+
+## Directory Structure
+
+Project-friendly project organization for the introductory gamify experience.
+
+```text
+_projects/gamify/
+├── notebook.src.ipynb
+├── levels/
+│   ├── GameLevelWater.js
+│   ├── GameLevelDesert.js
+│   ├── GameLevelEnd.js
+│   └── GameLevelOverworld.js
+├── model/
+├── images/
+└── docs/
+    └── README.md
+```
+
+Runtime/distributed outputs are generated into GitHub Pages folders by Makefile:
+
+- _notebooks/projects/gamify/
+- _posts/projects/gamify/
+- assets/js/projects/gamify/
+- images/projects/gamify/
+
+## Development Workflow
+
+Primary SDLC workflow:
+
+```bash
+make dev
+```
+
+This is the main build-and-test loop for development. It starts Jekyll and the registered project watchers so edits are copied, converted, and regenerated automatically.
+
+Before using live regeneration with make dev, install fswatch:
+
+```bash
+# macOS
+brew install fswatch
+
+# Ubuntu/Debian
+sudo apt install fswatch
+```
+
+Without fswatch, the project watcher falls back to manual rebuild instructions instead of auto-regeneration.
+
+Validate this project after make dev when you want to force a full re-copy of distributed files.
+
+Use this when:
+
+- You renamed files or folders.
+- You want to confirm files were copied to expected runtime directories.
+- You want to isolate one project's distribution behavior while debugging.
+
+```bash
+make -C _projects/gamify build
+make -C _projects/gamify docs # docs are not in make dev
+```
+
+Validate all registered projects when you need a repo-wide distribution refresh or consistency check.
+
+Use this when:
+
+- Multiple projects were renamed or restructured.
+- You want to verify all registered project outputs in one run.
+- You want a quick pre-commit sanity check for project distribution.
+
+```bash
+make build-registered-projects
+make build-registered-docs # docs are not in make dev
+```
+
+## CI/CD Targets and Action Logs
+
+GitHub Actions uses the same registered targets:
+
+```yaml
+- name: Build registered projects
+  run: |
+    make build-registered-projects
+    make build-registered-docs
+```
+
+Expected Actions log lines for project-level visibility:
+
+- 📦 Building project: gamify
+- 📚 Building docs for: gamify
+
+If docs verification is enabled in workflow, expect summary lines similar to:
+
+- Registered project docs found: <count>
+- Sample generated docs:
+
+These logs are the quickest way to confirm _projects registration and distribution are running in CI.
+
+## Edit/Save Workflow
+
+1. Edit files in _projects/gamify/
+2. Save file and let auto-distribution run.
+3. Jekyll regenerates affected pages.
+4. Refresh browser and validate changes.
+
+## Path Guidance
+
+Use runtime absolute paths in code.
+
+```javascript
+// Image path from gameEnv
+const sprite = gameEnv.path + '/images/projects/gamify/knight.png';
+
+// Shared game engine import
+import GameControl from '/assets/js/GameEnginev1.1/essentials/GameControl.js';
+```
+
+## Registration Model
+
+Project integration into Makefile is registration-based.
+
+1. Add project name to _projects/.makeprojects.
+2. Use the project Makefile template targets: build, clean, watch, docs, docs-clean.
+3. For new projects, typically only DATE_OF_CREATION and project files change.
+
+No Makefile fragments or project-specific root targets are required.
+
+## Version Control Strategy
+
+Track source files in _projects. Treat distributed files as generated artifacts.
+
+```gitignore
+# Track source
+!_projects/gamify/**
+
+# Ignore generated distribution
+_notebooks/projects/gamify/
+assets/js/projects/gamify/
+images/projects/gamify/
+_posts/projects/gamify/
+```
+
+## Notes
+
+This README is the baseline introduction to the build system concepts. Real-world, deeper references belong in the cs-pathway-game docs.
+
+For an example of lightweight team documentation, see the sample GameLevelWater write-up:
+
+- [Sample Level Documentation](/gamify/gamelevelwater)
diff --git a/_projects/multiplayer/docs/2026-04-12-TransBlog.md b/_projects/multiplayer/docs/2026-04-12-TransBlog.md
new file mode 100644
index 000000000..2c3c78db5
--- /dev/null
+++ b/_projects/multiplayer/docs/2026-04-12-TransBlog.md
@@ -0,0 +1,112 @@
+---
+layout: post
+codemirror: true
+title: Sprint 5 Transition Teaching Lesson
+permalink: /sprintingsnails/transitions
+author: Sophie Haas
+---
+Have you ever wanted to know how to add a transition screen to your game? Maybe when the game ends, you want to keep the player connected to the experience by flashing a massive:
+
+<h2 style="text-align: center; margin: 20px 0;">
+<strong style="color: #ff0000; text-shadow: 0 0 10px #ff0000; font-family: 'Arial Black', sans-serif;">G A M E &nbsp; O V E R</strong>
+</h2>
+
+...or build anticipation for the next challenge with a bold:
+
+<h2 style="text-align: center; margin: 20px 0;">
+<strong style="color: #ffd700; text-shadow: 0 0 10px #ffd700; font-family: 'Arial Black', sans-serif;">L E V E L &nbsp; 1</strong>
+</h2>
+
+Static games can feel "stiff." Transition screens act as the theater curtain for your code—they hide the background logic, signal a change in state, and provide crucial feedback to the player.
+
+In this blog, we’re going to demonstrate how to use:
+
+Dynamic DOM Injection: Building UI elements on the fly.
+
+CSS Keyframe Animations: Adding movement and "pulse" to your screens.
+
+Logic Triggers: Timing your transitions to match game events.
+<div style="display: flex; justify-content: center; margin-bottom: 30px;">
+    <a href="{{site.baseurl}}/gamify/timmycounter.html" style="text-decoration: none;">
+        <div style="background: linear-gradient(45deg, #4a0b0b, #220505); color: white; padding: 15px 30px; border-radius: 8px; font-family: 'Bungee', cursive; border: 1px solid #ff0000; box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3); text-transform: uppercase; letter-spacing: 1px;">
+            View Kirby Maze Example
+        </div>
+    </a>
+</div>
+
+# Understanding UI Transitions & Overlays
+
+A transition screen is a **UI Overlay** that sits on a higher "layer" than your game world. In game development, we call this the **HUD (Heads-Up Display)** or **UI Layer**.
+
+---
+
+### The Primary Jobs of a Transition Screen
+* **State Signaling:** Letting the player know exactly what happened—whether they won, lost, or paused.
+* **Input Blocking:** Creating a "logical wall" that prevents the player from moving or interacting with the game world while the screen is visible.
+* **Scene Management:** Providing the "Escape Hatch"—buttons to restart the level or move to the next stage.
+
+---
+
+# How it Works in Your Code
+Your implementation uses a **"CSS-in-JS"** approach. Since we are working in a Notebook environment, we can't easily jump between different HTML files, so we manipulate the **DOM** (the webpage structure) directly.
+
+### The "Ghost" Element
+In your constructor, you create the `lossOverlay`. Crucially, you set `display: none`. This makes it a **ghost element**—it exists in the code’s memory and the page’s structure, but the player cannot see or touch it yet.
+
+> **Code Insight:**
+> ```javascript
+> lossOverlay.style.cssText = "display:none; position:fixed; width:100%; height:100%; z-index:20000;";
+> ```
+
+---
+
+# The Trigger (The "Watcher")
+To make the screen appear, you need a **"Watcher."** In your code, this is the `setInterval` timer that constantly evaluates the state of the game.
+
+| Step | Component | Logic |
+| :--- | :--- | :--- |
+| **1** | **The Condition** | The Watcher checks: `window.timeLeft <= 0` |
+| **2** | **The Action** | The Watcher flips the CSS from `display: none` to `display: flex`. |
+| **3** | **The Result** | The screen "appears" instantly, covering the game. |
+
+---
+
+# Key Concepts in the "Kirby Maze"
+The implementation uses three advanced techniques to make the transition feel professional:
+<img width="195" height="91" alt="Image" src="https://github.com/user-attachments/assets/27c2a77d-882a-4bb2-9aba-7f1457d8a344" />
+<img width="798" height="434" alt="Image" src="https://github.com/user-attachments/assets/8577b221-5000-4dc9-bb3e-a482530ec868" />
+### 1. Z-Indexing
+By setting `z-index: 20000`, we ensure the Game Over screen stays above Kirby, the walls, and the background. It is mathematically the "top-most" item on the page.
+
+### 2. Input Gating
+We use a `window.isPaused` variable as a "gatekeeper." Even if the player mashes the **WASD** keys during the Game Over screen, the code checks this variable and refuses to move the character.
+
+### 3. Visual Polish
+We injected a `<style>` tag with `@keyframes flash`. This allows the transition screen to have dynamic, moving parts (like flashing text) without needing a heavy video file or extra assets.
+
+---
+
+### Pro-Tip
+Always ensure your transition screens have a clear **Call to Action** (like a "Restart" button). A transition screen without a way out is just a frozen game!
+
+### Where to implement this in your code
+In our example level, we implemented our transition code in our window.addEventListener.
+```js
+ window.addEventListener("load", () => {
+  const lossOverlay = document.createElement("div");
+            lossOverlay.style.cssText = "position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); display:none; justify-content:center; align-items:center; z-index:20000; flex-direction:column; text-align:center;";
+            lossOverlay.innerHTML = `
+                <h1 class="huge-game-over">GAME OVER</h1>
+                <p class="flashing-text">CLICK BELOW TO RESTART SYSTEM</p>
+                <button onclick="location.reload()" style="
+                    padding:20px 40px; 
+                    cursor:pointer; 
+                    background:#ff0000; 
+                    color:white; 
+                    border:4px solid white; 
+                    font-size:80px; 
+                    font-family:'Arial Black'; 
+                    border-radius:10px; 
+                    box-shadow: 0 0 20px rgba(255,0,0,0.6);
+                ">TRY AGAIN</button>
+```
\ No newline at end of file
diff --git a/_projects/multiplayer/docs/2026-04-22-multiblog.md b/_projects/multiplayer/docs/2026-04-22-multiblog.md
new file mode 100644
index 000000000..4e26d2052
--- /dev/null
+++ b/_projects/multiplayer/docs/2026-04-22-multiblog.md
@@ -0,0 +1,327 @@
+---
+layout: post
+codemirror: True
+title: Sprint 5 Multiplayer Lesson
+permalink: /sprintingsnails/multiplayer
+author: Salma Zaghloul
+---
+# Multiplayer Games
+## What are they?
+In our context, multiplayer games are our familiar .js levels, however more than one player can connect to play at the same time. Think of Among Us, or Fortnite.
+
+---
+
+## How does it work, exactly?
+Our game file is connected to an external server in the backend, that is constantly communicating and exchanging information with the front end. The server handles connections, player counts, diconnections, and most importnantly, player identification.
+
+### Connection
+When a player connects, the server assigns them a randomly generated ID (SID).
+
+```py
+@socketio.on('connect')
+def handle_connect():
+    global playercount
+    sid = request.sid
+    # Spawn at random or default position
+    players[sid] = {"x": 100, "y": 100,}
+    playercount = playercount + 1
+    print(f"[SERVER] Player joined: {sid} and count = " + f" {playercount}")
+    socketio.emit('player_update', {"players": players})
+```
+Notes:
+- The server sets 'playercount' to a global variable, to allow communication between the front and backends.
+    - Explanation: If the variable is local, it cannot be printed, sent, etc.
+- In the instance someone joins, the server requests and generates a new id and assigns it to the player.
+- The server then increases the player count, before printing it in the console.
+
+### Disconnection
+Similar to player connection, the server must handle the event of a player disconnecting.
+```py
+@socketio.on('disconnect')
+def handle_disconnect():
+    sid = request.sid
+    if sid in players:
+        del players[sid]
+        print(f"[SERVER] Player disconnected: {sid} and count = " f"{playercount}")
+        print(f"{playercount}")
+        socketio.emit('player_left', {"sid": sid})
+        socketio.emit('player_update', {"players": players})
+```
+Notes:
+- In the event of a disconnection, the server looks up the "identification" of the player.
+- It then deletes this person's SID
+- This action effectively lowers the player count on its own, so there is no need to include it in this string.
+---
+# How do I add this to my game?
+### Initializing your .md and .js
+- First, update the .md file that generates your game level to contain this:
+```
+---
+layout: opencs
+title: Multiplayer
+permalink: /gamify/mylevel
+socket_io: true
+--- 
+```
+
+- Then, implement the server into your .js file. Here's ours as an example if needed: PLEASE REFERENCE THIS IF YOU'RE STUCK!
+
+<div class="button-container" id="btns">
+  <a href="https://github.com/Salma-Zag/Tri2team/blob/main/assets/js/projects/multiplayer/levels/GameLevelMultiplayer.js" class="button large btn-start">Multiplayer.js</a>
+</div>
+
+
+Under your *const* definitions, add these strings of code.
+
+```js
+ // const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });
+const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+        
+        let myid = null;
+
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+        });
+```
+### IMPORTANT TO NOTE ABOUT CONST DEFINITION:
+This line,
+'const socket = io("ws://localhost:8590", { transports: ["websocket"] });' 
+is for local host use. When committing to deployed use, comment out this previous line and uncomment the one above it 
+'("const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });")'.
+
+For context, when you deploy your level, this portion of code should now look like:
+```js
+const socket = io("wss://flask-ws.opencodingsociety.com", { transports: ["websocket"] });
+// const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+        
+        let myid = null;
+
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+        });
+```
+
+# Rendering other players
+Now, we have simply connected the server to your game. And technically, players are now joining each other when a tab is opened. But they can't see each other. Let's fix that!
+
+### Step 1: RemotePlayerVisualizer class
+#### Initializing
+- This class id placed *before* your GameLevel class
+- This class is what will render or "draw" players into the level
+- Think of it as the painter that is drawing on to your "canvas" (game).
+- This requires you to import GameObject
+```
+import GameObject from '/assets/js/GameEnginev1.1/essentials/GameObject.js';
+```
+---
+#### Breakdown
+The class itself should be the first class in your file, right under your import!
+
+### Code and Comments
+Here's ours, with a detailed breakdown of the key components in the comments:
+```js
+class RemotePlayerVisualizer extends GameObject {
+    constructor(data = null, gameEnv = null) {
+        super(gameEnv);
+        this.remotePlayersRef = data?.remotePlayers || {}; // This tells the engine: "The image you're about to clone will match the relative position of the player it generates with".
+        this.SCALE_FACTOR = 3.5;
+        this.frameWidth = 569 / 13;   // sprite sheet width / columns
+        this.frameHeight = 36;         // sprite sheet height
+        this.spriteImage = null;
+    }
+
+    update() {
+        // Load the sprite image once on first call
+        if (!this.spriteImage) {
+            const img = new Image();
+            img.src = "/images/gamebuilder/sprites/kirby.png";
+            this.spriteImage = img; // "spriteImage" is the variable containing the sprite that will be cloned
+        }
+        this.draw();
+    }
+
+    draw() {
+        // Don't draw until the image is loaded
+        if (!this.spriteImage?.complete) return;
+
+        const ctx = this.gameEnv.ctx;
+
+        const drawWidth = this.frameWidth * this.SCALE_FACTOR; // matches the scale of the sprite.
+        const drawHeight = this.frameHeight * this.SCALE_FACTOR;
+
+        for (const sid in this.remotePlayersRef) {
+            const p = this.remotePlayersRef[sid];
+            console.log("drawing remote player at:", p.x, p.y);
+            ctx.drawImage(
+                this.spriteImage,
+                0, 0,  
+                this.frameWidth, //framewidth/height refer to the dementions of one frame (of the sprite).
+                this.frameHeight,
+                p.x, p.y, 
+                drawWidth,  
+                drawHeight 
+            );
+        }
+    }
+
+    resize() {}
+    destroy() { this.spriteImage = null; }
+}
+```
+
+### Detailed Semantics and Key
+    This class:
+        - Will load your player sprite only once, and clone it per player that joins.
+        - Will tell the engine to attach each clone to the separate player movements
+        - In short, ensure players can see each other.
+
+    - `remotePlayersRef`: Matches the new clone to the new player and their positions on the screen. Basically: "The image you're about to clone will match the relative position of the player it generates with".
+    - 'spriteImage': The variable that contains the player sprite.
+    - 'SCALE_FACTOR': It's very particular, but essentially matches the size of the new players to the original. Can be changed.
+
+---
+## Step 2: Synchronizing Screens (NetworkSynchronizer class)
+This class goes directly under our previous class. It makes sure player screens are up to date with each other.
+
+This also extends GameObject. The class tells the engine to constantly search for each player's position within GameObject, then emits it to the game itself. (Every 50 milliseconds, in our case.)
+
+### Code and comments:
+```js
+class NetworkSynchronizer extends GameObject {
+    constructor(data = null, gameEnv = null) {
+        super(gameEnv);
+        this.socket = data?.socket; // Establishes Socket.IO connection
+        this.playerInstance = null; // References the local player
+        this.lastEmit = 0; // Little timestamps between emits, to prevent constant emission
+        this.emitDelay = 50; // Time (in ms) between delays
+    }
+
+    update() {
+        if (!this.playerInstance) {
+            this.playerInstance = this.gameEnv?.gameObjects?.find(
+                obj => obj instanceof Player
+            );
+        }
+
+        if (!this.playerInstance || !this.socket) return;
+
+        const now = Date.now();
+        if (now - this.lastEmit < this.emitDelay) return;
+
+        this.socket.emit("move", {
+            x: this.playerInstance.position?.x ?? this.playerInstance.x,
+            y: this.playerInstance.position?.y ?? this.playerInstance.y
+    });    
+    this.lastEmit = now;
+ 
+    }
+
+    draw() {}
+    resize() {}
+    destroy() {}
+}
+```
+
+## Step 3: Initializing the Socket.IO Connection
+This will establish the conneciton to WebSocket(our server) and set up the event handlers. In other words, what should trigger when someone connects (cloning the sprite) or disconnects (deleting the clone.)
+
+We will add four different handlers:
+    - 'connect': Called when client successfully connects to server
+    - 'player_update': Called when server broadcasts updated player positions
+    - 'player_left': Called when a player disconnects
+    - 'disconnect': Called when client loses connection to server
+
+### Code and Comments
+```js
+class GameLevelMultiplayer {
+    constructor(gameEnv) {
+        // Player data, bg data, and so on will be up here as usual.
+        const path = gameEnv.path;
+        const width = gameEnv.innerWidth;
+        const height = gameEnv.innerHeight;
+
+        const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+
+        let myId = null;
+        const remotePlayers = {};
+
+        socket.on("connect", () => { // Defines what will happen if someone connects
+            console.log("connected:", socket.id);
+            myId = socket.id; //Assigns and id to the new player.
+        });
+
+        socket.on("player_update", (data) => { // Defines what will happen if someone moves
+            if (!data?.players) return;
+
+            const players = data.players;
+
+            for (const sid in players) {
+                if (sid === socket.id) continue;
+
+                if (!remotePlayers[sid]) {
+                    remotePlayers[sid] = {
+                        x: players[sid].x,
+                        y: players[sid].y,
+                        color: this.getRandomColor(), // purely optional.
+                    };
+                } else {
+                    remotePlayers[sid].x = players[sid].x;
+                    remotePlayers[sid].y = players[sid].y;
+                }
+            }
+
+            for (const sid in remotePlayers) {
+                if (!players[sid]) {
+                    delete remotePlayers[sid];
+                }
+            }
+        });
+        socket.on("player_left", (data) => { // Defines what will happen if someone disconnects
+            if (remotePlayers[data.sid]) {
+                delete remotePlayers[data.sid];
+            }
+        });
+        socket.on("disconnect", () => { // Does NOT define, simply logs.
+            console.log("disconnected from server");
+        });
+    }
+}
+```
+---
+## Step 4: Configuring all components
+All this is is an updated version of this.classes, that will cater to our new multiplayer compenents. 
+
+However, our objects must go in a certain order, or else it won't work.
+    **Why?**
+        - The game engine initializes classes in the order you put them down. NetworkSynchronizer must come before RemotePlayerVisualizer so that NetworkSynchronizer can find the Player instance in gameEnv.gameObjects. When out of order, it will have nothing to search and will abort the command, leaving everything dyscfunctional.
+    **What Order?**
+        - GameEnvBackground (renders background image)
+        - Player (renders local player, handles input)
+        - NetworkSynchronizer (syncs local player position to server)
+        - RemotePlayerVisualizer (renders remote players)
+
+### Code
+```js
+
+
+        this.classes = [
+            { class: GameEnvBackground, data: bgData },
+            { class: Player, data: playerData },
+            { class: NetworkSynchronizer, data: { socket: socket } },
+            { class: RemotePlayerVisualizer, data: { remotePlayers: remotePlayers } }
+        ];
+```
+
+
+---
+
+## Further Developements
+Our game level and engine are dynamic and are bound to update in the future. Keep an eye out!
+
+Additional features:
+- Notifying the host when a player joins
+- Lobbies (to help people find one another)
+- Lobby codes
+- Levels
+- Gravity (jump logic, velocity)
+- Troubleshooting
\ No newline at end of file
diff --git a/_projects/multiplayer/images/blackandwhite.jpg b/_projects/multiplayer/images/blackandwhite.jpg
new file mode 100644
index 000000000..87b9c6bb9
Binary files /dev/null and b/_projects/multiplayer/images/blackandwhite.jpg differ
diff --git a/_projects/multiplayer/levels/GameLevelMultiplayer.js b/_projects/multiplayer/levels/GameLevelMultiplayer.js
new file mode 100644
index 000000000..a74c34a83
--- /dev/null
+++ b/_projects/multiplayer/levels/GameLevelMultiplayer.js
@@ -0,0 +1,192 @@
+// Adventure Game Custom Level
+// Exported from GameBuilder on 2026-03-05T17:15:10.295Z
+// How to use this file:
+// 1) Save as assets/js/adventureGame/GameLevelTimmy.js in your repo.
+// 2) Reference it in your runner or level selector. Examples:
+//    import GameLevelPlanets from '/assets/js/GameEnginev1/GameLevelPlanets.js';
+//    import GameLevelTimmy from '/assets/js/adventureGame/GameLevelTimmy.js';
+//    export const gameLevelClasses = [GameLevelPlanets, GameLevelTimmy];
+//    // or pass it directly to your GameControl as the only level.
+// 3) Ensure images exist and paths resolve via 'path' provided by the engine.
+// 4) You can add more objects to this.classes inside the constructor.
+
+import GameEnvBackground from '/assets/js/GameEnginev1/essentials/GameEnvBackground.js';
+import Player from '/assets/js/GameEnginev1/essentials/Player.js';
+import GameObject from '/assets/js/GameEnginev1/essentials/GameObject.js';
+
+class RemotePlayerVisualizer extends GameObject {
+    constructor(data = null, gameEnv = null) {
+        super(gameEnv);
+        this.remotePlayersRef = data?.remotePlayers || {};
+        this.SCALE_FACTOR = 3.5;
+        this.frameWidth = 569 / 13;   // sprite sheet width / columns
+        this.frameHeight = 36;         // sprite sheet height (1 row)
+        this.spriteImage = null;
+    }
+
+    update() {
+        // Load the sprite image once on first call
+        if (!this.spriteImage) {
+            const img = new Image();
+            img.src = "/images/gamebuilder/sprites/kirby.png";
+            this.spriteImage = img;
+        }
+        this.draw();
+    }
+
+    draw() {
+        // Don't draw until the image is loaded
+        if (!this.spriteImage?.complete) return;
+
+        const ctx = this.gameEnv.ctx;
+
+        const drawWidth = this.frameWidth * this.SCALE_FACTOR;
+        const drawHeight = this.frameHeight * this.SCALE_FACTOR;
+
+        for (const sid in this.remotePlayersRef) {
+            const p = this.remotePlayersRef[sid];
+            console.log("drawing remote player at:", p.x, p.y);
+            ctx.drawImage(
+                this.spriteImage,
+                0, 0,  
+                this.frameWidth, 
+                this.frameHeight,
+                p.x, p.y, 
+                drawWidth,  
+                drawHeight 
+            );
+        }
+    }
+
+    resize() {}
+    destroy() { this.spriteImage = null; }
+}
+
+class NetworkSynchronizer extends GameObject {
+    constructor(data = null, gameEnv = null) {
+        super(gameEnv);
+        this.socket = data?.socket;
+        this.playerInstance = null;
+        this.lastEmit = 0;
+        this.emitDelay = 50;
+    }
+
+    update() {
+        if (!this.playerInstance) {
+            this.playerInstance = this.gameEnv?.gameObjects?.find(
+                obj => obj instanceof Player
+            );
+        }
+
+        if (!this.playerInstance || !this.socket) return;
+
+        const now = Date.now();
+        if (now - this.lastEmit < this.emitDelay) return;
+
+        this.socket.emit("move", {
+            x: this.playerInstance.position?.x ?? this.playerInstance.x,
+            y: this.playerInstance.position?.y ?? this.playerInstance.y
+    });    
+    this.lastEmit = now;
+ 
+    }
+
+    draw() {}
+    resize() {}
+    destroy() {}
+}
+class GameLevelMultiplayer {
+    constructor(gameEnv) {
+        const path = gameEnv.path;
+        const width = gameEnv.innerWidth;
+        const height = gameEnv.innerHeight;
+
+        const socket = io("ws://localhost:8590", { transports: ["websocket"] });
+
+        let myId = null;
+        const remotePlayers = {};
+
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+            myId = socket.id;
+        });
+
+        const bgData = {
+            name: "custom_bg",
+            src: path + "/images/gamebuilder/bg/blackandwhite.jpg",
+            pixels: { height: 720, width: 1280 }
+        };
+
+        const playerData = {
+            id: "playerData",
+            src: path + "/images/gamebuilder/sprites/kirby.png",
+            SCALE_FACTOR: 3.5,
+            STEP_FACTOR: 1000,
+            ANIMATION_RATE: 50,
+            INIT_POSITION: { x: 700, y: 300 },
+            pixels: { height: 36, width: 569 },
+            orientation: { rows: 1, columns: 13 },
+            down: { row: 0, start: 0, columns: 3 },
+            downRight: { row: 0, start: 0, columns: 3, rotate: Math.PI / 16 },
+            downLeft: { row: 0, start: 0, columns: 3, rotate: -Math.PI / 16 },
+            left: { row: 0, start: 0, columns: 3 },
+            right: { row: 0, start: 0, columns: 3 },
+            up: { row: 0, start: 0, columns: 3 },
+            upLeft: { row: 0, start: 0, columns: 3, rotate: Math.PI / 16 },
+            upRight: { row: 0, start: 0, columns: 3, rotate: -Math.PI / 16 },
+            hitbox: { widthPercentage: 0, heightPercentage: 0 },
+            keypress: { up: 38, left: 37, down: 40, right: 39 }
+        };
+
+        socket.on("player_update", (data) => {
+            if (!data?.players) return;
+
+            const players = data.players;
+
+            for (const sid in players) {
+                if (sid === socket.id) continue;
+
+                if (!remotePlayers[sid]) {
+                    remotePlayers[sid] = {
+                        x: players[sid].x,
+                        y: players[sid].y,
+                        color: this.getRandomColor(),
+                    };
+                } else {
+                    remotePlayers[sid].x = players[sid].x;
+                    remotePlayers[sid].y = players[sid].y;
+                }
+            }
+
+            for (const sid in remotePlayers) {
+                if (!players[sid]) {
+                    delete remotePlayers[sid];
+                }
+            }
+        });
+        socket.on("player_left", (data) => {
+            if (remotePlayers[data.sid]) {
+                delete remotePlayers[data.sid];
+            }
+        });
+        socket.on("disconnect", () => {
+            console.log("disconnected from server");
+        });
+
+        this.classes = [
+            { class: GameEnvBackground, data: bgData },
+            { class: Player, data: playerData },
+            { class: NetworkSynchronizer, data: { socket: socket } },
+            { class: RemotePlayerVisualizer, data: { remotePlayers: remotePlayers } }
+        ];
+    }
+    getRandomColor() {
+    const colors = [
+        '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A',
+        '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+}
+}
+
+export default GameLevelMultiplayer;
\ No newline at end of file