mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 16:41:08 +02:00
9e82e40e16
Rename games/mana-games/ to games/arcade/, update all package names (@mana-games/* → @arcade/*), appIds, display names, docker-compose service, root scripts, and documentation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
138 lines
No EOL
4.7 KiB
HTML
138 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Reaction Test</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #222;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
font-family: Arial;
|
|
text-align: center;
|
|
}
|
|
#screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: background 0s;
|
|
}
|
|
.red { background: #c33; }
|
|
.green { background: #3c3; }
|
|
.blue { background: #247; }
|
|
h1 { font-size: 48px; margin: 20px; }
|
|
p { font-size: 24px; margin: 10px; }
|
|
.best { color: #ffd700; font-size: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="screen" class="blue" onclick="handleClick()">
|
|
<h1 id="title">REACTION TEST</h1>
|
|
<p id="info">Klicke wenn der Bildschirm GRÜN wird!</p>
|
|
<p id="result"></p>
|
|
<p class="best" id="best"></p>
|
|
</div>
|
|
|
|
<script>
|
|
// Game ID für Statistiken
|
|
const GAME_ID = 'reaction-test';
|
|
|
|
let waiting = false;
|
|
let startTime = 0;
|
|
let times = [];
|
|
let timeout;
|
|
|
|
const screen = document.getElementById('screen');
|
|
const info = document.getElementById('info');
|
|
const result = document.getElementById('result');
|
|
const best = document.getElementById('best');
|
|
|
|
function start() {
|
|
screen.className = 'red';
|
|
info.textContent = 'Warte auf GRÜN...';
|
|
result.textContent = '';
|
|
waiting = true;
|
|
|
|
timeout = setTimeout(() => {
|
|
screen.className = 'green';
|
|
info.textContent = 'KLICK!';
|
|
startTime = Date.now();
|
|
}, Math.random() * 4000 + 2000);
|
|
}
|
|
|
|
function handleClick() {
|
|
if (screen.className === 'blue') {
|
|
start();
|
|
} else if (screen.className === 'red' && waiting) {
|
|
clearTimeout(timeout);
|
|
screen.className = 'blue';
|
|
info.textContent = 'Zu früh! Klicke zum Neustart';
|
|
result.textContent = '❌ Fehlstart!';
|
|
waiting = false;
|
|
} else if (screen.className === 'green') {
|
|
const time = Date.now() - startTime;
|
|
times.push(time);
|
|
|
|
screen.className = 'blue';
|
|
info.textContent = 'Klicke für nächsten Versuch';
|
|
result.textContent = `⚡ ${time}ms`;
|
|
|
|
const bestTime = Math.min(...times);
|
|
best.textContent = `Beste Zeit: ${bestTime}ms (${times.length} Versuche)`;
|
|
|
|
// Sende Score Update für Statistiken (niedrigere Zeit = bessere Leistung)
|
|
window.parent.postMessage({
|
|
type: 'GAME_EVENT',
|
|
gameId: GAME_ID,
|
|
event: 'SCORE_UPDATE',
|
|
data: { score: Math.max(0, 1000 - time) }
|
|
}, '*');
|
|
|
|
// Achievement prüfen
|
|
if (time < 250) {
|
|
window.parent.postMessage({
|
|
type: 'GAME_EVENT',
|
|
gameId: GAME_ID,
|
|
event: 'ACHIEVEMENT_UNLOCKED',
|
|
data: {
|
|
achievementId: 'lightning_reflexes',
|
|
name: 'Lightning Reflexes',
|
|
description: 'React in under 250ms',
|
|
icon: '⚡'
|
|
}
|
|
}, '*');
|
|
}
|
|
|
|
if (times.length >= 10 && bestTime < 300) {
|
|
window.parent.postMessage({
|
|
type: 'GAME_EVENT',
|
|
gameId: GAME_ID,
|
|
event: 'ACHIEVEMENT_UNLOCKED',
|
|
data: {
|
|
achievementId: 'consistent_speed',
|
|
name: 'Consistent Speed',
|
|
description: 'Best time under 300ms after 10 attempts',
|
|
icon: '🎯'
|
|
}
|
|
}, '*');
|
|
}
|
|
|
|
waiting = false;
|
|
}
|
|
}
|
|
|
|
// Sende Game Loaded Event für Statistiken
|
|
window.parent.postMessage({
|
|
type: 'GAME_LOADED',
|
|
gameId: GAME_ID
|
|
}, '*');
|
|
</script>
|
|
</body>
|
|
</html> |