mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00

Files

Z. Cliffe Schreuders 5c28743144 Update CSS file paths and enhance tutorial system

- 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.

2026-01-19 09:54:15 +00:00

9.4 KiB

Raw Permalink Blame History

Tutorial Style Comparison - Before & After

Quick Reference Guide

Property	Before	After	Reason
Overlay Background	`rgba(0, 0, 0, 0.85)`	`transparent`	Keep game visible
Overlay Pointer Events	Normal	`pointer-events: none`	Allow clicks through
Overlay Z-Index	`10000`	`1400`	Below minigames (1500+)
Modal Background	`linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)`	`rgba(0, 0, 0, 0.95)`	Match game's solid dark backgrounds
Modal Pointer Events	Normal	`pointer-events: all`	Re-enable for modal
Border Radius	`12px`	`0` (removed)	Pixel-art aesthetic
Box Shadow	Basic shadow with inner glow	Enhanced: `0 0 30px rgba(0, 255, 136, 0.4)`	Stronger accent color glow
Inner Glow	Inline style	`::before` pseudo-element	Better separation of concerns
Title Font Size	`20px`	`20px` (kept)	Good size maintained
Title Letter Spacing	None	`1px`	Better readability
Body Font Size	`20px`	`22px`	Improved readability
Body Bottom Margin	`25px`	`30px`	Better spacing

Tutorial Panel

Property	Before	After	Reason
Overlay Background	`rgba(0, 0, 0, 0.4)`	`transparent`	Keep game visible
Overlay Z-Index	`9999`	`1400`	Below minigames (1500+)
Panel Background	`linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)`	`rgba(0, 0, 0, 0.95)`	Consistency with other panels
Border Radius	`12px`	`0` (removed)	Pixel-art aesthetic
Bottom Position	`20px`	`100px`	More clearance above inventory
Max Height	None	`calc(100vh - 120px)`	Prevent going off screen
Overflow	Hidden	`auto` with scrollbar	Handle tall content
Box Shadow	Basic shadow	Enhanced double shadow	Better depth
Inner Glow	Inline style	`::before` pseudo-element	Better implementation

Buttons (Primary)

Property	Before	After	Reason
Border Radius	`6px`	`0` (removed)	Sharp corners
Box Shadow	Single shadow on hover	Layered 3D effect	Better depth perception
Hover Transform	`translateY(-2px)`	`translateY(-2px)` (kept)	Good interaction
Active State	None	`translateY(0px)` with adjusted shadow	Button press feedback
Letter Spacing	None	`1px`	Better readability

Buttons (Secondary)

Property	Before	After	Reason
Background	`transparent`	`rgba(0, 0, 0, 0.5)`	More visible
Color	`#888`	`#aaa`	Better contrast
Hover Color	`#aaa`	`#fff`	Stronger feedback
Box Shadow	None	`0 2px 0 #222`	Depth effect

Progress Indicator

Property	Before	After	Reason
Font Size	`18px`	`20px`	Better visibility
Letter Spacing	`1px`	`2px`	More emphasis
Text Shadow	None	`0 0 8px rgba(0, 255, 136, 0.5)`	Accent glow

Skip Button

Property	Before	After	Reason
Border	`1px solid #444`	`2px solid #444`	Consistent with game
Border Radius	`4px`	`0` (removed)	Pixel-art aesthetic
Font Size	`16px`	`18px`	Better readability
Letter Spacing	None	`1px`	Consistency
Text Transform	None	`uppercase`	Better emphasis
Hover Background	None	`rgba(255, 107, 107, 0.1)`	Better feedback
Hover Box Shadow	None	`0 0 10px rgba(255, 107, 107, 0.3)`	Red glow warning

Tutorial Title

Property	Before	After	Reason
Font Size	`16px`	`18px`	Better hierarchy
Margin Bottom	`12px`	`15px`	Better spacing
Letter Spacing	None	`1px`	Consistency

Tutorial Instruction

Property	Before	After	Reason
Font Size	`20px`	`22px`	Better readability
Line Height	`1.5`	`1.5` (kept)	Good value

Objective Box

Property	Before	After	Reason
Border Left	`3px solid #00ff88`	`4px solid #00ff88`	More prominent
Border Radius	`4px`	`0` (removed)	Pixel-art aesthetic
Padding	`10px 15px`	`12px 16px`	Better spacing
Animation	None	`objective-pulse` (2s infinite)	Draw attention
Completed State	None	`.completed` class with green	Visual feedback

Objective Label (strong)

