Retro TouchAI · Claude 3.5

Core Game Loop and Mechanics

Retro Touch is an interactive simulation that recreates the iPod Touch 7th generation experience. Players interact with a faithful recreation of the iOS interface, exploring various apps and mini-games that capture the essence of early mobile computing.

Main Experience Flow:

1. Lock Screen: Players start at an authentic lock screen with time display and "slide to unlock" interaction
2. Home Screen: After unlocking, players see a grid of app icons representing classic iOS apps
3. App Exploration: Tapping apps opens interactive experiences that simulate or gamify classic iPod Touch functionality
4. Navigation: Home button returns to home screen, maintaining state across app switches

Core Interactions:

• Slide to Unlock: Swipe gesture on lock screen to access device
• App Launching: Tap icons to open apps with smooth transition animations
• In-App Interactions: Each app has unique touch-based interactions
• Home Button: Physical button simulation to return to home screen
• Status Bar: Shows time, battery, signal strength for authenticity

Engagement Drivers:

• Nostalgia: Authentic recreation of beloved interface and interactions
• Discovery: Finding and exploring different apps and their features
• Mini-Games: Playable games within apps (Music rhythm game, Photo puzzle, etc.)
• Customization: Ability to rearrange apps and personalize wallpaper in Edit mode

Starting Scope

For the initial implementation, we'll focus on creating a polished, functional iPod Touch shell with a curated set of 6-8 essential apps. This provides a complete, satisfying experience while leaving room for expansion.

Phase 1 (Initial Release):

Core System:

• Lock screen with slide-to-unlock
• Home screen with app grid (4 columns × 5 rows)
• Status bar with time, battery, signal
• Home button functionality
• Smooth app open/close animations
• Authentic iOS 12-era visual styling

Essential Apps (6-8 apps):

1. Music - Simple rhythm/music game where you tap notes in time with a beat
2. Photos - Sliding puzzle game using a photo that can be scrambled and solved
3. Calculator - Fully functional calculator with authentic iOS design
4. Clock - Shows current time with working analog/digital displays, simple alarm setting
5. Notes - Simple note-taking app where you can write and save short messages
6. Settings - Adjust wallpaper, sound volume, and other basic preferences
7. Safari - Simple browser simulation showing a fake "web page" with interactive elements
8. Games - A classic Snake game or Brick Breaker arcade game

Future Expansion (Post-Launch):

• Additional apps (Camera with photo filters, Messages with chat simulation, Weather, etc.)
• More complex mini-games within apps
• Notification system
• App Store for "downloading" new apps
• Multiplayer features (sharing scores, photos)

Game Perspective

Fixed-screen perspective with a portrait-oriented device simulation. The iPod Touch device is rendered at a fixed size (approximately 360×640 pixels for the screen area) centered within the 720×1280 game canvas, with the device bezel, home button, and status bar creating an authentic frame.

The interface uses a skeuomorphic iOS 12-era design with:

• Realistic device bezel and rounded corners
• Glossy app icons with subtle shadows
• Smooth transition animations between screens
• Authentic iOS fonts and UI elements

Game World and Level Design

Device Layout (720×1280 canvas):

Vertical Centering:

• Device positioned in center of canvas
• Top margin: ~100px
• Bottom margin: ~100px

Device Structure (520×1080 total device size):

• Top Bezel (520×80): Speaker grille, front camera
• Screen Area (520×920): Active display region
  • Status Bar (520×40): Time, battery, signal
  • Content Area (520×880): Apps, content, interactions
• Bottom Bezel (520×80): Home button (circular, centered)

Home Screen Layout:

• App Grid: 4 columns × 5 rows = 20 app slots
• App Icon Size: 100×100 pixels
• Grid Spacing: 30px horizontal, 40px vertical
• Grid starts ~60px from top of content area
• App labels below icons (centered, 12px font)

Dock (Bottom of Screen):

• Fixed dock with 4 essential apps
• Slightly translucent background
• Height: 120px
• Common apps: Music, Safari, Messages, Photos

App Screens:

Each app has a consistent structure:

• Navigation Bar (top, 80px): App title, back button (if needed)
• Content Area: App-specific interface
• Tab Bar (bottom, optional, 100px): For apps with multiple sections

Visual Hierarchy:

1. Lock screen (initial state)
2. Home screen (primary navigation hub)
3. App screens (individual experiences)
4. Modals/overlays (settings, alerts)

Edit Mode Design

Edit mode allows players to customize their iPod Touch experience, focusing on personalization options that enhance the nostalgic feel without breaking the simulation.

Editable Properties:

1. Wallpaper Customization:

• Lock Screen Wallpaper: Choose from preset images or solid colors
• Home Screen Wallpaper: Separate from lock screen, with blur option
• Preset Options: 8-10 nostalgic/retro-themed wallpapers
• Color Options: Solid colors and gradients

