Skip to content

Jedchii/typesprout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

8 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŒณ TypeSprout

Growing skills, one keystroke at a time ๐ŸŒฑโŒจ๏ธ

A comprehensive pixel-art typing game that combines competitive typing races with tree collecting, forest management, and educational content. Master your typing skills while building your own virtual forest ecosystem!

Version Platform

๐ŸŽฎ Game Overview

TypeSprout transforms traditional typing practice into an engaging multi-game experience featuring:

  • ๐Ÿ Competitive Typing Races - Race against AI opponents with real-time WPM tracking
  • ๐ŸŒฒ Forest Management - Plant and grow trees in your personal isometric forest
  • ๐Ÿ“š TreeDex Collection - Discover and unlock 16 unique tree species with rich lore
  • ๐ŸŽต Immersive Audio - Dynamic music system with crossfading and spatial sound effects
  • ๐Ÿ–ผ๏ธ Pixel-Perfect Art - Authentic retro aesthetic with smooth animations

โœจ Core Features

๐Ÿ Typing Race System

  • Multi-Difficulty Racing: Easy, Intermediate, Hard, and Hidden "Impossible" mode
  • Real-Time Competition: Race against 3 AI opponents with dynamic WPM calculations
  • Live Performance Tracking: WPM, accuracy, and placement statistics
  • Visual Tree Growth: Watch your tree evolve as you type faster and more accurately
  • Seed Rewards: Earn different seed types based on your performance

๐ŸŒฒ Forest Simulation

  • Isometric Grid System: Plant trees in a beautiful 3D-perspective environment
  • Growth Mechanics: Trees progress through seed โ†’ sprout โ†’ mature stages over time
  • Species Diversity: 16 different tree types with unique appearances and growth patterns
  • Inventory Management: Collect and manage different seed types
  • Save System: Persistent forest state with automatic saving

๐Ÿ“š TreeDex Encyclopedia

  • 16 Unique Species: From common Oak to legendary Yggdrasil
  • Educational Content: Scientific names, native ranges, and detailed descriptions
  • Rarity System: Common, Rare, Goated, and Hidden classification
  • Progress Tracking: Trees unlock as you grow them in your forest
  • Rich Lore: Each species features unique backstories and cultural significance

๐ŸŽต Advanced Audio System

  • Dynamic Music: Automatic track switching between menu and gameplay
  • 2-Second Crossfading: Smooth transitions between different sections
  • Universal SFX: Button sounds and interaction feedback
  • Volume Controls: Separate sliders for master, music, and SFX
  • Persistent Settings: Audio preferences saved across sessions

๐ŸŒŸ Tree Species Collection

Discover 16 meticulously researched tree species, each with unique characteristics:

Common Trees (1-7)

  • Oak, Birch, Spruce, Cedar, Willow, Maple, Acacia

Rare Trees (8-14)

  • Silk Floss - Thorny trunk with beautiful blossoms
  • Ghost Gum - Glowing white bark from Australian Dreamtime
  • Socotra Dragon - Alien umbrella shape that bleeds red resin
  • Ginkgo - Living fossil that survived the atomic bomb
  • Monkey Puzzle - Prehistoric Chilean sacred tree
  • Rainbow Eucalyptus - Natural rainbow-colored bark
  • Baobab - Ancient water-storing giants

Legendary Trees (15-16)

  • Fertility Tree - Campus legend from University of the Philippines
  • Yggdrasil - Norse mythological world tree

๐ŸŽฏ Gameplay Flow

  1. Start Racing โ†’ Choose difficulty and compete in typing challenges
  2. Earn Seeds โ†’ Better performance yields rarer seed rewards
  3. Plant Forest โ†’ Use seeds to grow your personal tree collection
  4. Unlock TreeDex โ†’ Mature trees reveal detailed species information
  5. Collect All โ†’ Discover all 16 species and complete your encyclopedia

๐Ÿ› ๏ธ Technical Architecture

Single-Page Application (SPA)

  • Seamless Navigation: Smooth transitions between game modes
  • View Management: Opening cutscene โ†’ Main menu โ†’ Game sections
  • Modular Design: Clean separation between gameplay systems

File Structure

