Commander Wars Homepage

Visit here: https://reactorcoregames.github.io/commander-wars-website/

A vibrant, feature-rich single-page website for Commander Wars - the free, open-source turn-based strategy game inspired by Advance Wars. Built with bold Advance Wars 2-inspired design aesthetics and modern web technologies.

🎮 Overview

This is a fully responsive, static single-page website showcasing Commander Wars with:

• Video background with looping gameplay footage
• Bold, colorful Advance Wars-inspired design with heavy borders and vibrant color schemes
• Responsive mobile-first approach with hamburger navigation
• Horizontal auto-scrolling gallery for screenshots
• 10 quick-access links to essential resources
• Platform-specific download sections with installation instructions
• Comprehensive modding information and community resources
• 74 screenshot gallery with external hosting
• Konami Code easter egg for fun interaction

📁 Project Structure

Commander Wars Homepage/
├── index.html          # Main HTML file with all page content
├── style.css           # Complete styling with Advance Wars-inspired design
├── script.js           # Interactive JavaScript features
├── assets/             # Media files
│   ├── curated screenshot (1-10).png    # Featured screenshots
│   ├── modding capabilities image.png   # Modding showcase
│   └── !cow_video_loop.mp4              # Background video loop
└── README.md           # This file

✨ Key Features

Design & Visual Style

• Advance Wars 2 Bold Aesthetic: Heavy black borders, vibrant faction colors, and bold typography
• Color Palette:
  • Red Faction: #FF0000, #E63946
  • Blue Faction: #0066FF, #457B9D
  • Green Faction: #00CC00, #95E1D3
  • Yellow Faction: #FFD700, #FFE66D
  • Magenta: #FF00FF (modding theme)
• Typography: Arial Black for headers, Arial for body text
• Box Shadows: 3D-style drop shadows for depth
• Borders: Thick 4-8px borders on all major elements
• Custom Scrollbars: Styled scrollbars matching the game theme

Interactive Features

Navigation

• Fixed Top Navigation Bar (desktop) with 7 sections
• Hamburger Menu (mobile) - slide-in navigation drawer
• Smooth Scrolling to all anchor links
• Active Section Highlighting - nav items highlight based on scroll position
• Auto-close Menu when clicking links or outside the menu

Hero Section

• Full-screen video background with dark overlay
• Two "island" boxes:
  1. Hero island with game logo, tagline, description, and 4 badges
  2. Quick links island with 10 colorful action buttons
• 4 Hero Badges: FREE, OPEN SOURCE, MODDABLE, CROSS-PLATFORM
• 10 Quick Links: Download, Discord, Tactics, COs, Gallery, Mods, Wiki, Modding, Bugs, FAQ

Gallery Systems

• Horizontal Scrolling Gallery: Auto-scrolling on desktop with custom styled scrollbar
  • Auto-scrolls at 0.3px per frame (~60fps)
  • Pauses on hover
  • Stops permanently on user scroll/touch
  • Features 10 curated screenshots
  • Images scale up on hover with gold border
• Mobile-Optimized: Horizontal scroll preserved on mobile for easy browsing

Content Sections

1. About Section

   • Two-column layout (1.5fr : 1fr ratio)
   • 4 stat boxes showing: 60+ units, ∞ map size, 30+ commanders, 100% moddable
   • Feature images on the right

2. Features Section

   • 3-column layout with center image column
   • 8 main feature boxes in 4 colors (red, blue, green, yellow)
   • 4 mini-feature boxes at the bottom
   • Center showcases 2 gameplay screenshots

3. Download Section

   • 4-column grid for platforms: Windows, Linux, macOS, Android
   • Each platform box includes:
     • Platform icon and name
     • System requirements
     • Download button
     • Filename in monospace font
     • Step-by-step installation instructions
   • Platform-specific border colors
   • Screenshot pair at the bottom

4. Modding Section

   • 2-column layout (content + sidebar)
   • 6 mod feature boxes explaining capabilities
   • Sidebar with modding image and 4 action buttons:
     • Modding guides (purple)
     • ModDB (red)
     • Discord mods (blue)
     • GameBanana (gold)
   • Sticky sidebar on desktop

