Operator guideENwheel-of-fortuneformcreate

Wheel of Fortune / Create

Five-step wheel wizard for identity, settings, UI, segments, and visibility, with local-draft bootstrap, server step saves, translation helpers, and live preview before publish.

Reader view

Clean portal guidance

This page keeps the operator explanation, field and action descriptions, and screenshots visible without exposing repo paths, raw sidecars, or editorial-only implementation details.

Narrative content

Page body

What this surface does

This is the create wizard for a new wheel.

Operators use it to define all required wheel data in five steps:

Wheel Name
Wheel Settings
Wheel UI
Segments
Visibility

Each step also has its own Complete Step action, and each step can expose Save Draft while the wheel still exists only as a local browser draft.

How the create flow really behaves

Save Draft is a per-step local-draft helper until the first backend draft row exists.
The first successful Complete Step can bootstrap a real backend draft row and redirect the operator from /create to /wheel-of-fortune/:id.
Step headers are clickable, but the operator can only open step 0 immediately or a later step when the previous step is already completed.
The final submit path publishes the wheel only after all required steps are completed and FE validation passes for the required steps.
Segment setup uses the active bonus catalog as one of its reference inputs, but choosing a segment bonus does not edit the underlying bonus definition.
Settings cover player-facing links and motion: wheel URL, wheel MKT tag, claim button URL, wheel speed, wheel turns, and guest access.
UI configuration covers text placement, segment text styling, modal background, and four asset slots: wheel background, spin button, pointer arrow, and wheel frame.
Segment configuration supports localized text, chance percent, optional segment image, and a linked bonus per segment.
Visibility controls include include-tags, exclude-tags, and the active or inactive status switch.
Translate fills missing localized values from EN only.
Force Translate overwrites existing target-language values for the supported translated fields.
The right-side Live Preview is not a persistence surface. It mirrors current FE state, includes a preview-language switcher and completion progress, and helps operators inspect wheel links, claim links, preview chips, and segment UI before publish.

Common caveats

Backend publish validation requires a wheel name, title translations, claim button translations, claim title translations, and between 10 and 16 segments with text.
FE step validation only hard-gates Wheel Name and Segments; the intermediate settings, UI, and visibility steps can still be marked complete without extra FE validation errors.
Full publish still requires all steps to be completed, so operators should not treat a green Complete Step on step 1, 2, or 4 as proof that all downstream data is ready.
Save Draft stops writing local storage after the first backend draft exists; from that point the operator must use Complete Step to persist changes.
Translate and Force Translate only work when at least one EN source text exists across title, subtitle, claim button text, claim title, or segment text.
Preview links are generated from current form values and casino origin settings. They are helpful for inspection, but they do not save or publish the wheel.
Segment images and wheel UI assets can come from either direct URLs or asset-library selections depending on the current source-type toggle.

Field dictionary

Fields, columns, and metrics

fieldWheel Name

Admin-facing wheel name used in the CRM list and as the backend record name.

fieldCooldown period in minutes

Cooldown interval applied to repeat spins for the same user context.

fieldTitle

Localized wheel title shown on the casino-side wheel entry surface.

fieldSubtitle

Localized supporting text shown with the wheel title.

fieldClaim Button Text

Localized CTA label shown when the player can claim a prize.

fieldClaim Title

Localized title shown in the winning-claim state after a spin.

fieldPreview Language

Language selector used only by the live preview so operators can inspect localized wheel text without changing saved translations.

fieldWheel Settings

Wheel URL, MKT tag, claim button URL, speed, turns, and guest access options used by the player-side flow.

fieldWheel URL

Player-facing wheel URL or slug used to build preview and runtime links.

fieldWheel MKT Tag

Marketing tag passed into preview and player-side claim routing.

fieldWheel Claim Button URL

Destination URL used after a winning spin when the player clicks the claim CTA.

fieldWheel Speed

Multiplier controlling how fast the preview and wheel animation spin.

fieldWheel Turns

Number of full rotations the wheel makes before stopping in preview and runtime animations.

fieldAllow Guests

Allows the wheel entry flow to appear for guest users.

fieldWheel UI Configuration

Visual configuration for wheel background, frame, button, pointer, and segment text layout.

fieldText Angle Offset (deg)

Fine-tunes the angle of segment labels in preview and runtime rendering.

fieldText Radius (%)

Controls how far from the wheel center the segment labels are rendered.

fieldSegment Label Width (%)

Sets the label-container width used by each segment.

fieldSegment Image Scale

Scales the icon or image rendered behind the segment label.

fieldSegment Font Size (px)

Font size used for segment labels.

fieldSegment Font Weight

Font weight used for segment labels.

fieldSegment Text Color

Color used for segment label text.

fieldModal Background

CSS background value used for the wheel modal backdrop.

fieldGenerate Gradient From Color

Builds a default modal background gradient from the selected base color.

fieldWheel Background

