System Requirements Document for saldo-coin

1. Introduction

saldo-coin is a mobile-first casual arcade mini-app in which a player taps runs of 1–10 same-coloured blocks on a 10×10 grid to pop them, earning +5 perak per pop, and then exchanges accumulated perak into Coin through a fixed exchange list and requests a withdrawal to a chosen Indonesian e-wallet/bank destination (Dana, GoPay, SeaBank).

The product intent derived from the authoritative requirement thread is:

• Open on a plain navy splash that shows Loading sedang memuat... for exactly 3 seconds and then moves on automatically.
• Land the player on a single main game screen whose top bar shows Saldo : 0 on the left and Coin : 0 on the right, whose centre is a 10×10 grid of coloured blocks (yellow, red, green, black), and whose bottom dock holds exactly three buttons: Setting, Penarikan, and Sound.
• Let the player tap a run of 1–10 same-coloured blocks to pop them, award +5 perak per pop, and when the grid is fully cleared, drop new blocks in from above in a Tetris-like refill.
• Provide a Setting destination containing a round profile avatar and a Nomor ID.
• Provide a Penarikan destination with a bank selector limited to Dana, GoPay, and SeaBank, a Saldo & Coin header, the fixed exchange list (50/100/300/1.000/5.000 perak), a recipient name and recipient number form, and a WhatsApp admin contact link to wa.me/6285716742634.

Audience. Indonesian mobile players on mid-range Android phones, arriving mostly from social links, who want a fast tap-and-pop loop with a visible money counter and a straightforward cash-out path. The register is arcade reward with a real-money feel — not a children's toy.

2. System Overview

saldo-coin is delivered as a first-party custom application (custom UI, application-owned identity, external recipients for withdrawal requests). It is a single-column, mobile-first experience that also renders as a centred device-width column on larger screens.

Current delivery surfaces (closed page contract):

Actors.

• Pemain — the human player who plays the grid, earns perak, and watches Saldo and Coin.
• Penarik Dana — the human who opens Penarikan, chooses a bank, picks an exchange tier, fills the recipient form, and contacts the admin over WhatsApp.
• System process — the game engine that validates runs, awards +5 perak, clears blocks, and performs the Tetris-style refill; the persistence layer that keeps Saldo and Coin across sessions.
• External recipient — the WhatsApp admin contact at wa.me/6285716742634, reached outbound from PENARIKAN.

Accepted behaviour in scope. Splash timing and copy; the 10×10 grid and its four block colours; run selection of 1–10 same-coloured blocks; +5 perak per pop; full-clear refill from above; the Saldo/Coin HUD; the three-button dock; the Setting profile + Nomor ID; the Penarikan bank selector, exchange list, recipient form, and admin link; persistent Saldo and Coin; first-use identity establishment and returning verification so that Saldo, Coin, profile, and Nomor ID remain bound to the correct player.

Narrow exclusions. No bank or e-wallet integration is specified beyond the three named destinations; the withdrawal request is completed by the player contacting the admin over the specified WhatsApp link. No additional banks, no additional exchange tiers, no additional game modes, no additional dock buttons, and no additional admin contact channels are in scope.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. saldo-coin is a first-party application with its own custom interface. The game, the HUD, the Setting panel, and the Penarikan screen are all built and owned by the application. The only outbound handoff is the WhatsApp admin contact, which is owned by WhatsApp as an external destination and is reached by the player tapping the link on PENARIKAN.

Access ownership. The Landing, SPLASH, Sign Up, and Login surfaces are reachable without an established identity. GAME UTAMA, Setting, and PENARIKAN require a verified identity, because Saldo, Coin, the round profile, and the Nomor ID must remain bound to the correct player across sessions and because a withdrawal request is a commitment that must belong to a specific person. First-use identity establishment happens on Sign Up; returning players verify on Login. These are journey prerequisites only — no adjacent account-management capability (password reset flows, social login, profile editing beyond what is specified, multi-device management) is in scope.

Current vs. future. Everything described in this document is current. No future-horizon requirements were stated in the authoritative thread.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source.

2c. Page Content and Component Coverage

Landing

• Information / state: Anonymous entry that explains what saldo-coin is — a tap-the-same-colour block game where popping blocks earns perak, and perak can be exchanged into Coin and withdrawn to Dana, GoPay, or SeaBank. States the three-step shape of the product: play → earn perak → exchange and withdraw.
• Primary action: Enter the app (proceed to SPLASH).
• Supporting actions: Go directly to Sign Up for a first-time player; go to Login for a returning player.
• Domain entities: None owned here; it is a presentation surface.
• Component responsibilities: Oversized stacked SALDO / COIN wordmark; short explanatory copy about the tap-and-pop loop and the perak → Coin → Dana/GoPay/SeaBank path; entry control; Sign Up and Login entry points; faint 6%-opacity lattice texture behind the content.
• States: Loading — static content, no data fetch. Empty — not applicable. Success — entry control proceeds to SPLASH. Error — not applicable. Recovery — not applicable.

SPLASH

