From 25830de5aa7f0d1d9ee5dbe9e19df04541d1ad64 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Tue, 31 Mar 2026 14:26:10 +0200
Subject: [PATCH] feat: integrate snake into arcade platform

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 snake.html | 62 +++++++-----------------------------------------------
 1 file changed, 8 insertions(+), 54 deletions(-)
diff --git a/snake.html b/snake.html
index aef7fdd..9cf8ffb 100644
--- a/snake.html
+++ b/snake.html
@@ -2,64 +2,15 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
   <title>Snake</title>
   <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      background: #1a1a2e;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100vh;
-      font-family: 'Courier New', monospace;
-      color: #e0e0e0;
-    }
-
-    h1 {
-      font-size: 2rem;
-      margin-bottom: 12px;
-      color: #4ecca3;
-      letter-spacing: 4px;
-    }
-
-    #hud {
-      display: flex;
-      gap: 40px;
-      margin-bottom: 12px;
-      font-size: 1rem;
-      color: #a0a0c0;
-    }
-
-    #hud span { color: #4ecca3; font-weight: bold; }
-
-    canvas {
-      border: 2px solid #4ecca3;
-      box-shadow: 0 0 20px rgba(78, 204, 163, 0.3);
-      display: block;
-    }
-
-    #overlay {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-    }
-
     #overlay h2 {
       font-size: 2.5rem;
       color: #ff6b6b;
     }
 
-    #overlay p {
-      font-size: 1rem;
-      color: #a0a0c0;
-    }
-
-    #overlay.hidden { display: none; }
+    .overlay.hidden { display: none; }
 
     button {
       margin-top: 8px;
@@ -84,14 +35,15 @@
   </style>
 </head>
 <body>
+  <a class="menu-link" href="index.html">← Menü</a>
   <h1>SNAKE</h1>
-  <div id="hud">
+  <div class="hud">
     Score: <span id="score">0</span> &nbsp;&nbsp; Highscore: <span id="highscore">0</span>
   </div>
 
   <div style="position:relative;">
     <canvas id="canvas" width="400" height="400"></canvas>
-    <div id="overlay">
+    <div class="overlay">
       <h2 id="overlay-title">SNAKE</h2>
       <p id="overlay-msg">Steuere die Schlange mit den Pfeiltasten oder WASD</p>
       <button id="btn">STARTEN</button>
@@ -100,10 +52,11 @@
 
   <div id="controls">Pfeiltasten / WASD &nbsp;|&nbsp; P = Pause</div>
 
+<script src="scores.js"></script>
 <script>
   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
-  const overlay = document.getElementById('overlay');
+  const overlay = document.querySelector('.overlay');
   const overlayTitle = document.getElementById('overlay-title');
   const overlayMsg = document.getElementById('overlay-msg');
   const btn = document.getElementById('btn');
@@ -238,6 +191,7 @@
   function gameOver() {
     running = false;
     cancelAnimationFrame(animId);
+    setHighscore('snake', score);
     overlayTitle.textContent = 'GAME OVER';
     overlayTitle.style.color = '#ff6b6b';
     overlayMsg.textContent = `Punkte: ${score}`;
