mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
423 lines
15 KiB
HTML
423 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PIN Minigame Test</title>
|
|
|
|
<!-- Load fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Courier+New&display=swap" rel="stylesheet">
|
|
|
|
<!-- Load CSS -->
|
|
<link rel="stylesheet" href="css/minigames-framework.css">
|
|
<link rel="stylesheet" href="css/pin.css">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #0f0f23, #1a1a2e);
|
|
color: white;
|
|
font-family: 'Press Start 2P', monospace;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.test-header h1 {
|
|
color: #00ff41;
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.test-description {
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.test-button {
|
|
background: linear-gradient(145deg, #2c3e50, #34495e);
|
|
color: #ecf0f1;
|
|
border: 2px solid #0f3460;
|
|
border-radius: 8px;
|
|
padding: 12px 20px;
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: linear-gradient(145deg, #34495e, #2c3e50);
|
|
border-color: #00ff41;
|
|
box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
|
|
}
|
|
|
|
.test-button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.test-info {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid #0f3460;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-info h3 {
|
|
color: #00ff41;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.test-info p {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.test-info ul {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.test-info li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.pin-examples {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pin-example {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid #0f3460;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pin-example h4 {
|
|
color: #00ff41;
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pin-example .pin-code {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background: #000;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.pin-example .pin-description {
|
|
color: #999;
|
|
font-size: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<div class="test-header">
|
|
<h1>PIN Minigame Test</h1>
|
|
<div class="test-description">
|
|
Test the PIN minigame with various configurations. The minigame features a digital keypad,
|
|
attempt logging, and two types of Mastermind-style feedback: Pin-Cracker item (toggleable)
|
|
and Mastermind Mode (automatic via parameter). Both provide visual feedback with green/amber
|
|
lights showing correct digits and positions.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-controls">
|
|
<button class="test-button" onclick="testBasicPin()">Basic PIN (1234)</button>
|
|
<button class="test-button" onclick="testCustomPin()">Custom PIN (5678)</button>
|
|
<button class="test-button" onclick="testInfoLeakMode()">With Info Leak Mode</button>
|
|
<button class="test-button" onclick="testLongPin()">6-Digit PIN</button>
|
|
<button class="test-button" onclick="testLimitedAttempts()">Limited Attempts</button>
|
|
<button class="test-button" onclick="testNoBackspace()">No Backspace</button>
|
|
<button class="test-button" onclick="testDuplicateDigits()">Duplicate Digits</button>
|
|
<button class="test-button" onclick="testWithPinCracker()">With Pin-Cracker</button>
|
|
<button class="test-button" onclick="testMastermindMode()">Mastermind Mode</button>
|
|
</div>
|
|
|
|
<div class="test-info">
|
|
<h3>Features</h3>
|
|
<ul>
|
|
<li><strong>Digital Display:</strong> Shows current input with visual feedback</li>
|
|
<li><strong>Number Pad:</strong> 0-9 keys with hover effects and animations</li>
|
|
<li><strong>Backspace:</strong> Remove last entered digit (can be disabled)</li>
|
|
<li><strong>Auto-submit:</strong> Automatically submits when PIN length is reached</li>
|
|
<li><strong>Attempt Logging:</strong> Shows all previous attempts with timestamps</li>
|
|
<li><strong>Pin-Cracker Item:</strong> Toggleable visual feedback with green/amber lights</li>
|
|
<li><strong>Mastermind Mode:</strong> Automatic visual feedback enabled via parameter</li>
|
|
<li><strong>Visual Feedback:</strong> Green lights for correct position, amber for correct digit</li>
|
|
<li><strong>Keyboard Support:</strong> Use number keys, backspace, and enter</li>
|
|
<li><strong>Lockout Protection:</strong> Locks after maximum attempts</li>
|
|
<li><strong>Visual Feedback:</strong> Success/error animations and colors</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-info">
|
|
<h3>Pin-Cracker Info Leak Mode</h3>
|
|
<p>When you have the pin-cracker item, you can enable visual feedback for each attempt:</p>
|
|
<ul>
|
|
<li><strong>🟢 Green Light:</strong> Correct digit in correct position</li>
|
|
<li><strong>🟡 Amber Light:</strong> Correct digit in wrong position</li>
|
|
<li><strong>Example 1:</strong> PIN "1234", guess "1356" → 2 green lights, 0 amber lights</li>
|
|
<li><strong>Example 2:</strong> PIN "1123", guess "1111" → 2 green lights, 0 amber lights (duplicates handled correctly)</li>
|
|
<li><strong>Example 3:</strong> PIN "1234", guess "1123" → 1 green light, 1 amber light</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-info">
|
|
<h3>Mastermind Mode</h3>
|
|
<p>Mastermind mode is enabled via parameter and provides automatic visual feedback without needing the pin-cracker item:</p>
|
|
<ul>
|
|
<li><strong>Automatic Feedback:</strong> Visual lights appear automatically for each attempt</li>
|
|
<li><strong>No Toggle Required:</strong> Feedback is always enabled when mastermind mode is active</li>
|
|
<li><strong>Same Visual System:</strong> Uses the same green/amber light system as pin-cracker</li>
|
|
<li><strong>Perfect for Testing:</strong> Ideal for scenarios where you want guaranteed feedback</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="pin-examples">
|
|
<div class="pin-example">
|
|
<h4>Basic Test</h4>
|
|
<div class="pin-code">1234</div>
|
|
<div class="pin-description">Standard 4-digit PIN with 3 attempts</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Custom PIN</h4>
|
|
<div class="pin-code">5678</div>
|
|
<div class="pin-description">Different PIN to test various scenarios</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Long PIN</h4>
|
|
<div class="pin-code">123456</div>
|
|
<div class="pin-description">6-digit PIN for extended testing</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Info Leak</h4>
|
|
<div class="pin-code">9876</div>
|
|
<div class="pin-description">PIN with Mastermind feedback enabled</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Duplicate Digits</h4>
|
|
<div class="pin-code">1123</div>
|
|
<div class="pin-description">Tests proper handling of duplicate digits</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Pin-Cracker</h4>
|
|
<div class="pin-code">9876</div>
|
|
<div class="pin-description">Visual feedback with green/amber lights</div>
|
|
</div>
|
|
|
|
<div class="pin-example">
|
|
<h4>Mastermind Mode</h4>
|
|
<div class="pin-code">2468</div>
|
|
<div class="pin-description">Automatic visual feedback enabled</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load the minigame framework -->
|
|
<script type="module">
|
|
import { MinigameFramework } from './js/minigames/framework/minigame-manager.js';
|
|
import { PinMinigame, startPinMinigame } from './js/minigames/pin/pin-minigame.js';
|
|
|
|
// Initialize the framework
|
|
MinigameFramework.init(null);
|
|
|
|
// Register the PIN minigame
|
|
MinigameFramework.registerScene('pin', PinMinigame);
|
|
|
|
// Make the framework available globally
|
|
window.MinigameFramework = MinigameFramework;
|
|
|
|
// Make functions available globally for testing
|
|
window.startPinMinigame = startPinMinigame;
|
|
|
|
// Test functions
|
|
window.testBasicPin = function() {
|
|
console.log('Testing basic PIN minigame');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('1234', {
|
|
title: 'Basic PIN Test',
|
|
maxAttempts: 3,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testCustomPin = function() {
|
|
console.log('Testing custom PIN minigame');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('5678', {
|
|
title: 'Custom PIN Test',
|
|
maxAttempts: 3,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testInfoLeakMode = function() {
|
|
console.log('Testing PIN minigame with info leak mode');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('9876', {
|
|
title: 'Info Leak Mode Test',
|
|
maxAttempts: 5,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testLongPin = function() {
|
|
console.log('Testing 6-digit PIN minigame');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('123456', {
|
|
title: '6-Digit PIN Test',
|
|
maxAttempts: 4,
|
|
pinLength: 6,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testLimitedAttempts = function() {
|
|
console.log('Testing PIN minigame with limited attempts');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('2468', {
|
|
title: 'Limited Attempts Test',
|
|
maxAttempts: 2,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testNoBackspace = function() {
|
|
console.log('Testing PIN minigame without backspace');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('1357', {
|
|
title: 'No Backspace Test',
|
|
maxAttempts: 3,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: false
|
|
});
|
|
};
|
|
|
|
window.testDuplicateDigits = function() {
|
|
console.log('Testing PIN minigame with duplicate digits');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('1123', {
|
|
title: 'Duplicate Digits Test',
|
|
maxAttempts: 5,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testWithPinCracker = function() {
|
|
console.log('Testing PIN minigame with pin-cracker');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('9876', {
|
|
title: 'Pin-Cracker Test',
|
|
maxAttempts: 5,
|
|
pinLength: 4,
|
|
hasPinCracker: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
window.testMastermindMode = function() {
|
|
console.log('Testing PIN minigame with mastermind mode');
|
|
if (!window.MinigameFramework) {
|
|
console.error('MinigameFramework not available');
|
|
return;
|
|
}
|
|
startPinMinigame('2468', {
|
|
title: 'Mastermind Mode Test',
|
|
maxAttempts: 5,
|
|
pinLength: 4,
|
|
infoLeakMode: true,
|
|
allowBackspace: true
|
|
});
|
|
};
|
|
|
|
console.log('PIN minigame test page loaded');
|
|
|
|
// Ensure framework is ready
|
|
setTimeout(() => {
|
|
console.log('MinigameFramework ready:', window.MinigameFramework);
|
|
}, 100);
|
|
</script>
|
|
</body>
|
|
</html>
|