Web/Mobile Game UI Development - Season Pass Screen
Budget: $2 – $8 USD
Season Pass Full-Page UI — Frontend Developer
We need a developer to build a full-page Season Pass screen for our mobile game, matching the visual quality and architecture of our existing Shop
page. This is a layout and asset placement job — you'll receive all PNG/WebP assets, design reference screenshots, CSS design tokens, and the base class infrastructure. Your deliverable is a pixel-accurate, responsive, scrollable page built with our tech stack.
You are NOT responsible for:
- Game logic, reward claiming, or purchase flows
- Animations, transitions, or entrance/exit choreography
- Backend integration or state management
- Sound, haptics, or analytics
You ARE responsible for:
- Building the complete DOM structure with proper semantic HTML
- CSS styling using our design token system (--mw-* custom properties)
- Responsive layout that works across mobile viewports
- Correct asset placement and sizing using provided PNGs/WebPs
- Asset sizing 9patch slicing logic where needed to support responsive design
- Accessibility basics (ARIA roles, alt text, keyboard-navigable structure)
Tech Stack
TypeScript (Version 5.x): Used for all source code.
Phaser 4 (Version v4.0.0-rc.4): Functions as the game engine (you won't touch this directly).
Vite (Version 6.x): Serves as the build tool, dev server, and handles asset resolution.
CSS Custom Properties: Used for the design token system (using the --mw-* prefix).
Pure DOM APIs: Utilizes methods like document.createElement(), with no React, Vue, or other framework involved.
CSS border-image: Used for 9-patch scalable UI elements from the asset pack.
No UI frameworks. All UI is built with vanilla TypeScript + DOM APIs + CSS.
We need a developer to build a full-page Season Pass screen for our mobile game, matching the visual quality and architecture of our existing Shop
page. This is a layout and asset placement job — you'll receive all PNG/WebP assets, design reference screenshots, CSS design tokens, and the base class infrastructure. Your deliverable is a pixel-accurate, responsive, scrollable page built with our tech stack.
You are NOT responsible for:
- Game logic, reward claiming, or purchase flows
- Animations, transitions, or entrance/exit choreography
- Backend integration or state management
- Sound, haptics, or analytics
You ARE responsible for:
- Building the complete DOM structure with proper semantic HTML
- CSS styling using our design token system (--mw-* custom properties)
- Responsive layout that works across mobile viewports
- Correct asset placement and sizing using provided PNGs/WebPs
- Asset sizing 9patch slicing logic where needed to support responsive design
- Accessibility basics (ARIA roles, alt text, keyboard-navigable structure)
Tech Stack
TypeScript (Version 5.x): Used for all source code.
Phaser 4 (Version v4.0.0-rc.4): Functions as the game engine (you won't touch this directly).
Vite (Version 6.x): Serves as the build tool, dev server, and handles asset resolution.
CSS Custom Properties: Used for the design token system (using the --mw-* prefix).
Pure DOM APIs: Utilizes methods like document.createElement(), with no React, Vue, or other framework involved.
CSS border-image: Used for 9-patch scalable UI elements from the asset pack.
No UI frameworks. All UI is built with vanilla TypeScript + DOM APIs + CSS.