Tobias/ChooserApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Füge Farbzuweisung für Finger hinzu und verbessere die Verwaltung der verwendeten Farben
All checks were successful
Deploy via FTP / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Tobias Leuschner
2026-02-22 14:55:07 +01:00
parent 7f5d505942
commit 70d4b0b00b
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/style.css
View File

@@ -137,6 +137,16 @@ body::before {
letter-spacing: -0.5px; 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 */ /* Highlight: amber glow */
.finger.highlight { .finger.highlight {
border-color: #f59e0b; border-color: #f59e0b;

19
js/app.js
View File

@@ -1,7 +1,17 @@
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
const stage = document.getElementById('stage'); 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 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 selecting = false;
let selectionDone = false; let selectionDone = false;
let selectionTimer = null; let selectionTimer = null;
@@ -18,8 +28,10 @@ document.addEventListener('DOMContentLoaded', function(){
el.appendChild(label); el.appendChild(label);
el.style.left = t.clientX + 'px'; el.style.left = t.clientX + 'px';
el.style.top = t.clientY + 'px'; el.style.top = t.clientY + 'px';
const colorIdx = pickColor();
el.classList.add(COLOR_CLASSES[colorIdx]);
stage.appendChild(el); 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(); updateLabels();
return id; return id;
} }
@@ -33,7 +45,7 @@ document.addEventListener('DOMContentLoaded', function(){
function removeFingerById(id){ function removeFingerById(id){
const key = String(id); const key = String(id);
const entry = touches.get(key); 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(){ function updateLabels(){
@@ -126,6 +138,7 @@ document.addEventListener('DOMContentLoaded', function(){
const nodes = Array.from(stage.querySelectorAll('.finger')); const nodes = Array.from(stage.querySelectorAll('.finger'));
nodes.forEach(node=>node.remove()); nodes.forEach(node=>node.remove());
touches.clear(); touches.clear();
usedColors.clear();
},160); },160);
} }
} }