Flowboss

Build a retro 90s-style agency management game called FlowBoss, using existing Webflow CMS collections as the authoritative data source. The entire game UI must render inside the CRT Screen Devlink component’s game-slot, styled with a Geocities/Win95-inspired retro UI: square buttons, beveled “light shadow” edges, white/light-gray text on dark backgrounds, and an 8/16-bit color palette.

Use pixelarticons for all icons. They can be imported from:

https://www.npmjs.com/package/pixelarticons

All icons must inherit text color from their parent.

A background image should appear behind the game UI (inside the CRT):

https://cdn.prod.website-files.com/693f7cbee8549a49dc96949a/693f7e80e866229fb2f1d01f_flowboss-bg.png

The CRT Screen should be sized at 80vw wide and at least 90vh tall. All the UI and background of the game UI should be inside the slot in the CRT component. This is important.

​

CMS Collections (Must Be Used)

Projects Collection

Use all fields including:

1. name, client-type, base-budget, timeframe, base-difficulty
2. base-points-reward, morale/reputation impacts
3. multipliers (creative/optimization/development/project-management)
4. required-points, project-flavor-text

​

Important: For option fields like client-type or base-difficulty, fetch the collection’s option metadata from the collection api so that the UI shows human-readable option labels, not internal IDs.

Only show projects where required-points ≤ current player points.

Team Roles Collection

Use fields: role-name, weekly-hours, weekly-cost, max-headcount

Roles increase the weekly hour pool and cost money each week.

Event Cards Collection

Use fields: event-name, event-description, cash-impact, morale-impact, points-impact

Random events start from Week 3 with ~40% chance.

Agency Tiers Collection

Fields: tier-name, required-points, required-successful-projects, order-rank

Used for tier progression.

Game Settings Collection

Includes:

1. starting-cash, starting-morale, starting-points
2. weekly-project-opportunities
3. randomness-factor

Used to initialize each new game session.

​

Game Flow (Simplified)

The player begins as a solo founder with 40 hours/week.

Each in-game week is a turn:

1. Show Project Opportunities

1. Show weekly-project-opportunities (usually 2).
2. Only from Projects CMS and only where required points are met.
3. Cards show all CMS data including multipliers and flavor text.

2. Accept a Project → Allocate Hours

1. Founder (40h) + hired roles (from Team Roles CMS) create the weekly hour pool.
2. Allocate hours across:
3. Creative
4. Optimization
5. Development
6. Project Management
7. When editing a project, exclude its current allocation from the available hour calculation so new hours (from new hires) can be added.

3. Accept More or Advance Week

Advancing the week shows a loading bar animation (not a spinner) with rotating retro phrases like:

1. “Optimizing divs and dreams…”
2. “Refactoring client feedback…”
3. “Pushing pixels to production…”

4. Week Resolution

For each active project, update progress using:

​

progress_gain =

 (creative_hours × creative_multiplier

 + optimization_hours × optimization_multiplier

 + development_hours × development_multiplier

 + pm_hours × pm_multiplier)

 × morale_modifier

 × difficulty_modifier

 × randomness_factor

Difficulty modifier uses the human-readable difficulty (Easy, Medium, Hard).

Randomness uses randomness-factor from settings but should be subtle.

Projects finishing at 100%:

1. Success → award base-budget + points + morale boost
2. Failure → deduct cash + morale + reputation

Show a retro scroll/marquee banner across the CRT screen announcing the outcome until the next week.

5. Random Events (from CMS)

1. Disabled for Weeks 1–2
2. From Week 3: 40% chance
3. Apply the CMS impacts (cash/morale/points) and show a simple modal.

6. Tier Progression (from CMS)

Compare player stats with tiers in Agency Tiers.

When the player qualifies for a new tier:

1. Show a Tier Upgrade modal
2. Include a pixel-style sparkle/star animation
3. Display the tier-name and description
4. Trigger only once per tier

​

UI Requirements

Loading Screens

1. First load: Black background + FlowBoss Logo (Devlink) + loading bar underneath.
2. On subsequent loads, briefly show the same screen while restoring from localStorage.
3. ALWAYS use a loading bar for any loading animations.

Main Dashboard (inside CRT Screen)

Status panel shows:

1. Week
2. Cash
3. Morale
4. Points
5. Current Tier

Each stat shows a horizontal pixel bar underneath its value.

Two tabs:

1. Available Projects (using Projects CMS)
2. Active Projects with progress bars and “Edit Time”

​

Allocation Overlay

Shows:

1. Project details (CMS fields)
2. Four hour controls (don’t show the multiplayer values in the UI)
3. Estimated weeks remaining
4. Confirm/Cancel buttons

​

Hiring Modal

Lists Team Roles CMS entries:

1. role-name
2. weekly-hours
3. weekly-cost
4. max-headcount

Hiring updates hours & weekly costs immediately. Show a modal to confirm the hire and that it was successful.

​

Week Summary

Shows progress, events, morale/cash changes.

​

Tier Modal

Retro modal with sparkles/star icons and GSAP fade/scale animation.

​

Game Over

Triggered when:

1. Cash < -5000
2. Morale reaches 0 for multiple weeks

Show stats + CTA referencing Webflow Certified Partner program.

​

Console Logging

Each week, log key updates to the browser console for transparency and debugging:

1. === Week X === banner
2. Project progress with ASCII-like bars: [#####----] 60%
3. Cash summary (income/expenses/net)
4. Events triggered and their impacts
5. Tier upgrades

Logs should use styled text and simple emoji/pixel symbols.

​

Save System

Use localStorage to save:

1. Week, cash, morale, points
2. Hired roles & counts
3. Active projects with allocations and progress
4. Opportunities + remaining lifetime
5. Current tier

Autosave after:

1. Accepting projects
2. Editing allocations
3. End-of-week resolution

“New Game” clears localStorage; “Continue” loads it.

​

Core Loop

1. Fetch CMS data
2. Show weekly opportunities
3. Accept → allocate hours
4. Advance week (loading bar animation)
5. Resolve progress + events
6. Update tiers
7. Save to localStorage
8. Repeat until win/lose screen

​