mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
5c28743144
- Changed CSS file paths in index.html and show.html.erb to reflect new directory structure under public/break_escape. - Added a new tutorial.css file with styles tailored for the tutorial system, ensuring a cohesive pixel-art aesthetic. - Enhanced the tutorial manager to track player interactions, including clicks to move and inventory item usage, improving the tutorial experience for new players. - Updated tutorial steps to dynamically include objectives based on the current scenario. Files modified: - index.html: Updated CSS links. - show.html.erb: Updated CSS links. - tutorial.css: New styles for the tutorial system. - player.js: Added notifications for player actions. - tutorial-manager.js: Enhanced logic for tracking tutorial progress and objectives. - interactions.js: Added notifications for inventory interactions.
319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tutorial UI Test - BreakEscape</title>
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tutorial CSS -->
|
|
<link rel="stylesheet" href="public/break_escape/css/tutorial.css">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #1a1a2e;
|
|
font-family: 'VT323', monospace;
|
|
color: #fff;
|
|
/* Add some animated elements to simulate the game */
|
|
background-image:
|
|
linear-gradient(45deg, transparent 40%, rgba(0, 255, 136, 0.05) 50%, transparent 60%),
|
|
linear-gradient(-45deg, transparent 40%, rgba(0, 255, 136, 0.05) 50%, transparent 60%);
|
|
background-size: 200px 200px;
|
|
animation: gameBackground 20s linear infinite;
|
|
}
|
|
|
|
@keyframes gameBackground {
|
|
0% { background-position: 0 0, 100px 100px; }
|
|
100% { background-position: 200px 200px, 300px 300px; }
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
color: #00ff88;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
font-size: 24px;
|
|
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
|
|
}
|
|
|
|
.test-section {
|
|
margin-bottom: 40px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 20px;
|
|
border: 2px solid #444;
|
|
}
|
|
|
|
.test-section h2 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
color: #00ff88;
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 12px;
|
|
padding: 12px 24px;
|
|
margin: 10px;
|
|
cursor: pointer;
|
|
border: 2px solid #00ff88;
|
|
background: #00ff88;
|
|
color: #000;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: #00cc6a;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.description {
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Simulate game elements visible behind tutorial */
|
|
.game-simulation {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 14px;
|
|
color: rgba(0, 255, 136, 0.3);
|
|
text-align: center;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Mock game elements */
|
|
.mock-inventory {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 80px;
|
|
width: 100%;
|
|
background: rgba(149, 157, 216, 0.8);
|
|
border-top: 2px solid #444;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mock-slot {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Simulated game background -->
|
|
<div class="game-simulation">
|
|
<div>Game World</div>
|
|
<div style="margin-top: 20px;">Visible Behind Tutorial</div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h1>Tutorial UI Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>1. Tutorial Prompt Modal</h2>
|
|
<p class="description">
|
|
Initial prompt with NO dark overlay - game remains visible behind it.
|
|
</p>
|
|
<button onclick="showPromptModal()">Show Prompt Modal</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>2. Tutorial Panel (Active Step)</h2>
|
|
<p class="description">
|
|
Panel with NO dark overlay - game visible during tutorial. Shows above inventory bar.
|
|
Tutorial is z-index 1400, so dialogue minigames (1500+) appear above it.
|
|
</p>
|
|
<button onclick="showTutorialPanel(false, 'movement')">Show Movement Step</button>
|
|
<button onclick="showTutorialPanel(false, 'inventory')">Show Inventory Step</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>3. Tutorial Panel (Completed Step)</h2>
|
|
<p class="description">
|
|
When a step is completed, the objective box turns green with a different animation.
|
|
</p>
|
|
<button onclick="showTutorialPanel(true)">Show Completed Tutorial Step</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>4. Responsive Design</h2>
|
|
<p class="description">
|
|
Try resizing your browser window to see mobile-responsive styling kick in at 768px width.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>5. Accessibility Features</h2>
|
|
<p class="description">
|
|
• Keyboard navigation with visible focus states<br>
|
|
• Respects prefers-reduced-motion settings<br>
|
|
• High contrast mode support<br>
|
|
• Proper ARIA semantics
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mock inventory bar -->
|
|
<div class="mock-inventory">
|
|
<div class="mock-slot"></div>
|
|
<div class="mock-slot"></div>
|
|
<div class="mock-slot"></div>
|
|
<div class="mock-slot"></div>
|
|
<div class="mock-slot"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function showPromptModal() {
|
|
// Remove any existing modal
|
|
const existing = document.querySelector('.tutorial-prompt-overlay');
|
|
if (existing) existing.remove();
|
|
|
|
// Create modal overlay
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'tutorial-prompt-overlay';
|
|
overlay.innerHTML = `
|
|
<div class="tutorial-prompt-modal">
|
|
<h2>Welcome to BreakEscape!</h2>
|
|
<p>Would you like to go through a quick tutorial to learn the basic controls?</p>
|
|
<div class="tutorial-prompt-buttons">
|
|
<button id="tutorial-yes" class="tutorial-btn tutorial-btn-primary">Yes, show me</button>
|
|
<button id="tutorial-no" class="tutorial-btn tutorial-btn-secondary">No, I'll figure it out</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
// Add click handlers
|
|
document.getElementById('tutorial-yes').addEventListener('click', () => {
|
|
document.body.removeChild(overlay);
|
|
showTutorialPanel(false);
|
|
});
|
|
|
|
document.getElementById('tutorial-no').addEventListener('click', () => {
|
|
document.body.removeChild(overlay);
|
|
});
|
|
|
|
// Click outside to close
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
document.body.removeChild(overlay);
|
|
}
|
|
});
|
|
}
|
|
|
|
function showTutorialPanel(completed = false, stepType = 'movement') {
|
|
// Remove any existing panel
|
|
const existing = document.querySelector('.tutorial-overlay');
|
|
if (existing) existing.remove();
|
|
|
|
// Define step content
|
|
const steps = {
|
|
movement: {
|
|
progress: 'Step 1 of 6',
|
|
title: 'Movement',
|
|
instruction: 'Use W, A, S, D keys to move your character around.',
|
|
objective: 'Try moving in different directions'
|
|
},
|
|
inventory: {
|
|
progress: 'Step 5 of 6',
|
|
title: 'Inventory',
|
|
instruction: 'Your inventory is at the bottom of the screen. Click on items like the Notepad to use them.',
|
|
objective: 'Click on the Notepad in your inventory to open it'
|
|
}
|
|
};
|
|
|
|
const step = steps[stepType] || steps.movement;
|
|
|
|
// Create tutorial overlay
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'tutorial-overlay';
|
|
overlay.innerHTML = `
|
|
<div class="tutorial-panel">
|
|
<div class="tutorial-header">
|
|
<span class="tutorial-progress">${step.progress}</span>
|
|
<button class="tutorial-skip" title="Skip Tutorial">Skip Tutorial</button>
|
|
</div>
|
|
<h3 class="tutorial-title">${step.title}</h3>
|
|
<p class="tutorial-instruction">${step.instruction}</p>
|
|
<div class="tutorial-objective ${completed ? 'completed' : ''}">
|
|
<strong>Objective:</strong>
|
|
<span class="tutorial-objective-text">${step.objective}</span>
|
|
</div>
|
|
<div class="tutorial-actions">
|
|
<button class="tutorial-next" style="display: ${completed ? 'inline-block' : 'none'};">Continue →</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
// Add click handler for skip button
|
|
overlay.querySelector('.tutorial-skip').addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to skip the tutorial?')) {
|
|
document.body.removeChild(overlay);
|
|
}
|
|
});
|
|
|
|
// Add click handler for next button
|
|
overlay.querySelector('.tutorial-next').addEventListener('click', () => {
|
|
document.body.removeChild(overlay);
|
|
});
|
|
|
|
// If not completed, simulate completion after 3 seconds
|
|
// Player must click Continue to proceed (no auto-advance)
|
|
if (!completed) {
|
|
setTimeout(() => {
|
|
const objectiveElement = overlay.querySelector('.tutorial-objective');
|
|
const nextButton = overlay.querySelector('.tutorial-next');
|
|
|
|
if (objectiveElement && nextButton) {
|
|
objectiveElement.classList.add('completed');
|
|
nextButton.style.display = 'inline-block';
|
|
// Note: Button appears but doesn't auto-advance
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// Keyboard shortcuts for testing
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === '1') showPromptModal();
|
|
if (e.key === '2') showTutorialPanel(false, 'movement');
|
|
if (e.key === '3') showTutorialPanel(true, 'movement');
|
|
if (e.key === '4') showTutorialPanel(false, 'inventory');
|
|
if (e.key === '5') showTutorialPanel(true, 'inventory');
|
|
});
|
|
|
|
console.log('Tutorial UI Test Ready!');
|
|
console.log('Press 1 to show prompt modal');
|
|
console.log('Press 2 to show movement step (active)');
|
|
console.log('Press 3 to show movement step (completed)');
|
|
console.log('Press 4 to show inventory step (active)');
|
|
console.log('Press 5 to show inventory step (completed)');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|