• Information / state: Plain navy background (#0A1330). Centred text Loading sedang memuat.... A thin teal hairline progress rule that fills over exactly 3 seconds.
• Primary action: None — the screen advances automatically.
• Supporting actions: None.
• Domain entities: None.
• Component responsibilities: Full-bleed navy ground; centred loading text; 3-second progress hairline; single light sweep across the wordmark at 40% of the load; automatic transition to the next surface at the 3-second mark.
• States: Loading — the 3-second countdown is the loading state. Empty — not applicable. Success — at exactly 3 seconds the app transitions automatically. Error — not applicable; the splash is time-driven and does not depend on a network response. Recovery — not applicable.

Sign Up

• Information / state: First-use identity establishment for a new player. Explains that creating an identity is what keeps Saldo, Coin, the round profile, and the Nomor ID attached to this player on return.
• Primary action: Create the player's identity.
• Supporting actions: Move to Login if the player already has an identity.
• Domain entities: Player identity; the Nomor ID that will be shown on Setting; the Saldo and Coin balances that will be initialised to 0.
• Component responsibilities: Identity input fields; submit control; link to Login; inline validation messaging.
• States: Loading — submit control shows a pending state while the identity is being created. Empty — fields start empty with placeholder guidance. Success — identity created, Saldo and Coin initialised to 0, player proceeds into the app. Error — invalid or already-used identity input shows an inline message and keeps the entered values. Recovery — the player corrects the field and resubmits, or switches to Login.

Login

• Information / state: Returning verification for a player who already has an identity and wants to resume their stored Saldo, Coin, profile, and Nomor ID.
• Primary action: Verify identity and continue.
• Supporting actions: Move to Sign Up if the player has no identity yet.
• Domain entities: Player identity; stored Saldo and Coin; stored Nomor ID.
• Component responsibilities: Identity input fields; submit control; link to Sign Up; inline error messaging.
• States: Loading — submit control shows a pending state during verification. Empty — fields start empty. Success — verification succeeds and the player continues to GAME UTAMA with their stored Saldo and Coin. Error — unrecognised credentials show an inline message without clearing the entered identity. Recovery — the player retries, or switches to Sign Up.

GAME UTAMA

• Information / state: Top HUD bar with Saldo : 0 on the left and Coin : 0 on the right, both rendered as monospace numerals. Centre: a 10×10 grid of coloured blocks in yellow, red, green, and black. Bottom dock: exactly three buttons — Setting, Penarikan, and Sound.
• Primary action: Tap a run of 1–10 same-coloured blocks to pop them.
• Supporting actions: Open Setting; open Penarikan; toggle Sound.
• Domain entities: The 10×10 grid and its block colours; the current run selection; Saldo (perak); Coin; the Sound on/off state.
• Component responsibilities: HUD bar with Saldo and Coin readouts; 10×10 block lattice with 2px gutters and 8px block radii; selection treatment (2px teal outer stroke plus a soft teal glow, never a colour change); pop animation and particle burst; Tetris-style refill from above; three-button bottom dock with drawn thin-stroke line icons for Setting, Penarikan, and Sound; Sound toggle state indicator.
• States: Loading — the grid initialises on entry. Empty — the fully-cleared grid state, which immediately triggers the refill from above. Success — a valid run of 1–10 same-coloured blocks pops, Saldo increases by +5 perak, and the Coin counter rolls up. Error — an invalid selection (mixed colours, or a run longer than 10) does not pop; the selection clears and no perak is awarded. Recovery — the player simply selects a new valid run; the grid remains playable.

Setting

• Information / state: The player's round profile avatar and their Nomor ID.
• Primary action: View the profile and Nomor ID.
• Supporting actions: Return to GAME UTAMA.
• Domain entities: Round profile avatar; Nomor ID.
• Component responsibilities: Round avatar presentation; Nomor ID readout in monospace; back navigation to GAME UTAMA.
• States: Loading — profile and Nomor ID load on entry. Empty — not applicable; every verified player has a Nomor ID. Success — profile and Nomor ID are displayed. Error — if the profile cannot be loaded, the Nomor ID is still shown and a retry affordance is offered. Recovery — retry reloads the profile.

PENARIKAN

• Information / state: Top: Saldo & Coin readouts. Bank selector limited to Dana, GoPay, and SeaBank. Exchange list: 50 perak = 2.950 Coin, 100 perak = 5.900 Coin, 300 perak = 17.700 Coin, 1.000 perak = 59.000 Coin, 5.000 perak = 295.000 Coin. Recipient form with Nama penerima and Nomor penerima. Bottom: the WhatsApp admin link to wa.me/6285716742634.
• Primary action: Submit a withdrawal request for the selected exchange tier to the selected bank with the entered recipient details.
• Supporting actions: Select a bank; select an exchange tier; fill Nama penerima and Nomor penerima; open the WhatsApp admin link.
• Domain entities: Saldo (perak); Coin; selected bank; selected exchange tier; Nama penerima; Nomor penerima; the withdrawal request.
• Component responsibilities: Saldo & Coin header; three equal segmented bank capsules (Dana, GoPay, SeaBank); ruled monospace exchange rows with the rate right-aligned in amber; recipient name and recipient number inputs; submit control; full-width outlined WhatsApp admin row; a small glass coin primitive rotating beside the Coin figure.
• States: Loading — Saldo and Coin load on entry; submit shows a pending state while the request is recorded. Empty — no bank or tier selected yet, and the recipient form is empty; the submit control is not actionable until a bank, a tier, and both recipient fields are present. Success — the request is recorded against the player's Saldo and Coin, and the player is shown the WhatsApp admin link as the next step. Error — insufficient Saldo for the selected tier, or a missing/invalid recipient field, shows an inline message and preserves the entered values. Recovery — the player picks a lower tier, tops up Saldo by playing, or corrects the recipient fields and resubmits.

3. Functional Requirements

Splash

FR-1 — Splash screen with navy background and loading text (explicit) As a Pemain, I should see a splash screen with a plain navy background and the centred text Loading sedang memuat... when the app opens, so that I know the app is starting.

• Trigger: the app opens.
• Observable result: a full-bleed navy screen with Loading sedang memuat... centred.
• Access state: anonymous.
• Failure/recovery: not applicable — the splash is time-driven.
• Continuation: after exactly 3 seconds the app transitions automatically.

FR-2 — Splash auto-advance after exactly 3 seconds (explicit) As a Pemain, I should be moved on automatically after exactly 3 seconds, so that I do not have to tap anything to start.

• Trigger: 3 seconds elapse on the splash.
• Observable result: the app leaves the splash and shows the next surface.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the player continues into the app.

Game

FR-3 — Saldo and Coin HUD (explicit) As a Pemain, I should see Saldo : 0 on the left and Coin : 0 on the right at the top of the main game screen, so that I always know my current balances.

• Trigger: the main game screen is shown.
• Observable result: Saldo is displayed on the left and Coin on the right, both as monospace numerals.
• Access state: verified identity.
• Failure/recovery: if balances cannot be loaded, the HUD shows the last known values and retries.
• Continuation: the HUD updates whenever Saldo or Coin changes.

FR-4 — 10×10 coloured block grid (explicit) As a Pemain, I should see a 10×10 grid of coloured blocks in yellow, red, green, and black in the centre of the main game screen, so that I have a playfield to tap.

• Trigger: the main game screen is shown.
• Observable result: a 10×10 grid of blocks in the four specified colours.
• Access state: verified identity.
• Failure/recovery: if the grid fails to initialise, the player can retry loading it.
• Continuation: the grid is immediately playable.

FR-5 — Tap a run of 1–10 same-coloured blocks to pop them (explicit) As a Pemain, I should tap a series of 1 to 10 blocks that share the same colour so that they pop.

• Trigger: the player taps blocks on the grid.
• Observable result: a run of 1–10 same-coloured blocks is selected and pops.
• Access state: verified identity.
• Failure/recovery: a selection of mixed colours, or a run longer than 10, does not pop; the selection clears and no perak is awarded.
• Continuation: the player selects another run.

FR-6 — +5 perak per pop (explicit) As a Pemain, I should receive +5 perak every time a run pops, so that playing earns me money.

• Trigger: a valid run of 1–10 same-coloured blocks pops.
• Observable result: Saldo increases by 5 perak and the Coin counter rolls up.
• Access state: verified identity.
• Failure/recovery: an invalid selection awards nothing.
• Continuation: the updated Saldo is visible in the HUD and is available for the next Penarikan.

FR-7 — Tetris-style refill after the grid is cleared (explicit) As a Pemain, I should see new blocks drop in from above like Tetris once the grid is fully cleared, so that play continues without interruption.

• Trigger: the grid becomes fully cleared.
• Observable result: new blocks fall in from above and the grid is playable again.
• Access state: verified identity.
• Failure/recovery: if the refill fails, the player can retry loading the grid.
• Continuation: the player continues tapping runs on the refilled grid.

FR-8 — Three-button bottom dock (explicit) As a Pemain, I should see exactly three buttons at the bottom of the main game screen — Setting, Penarikan, and Sound — so that I can reach the other parts of the app and control audio.

• Trigger: the main game screen is shown.
• Observable result: three buttons are present at the bottom: Setting, Penarikan, and Sound.
• Access state: verified identity.
• Failure/recovery: not applicable.
• Continuation: each button opens its destination or toggles its state.

FR-9 — Sound toggle (explicit) As a Pemain, I should be able to toggle Sound from the bottom dock, so that I can turn game audio on or off.

• Trigger: the player taps the Sound button.
• Observable result: the Sound state toggles and the button reflects the new state.
• Access state: verified identity.
• Failure/recovery: not applicable.
• Continuation: the chosen Sound state persists while the player continues playing.

Setting

FR-10 — Setting shows round profile and Nomor ID (explicit) As a Pemain, I should see a round profile avatar and my Nomor ID when I open Setting, so that I can identify my account.

• Trigger: the player taps the Setting button.
• Observable result: the Setting destination shows a round profile avatar and the Nomor ID.
• Access state: verified identity.
• Failure/recovery: if the profile cannot be loaded, the Nomor ID is still shown and a retry is offered.
• Continuation: the player returns to the main game screen.

Penarikan

FR-11 — Bank selection limited to Dana, GoPay, SeaBank (explicit) As a Penarik Dana, I should be able to choose my withdrawal destination from Dana, GoPay, and SeaBank, so that the money goes to the right place.

• Trigger: the player opens Penarikan.
• Observable result: three bank options are presented — Dana, GoPay, and SeaBank — and the chosen one is selected.
• Access state: verified identity.
• Failure/recovery: no bank selected means the request cannot be submitted.
• Continuation: the player proceeds to choose an exchange tier.

FR-12 — Saldo & Coin header on Penarikan (explicit) As a Penarik Dana, I should see my Saldo and Coin at the top of the Penarikan screen, so that I know how much I can exchange.

• Trigger: the player opens Penarikan.
• Observable result: Saldo and Coin are displayed at the top of the screen.
• Access state: verified identity.
• Failure/recovery: if balances cannot be loaded, the last known values are shown and a retry is offered.
• Continuation: the player chooses an exchange tier within their available Saldo.

FR-13 — Fixed exchange list (explicit) As a Penarik Dana, I should see the exchange list — 50 perak = 2.950 Coin, 100 perak = 5.900 Coin, 300 perak = 17.700 Coin, 1.000 perak = 59.000 Coin, 5.000 perak = 295.000 Coin — so that I can pick how much to exchange.

• Trigger: the player opens Penarikan.
• Observable result: the five exchange tiers are listed with their exact perak and Coin values.
• Access state: verified identity.
• Failure/recovery: a tier the player cannot afford is not selectable and explains why.
• Continuation: the player selects a tier and fills the recipient form.

FR-14 — Recipient name and recipient number form (explicit) As a Penarik Dana, I should fill in Nama penerima and Nomor penerima, so that the withdrawal reaches the right recipient.

• Trigger: the player has selected a bank and an exchange tier.
• Observable result: Nama penerima and Nomor penerima are captured and validated as present.
• Access state: verified identity.
• Failure/recovery: a missing or invalid field shows an inline message and preserves the entered values.
• Continuation: the player submits the request.

FR-15 — Submit withdrawal request (required_inference) As a Penarik Dana, I should submit my withdrawal request after choosing a bank, a tier, and recipient details, so that my exchange is recorded against my balances.

• Trigger: the player submits the form with a bank, a tier, Nama penerima, and Nomor penerima present.
• Observable result: the request is recorded, the player's Saldo and Coin reflect the exchange, and the player is shown the WhatsApp admin link as the next step.
• Access state: verified identity.
• Failure/recovery: insufficient Saldo for the selected tier, or a missing/invalid recipient field, shows an inline message and preserves the entered values.
• Continuation: the player contacts the admin over WhatsApp to complete the withdrawal.

FR-16 — WhatsApp admin contact link (explicit) As a Penarik Dana, I should be able to reach the admin at wa.me/6285716742634 from the bottom of the Penarikan screen, so that I can follow up on my withdrawal.

• Trigger: the player taps the admin link.
• Observable result: the WhatsApp destination for wa.me/6285716742634 opens.
• Access state: verified identity.
• Failure/recovery: if WhatsApp is unavailable, the link remains visible so the player can retry.
• Continuation: the player completes the conversation with the admin.

Identity and persistence

FR-17 — First-use identity establishment (required_inference) As a Pemain, I should create my identity the first time I use saldo-coin, so that my Saldo, Coin, profile, and Nomor ID are attached to me.

• Trigger: a first-time player reaches Sign Up.
• Observable result: an identity is created, Saldo and Coin start at 0, and a Nomor ID exists for the player.
• Access state: anonymous entry.
• Failure/recovery: invalid or already-used identity input shows an inline message and keeps the entered values.
• Continuation: the player continues into the main game screen.

FR-18 — Returning verification (required_inference) As a Pemain, I should verify my identity when I come back, so that I resume my stored Saldo, Coin, profile, and Nomor ID.

• Trigger: a returning player reaches Login.
• Observable result: verification succeeds and the player continues to the main game screen with their stored balances.
• Access state: anonymous entry.
• Failure/recovery: unrecognised credentials show an inline message without clearing the entered identity.
• Continuation: the player retries, or switches to Sign Up.

FR-19 — Persistent Saldo and Coin (required_inference) As a Pemain, I should have my Saldo and Coin stored persistently, so that what I earned is still there at my next withdrawal.

• Trigger: Saldo or Coin changes.
• Observable result: the updated balances are stored and are shown again on the next visit.
• Access state: verified identity.
• Failure/recovery: if a balance update cannot be stored, the player is told and the change is retried.
• Continuation: the stored balances are available on the Penarikan screen.

4. User Personas

Pemain

Product context. The Pemain is the core player of saldo-coin. They arrive mostly from a social link on a mid-range Android phone, expecting a fast, immediately playable tap-and-pop loop with a visible money counter. They are not looking for a tutorial or a campaign — they want to tap blocks, watch the numbers move, and see that the money is real.

Primary goal. Accumulate perak by popping runs of same-coloured blocks, watch Saldo and Coin climb, and keep the loop going as long as possible without interruption.

Distinct accepted responsibilities.

• Reading the HUD: Saldo on the left, Coin on the right, both as monospace numerals.
• Reading the 10×10 grid and identifying runs of 1–10 blocks that share a colour.
• Tapping a run to pop it and collecting +5 perak per pop.
• Continuing to play after the grid is fully cleared, when new blocks drop in from above like Tetris.
• Using the three-button bottom dock: Setting, Penarikan, and Sound.
• Toggling Sound on or off.
• Opening Setting to see the round profile avatar and the Nomor ID.
• Establishing an identity on first use and verifying it on return, so that Saldo, Coin, profile, and Nomor ID stay theirs.

Relevant inputs and decisions. Which colour run to tap next; whether a run is valid (same colour, 1–10 blocks); whether to keep playing or open Penarikan; whether Sound should be on or off.

Interactions with other accepted participants. The Pemain is the same human as the Penarik Dana — the same person who plays is the person who later cashes out. The Pemain's play is what produces the Saldo that the Penarik Dana spends, and the Pemain's identity is what keeps that Saldo attached to the right person.

Observable success. Saldo increases by 5 perak on every valid pop; the Coin counter rolls up; the grid refills after a full clear; the Sound toggle reflects its state; Setting shows the round profile and Nomor ID; and the balances are still there on the next visit.

Penarik Dana

Product context. The Penarik Dana is the same human as the Pemain, acting in the cash-out role. They have accumulated perak through play and now want to convert it into Coin and send it to a real destination — Dana, GoPay, or SeaBank. This is the moment where the app has to feel like a real mini-app with money in it, not a toy.

Primary goal. Exchange accumulated perak into Coin at a known rate, direct it to the right bank or e-wallet, and get the request in front of the admin.

Distinct accepted responsibilities.

• Reading Saldo and Coin at the top of the Penarikan screen to see what is available.
• Choosing exactly one destination from Dana, GoPay, and SeaBank.
• Choosing exactly one exchange tier from the fixed list: 50 perak = 2.950 Coin, 100 perak = 5.900 Coin, 300 perak = 17.700 Coin, 1.000 perak = 59.000 Coin, 5.000 perak = 295.000 Coin.
• Filling in Nama penerima and Nomor penerima.
• Submitting the withdrawal request so it is recorded against their balances.
• Reaching the admin at wa.me/6285716742634 to follow up.

Relevant inputs and decisions. Which bank or e-wallet to use; which tier they can afford; the exact recipient name and recipient number; whether to contact the admin immediately or later.

Interactions with other accepted participants. The Penarik Dana depends on the Pemain's play for the Saldo being spent, and on the WhatsApp admin as the external recipient who receives the follow-up. The withdrawal request is a commitment that must remain bound to the correct player, which is why the Penarikan screen requires a verified identity.

Observable success. The selected bank, tier, Nama penerima, and Nomor penerima are captured; the request is recorded and the balances reflect the exchange; and the WhatsApp admin link to wa.me/6285716742634 is available at the bottom of the screen.

5. Core User Flows

Flow 1 — First-time player: from link to first pop

1. The player opens saldo-coin from a social link and lands on Landing (anonymous). They read what the game is: tap same-coloured blocks to pop them, earn perak, exchange perak into Coin, and withdraw to Dana, GoPay, or SeaBank.
2. The player taps the entry control and arrives at SPLASH (anonymous). The screen is plain navy with Loading sedang memuat... centred, and a thin teal hairline fills over exactly 3 seconds.
3. At exactly 3 seconds the app advances automatically. Because the player has no identity yet, they arrive at Sign Up (anonymous).
4. The player creates their identity. On success, Saldo and Coin are initialised to 0 and a Nomor ID exists for them.
5. The player arrives at GAME UTAMA (verified identity). The HUD shows Saldo : 0 on the left and Coin : 0 on the right, and the 10×10 grid of yellow, red, green, and black blocks is in the centre.
6. The player taps a run of same-coloured blocks. The tapped blocks gain a 2px teal outer stroke and a soft teal glow. When the run is valid (same colour, 1–10 blocks), the blocks pop, Saldo increases by +5 perak, and the Coin counter rolls up.
7. If the player taps a mixed-colour selection or a run longer than 10, nothing pops, the selection clears, and no perak is awarded. The player simply selects a new run.
8. The player keeps playing. When the grid is fully cleared, new blocks drop in from above like Tetris and the grid is playable again.
9. Continuation: the player can keep playing, open Setting, open Penarikan, or toggle Sound from the bottom dock.

Flow 2 — Returning player: resume stored balances

1. The player opens saldo-coin and passes through Landing and SPLASH as before.
2. Because the player already has an identity, they arrive at Login (anonymous).
3. The player verifies their identity. If the credentials are not recognised, an inline message appears and the entered identity is preserved so they can correct it; they may also switch to Sign Up.
4. On success, the player arrives at GAME UTAMA with their stored Saldo and Coin already shown in the HUD.
5. Continuation: the player resumes playing exactly where their balances left off.

Flow 3 — Pemain checks profile and Nomor ID

1. From GAME UTAMA, the player taps the Setting button in the bottom dock.
2. Setting opens and shows the player's round profile avatar and their Nomor ID.
3. If the profile cannot be loaded, the Nomor ID is still shown and a retry is offered; the player retries and the profile loads.
4. Continuation: the player returns to GAME UTAMA and continues playing.

Flow 4 — Pemain toggles Sound

1. From GAME UTAMA, the player taps the Sound button in the bottom dock.
2. The Sound state toggles and the button reflects the new state.
3. Continuation: the player continues playing with the chosen Sound state.

Flow 5 — Penarik Dana exchanges perak and requests a withdrawal

1. From GAME UTAMA, the player taps the Penarikan button in the bottom dock and arrives at PENARIKAN (verified identity).
2. The player reads Saldo and Coin at the top of the screen to see what is available.
3. The player chooses one destination from the three segmented bank capsules: Dana, GoPay, or SeaBank. The chosen capsule becomes the selected bank.
4. The player chooses one exchange tier from the ruled monospace list, with the rate right-aligned in amber: 50 perak = 2.950 Coin, 100 perak = 5.900 Coin, 300 perak = 17.700 Coin, 1.000 perak = 59.000 Coin, or 5.000 perak = 295.000 Coin. A tier the player cannot afford is not selectable and explains why.
5. The player fills in Nama penerima and Nomor penerima.
6. The player submits the request. If a field is missing or invalid, or the Saldo is insufficient for the selected tier, an inline message appears and the entered values are preserved; the player corrects the field, picks a lower tier, or tops up Saldo by playing, then resubmits.
7. On success, the request is recorded, the player's Saldo and Coin reflect the exchange, and the player is shown the WhatsApp admin link as the next step.
8. The player taps the full-width outlined admin row at the bottom of the screen, which opens WhatsApp at wa.me/6285716742634.
9. Continuation: the player follows up with the admin to complete the withdrawal, and can return to GAME UTAMA to keep earning perak for the next exchange.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — a navy void where the block grid glows like a HUD. The user's own spec already hands us a navy ground, a glowing 10×10 colour grid, and a numeric HUD; Kuznetsov supplies the treatment — glow, glass panels, monospace numerals, slow orbit on the splash — while the palette stays inside the mandated block colours and the mandated navy splash.

Colour tokens (dark mode).

Proportions: 78% navy void, 14% glass panels, 6% teal, 2% amber. Body text #EDF1FF on #0A1330 is approximately 15:1 contrast. #8A93BF is used only at 14px and above and never for numerals. Teal is the single interactive/primary signal — selected blocks, focus rings, active tab, CTA fill on dark ink text. Amber is reserved for money — the Coin counter, the exchange-rate rows, the +5 perak pop. Navy #0A1330 is flat, with no gradient blobs.

Typography.

• Headings: Space Grotesk — wide geometric grotesk, uppercase micro-labels at 11–12px with 0.18em tracking. Headlines are tight (-0.02em) and set at 500 weight, never heavy.
• Body: Space Grotesk.
• Numerals: JetBrains Mono at 700 for all money and score figures, so digits align like a HUD readout.
• Scale: 1.25 modular on a 4pt baseline — display 34/44/56px (mobile→desktop, clamp), H2 24/28/32, H3 18/20/22, body 15/16/17, micro-label 11/11/12 uppercase, mono numerals 28/34/40 for Saldo/Coin and 16/16/18 for rate rows. Line-height 1.45 body, 1.05 display.

Shape language. Thin luminous strokes and glassy panels: 1px borders at rgba(237,241,255,0.14), 16–20px radii on panels, 8px radii on the 10×10 blocks (each block 96% width of its grid cell with a 2px gap so the grid reads as a lattice, not a solid field). Selection is a 2px teal outer stroke plus a soft 12px teal glow, never a colour change. Buttons are capsules with a 1px top-edge highlight to fake a glass bevel. No blobs, no organic curves, no drop shadows on text.

Layout. Mobile-first single column, max-width 480px on phone, 720px on tablet. At 1280px the app sits as a centred 480px device column on the navy void, with the splash/lobby content flanking it in a wide asymmetric two-column band (left: 9-column oversized SALDO/COIN stacked wordmark; right: the live panel). The game screen is strictly vertical: HUD bar (Saldo left, Coin right) → grid → three-button dock pinned to the bottom safe area. The withdrawal screen is: HUD, bank selector as three equal segmented capsules, exchange list as ruled mono rows with the rate right-aligned in amber, then the recipient form, then the WhatsApp admin link as a full-width outlined row.

Imagery style. No stock photography, no clip art. The imagery is the interface itself: the luminous 10×10 lattice, a faint topographic/scanline texture at 6% opacity over the navy ground, thin radial tick marks around the HUD numerals like a dial bezel, and the splash wordmark rendered as an extruded outline that a single light sweep passes over. The only "object" is a small glass 3D coin primitive (CSS 3D, not WebGL) that rotates slowly beside the Coin figure on the withdrawal screen.

Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Under prefers-reduced-motion, moving content stops and shows whole items.

7. Signature Design Concept

The splash as a 3-second instrument. The public entry is the mandated navy splash, treated as a cinematic void rather than a plain colour. Full-bleed #0A1330. The wordmark SALDO COIN is set as an oversized two-line stacked display (56px mobile → 128px desktop at 1280px, tight leading, 500 weight) left-aligned in the upper-left third. Loading sedang memuat... sits in 11px uppercase with 0.18em tracking beneath a 220px-wide hairline progress rule that fills teal over exactly 3 seconds. A single soft light sweep crosses the wordmark once, at 40% of the load. Behind it, at 6% opacity, a faint lattice of 100 squares hints at the game grid, one column of which lights teal in sequence like a data stream. At 1280px the splash splits: wordmark and progress on the left half, and on the right a slowly rotating glass coin primitive with radial tick marks. No centred headline, no subtext, no button, no gradient blob — the void itself is the hero.

This concept only recomposes accepted content and states: the mandated navy background, the mandated Loading sedang memuat... text, the mandated 3-second duration and automatic transition, and the accepted 10×10 grid and Coin figures as decorative imagery. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: layered_2d

Landing Hero Motion Brief.

• Focal subject. The oversized stacked SALDO COIN wordmark on the navy void, with the 6%-opacity 100-square lattice behind it and the 220px teal hairline progress rule beneath Loading sedang memuat....
• Input → transformation → outcome thesis. The 3-second load is the input. Over those 3 seconds the hairline fills teal in real time, one column of the background lattice lights teal in sequence like a data stream, and a single soft light sweep crosses the wordmark at 40% of the load. The outcome is that the mandated 3-second wait becomes a designed moment rather than a delay, and at exactly 3 seconds the app advances automatically.
• Motion vocabulary. Cinematic but disciplined: a real-time hairline fill, a single light sweep, a sequential column light-up in the lattice, and a 0.6s fade-out. No spinner, no bounce.
• Composed first frame. Full-bleed #0A1330. The stacked wordmark sits left-aligned in the upper-left third. Loading sedang memuat... in 11px uppercase 0.18em tracking sits beneath the empty 220px hairline rule. The 6%-opacity lattice is visible behind. At 1280px, the right half holds the slowly rotating glass coin primitive with radial tick marks.
• Reduced-motion state. Under prefers-reduced-motion, the light sweep, the sequential lattice light-up, and the coin rotation stop. The hairline still fills over the mandated 3 seconds, and the app still advances automatically at exactly 3 seconds.

Game motion. Blocks scale to 1.06 and gain their teal glow in 120ms on tap. On a valid pop, the cleared blocks collapse with a 180ms scale-down plus a 24-particle teal/amber burst, and the Tetris-style refill drops from above with a 420ms cubic-bezier(0.22,1,0.36,1) fall and a 60ms stagger per row. The Coin counter ticks up in mono with a 300ms number roll. Scroll-linked parallax applies only between the two 1280px flanking columns. Everything collapses to instant state changes under prefers-reduced-motion.

9. Non-Functional Requirements

NFR-1 — Splash timing precision (explicit) The splash must display for exactly 3 seconds and then advance automatically, with no user interaction required. Rationale: the user specified the duration and the automatic transition as hard constraints.

NFR-2 — Grid dimensions (explicit) The playfield must be exactly 10×10 blocks. Rationale: the user specified the grid size as a hard constraint.

NFR-3 — Run length bound (explicit) A poppable run must consist of 1 to 10 blocks of the same colour. Rationale: the user specified the run bound as a hard constraint.

NFR-4 — Fixed per-pop reward (explicit) Every pop must award exactly +5 perak. Rationale: the user specified the reward as a hard constraint.

NFR-5 — Closed bank list (explicit) The bank selector on PENARIKAN must offer exactly Dana, GoPay, and SeaBank. Rationale: the user specified the bank list as a hard constraint.

NFR-6 — Closed exchange list (explicit) The exchange list on PENARIKAN must contain exactly the five specified tiers with their exact values: 50 perak = 2.950 Coin, 100 perak = 5.900 Coin, 300 perak = 17.700 Coin, 1.000 perak = 59.000 Coin, 5.000 perak = 295.000 Coin. Rationale: the user specified the tiers as a hard constraint.

NFR-7 — Single admin contact channel (explicit) The admin contact on PENARIKAN must be the WhatsApp link wa.me/6285716742634 and no other channel. Rationale: the user specified the contact as a hard constraint.

NFR-8 — Balance persistence (required_inference) Saldo and Coin must be stored persistently so that earned perak is available at the next withdrawal. Rationale: without persistence, the accepted play-to-withdraw lifecycle cannot complete.

NFR-9 — Mobile-first rendering (explicit, from the creative direction) The app must render as a mobile-first single column, max-width 480px on phone and 720px on tablet, and as a centred 480px device column on the navy void at 1280px. Rationale: the audience is Indonesian mobile players on mid-range Android phones.

NFR-10 — Readable text and controls at every viewport (explicit, from the creative direction) Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Rationale: the creative direction makes this a hard rule that takes precedence over any cropping gesture.

NFR-11 — Reduced-motion support (explicit, from the creative direction) All motion must collapse to instant state changes under prefers-reduced-motion, and moving or scrollable content must stop and show whole items. Rationale: the creative direction specifies this behaviour.

NFR-12 — Contrast (explicit, from the creative direction) Body text #EDF1FF on #0A1330 must hold approximately 15:1 contrast; #8A93BF must be used only at 14px and above and never for numerals; the teal glow must be applied only to strokes and block edges, never behind readable copy. Rationale: the creative direction specifies these contrast rules.

10. Tech Stack

• Frontend: React (custom UI, mobile-first single column, CSS 3D for the glass coin primitive — no WebGL).
• Backend: Python / FastAPI, serving the game state, identity, balance persistence, and withdrawal request recording.
• Storage: A persistent store for player identity, Saldo, Coin, Nomor ID, and withdrawal requests.
• Containerisation: Docker / docker-compose for local and deployment packaging.
• Kubernetes: Not required by any source-stated deployment constraint; omitted.

No source-stated technology choice is overridden or substituted.

11. Assumptions and Constraints

Assumptions.

• [Assumption — narrow] The player's identity is established with a simple identifier and secret; no specific credential scheme was stated by the user, so the simplest scheme that supports first-use establishment and returning verification is used.
• [Assumption — narrow] The Nomor ID shown on Setting is generated by the application when the identity is created; the user specified that Setting contains a Nomor ID but did not specify its format.
• [Assumption — narrow] The round profile avatar is a default presentation of the player's identity; the user specified a round profile but did not specify an upload capability, so none is added.
• [Assumption — narrow] The Sound toggle controls in-app game audio; the user specified a Sound button but did not specify which sounds, so the toggle governs the game's own audio.
• [Assumption — narrow] A withdrawal request is recorded against the player's balances and then completed through the WhatsApp admin conversation; the user specified the recipient form and the admin link but did not specify an automated payout integration, so none is added.

Constraints.

• The splash is exactly 3 seconds and advances automatically.
• The grid is exactly 10×10.
• A poppable run is 1–10 blocks of the same colour.
• Every pop awards exactly +5 perak.
• The bank selector is limited to Dana, GoPay, and SeaBank.
• The exchange list is limited to the five specified tiers with their exact values.
• The admin contact is only the WhatsApp link wa.me/6285716742634.
• The bottom dock contains exactly three buttons: Setting, Penarikan, and Sound.
• GAME UTAMA, Setting, and PENARIKAN require a verified identity; Landing, SPLASH, Sign Up, and Login are anonymous.
• The product lives entirely on navy; there is no white or near-white app ground.
• No blue/indigo SaaS accent (#0057FF, #2563EB, #4F46E5, #7C3AED) is used; the only blues are the navy grounds #0A1330 and #131C42.
• No Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui anywhere in the type stack.
• No full WebGL scenes; hero depth stays at layered_2d.
• No gradient-blob heroes, no frosted blur over pastel gradients, no centred headline + subtext + CTA hero composition, no grids of identical hover-lift cards, no bouncy springy easings, no confetti gimmicks, no cartoon mascots, and no emoji as the primary icon system — the user's\x20\xe2\x9a\x99️\xf0\x9f\x8f\xa6\xf0\x9f\x94\x8a labels become drawn thin-stroke line icons.

12. Glossary

• Perak — the in-game currency earned by popping blocks, at +5 perak per pop. Displayed as Saldo.
• Coin — the currency obtained by exchanging perak through the fixed exchange list. Displayed as Coin.
• Saldo — the player's current perak balance, shown on the left of the HUD.
• Pop — the act of clearing a valid run of 1–10 same-coloured blocks, which awards +5 perak.
• Run — a selection of 1 to 10 blocks that share the same colour.
• Grid — the 10×10 playfield of coloured blocks in yellow, red, green, and black.
• Refill — the Tetris-style drop of new blocks from above after the grid is fully cleared.
• HUD — the top bar of the main game screen showing Saldo on the left and Coin on the right.
• Dock — the bottom bar of the main game screen holding exactly three buttons: Setting, Penarikan, and Sound.
• Nomor ID — the player's identifier shown on the Setting screen alongside the round profile avatar.
• Penarikan — the withdrawal destination where perak is exchanged into Coin and a request is submitted.
• Exchange tier — one of the five fixed perak-to-Coin conversions on the Penarikan screen.
• Nama penerima — the recipient name field on the Penarikan form.
• Nomor penerima — the recipient number field on the Penarikan form.
• Pemain — the player persona who plays the grid and earns perak.
• Penarik Dana — the cash-out persona who exchanges perak and requests a withdrawal.