cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
BreakEscape/docs/TUTORIAL_STYLE_COMPARISON.md
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

260 lines
9.4 KiB
Markdown
Raw Permalink Blame History

# Tutorial Style Comparison - Before & After
## Quick Reference Guide
### Tutorial Prompt Modal
| 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
```css
.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
```css
@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
```css
.tutorial-btn:focus,
.tutorial-next:focus,
.tutorial-skip:focus {
outline: 3px solid #00ff88;
outline-offset: 3px;
}
```
Accessibility for keyboard navigation.
### 4. Reduced Motion Support
```css
@media (prefers-reduced-motion: reduce) {
/* All animations disabled */
}
```
Respects user accessibility preferences.
### 5. High Contrast Mode
```css
@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
Reference in New Issue View Git Blame Copy Permalink