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

Füge Übergangseffekte für das Overlay hinzu und aktualisiere die Sichtbarkeit bei Berührungen
All checks were successful
Deploy via FTP / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Tobias Leuschner
2026-02-22 15:08:32 +01:00
parent 814002a11e
commit ada86e77f4
2 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/style.css
View File

@@ -76,6 +76,12 @@ body::before {
width: max-content; width: max-content;
max-width: calc(100vw - 48px); max-width: calc(100vw - 48px);
z-index: 10; z-index: 10;
transition: opacity 220ms ease, transform 220ms ease;
}
#overlay.hidden {
opacity: 0;
transform: translateX(-50%) translateY(-6px);
} }
#overlay h1 { #overlay h1 {

4
js/app.js
View File

@@ -1,5 +1,6 @@
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
const stage = document.getElementById('stage'); const stage = document.getElementById('stage');
const overlay = document.getElementById('overlay');
const touches = new Map(); // id -> {el,x,y,colorIdx} 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 COLOR_CLASSES = ['c1','c2','c3','c4','c5','c6','c7','c8'];
@@ -139,6 +140,7 @@ document.addEventListener('DOMContentLoaded', function(){
nodes.forEach(node=>node.remove()); nodes.forEach(node=>node.remove());
touches.clear(); touches.clear();
usedColors.clear(); usedColors.clear();
overlay.classList.remove('hidden');
},160); },160);
} }
} }
@@ -150,6 +152,7 @@ document.addEventListener('DOMContentLoaded', function(){
const prevSize = touches.size; const prevSize = touches.size;
changed.forEach(t=>{ if(touches.size < MAX_TOUCHES) createFinger(t); }); changed.forEach(t=>{ if(touches.size < MAX_TOUCHES) createFinger(t); });
if(touches.size > prevSize){ if(touches.size > prevSize){
overlay.classList.add('hidden');
cancelSelection(); cancelSelection();
selectionTimer = setTimeout(startSelectionIfNeeded, 700); selectionTimer = setTimeout(startSelectionIfNeeded, 700);
} }
@@ -184,6 +187,7 @@ document.addEventListener('DOMContentLoaded', function(){
const mouseId = 'mouse'; const mouseId = 'mouse';
stage.addEventListener('mousedown', function(e){ stage.addEventListener('mousedown', function(e){
mouseDown = true; mouseDown = true;
overlay.classList.add('hidden');
createFinger({identifier:mouseId, clientX:e.clientX, clientY:e.clientY}); createFinger({identifier:mouseId, clientX:e.clientX, clientY:e.clientY});
cancelSelection(); cancelSelection();
startSelectionIfNeeded(); startSelectionIfNeeded();