TypeSprout/
โ”œโ”€โ”€ ๐ŸŽฌ Main Menu/           # SPA hub with video cutscenes
โ”‚   โ”œโ”€โ”€ index.html          # Main application entry point
โ”‚   โ”œโ”€โ”€ script.js           # Navigation and view management
โ”‚   โ””โ”€โ”€ *.css              # Modular styling system
โ”œโ”€โ”€ ๐Ÿ Main Game/           # Typing race engine  
โ”‚   โ”œโ”€โ”€ script.js           # Race logic and AI opponents
โ”‚   โ””โ”€โ”€ Assets/             # Game sprites and images
โ”œโ”€โ”€ ๐ŸŒฒ Forest/              # Isometric farming simulation
โ”‚   โ”œโ”€โ”€ script.js           # Plant system and save management
โ”‚   โ””โ”€โ”€ assets/             # Tree sprites and environment
โ”œโ”€โ”€ ๐Ÿ“š TreeDex/             # Species encyclopedia
โ”‚   โ”œโ”€โ”€ script.js           # Collection tracking and species data
โ”‚   โ””โ”€โ”€ assets/             # TreeDex UI and tree images
โ”œโ”€โ”€ ๐ŸŽต audio/               # Comprehensive audio system
โ”‚   โ”œโ”€โ”€ AudioManager.js     # Singleton audio coordination
โ”‚   โ”œโ”€โ”€ MusicManager.js     # Background music with crossfading
โ”‚   โ”œโ”€โ”€ SFXManager.js       # Button sounds and effects
โ”‚   โ””โ”€โ”€ SettingsManager.js  # Audio settings integration
โ””โ”€โ”€ ๐Ÿ“ assets/              # Shared sprites and resources
    โ”œโ”€โ”€ sprites/seeds/      # Seed collection graphics
    โ”œโ”€โ”€ sprites/sprouts/    # Growth stage sprites  
    โ””โ”€โ”€ sprites/trees/      # Mature tree artwork

๐Ÿš€ Quick Start

Installation

# Clone the repository
git clone https://github.com/yourusername/typesprout.git
cd typesprout

# Launch with local server (recommended)
python -m http.server 8000
# or
npx serve .

# Open in browser
open http://localhost:8000

Direct Launch

Simply open index.html in any modern web browser!

Audio Setup

Place these files in the SFX/ directory:

  • Title _ScreenMusic.mp3 - Main menu background music
  • BattleMusic.mp3 - Gameplay background music
  • Button Sound Effect.mp3 - UI interaction sounds

๐ŸŽฎ Controls & Accessibility

Keyboard Navigation

  • Arrow Keys: Navigate menu options
  • Enter/Space: Select menu items and confirm actions
  • Escape: Return to previous screen or pause
  • Tab: Cycle through interactive elements

Audio Shortcuts

  • Ctrl/Cmd + M: Toggle audio on/off
  • Ctrl/Cmd + Plus/Minus: Adjust master volume

Accessibility Features

  • Complete keyboard navigation support
  • Visual focus indicators for all interactive elements
  • Screen reader compatible semantic markup
  • High contrast pixel-art design for clarity

๐ŸŽจ Art & Design Philosophy

Pixel-Perfect Aesthetic

  • Native Resolution: 320ร—180 base resolution with crisp scaling
  • Authentic Retro Style: Press Start 2P font and classic gaming colors
  • Consistent Art Direction: Unified color palette across all assets

Visual Design

  • Isometric Perspective: Beautiful 3D-style forest environments
  • Sprite Animations: Smooth tree growth and UI transitions
  • Video Backgrounds: Atmospheric cutscenes with graceful fallbacks

๐Ÿ”ง Development

Code Standards

  • Vanilla JavaScript: No frameworks, maximum compatibility
  • Modular CSS: BEM methodology with organized stylesheets
  • Semantic HTML: Accessibility-first markup structure
  • Progressive Enhancement: Graceful degradation for all features

Browser Compatibility

  • โœ… Chrome/Edge: Full feature support
  • โœ… Firefox: Complete compatibility
  • โœ… Safari: WebM video fallback to MP4
  • โœ… Mobile: Touch-friendly responsive design

๐Ÿ† Performance & Progression

