kobold-ai/bootle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile First Overhaul: Touch gestures, dual tap/drag, instant responsiveness and ergonomic controls across all mini games

Browse Source
This commit is contained in:
Maxi
2026-09-22 19:57:56 +02:00
parent 2ce944d1cd
commit 5551c4e54f
13 changed files with 443 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/duel.js
+122 -72
View File
@@ -1,4 +1,4 @@
// Wand Spell Tracing & Dueling Mini-Game (Das Zauberspruch-Duell)
// Wand Spell Tracing & Dueling Mini-Game (Das Zauberspruch-Duell - Mobile First)
(function() {
const canvas = document.getElementById('spellCanvas');
if (!canvas) return;
@@ -13,11 +13,13 @@
const modalText = document.getElementById('modalText');
const modalBtn = document.getElementById('modalBtn');
let width = 700, height = 440;
let width = 700, height = 400;
function resize() {
const rect = canvas.getBoundingClientRect();
width = Math.round(rect.width || canvas.parentElement.clientWidth || 700);
height = Math.round(Math.min(480, Math.max(280, width * 0.62)));
// Slightly taller on mobile so stars are large and easy to tap
const isMobile = width < 500;
height = Math.round(isMobile ? Math.min(360, Math.max(300, width * 0.85)) : Math.min(440, Math.max(320, width * 0.58)));
canvas.width = width;
canvas.height = height;
canvas.style.height = height + 'px';
@@ -30,43 +32,42 @@
id: 'flipendo',
name: 'Flipendo ⚡',
incantation: '"Flipendo!" (Ruck-Schockzauber)',
desc: 'Verbinde die 4 Runensterne im Zickzack-Muster, um den Schockzauber zu entfesseln!',
desc: 'Tippe oder ziehe die 4 Sterne von 1 bis 4 im Zickzack-Muster!',
color: '#00f2fe',
beamColor: '#4facfe',
// Relative coordinates (0 to 1) for responsive scaling
points: [
{ x: 0.22, y: 0.28 },
{ x: 0.18, y: 0.28 },
{ x: 0.52, y: 0.28 },
{ x: 0.25, y: 0.72 },
{ x: 0.55, y: 0.72 }
{ x: 0.20, y: 0.72 },
{ x: 0.54, y: 0.72 }
]
},
{
id: 'incendio',
name: 'Incendio 🔥',
incantation: '"Incendio!" (Feuer-Zauber)',
desc: 'Zeichne das lodernde Flammendreieck, um die Zielattrappe in Brand zu setzen!',
desc: 'Tippe oder ziehe die Sterne im Dreieck (1 ➔ 2 ➔ 3 ➔ 4), um Feuer zu entfachen!',
color: '#ff4500',
beamColor: '#ff8c00',
points: [
{ x: 0.38, y: 0.22 },
{ x: 0.55, y: 0.74 },
{ x: 0.22, y: 0.74 },
{ x: 0.38, y: 0.22 }
{ x: 0.36, y: 0.22 },
{ x: 0.54, y: 0.74 },
{ x: 0.18, y: 0.74 },
{ x: 0.36, y: 0.22 }
]
},
{
id: 'alohomora',
name: 'Alohomora 🗝️',
incantation: '"Alohomora!" (Entriegelungszauber)',
desc: 'Zeichne die magische Schlüsselloch-Kurve, um das verzauberte Siegel zu sprengen!',
desc: 'Verbinde die Sterne von 1 bis 4 in der Schlüsselloch-Kurve!',
color: '#ffd700',
beamColor: '#fff275',
points: [
{ x: 0.38, y: 0.25 },
{ x: 0.48, y: 0.38 },
{ x: 0.42, y: 0.52 },
{ x: 0.42, y: 0.78 }
{ x: 0.32, y: 0.22 },
{ x: 0.48, y: 0.36 },
{ x: 0.34, y: 0.52 },
{ x: 0.34, y: 0.80 }
]
}
];
@@ -81,6 +82,7 @@
let dummyShake = 0;
let spellCastAnim = 0;
let gameWon = false;
let resetTimer = null;
function setupSpellNodes() {
const spell = SPELLS[currentSpellIdx];
@@ -88,12 +90,13 @@
spellNodes = spell.points.map((pt, idx) => ({
x: Math.round(pt.x * width),
y: Math.round(pt.y * height),
radius: 20,
radius: width < 500 ? 24 : 20,
hit: idx < nextNodeIdx
}));
}
window.addEventListener('resize', resize);
window.addEventListener('orientationchange', () => setTimeout(resize, 200));
resize();
function updateSpellUI() {
@@ -107,7 +110,6 @@
}
updateSpellUI();
// Touch & Pointer Coordinates
function getCanvasCoords(clientX, clientY) {
const rect = canvas.getBoundingClientRect();
return {
@@ -130,10 +132,46 @@
}
}
function checkNodeHit(x, y) {
if (nextNodeIdx >= spellNodes.length) return;
const targetNode = spellNodes[nextNodeIdx];
const dist = Math.hypot(x - targetNode.x, y - targetNode.y);
// Generous, thumb-friendly hit radius: 52px on mobile, 44px desktop
const hitRadius = width < 500 ? 52 : 44;
if (dist < hitRadius) {
targetNode.hit = true;
nextNodeIdx++;
if (window.navigator && window.navigator.vibrate) {
window.navigator.vibrate(30);
}
if (window.soundFX) window.soundFX.playKeyChime();
addWandSpark(targetNode.x, targetNode.y, '#ffd700');
// Clear any pending idle reset
clearTimeout(resetTimer);
// Connect path to the node exactly
userPath.push({ x: targetNode.x, y: targetNode.y });
// All nodes connected for this spell!
if (nextNodeIdx >= spellNodes.length) {
castSpellSuccess();
}
}
}
function handleInputStart(x, y) {
if (gameWon) return;
isDrawing = true;
userPath = [{ x, y }];
// If starting fresh or continuing
if (nextNodeIdx === 0) {
userPath = [{ x, y }];
} else {
userPath.push({ x, y });
}
checkNodeHit(x, y);
}
@@ -146,34 +184,23 @@
function handleInputEnd() {
isDrawing = false;
// If not all nodes hit, reset progress for this spell
if (nextNodeIdx < spellNodes.length) {
nextNodeIdx = 0;
userPath = [];
setupSpellNodes();
// MOBILE-FIRST IMPROVEMENT:
// DO NOT wipe nextNodeIdx on finger release!
// This allows players to either swipe continuously OR tap stars 1 -> 2 -> 3 -> 4!
// Only set an idle reset timeout if they abandon the spell for 10 seconds.
clearTimeout(resetTimer);
if (nextNodeIdx > 0 && nextNodeIdx < spellNodes.length) {
resetTimer = setTimeout(() => {
if (nextNodeIdx < spellNodes.length && !gameWon) {
nextNodeIdx = 0;
userPath = [];
setupSpellNodes();
}
}, 10000);
}
}
function checkNodeHit(x, y) {
if (nextNodeIdx >= spellNodes.length) return;
const targetNode = spellNodes[nextNodeIdx];
const dist = Math.hypot(x - targetNode.x, y - targetNode.y);
// Tolerant hit radius for easy finger play: 36px
if (dist < 36) {
targetNode.hit = true;
nextNodeIdx++;
if (window.soundFX) window.soundFX.playKeyChime();
addWandSpark(targetNode.x, targetNode.y, '#ffd700');
// All nodes connected for this spell!
if (nextNodeIdx >= spellNodes.length) {
castSpellSuccess();
}
}
}
// Touch events with touch-action none
// Touch events with passive false and touch-action none
canvas.addEventListener('touchstart', e => {
e.preventDefault();
if (e.touches.length > 0) {
@@ -195,7 +222,12 @@
handleInputEnd();
}, { passive: false });
// Pointer events for desktop
canvas.addEventListener('touchcancel', e => {
e.preventDefault();
handleInputEnd();
}, { passive: false });
// Pointer events for desktop mouse
canvas.addEventListener('pointerdown', e => {
if (e.pointerType === 'mouse') {
const p = getCanvasCoords(e.clientX, e.clientY);
@@ -217,11 +249,14 @@
function castSpellSuccess() {
const spell = SPELLS[currentSpellIdx];
spellCastAnim = 1.0;
dummyShake = 18;
dummyShake = 22;
if (window.soundFX) window.soundFX.playMagicSuccess();
if (window.navigator && window.navigator.vibrate) {
window.navigator.vibrate([40, 60, 80]);
}
// Explosion on target dummy
const dummyX = width * 0.78;
const dummyX = width * 0.82;
const dummyY = height * 0.5;
for (let i = 0; i < 40; i++) {
const angle = Math.random() * Math.PI * 2;
@@ -267,12 +302,11 @@
modalText.innerHTML = `
Mit meisterhafter Zauberstabführung hast du alle 3 Zaubersprüche entfesselt und die verzauberte Rüstung bezwungen!<br><br>
<strong>Gelehrte Sprüche:</strong> Flipendo ⚡, Incendio 🔥 & Alohomora 🗝️<br><br>
Professor Flitwick applaudiert begeistert. Das uralte Schlosstor schwingt auf...
Dahinter flackern die unheimlichen Flammen von <strong>Snapes Flammenkammer</strong>!<br><br>
Die alte Rüstung verneigt sich ehrfürchtig. Das Tor öffnet sich und gibt den Weg zur dampfenden <strong>Zaubertrank-Brauküche</strong> frei!<br><br>
🎒 <em>Das goldene Duellanten-Abzeichen wurde deinem Zauberbeutel hinzugefügt!</em>
`;
modalBtn.innerText = "Weiter zu Snapes Flaschenrätsel 🧪";
modalBtn.onclick = () => { window.location.href = '/bottles'; };
modalBtn.innerText = "Weiter zur Zaubertrank-Brauküche ⚗️ ➔";
modalBtn.onclick = () => { window.location.href = '/brew'; };
modalBackdrop.classList.add('show');
}
@@ -302,12 +336,12 @@
if (spellCastAnim > 0) {
ctx.save();
ctx.strokeStyle = spell.beamColor;
ctx.lineWidth = 14 * spellCastAnim;
ctx.lineWidth = 16 * spellCastAnim;
ctx.shadowColor = spell.color;
ctx.shadowBlur = 30;
ctx.beginPath();
ctx.moveTo(width * 0.45, height * 0.5);
ctx.lineTo(width * 0.78, height * 0.5);
ctx.lineTo(width * 0.82, height * 0.5);
ctx.stroke();
ctx.restore();
spellCastAnim -= 0.05;
@@ -315,27 +349,27 @@
// Draw Enchanted Target Dummy (Right side)
ctx.save();
const dummyBaseX = width * 0.78 + (dummyShake > 0 ? (Math.random() - 0.5) * dummyShake : 0);
const dummyBaseX = width * 0.82 + (dummyShake > 0 ? (Math.random() - 0.5) * dummyShake : 0);
const dummyBaseY = height * 0.5;
if (dummyShake > 0) dummyShake *= 0.85;
// Dummy wooden post & shield
// Dummy wooden post
ctx.fillStyle = '#4a3319';
ctx.fillRect(dummyBaseX - 8, dummyBaseY - 60, 16, 120);
ctx.fillRect(dummyBaseX - 6, dummyBaseY - 50, 12, 100);
// Armor Breastplate
ctx.fillStyle = '#6c757d';
ctx.strokeStyle = '#e5b948';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(dummyBaseX, dummyBaseY - 10, 32, 0, Math.PI * 2);
ctx.arc(dummyBaseX, dummyBaseY - 10, 28, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
// Armor Helmet
ctx.fillStyle = '#495057';
ctx.beginPath();
ctx.arc(dummyBaseX, dummyBaseY - 50, 20, 0, Math.PI * 2);
ctx.arc(dummyBaseX, dummyBaseY - 45, 18, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
@@ -345,15 +379,15 @@
ctx.shadowBlur = 15;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(dummyBaseX, dummyBaseY - 10, 42 + Math.sin(Date.now() * 0.008) * 4, 0, Math.PI * 2);
ctx.arc(dummyBaseX, dummyBaseY - 10, 38 + Math.sin(Date.now() * 0.008) * 4, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
// Draw Spell Tracing Guide Lines (Left / Center side)
// Draw Guide Lines between all nodes
if (spellNodes.length > 1 && !gameWon) {
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
ctx.setLineDash([8, 8]);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
ctx.setLineDash([6, 6]);
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(spellNodes[0].x, spellNodes[0].y);
@@ -364,7 +398,23 @@
ctx.restore();
}
// Draw Player's Drawn Line
// Draw Completed Connected Lines between hit nodes
if (nextNodeIdx > 0 && !gameWon) {
ctx.save();
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 5;
ctx.shadowColor = '#2ecc71';
ctx.shadowBlur = 15;
ctx.beginPath();
ctx.moveTo(spellNodes[0].x, spellNodes[0].y);
for (let i = 1; i < nextNodeIdx; i++) {
ctx.lineTo(spellNodes[i].x, spellNodes[i].y);
}
ctx.stroke();
ctx.restore();
}
// Draw Active Player Finger Path
if (userPath.length > 1) {
ctx.save();
ctx.strokeStyle = spell.color;
@@ -382,21 +432,21 @@
ctx.restore();
}
// Draw Spell Nodes (Rune Stars to connect)
// Draw Spell Nodes (Stars with large numbers)
if (!gameWon) {
spellNodes.forEach((node, idx) => {
ctx.save();
const isNext = (idx === nextNodeIdx);
const isHit = node.hit;
ctx.shadowColor = isHit ? '#2ecc71' : (isNext ? spell.color : '#888');
ctx.shadowBlur = isNext ? 20 : 8;
ctx.shadowColor = isHit ? '#2ecc71' : (isNext ? spell.color : '#666');
ctx.shadowBlur = isNext ? 22 : 8;
ctx.fillStyle = isHit ? '#2ecc71' : (isNext ? '#ffffff' : '#332a42');
ctx.strokeStyle = isNext ? spell.color : '#e5b948';
ctx.fillStyle = isHit ? '#2ecc71' : (isNext ? '#ffffff' : '#221a30');
ctx.strokeStyle = isHit ? '#2ecc71' : (isNext ? spell.color : '#8c6e3b');
ctx.lineWidth = isNext ? 4 : 2;
const r = node.radius + (isNext ? Math.sin(Date.now() * 0.01) * 3 : 0);
const r = node.radius + (isNext ? Math.sin(Date.now() * 0.012) * 3 : 0);
ctx.beginPath();
ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
ctx.fill();
@@ -404,7 +454,7 @@
// Number label
ctx.fillStyle = isHit ? '#000' : (isNext ? '#000' : '#e5b948');
ctx.font = 'bold 14px sans-serif';
ctx.font = 'bold 16px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(idx + 1, node.x, node.y);