Property	Before	After	Reason
Font Size	`12px`	`13px`	Slightly larger
Margin Bottom	`5px`	`8px`	Better spacing
Text Transform	None	`uppercase`	Emphasis
Letter Spacing	None	`1px`	Consistency

Objective Text

Property	Before	After	Reason
Font Size	`18px`	`20px`	Better readability
Line Height	None	`1.4`	Better multi-line

Tutorial Actions

Property	Before	After	Reason
Border Top	None	`2px solid #444`	Visual separation
Padding Top	None	`15px`	Better spacing

Continue Button

Property	Before	After	Reason
Border Radius	`6px`	`0` (removed)	Pixel-art aesthetic
Box Shadow	Single on hover	Layered 3D effect	Better depth
Letter Spacing	None	`1px`	Consistency
Text Transform	None	`uppercase`	Emphasis

New Features Added

1. Completion State

.tutorial-objective.completed {
    border-left-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    animation: none;
}

Visual feedback when objectives are completed.

2. Objective Pulse Animation

@keyframes objective-pulse {
    0%, 100% {
        border-left-color: #00ff88;
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
    }
    50% {
        border-left-color: #00cc6a;
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
    }
}

Draws attention to current objective.

3. Focus States

.tutorial-btn:focus,
.tutorial-next:focus,
.tutorial-skip:focus {
    outline: 3px solid #00ff88;
    outline-offset: 3px;
}

Accessibility for keyboard navigation.

4. Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
    /* All animations disabled */
}

Respects user accessibility preferences.

5. High Contrast Mode

@media (prefers-contrast: high) {
    /* Enhanced borders and shadows */
}

Better visibility for users with visual needs.

Color Palette Used

Color	Hex	Usage
Primary Accent	`#00ff88`	Borders, titles, primary buttons
Primary Accent Dark	`#00cc6a`	Button hover/active states
Primary Accent Darker	`#00aa55`	Deep shadow effects
Success Green	`#4ade80`	Completion indicators
Warning Red	`#ff6b6b`	Skip button hover
Text Primary	`#fff`	Main text
Text Secondary	`#e0e0e0`	Body text
Text Tertiary	`#aaa`	Secondary buttons
Border Standard	`#444`	Dividers, inactive borders
Border Light	`#666`	Hover states
Background Dark	`rgba(0, 0, 0, 0.95)`	Panel backgrounds
Background Overlay	`rgba(0, 0, 0, 0.85)`	Full-screen overlays

Typography Scale

Element	Font	Size (Desktop)	Size (Mobile)
Modal Title	Press Start 2P	20px	16px
Panel Title	Press Start 2P	18px	14px
Button Text	Press Start 2P	12px	10px
Objective Label	Press Start 2P	13px	11px
Progress Text	VT323	20px	18px
Body Text	VT323	22px	20px
Instruction Text	VT323	22px	20px
Objective Text	VT323	20px	18px
Skip Button	VT323	18px	16px

Spacing System

Property	Desktop	Mobile
Modal Padding	30px	20px
Panel Padding	20px 25px	15px 18px
Button Padding (Primary)	12px 24px	10px 16px
Objective Padding	12px 16px	10px 12px
Section Gap	15px	12px
Button Gap	15px	10px

Animation Timing

Animation	Duration	Easing	Purpose
fadeIn	0.3s	ease-in	Overlay appearance
slideDown	0.4s	ease-out	Modal entrance
slideUp	0.4s	ease-out	Panel entrance
objective-pulse	2s	ease-in-out (infinite)	Draw attention
hover transitions	0.2s	ease	Button interactions

Summary of Changes

✅ Removed all border-radius for pixel-art aesthetic
✅ Replaced gradients with solid dark backgrounds
✅ Removed dark overlay - game stays fully visible
✅ Proper z-index layering - tutorial below minigames (1400 vs 1500)
✅ Pointer events management - clicks pass through overlay
✅ Screen positioning - max-height prevents going off top of screen
✅ Smart content handling - scrollable if content is too tall
✅ Conditional steps - objectives step skipped if scenario has none
✅ Added 3D depth to buttons with layered shadows
✅ Increased font sizes for better readability
✅ Added letter-spacing for consistency
✅ Enhanced hover and active states
✅ Added pulsing animation to objectives
✅ Implemented completion visual feedback
✅ Added accessibility features (focus, reduced-motion, high-contrast)
✅ Improved mobile responsiveness
✅ Better positioning relative to game HUD
✅ Consistent color palette with rest of game
✅ Added inner glow effects with pseudo-elements

9.4 KiB Raw Permalink Blame History