5. Gallery Section

   • Link to external gallery (PostImages)
   • Grid layout displaying 74 screenshots
   • Lazy loading for performance
   • External links to full-resolution images
   • Hover effects with border color change

6. Community Section

   • 4 community boxes: Discord, ModDB, GameBanana, GitHub
   • Each with icon, description, button, and screenshot
   • 6-item resource grid below
   • Video showcase with border styling
   • Footer with license and contact information

JavaScript Functionality

Core Features (script.js)

• Hamburger Menu Toggle with animation
• Smooth Scrolling with offset for fixed nav
• Active Nav Highlighting based on scroll position
• Video Autoplay Handling with fallback play button
• External Link Safety (adds rel="noopener noreferrer")
• Lazy Loading for gallery images using IntersectionObserver
• Konami Code Easter Egg (↑↑↓↓←→←→BA):
  • Triggers confetti animation
  • Shows "COMMANDER WARS FOREVER!" message
  • 50 colored confetti pieces with physics
• Performance Optimization: Pauses video when tab is hidden
• Accessibility: Screen reader announcements for section changes
• Auto-Scrolling Gallery: Horizontal auto-scroll with user control
• Console Art: Shows ASCII art and hints in browser console
• Error Handling: Global error listener

Responsive Design

Desktop (>1024px)

• Full 3-column features layout
• Horizontal scrolling gallery with custom scrollbar
• Side-by-side content layouts
• Sticky modding sidebar

Tablet (769px - 1024px)

• 2-column layouts for most sections
• Features rearranged to grid
• Download/community sections in 2 columns

Mobile (<768px)

• Hamburger menu replaces top nav
• Single column layouts throughout
• Video background changes to relative positioning
• Hero islands become full-width borderless blocks
• Quick links in 2-column grid with smaller text
• Horizontal gallery still functional with smaller images
• All multi-column grids become single column
• Smaller font sizes and padding

🚀 Deployment

Local Testing

Simply open index.html in any modern web browser. All paths are relative.

Cloudflare Pages

1. Create a new project in Cloudflare Pages
2. Upload all files (index.html, style.css, script.js, assets/)
3. Build settings: None (static site)
4. Deploy!

Other Static Hosting

This site works on any static host:

• GitHub Pages: Push to repo, enable Pages in settings
• Netlify: Drag and drop folder or connect repo
• Vercel: Import project and deploy
• AWS S3 + CloudFront: Upload files to S3 bucket
• Any web server: Place files in public directory

Requirements:

• No server-side code
• No build process needed
• No dependencies to install

🔗 External Resources & Links

Official Links

• GitHub Repository: https://github.com/Robosturm/Commander_Wars
• Discord Community: https://discord.com/invite/ZqExNgm
• Official Wiki: https://github.com/Robosturm/Commander_Wars/wiki
• Game Releases: https://github.com/Robosturm/Commander_Wars/releases

Community & Mods

• ModDB: https://www.moddb.com/games/commander-wars
• GameBanana: https://gamebanana.com/games/23411
• Screenshot Gallery: https://postimg.cc/gallery/d05Q8PB

Documentation

• Tactics Guide: https://www.commanderwars.com/wiki/Tactics
• CO & Unit Overview: https://github.com/Robosturm/Commander_Wars/wiki/CO-and-new-Unit-Overview
• Modding Documentation: https://github.com/Robosturm/Commander_Wars/wiki/Modding
• FAQ: https://www.commanderwars.com/wiki/F.A.Q.

Contact

• Email: commanderwars@gmx.de
• Report Bugs: https://github.com/Robosturm/Commander_Wars/issues

🎨 Customization Guide

Changing Colors

Edit CSS variables or direct color values in style.css:

/* Navigation */
.main-nav { background: #000; border-bottom: 6px solid #FF0000; }

/* Feature boxes */
.red-box { background: #FF6B6B; }
.blue-box { background: #4ECDC4; }
.green-box { background: #95E1D3; }
.yellow-box { background: #FFE66D; }

Adding New Sections

1. Add HTML in index.html:

<section id="newsection" class="content-section">
    <div class="container">
        <h1 class="section-title">NEW SECTION</h1>
        <!-- Your content -->
    </div>
</section>

2. Add Navigation Link in index.html:

<nav class="main-nav" id="mainNav">
    <a href="#newsection">NEW SECTION</a>
</nav>

3. Style It in style.css (JavaScript auto-handles smooth scroll)

Updating Screenshots

• Replace files in assets/ folder with same filenames
• Or update image paths in index.html:

<img src="assets/your-new-screenshot.png" alt="Description">

Modifying Quick Links

Edit the .link-grid section in index.html (lines 109-150):

<a href="YOUR_URL" target="_blank" class="quick-link your-link">
    <span class="link-icon">🎯</span>
    <span>YOUR TEXT</span>
</a>

Add corresponding styles in style.css:

.your-link { background: #YOUR_COLOR; color: #FFF; }

🧪 Browser Support

Fully Supported

• Chrome/Edge: 90+ (all features)
• Firefox: 88+ (all features)
• Safari: 14+ (all features)
• Mobile Safari: iOS 14+ (all features)
• Chrome Mobile: Android 6+ (all features)

Features Used

• CSS Grid & Flexbox
• CSS Custom Scrollbars (WebKit)
• HTML5 Video with autoplay
• IntersectionObserver API
• CSS Transforms & Transitions
• requestAnimationFrame
• Smooth scroll behavior

Graceful Degradation

• No JavaScript: Site still navigable, just no smooth scroll
• No video support: Falls back to static background
• No IntersectionObserver: Images load immediately
• Older browsers: Basic layout preserved

📊 Performance Features

• Lazy Loading: Gallery images load on demand
• Video Optimization: Pauses when tab not visible
• Smooth Animations: Uses requestAnimationFrame for 60fps
• Minimal Dependencies: Zero external libraries
• Optimized Assets: Compressed images and video
• Efficient Scrolling: Throttled scroll event handlers

🎯 SEO & Accessibility

SEO Features

• Comprehensive meta tags
• Open Graph tags for social sharing
• Twitter Card support
• Schema.org structured data (VideoGame type)
• Semantic HTML5 elements
• Descriptive alt text on all images
• Canonical URL specified

Accessibility Features

• ARIA labels on interactive elements
• ARIA live regions for section announcements
• Keyboard navigation support
• Screen reader-friendly navigation
• High contrast borders and text
• Focus states on interactive elements
• Skip-to-content via anchor links

🎮 Easter Eggs & Fun Features

Konami Code (↑↑↓↓←→←→BA)

Triggers a confetti celebration with 50 animated confetti pieces and a popup message.

Console Art

Open browser DevTools console to see ASCII art and discover the Konami Code hint.

Custom Scrollbars

Themed scrollbars matching game colors (Chrome/Edge/Safari only).

Auto-Scrolling Gallery

Horizontal gallery auto-scrolls until user interaction.

📝 Technical Notes

File Sizes

• index.html: ~25KB
• style.css: ~30KB
• script.js: ~10KB
• Total (without assets): ~65KB
• Assets vary based on image/video quality

Load Order

1. HTML parsed
2. CSS loaded (blocking)
3. Images loaded (lazy)
4. JavaScript executes
5. Video autoplays
6. Gallery auto-scroll starts

No External Dependencies

• No jQuery
• No Bootstrap
• No icon libraries (uses emoji)
• No font libraries (system fonts)
• Pure vanilla HTML/CSS/JS

🐛 Known Issues & Limitations

None Currently Identified

If you encounter issues:

1. Check that all files are in correct locations
2. Verify assets/ folder is in same directory as index.html
3. Test in different browsers
4. Check browser console for errors
5. Ensure modern browser (see Browser Support above)

📄 License & Credits

Website

This website is created for the Commander Wars community.

Game License

Commander Wars is licensed under LGPL-3.0.

Credits

• Game Development: Robosturm and Commander Wars contributors
• Website Design: Built with Claude Code
• Design Inspiration: Advance Wars series by Intelligent Systems/Nintendo
• Website Project Leader: Reactorcore - https://linktr.ee/reactorcore

Disclaimer

Advance Wars is a trademark of Nintendo. Commander Wars is not affiliated with or endorsed by Nintendo.

---

Built with ❤️ for the Commander Wars community | © 2026 Commander Wars Community