Typing Metrics

  • Words Per Minute (WPM): Real-time calculation during races
  • Accuracy Tracking: Error detection and correction feedback
  • Placement Rankings: 1st-4th place competitive results
  • Progressive Difficulty: Adaptive challenge scaling

Reward System

  • Common Seeds: Consistent rewards for steady performance
  • Rare Seeds: Earned through exceptional typing speed/accuracy
  • Goated Seeds: Reserved for mastery-level achievements
  • Hidden Seeds: Secret unlock conditions for legendary trees

๐Ÿ“Š Save System

Persistent Data

  • Forest State: Tree positions, growth stages, and planting timestamps
  • TreeDex Progress: Species unlock status and collection tracking
  • Audio Settings: Volume preferences and toggle states
  • Cross-Tab Sync: Settings synchronized across browser tabs

Storage Format

Uses localStorage with structured JSON for reliable data persistence.

๐ŸŒ Educational Value

Learning Outcomes

  • Typing Proficiency: Measurable improvement in speed and accuracy
  • Botanical Knowledge: Real scientific information about tree species
  • Cultural Awareness: Tree significance across different cultures
  • Environmental Appreciation: Understanding of global forest diversity

Research-Based Content

Each tree species features:

  • Accurate scientific nomenclature
  • Authentic native range information
  • Cultural and historical significance
  • Ecological importance and conservation status

๐Ÿค Contributing

We welcome contributions in these areas:

๐ŸŽฎ Gameplay Enhancement

  • New typing challenges and game modes
  • Additional tree species and biomes
  • Enhanced AI opponent behaviors
  • Achievement and progression systems

๐ŸŽจ Art & Design

  • Additional tree species artwork
  • Environmental backgrounds and biomes
  • UI improvements and animations
  • Accessibility enhancements

๐Ÿ”ง Technical Improvements

  • Performance optimizations
  • Cross-browser compatibility fixes
  • Mobile responsiveness enhancements
  • Code refactoring and documentation

Development Setup

# Fork and clone your fork
git clone https://github.com/yourusername/typesprout.git
cd typesprout

# Create feature branch
git checkout -b feature/amazing-enhancement

# Test your changes locally  
python -m http.server 8000

# Submit pull request with:
# - Clear description of changes
# - Screenshots/videos of new features
# - Browser compatibility testing results

๐Ÿ“ˆ Roadmap

Phase 1: Polish & Performance

  • Mobile touch controls optimization
  • Advanced typing statistics and analytics
  • Custom typing lesson creation tools
  • Enhanced error feedback and correction

Phase 2: Content Expansion

  • Additional forest biomes (Desert, Rainforest, Tundra)
  • Seasonal tree variations and environmental effects
  • More tree species with regional focus
  • Multiplayer typing race implementation

Phase 3: Advanced Features

  • User account system with cloud save
  • Global leaderboards and tournaments
  • Custom forest sharing and community features
  • Advanced audio system with 3D spatial effects

๐Ÿ™ Acknowledgments

Educational Institutions

  • University of the Philippines Los Baรฑos - Inspiration for the Fertility Tree legend

Cultural Sources

  • Norse Mythology - Yggdrasil world tree concept
  • Aboriginal Dreamtime - Ghost Gum spiritual significance
  • Global Forest Conservation - Species information and awareness

Technical Inspiration

  • Classic Typing Games - Mario Teaches Typing, Mavis Beacon
  • Pixel Art Games - Stardew Valley, Hyper Light Drifter
  • Educational Gaming - Making learning engaging and memorable

Creative Credits

  • Minecraft - Audio assets inspired and credited to Mojang's Minecraft as part of the immersive sound design
  • Jump King - Visual art style inspiration drawn from Jump King's distinctive pixel art aesthetic

Open Source Community

  • Web Standards - HTML5, CSS3, and JavaScript best practices
  • Accessibility Guidelines - WCAG compliance and inclusive design
  • Browser Developers - Cross-platform compatibility and modern APIs

TypeSprout - Where every keystroke grows your digital forest and expands your knowledge of the natural world. Start your typing journey today and discover the wonder of trees from around the globe! ๐ŸŒณโœจ

Built with โค๏ธ using vanilla web technologies for maximum compatibility and performance.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •