From 70d4b0b00b4399538d3c46636444116d515becd9 Mon Sep 17 00:00:00 2001
From: Tobias Leuschner <info@leuschner.dev>
Date: Sun, 22 Feb 2026 14:55:07 +0100
Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20Farbzuweisung=20f=C3=BCr=20Finger?=
 =?UTF-8?q?=20hinzu=20und=20verbessere=20die=20Verwaltung=20der=20verwende?=
 =?UTF-8?q?ten=20Farben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css | 10 ++++++++++
 js/app.js     | 19 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index cd565ed..fb2bba5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -137,6 +137,16 @@ body::before {
   letter-spacing: -0.5px;
 }
 
+/* ── Player colours (assigned in JS by join order) ── */
+.finger.c1 { border-color: rgba(192,132,252,0.7); background: rgba(192,132,252,0.13); }
+.finger.c2 { border-color: rgba(96,165,250,0.7);  background: rgba(96,165,250,0.13);  }
+.finger.c3 { border-color: rgba(251,146,60,0.7);  background: rgba(251,146,60,0.13);  }
+.finger.c4 { border-color: rgba(244,114,182,0.7); background: rgba(244,114,182,0.13); }
+.finger.c5 { border-color: rgba(34,211,238,0.7);  background: rgba(34,211,238,0.13);  }
+.finger.c6 { border-color: rgba(250,204,21,0.7);  background: rgba(250,204,21,0.13);  }
+.finger.c7 { border-color: rgba(248,113,113,0.7); background: rgba(248,113,113,0.13); }
+.finger.c8 { border-color: rgba(163,230,53,0.7);  background: rgba(163,230,53,0.13);  }
+
 /* Highlight: amber glow */
 .finger.highlight {
   border-color: #f59e0b;
diff --git a/js/app.js b/js/app.js
index 13d1f19..cb8939f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,17 @@
 document.addEventListener('DOMContentLoaded', function(){
   const stage = document.getElementById('stage');
-  const touches = new Map(); // id -> {el,x,y}
+  const touches = new Map(); // id -> {el,x,y,colorIdx}
   const MAX_TOUCHES = /iPhone/.test(navigator.userAgent) ? 5 : 20;
+  const COLOR_CLASSES = ['c1','c2','c3','c4','c5','c6','c7','c8'];
+  const usedColors = new Set();
+
+  function pickColor(){
+    for(let i=0; i<COLOR_CLASSES.length; i++){
+      if(!usedColors.has(i)){ usedColors.add(i); return i; }
+    }
+    return 0;
+  }
+  function releaseColor(idx){ usedColors.delete(idx); }
   let selecting = false;
   let selectionDone = false;
   let selectionTimer = null;
@@ -18,8 +28,10 @@ document.addEventListener('DOMContentLoaded', function(){
     el.appendChild(label);
     el.style.left = t.clientX + 'px';
     el.style.top = t.clientY + 'px';
+    const colorIdx = pickColor();
+    el.classList.add(COLOR_CLASSES[colorIdx]);
     stage.appendChild(el);
-    touches.set(id, {el: el, x: t.clientX, y: t.clientY});
+    touches.set(id, {el: el, x: t.clientX, y: t.clientY, colorIdx: colorIdx});
     updateLabels();
     return id;
   }
@@ -33,7 +45,7 @@ document.addEventListener('DOMContentLoaded', function(){
   function removeFingerById(id){
     const key = String(id);
     const entry = touches.get(key);
-    if(entry){ entry.el.remove(); touches.delete(key); updateLabels(); }
+    if(entry){ entry.el.remove(); releaseColor(entry.colorIdx); touches.delete(key); updateLabels(); }
   }
 
   function updateLabels(){
@@ -126,6 +138,7 @@ document.addEventListener('DOMContentLoaded', function(){
         const nodes = Array.from(stage.querySelectorAll('.finger'));
         nodes.forEach(node=>node.remove());
         touches.clear();
+        usedColors.clear();
       },160);
     }
   }