added specctator feature where other can. view 2 people playing

[Sandijigs]

Add Spectator Mode Feature

Summary

This PR adds a new spectator mode feature that allows users to view and watch all tic-tac-toe games on the platform without needing to connect a wallet. This improves accessibility and enables users to browse ongoing and completed games before deciding to participate.

Motivation

Currently, users need to connect their Stacks wallet to view any games on the platform. This creates a barrier for new users who want to:

• Browse existing games before committing to wallet connection
• Watch games in progress to understand gameplay
• See completed games and their outcomes
• Explore the platform without wallet authentication

Changes Made

New Features

• ✨ Spectate Page (/spectate): A dedicated page to view all games without wallet connection
• 👀 Wallet-free Viewing: Browse all games (active, waiting, and completed) without authentication
• 🎮 Enhanced Game Cards: Larger, more detailed game display with comprehensive information
• 🔗 Explorer Integration: Direct links to player addresses on Stacks Explorer

Files Added

• frontend/app/spectate/page.tsx - New spectate page component with server-side rendering

Files Modified

• frontend/README.md - Updated documentation with:
  • Comprehensive project description
  • Features section including Spectate Mode
  • Project structure documentation
  • Usage instructions
• frontend/lib/contract.ts - Updated contract address to deployed testnet address
• deployments/default.testnet-plan.yaml - Updated with actual deployment address

Configuration

• settings/Testnet.toml - Configured for testnet deployment (not committed, in .gitignore)

Technical Details

Implementation Highlights

1. Server-Side Rendering: Uses export const dynamic = "force-dynamic" for real-time game data
2. Reusable Components: Leverages existing GameBoard, getAllGames(), and utility functions
3. Responsive Design: Mobile-friendly layout with proper spacing and styling
4. Game Status Indicators: Clear visual badges for game states (Completed, Waiting, In Progress)

Component Architecture

SpectatePage (Server Component)
├── getAllGames() - Fetches all games from smart contract
├── GameBoard - Displays game state (size-16 cells for better visibility)
└── Game Cards - Shows:
    ├── Game ID and bet amount
    ├── Current board state
    ├── Player addresses (clickable to explorer)
    ├── Game status badge
    └── Link to full game details