2. App Arrangement:

• Drag and Drop: Long-press and drag app icons to rearrange
• Dock Customization: Choose which 4 apps appear in the dock
• Page Management: If expanded, support multiple home screen pages

3. Device Settings:

• Device Color: Choose bezel color (black, white, silver, gold, red)
• Sound Volume: Master volume slider (0-100%)
• Time Display: 12-hour vs 24-hour format
• App Icon Style: Classic glossy vs modern flat

4. Mini-Game Difficulty:

• Music Game: Adjust note speed and complexity
• Photo Puzzle: Choose grid size (3×3, 4×4, 5×5)
• Snake Game: Adjust speed and starting length

Edit Mode Interface:

Access Method:

• Dedicated "Edit" button in top-right corner of home screen
• Toggles between Play and Edit modes

Edit Mode Indicators:

• Apps have subtle wiggle animation (classic iOS edit mode)
• Small "×" badges on removable apps
• "+" button to add apps from available list
• "Done" button to exit edit mode

Settings Panel:

• Slide-in panel from right side
• Organized tabs: Appearance, Apps, Games, About
• Each setting has clear label and appropriate control (slider, color picker, dropdown)

Constraints:

• Minimum Apps: At least 4 apps must remain on home screen
• Essential Apps: Calculator, Clock, Settings cannot be removed
• Dock Limit: Exactly 4 apps in dock
• Wallpaper Dimensions: Images should be 520×920 or larger
• Volume Range: 0-100%, affects all in-game sounds
• App Limit: Maximum 20 apps on home screen (4×5 grid)

Persistence:

All edit mode changes are saved to window.gameConfig and persist across sessions:

window.gameConfig = {
  wallpapers: {
    lockScreen: "preset_1",
    homeScreen: "preset_2"
  },
  appLayout: ["music", "photos", "calculator", ...],
  dockApps: ["music", "safari", "messages", "photos"],
  deviceColor: "black",
  volume: 75,
  timeFormat: "12h",
  iconStyle: "glossy",
  gameDifficulty: {
    music: "medium",
    puzzle: "4x4",
    snake: "normal"
  }
}

Control Design

Retro Touch uses a tap-and-swipe control scheme optimized for mobile touch interaction, with full desktop mouse support. The game simulates authentic iOS gestures and interactions.

Mobile Controls (Primary):

1. Lock Screen:

• Swipe Right: Slide the unlock slider from left to right to unlock device
• Touch and Drag: Finger follows the slider, releases if dragged back

2. Home Screen:

• Tap App Icon: Launch app with smooth zoom animation
• Tap Home Button: Return to home screen from any app
• Long Press Icon (Edit Mode): Enter wiggle mode for rearranging
• Drag Icon (Edit Mode): Move app to new position
• Swipe Left/Right (Future): Navigate between home screen pages

3. In-App Interactions:

• Tap: Primary interaction (buttons, keys, game elements)
• Swipe: Scrolling, navigation, game controls
• Pinch (Future): Zoom in Photos app
• Long Press: Context menus, additional options

4. Mini-Game Controls:

• Music Game: Tap notes as they reach the target line
• Photo Puzzle: Tap tiles to slide them into empty space
• Calculator: Tap number and operator buttons
• Snake Game: Swipe in direction to turn snake
• Notes: Tap to show keyboard, type with on-screen keyboard

Desktop Controls (Mouse + Keyboard):

Mouse:

• Click: Equivalent to tap (all tap interactions)
• Click and Drag: Equivalent to touch and drag (unlock slider, app rearranging)
• Hover: Show subtle highlight on interactive elements

Keyboard:

• Enter: Unlock from lock screen
• Escape: Return to home screen (home button)
• Arrow Keys: Navigate app grid focus, control Snake game
• Space: Select focused app
• Tab: Move focus between elements
• Number Keys: Calculator input
• WASD: Alternative to arrows for Snake game

Control Implementation Details:

Touch Handling:

• Track all touch points with unique IDs
• Prevent default browser behaviors (scrolling, zooming)
• Clear touch state on window blur
• Support multi-touch for future features

Gesture Recognition:

• Swipe Detection: Minimum 50px movement in <300ms
• Long Press: 500ms hold without movement
• Tap: Touch down and up within 300ms and 10px radius

Home Button:

• Always accessible (fixed position at bottom of device)
• Visual press animation (slight scale down)
• Haptic feedback simulation (brief screen flash)
• Returns to home screen from any app

Pointer Lock:

• Not used (no first-person camera or continuous mouse look needed)

Input State Management:

const input = {
  touches: new Map(), // touchId -> {x, y, startX, startY, startTime}
  mouse: {x: 0, y: 0, down: false},
  keys: new Set(), // active keys (lowercase)
  gestures: [] // detected gestures this frame
};

