super-idea System Requirements Document

Introduction

The "super-idea" project is a web platform designed to showcase fun and interesting games across various categories. The primary purpose of this website is to record and display games that are highly rated and engaging, providing inspiration for other users interested in game design.

System Overview

The super-idea platform will serve as a repository for games sourced from platforms like ldjam.com, highlighting projects that have received positive feedback. Users will be able to explore these projects through detailed descriptions, videos, play links, or GitHub repositories. The platform will feature a project list page and detailed information pages for each game.

Functional Requirements

• As a User, I should be able to view a list of all games on the platform.
• As a User, I should be able to click on a game to view its detailed information, including descriptions, videos, play links, or GitHub repositories.
• As a User, I should be able to filter games by type.
• As a User, I should be able to sort games by descending ratings.
• As a User, I should be able to see a list of games sourced from ldjam.com that are highly rated and interesting.

User Personas

• General User: Interested in exploring and gaining inspiration from various games. They use the platform to discover new games and view detailed information about them.

Core User Flows

1. Explore Games:

   • User visits the homepage.
   • User views a list of games.
   • User applies filters to sort games by type or descending ratings.
   • User clicks on a game to view detailed information.

2. View Game Details:

   • User selects a game from the list.
   • User views the game's description, video, play link, or GitHub repository.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F97316 (Vibrant Orange)
• accent: #10B981 (Emerald Green)
• highlight: #F59E0B (Amber)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

The homepage of the super-idea platform will feature an interactive galaxy map where each star represents a game. Users can click on a star to open a game card with detailed information. Dragging the mouse will rotate the galaxy, allowing users to explore different games. Hovering over a star will highlight connections to similar games, providing a dynamic and engaging way to discover new content. This concept will be implemented using @react-three/fiber and @react-three/drei for 3D interactions.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth via scroll. Decorative elements like stars and galaxies will translate at different speeds, creating a visually rich and immersive first impression. Internal pages will maintain a "static" interaction model for clarity and ease of navigation.

Non-Functional Requirements

• The platform should be responsive and accessible across various devices and screen sizes.
• The system should ensure fast loading times and efficient performance.
• The platform should be secure and protect user data.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Models: Not applicable
• AI Tools: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The platform will initially focus on games from ldjam.com but may expand to include other sources in the future.
• The system will not include user-generated content or social features at launch.
• The platform will prioritize showcasing games with high ratings and interesting concepts.

Glossary

• ldjam.com: A platform for game developers to create and share games, often used for game jams.
• Game Jam: An event where developers create games within a short time frame, often with a specific theme or constraint.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.