Retro Desktop Slot Game UI

Summary

I need a front-end game developer to build the client/visuals for a web slot called Baseball. The feel is “old-school baseball pinball”: a pitch comes in, the user swings, the ball travels along a fun, satisfying path and lands in a target with a multiplier. All math, RNG, and outcomes are on my backend—your job is to animate and present the round outcome, handle UI, and integrate simple API calls.

Core Gameplay (Frontend)

One-tap flow: Player sets bet → presses Swing → we call backend → you animate a pitch, bat swing, ball flight, and land in the correct target.

Targets & multipliers (for display/animation):

Out (0×)

Foul Tip (0.5×)

Single (1×)

Gap Shot (1.5×)

Double (2×)

Triple (3×)

Off the Wall (5×)

Short Home Run (25×)

Standard Home Run (50×)

Long Home Run (150×)

Out of the Park (1000×)

Deterministic reveal: Backend returns the outcome; animation must always end at the corresponding target. No client-side RNG.

Stateless rounds: Each bet/round is independent (no jackpots/continuations).

What I Provide

Backend endpoints (sandbox) with round lifecycle (authenticate/start/settle) + JSON outcome schema.

Final multipliers and naming.

Brand/theme direction and any final art/sfx I have (you can start with placeholders).

What You’ll Build

Responsive canvas/WebGL game that runs smoothly on:

1200×675, 1024×576, 800×450, 400×225

Mobile L (425×812), M (375×667), S (320×568)

Game states & UI:

Bet input, speed slider (animation speed), SFX toggle, balance/readouts

Buttons: Swing (start), Settle/Reveal (if needed), Play Again

Win banner, last result, basic round history

Clear, accessible tooltips/descriptions for buttons

Animations & feel:

Pitcher wind-up → pitch

Bat timing cue → swing contact

Ball path (bezier/tweened or spline), camera shake, speed lines

Land in target pocket with juicy VFX (spark, confetti, camera pop)

Distinct FX per outcome tier (e.g., massive flair for 1000×)

Integration:

Call backend for round start; handle retries, timeouts, and resume of active round on reload

Map backend outcome → animation path/target reliably

Error states (network, insufficient balance, active round) with friendly UI

Performance & Quality:

60 FPS on modern desktop; smooth on mid-range mobile

Minimal initial bundle (target < 3–4 MB if Phaser/Pixi; < ~8–10 MB compressed if Unity)

Cross-browser (Chrome, Edge, Safari, Firefox)

Fast load with lightweight preloader

Deliverables:

Source code in a Git repo (TypeScript preferred), build scripts, and README

Config to switch between mocked data and live backend

Sprite sheets/atlas (or instructions) and audio hooks

A hosted demo link (or runnable build) for review

Handover of assets and rights for commercial use

Nice to Have

Experience shipping casino/slot or physics-y arcade games

GSAP or custom tween systems, sprite batching, shaders/particle systems

Spine/DragonBones (or equivalent) for character anims

Localization hooks (strings externalized)

Basic telemetry hooks (events I can wire later)

Compliance Notes (important)

Client must be purely presentational: no RNG, no odds on the client.

Round is stateless: one request → one result → one reveal.

Clear labeling of buttons; concise “How it works” modal.

Timeline & Budget

Looking to start ASAP. Please propose milestones like:

Clickable prototype with placeholder art & core loop

Backend integration + deterministic outcomes

Polish pass (VFX/SFX/responsive)

QA & handoff

Share your estimated timeline and fixed price or milestone costs.