A 3-in-1 mini-game tournament arcade built for the Cloud9 x JetBrains "Sky's the Limit" Hackathon 2026, submitted under Category 4: Event Mini-Game.
Live Demo: https://www.juniearcade.fun
Category 4 - Develop a mini-game for fans at LCS or VCT Event Booths.
| Requirement | Implementation |
|---|---|
| Fast & Engaging (< 3 min) | 50-100 second games with high replayability |
| Intuitive Controls | Mouse/click + SPACE only, no tutorial needed |
| Thematic | VALORANT/LoL tactical aesthetic with Cloud9 branding |
| Live Leaderboard | Real-time Champion Points ranking system |
Junie's Arcade features three fast-paced mini-games designed for competitive play at Cloud9 and JetBrains event booths. Players compete for high scores, earn Champion Points across all three games, and climb a global leaderboard. Top 3 players at GDC events win authentic Timor-Leste merchandise prizes.
- Duration: 2-5 minutes per full tournament run
- Platform: Web-based (desktop recommended)
- Games: Jump Master (platformer), Reflex Arena (reaction), Memory Match (puzzle)
| Game | Type | Duration | Goal |
|---|---|---|---|
| Jump Master | Endless Runner | 50 seconds | Jump obstacles, collect Cloud9 logos and coins |
| Reflex Arena | Reaction Game | 50 seconds | Click good targets, avoid bad ones, build combos |
| Memory Match | Card Puzzle | 100 seconds | Match 8 pairs of champion cards with combo system |
Each game features progressive difficulty, combo multipliers, and achievement cards generated after completion.
Since each game has different scoring ranges, Champion Points normalize rankings across games:
| Rank | Points |
|---|---|
| 1st | 100 |
| 2nd | 90 |
| 3rd | 80 |
| 4th-10th | 75-50 |
| 11th-25th | 48-20 |
| 26th+ | 19-1 |
Players who complete all 3 games are ranked higher. Total Champion Points determine the overall leaderboard position.
| Category | Technologies |
|---|---|
| Framework | Next.js 16, React 19, TypeScript |
| Game Engine | Phaser 3 |
| 3D Graphics | Three.js, React Three Fiber, React Three Drei |
| Styling | Tailwind CSS 4 |
| Animations | Framer Motion |
| Database | PostgreSQL with Prisma ORM |
| Storage | AWS S3 (achievement cards) |
| Deployment | Vercel |
flowchart LR
subgraph Client["Client (Browser)"]
UI[React UI]
Phaser[Phaser 3 Games]
ThreeJS[Three.js 3D]
FM[Framer Motion]
end
subgraph Server["Next.js 16 Server"]
Pages[App Router Pages]
API[API Routes]
Lib[Game Logic & Utils]
end
subgraph Data["Data Layer"]
DB[(PostgreSQL)]
S3[(AWS S3)]
end
Client --> Server
Server --> Data
This project was developed using JetBrains WebStorm with Junie (JetBrains AI Coding Agent) to improve the code and accelerate game development. The initial ideas and task planning are documented in the Idea_and_task_and_hackathon/ folder.
Development screenshots from WebStorm with Junie:
| Screenshot | Description |
|---|---|
 |
Early development with Junie AI assistant in WebStorm |
 |
Writing game documentation and gameplay guide with AI assistance |
 |
My credit remain when Use AI Ultimate |
 |
My credit remain when Use AI Pro |
 |
JetBrains AI Ultimate |
This project includes detailed documentation for every aspect of the system:
| Document | Description |
|---|---|
| how_game_is_work.md | Complete gameplay guide with strategies and tips |
| LEADERBOARD_SCORING.md | Detailed scoring mechanics and Champion Points formulas |
| diagram/README.md | System architecture diagrams (Mermaid) |
| prisma/README.md | Database schema and Prisma ORM documentation |
| app/api/README.md | Complete API reference with examples |
| junie-arcade/README.md | Main application README with setup instructions |
- Node.js 18+
- PostgreSQL database
- npm
git clone https://github.com/ajitonelsonn/Junie_Arcade.git
cd Junie_Arcade/junie-arcade
npm installConfigure .env (see junie-arcade/README.md for full details):
DATABASE_URL="postgresql://user:password@host:5432/database?schema=public"
API_SECRET_KEY="your-generated-key"
NEXT_PUBLIC_API_KEY="your-generated-key"
AWS_REGION="us-east-1"
AWS_ACCESS_KEY_ID="your-access-key"
AWS_SECRET_ACCESS_KEY="your-secret-key"
S3_BUCKET_NAME="junies-arcade"Initialize database and run:
npx prisma generate
npx prisma db push
npx tsx prisma/seed-countries.ts
npm run devOpen http://localhost:3000 in your browser.
Sky_the_Limit/
├── junie-arcade/ # Main application
│ ├── app/
│ │ ├── api/ # REST API endpoints
│ │ ├── components/ # React components
│ │ ├── games/ # Game pages (jump, reflex, memory)
│ │ ├── gallery/ # Achievement card gallery
│ │ ├── leaderboard/ # Leaderboard page
│ │ ├── lib/ # Utilities and Phaser game scenes
│ │ └── merchandise/ # Merchandise page
│ ├── prisma/ # Database schema and seeds
│ ├── public/ # Static assets (images, sounds, fonts)
│ ├── diagram/ # Architecture diagrams
│ └── package.json
├── Idea_and_task_and_hackathon/ # Planning docs and hackathon info
├── ss/ # Development screenshots
└── README.md # This file
All visual assets (mascots, logos, game targets, cards, merchandise imagery) were created using a combination of AI generation and manual design/editing:
| Asset | Tool | Link |
|---|---|---|
| Junie Mascot (AI-generated base) | Grok AI | View on Grok |
| Mascot & Logo (edited/finalized) | Canva | View on Canva |
| Game Targets | Canva | View on Canva |
| Merchandise Designs | Canva | View on Canva |
| Game Cards | Canva | View on Canva |
| Hero Images | Canva | View on Canva |
| New Hero Images (AI-generated) | Grok AI | View on Grok |
| Background Images (AI-generated) | Gemini AI | View on Gemini |
The Junie mascot was initially generated using Grok AI, then refined and edited in Canva alongside all other game assets. Hero images and backgrounds were generated using AI tools and integrated into the game design. Hero character images were sourced from Cloud9's official website.
- Developer: Ajito Nelson Lucio da Costa, from Timor-Leste
- Hackathon: Cloud9 x JetBrains "Sky's the Limit" 2026
- IDE: JetBrains WebStorm with Junie AI
- Mascot: Junie (JetBrains Junie AI Agent)
See LICENSE for details.