Accessibility:

• All interactive elements minimum 96×96 pixels
• Clear visual feedback on all interactions
• Keyboard navigation for all features
• High contrast mode option in Settings

Control Simplicity:

The control scheme is intentionally minimal and intuitive:

• Primary Action: Tap/Click (90% of interactions)
• Secondary Action: Swipe/Drag (unlock, rearrange, scroll)
• Tertiary Action: Long Press (edit mode entry)

This matches the authentic iOS experience and ensures the simulation feels natural and nostalgic.

Art Style and Visual Theme

Retro Touch embraces the skeuomorphic iOS 12 aesthetic with a focus on realistic textures, glossy surfaces, and authentic Apple design language from the iPod Touch 7th generation era (2019).

Overall Art Direction:

Style: Realistic skeuomorphic design with subtle 3D effects Mood: Nostalgic, polished, premium Color Palette:

• Device: Space Gray (#1d1d1f), Silver (#e8e8ed), Gold (#fad7bd), Red (#c1272d)
• UI: iOS blues (#007aff), whites (#ffffff), light grays (#f2f2f7)
• Accents: Green (#34c759), red (#ff3b30), orange (#ff9500)

Visual Elements:

1. Device Hardware:

• Bezel: Realistic aluminum or glass finish with subtle gradients
• Screen: Slight glare/reflection overlay for realism
• Home Button: Circular with subtle ring, slight shadow
• Speaker/Camera: Dark grilles with fine detail
• Rounded Corners: 40px radius for screen, matching real device

2. App Icons (100×100px):

• Style: Glossy, rounded squares (22px corner radius)
• Lighting: Top-to-bottom gradient suggesting light source
• Shadow: Subtle drop shadow (2px offset, 4px blur)
• Detail: Each icon should be recognizable and match iOS design language

Icon Examples:

• Music: Pink/red gradient with white musical note
• Photos: Rainbow flower petals
• Calculator: Black background with orange/white buttons
• Clock: White face with black hands showing 10:09
• Notes: Yellow legal pad with lines
• Settings: Gray gears
• Safari: Blue compass
• Games: Colorful game controller or classic game reference

3. UI Components:

Status Bar:

• Semi-transparent background
• White text and icons
• Signal dots, WiFi symbol, battery indicator
• Time centered, 16px font

Navigation Bars:

• Translucent blur effect
• Large title text (34px, bold)
• Back buttons with chevron
• Action buttons (blue, 17px)

Buttons:

• Rounded rectangles (12px radius)
• Solid colors or subtle gradients
• Active/pressed states (darker shade)
• Clear labels (17px, medium weight)

4. Animations:

App Launch:

• Icon scales up and fades
• App content zooms in from icon position
• Duration: 300ms, ease-out curve

App Close:

• Reverse of launch animation
• Content zooms back to icon
• Duration: 250ms, ease-in curve

Unlock:

• Slider follows finger smoothly
• Slight bounce at end
• Screen fade-in after unlock

Edit Mode:

• Icons wiggle (±2° rotation, 0.3s cycle)
• Subtle scale pulse
• "×" badges fade in

5. Typography:

System Font: San Francisco (SF Pro) Fallbacks: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Text Sizes:

• Large Title: 34px (bold)
• Title: 28px (bold)
• Headline: 17px (semibold)
• Body: 17px (regular)
• Caption: 12px (regular)
• App Labels: 12px (regular)

6. Lighting and Effects:

Screen Glare:

• Subtle white gradient overlay (5% opacity)
• Positioned top-left to bottom-right

Shadows:

• App icons: 0 2px 4px rgba(0,0,0,0.1)
• Modals: 0 8px 24px rgba(0,0,0,0.3)
• Device: 0 12px 48px rgba(0,0,0,0.2)

Blur Effects:

• Navigation bars: backdrop-filter blur(20px)
• Dock: backdrop-filter blur(30px)
• Modals: backdrop-filter blur(40px)

Asset vs. Code Rendering:

Generate as Assets:

• App icons (detailed, recognizable designs)
• Wallpaper images (photos, patterns, gradients)
• Device bezel/frame (realistic materials)
• Mini-game graphics (music notes, puzzle pieces, snake segments)

Render with Code (CSS/Canvas):

• UI components (buttons, bars, sliders)
• Text and labels
• Simple shapes (home button circle, status icons)
• Animations and transitions
• Calculator buttons and display
• Clock hands and numbers

Consistency Requirements:

• All app icons must share the same glossy style and corner radius
• UI elements must use consistent spacing (8px grid system)
• Colors must match iOS system colors exactly
• Animations must use iOS-standard timing curves
• All interactive elements must have clear hover/active states

This art direction creates an authentic, nostalgic experience that feels like holding a real iPod Touch 7th generation device.