Background layer shown behind the wheel.

fieldSpin Button

Button asset shown in the center of the wheel.

fieldPointer Arrow

Pointer arrow asset used to indicate the winning segment.

fieldWheel Frame

Outer frame asset applied on top of the wheel.

fieldWheel Segments

Segment definitions that connect localized labels, optional segment images, bonus IDs, and weighted chances.

fieldSegment Text

Localized label shown inside each wheel segment.

fieldChance %

Relative weight assigned to the segment.

fieldSegment Image Source Type

Chooses whether the segment image comes from a direct URL or from the asset library.

fieldSegment Image URL

Direct image URL used when the segment image source type is URL.

fieldSelect Segment Asset

Asset-library selection used when the segment image source type is asset.

fieldBonus

Bonus assigned to the segment outcome.

fieldVisibility & Activation

Operator controls for include tags, exclude tags, and the active or inactive status.

fieldForm Completion

Preview-only progress indicator showing how many wizard steps are currently marked completed.

fieldInclude Tags

Tags that explicitly include user cohorts in wheel visibility.

fieldExclude Tags

Tags that explicitly exclude user cohorts from wheel visibility.

fieldActive

Active or inactive status switch for the wheel. The FE writes `active` or `inactive`.

fieldWheel Preview Link

FE-generated wheel preview URL built from the current wheel URL and casino origin settings.

fieldClaim Preview Link

FE-generated claim preview URL built from the claim button URL, MKT tag, and casino origin settings.

Action dictionary

Actions and operator workflows

actionSave Draft

Stores the current create form locally in browser storage before a backend draft row exists.

actionOpen Step

Opens another wizard step from the stepper header when the previous step has already been completed.

actionComplete Step

Saves the current wizard step and marks it as completed for the draft wheel.

actionAdd Segment

Adds another segment row to the wheel until the maximum segment count is reached.

actionRemove Segment

Removes a segment row while the wheel still stays above the minimum required segment count.

actionCancel

Leaves the wheel form without publishing the wheel.

actionPublish Wheel

Publishes the wheel after all required data and completed steps are present.

actionOpen Wheel Preview Link

Builds a preview URL using casino origin settings and current wheel URL values.

actionOpen Claim Preview Link

Builds a preview claim URL using casino origin, claim URL, and MKT tag.

actionTranslate Text

Attempts to fill localized text fields from the current source language without publishing the wheel.

actionForce Translate

Overwrites existing target-language values for supported localized fields using the current EN source text.

actionSpin Preview Wheel

Spins the live preview wheel to inspect the current segment weights, motion settings, and winning-state rendering without saving.

Structured guide

Structured descriptions

Dashboard metrics, grid columns, fields, filters, and operator actions are rendered below as human-readable descriptions.

Screenshots

Interface captures

No committed screenshots for this page yet.

Operational notes

Notes

item

Create mode starts with local draft storage and can bootstrap a backend draft on the first completed step.

item

Step headers are FE-gated by previous-step completion through `wheel-stepper.tsx`.

item

EN is the source language for `Translate` and `Force Translate`; the helper can update title, subtitle, claim texts, and segment texts.

item

The live preview mirrors FE state with debounced UI updates and preview-only wheel-spin math.

item

Segment bonus selection is sourced from the active bonuses list in the admin FE and does not mutate the underlying bonus records.

item

Casino routes are downstream player runtime paths, not the admin CRUD owner.

Related references

pageWheel of Fortune

Operator documentation for the Wheel of Fortune catalog, step-based draft creation flow, manage/edit wizard, publishing rules, and visibility controls.

pageWheel of Fortune / Detail

Manage/edit wizard for one existing wheel, including step saves, final publish, and post-publish updates.

pageWheel of Fortune / List

Main wheel catalog with status tabs, server pagination, active toggle, edit action, and delete action.

pageActivity Tag Rules / Create

Create flow for a new activity tag rule, including optional clone-from-existing behavior and condition testing.

pageAffiliate Deals / Form

Create and edit form for affiliate deals, including PID, date window, commercial terms, and responsible person.

pageAffiliate Payment Settings / Form

Create and edit form for one affiliate payment-setting record, with visible PID targeting, minimum deposit threshold, and active-state control.

Wheel of Fortune / Create

Clean portal guidance

Page body

What this surface does

How the create flow really behaves

Common caveats

Notes

Create mode starts with local draft storage and can bootstrap a backend draft on the first completed step.

Step headers are FE-gated by previous-step completion through `wheel-stepper.tsx`.

EN is the source language for `Translate` and `Force Translate`; the helper can update title, subtitle, claim texts, and segment texts.

The live preview mirrors FE state with debounced UI updates and preview-only wheel-spin math.

Segment bonus selection is sourced from the active bonuses list in the admin FE and does not mutate the underlying bonus records.

Casino routes are downstream player runtime paths, not the admin CRUD owner.

Related pages