# Startup Spelet Lekfull svensk startup-simulator där spelaren bygger ett låtsasföretag, kör marknadsföringskampanjer och försöker nå 250 kunder utan att kassan tar slut. ## Masterplan - Skapa ett lättsamt spel om företagande, inte ett realistiskt bokförings- eller registreringsverktyg. - Målgrupp: svenska ungdomar/nybörjare som vill testa entreprenörskap på ett roligt och riskfritt sätt. - Spelvärde: balansera kassa, energi, följare, rykte och kunder genom att välja kampanjer med olika kostnad/risk. - Sessionen ska vara snabb: välj affärsidé, döp företaget, kör kampanjer, läs händelser och försök nå 250 kunder. - All data sparas lokalt i webbläsaren så spelaren kan fortsätta senare. ## Tech Stack & Architecture - Ren frontend-app utan backend/build-steg. - `index.html` laddar: - Tailwind via CDN: `https://cdn.tailwindcss.com` - egen CSS: `styles/main.css` - app-entry: `src/main.js` - React 19.2 och ReactDOM laddas från `esm.sh`. - JSX kompileras inte; komponenter använder `htm` via `src/jsx.js`: - `html = htm.bind(React.createElement)` - all renderad markup skrivs som tagged templates: ``html`

...

` ``. - Routing sker med hash routes i `src/App.js`: - `#/` startsida - `#/dashboard` spelöversikt - `#/campaigns` kampanjval - State hanteras globalt via React Context i `src/mainProviders.js`. - Persistens sker med `window.localStorage` under nyckeln `startup-spelet-state`. - Ingen API-yta, server, databas eller auth finns. - Viktig gotcha: eftersom appen kör browser-native ES modules från CDN måste imports vara URL:er eller relativa `.js`-filer. Lägg inte till bundler-specifika alias/imports. ## File Structure ```text index.html # HTML-shell, Tailwind CDN, main.css och src/main.js mountas på #root styles/main.css # Tema-variabler, custom utilities: .nav-chip, .bg-hero, .orb, .skeleton src/main.js # React root; renderar src/jsx.js # htm-bindning som ersätter vanlig JSX src/mainProviders.js # GameContext, initialState, kampanjer, idéer, spellogik, localStorage src/App.js # Hash routing, route guard och global layout/orb-bakgrund src/components/Header.js # Sticky toppnav; visar nav endast när företag finns src/components/Home.js # Startsida: välj affärsidé, ange företagsnamn, starta spel src/components/Dashboard.js # Översikt: stats, progress, logg, vila, nytt spel src/components/Campaigns.js # Lista kampanjer, disabled states, kör kampanj med kort loading ``` ## Key Features ### Starta företag Implemented in `src/components/Home.js` and `startCompany()` in `src/mainProviders.js`. Requirements: - Player chooses one starter idea from `starterIdeas`. - Player enters company name. - Name must be at least 3 characters in `Home.js`. - Input has `maxlength="28"`. - On valid submit: - `state.company` is set. - first log entry is created. - route changes to `#/dashboard`. Starter idea model: ```js { id: string, name: string, icon: string, tagline: string, price: number // revenue per customer } ``` Current starter ideas: - `smoothie` — Smoothiecykel - `plantcare` — Växtvakt - `studybox` — Pluggboxen - `petapp` — TassTid ### Game state Defined in `src/mainProviders.js`. ```js { company: string | null, day: number, cash: number, fans: number, customers: number, reputation: number, // 0-100 energy: number, // 0-100 log: Array<{ id, text, type }>, selectedIdea: StarterIdea, loading: boolean } ``` Initial values: - `cash: 5000` - `energy: 100` - `reputation: 50` - `customers: 0` - `fans: 0` - `day: 1` - default selected idea: `starterIdeas[0]` Gotcha: - `state.loading` exists but is not currently used by UI; `Campaigns.js` uses local `loadingId` for the fake campaign delay. ### Dashboard Implemented in `src/components/Dashboard.js`. Requirements: - Show hero with current day, idea name and company name. - Show core stats: - Kassa - Kunder - Följare - Rykte - Energi - Show progress toward 250 customers. - Win state is text-only: when `customers >= 250`, progress text says `Du vann startup-ligan! 🎉`. - Bankruptcy/lose state is text-only: when `cash <= 0`, show warning message. - Player can: - navigate to campaigns - rest - reset game Rest action: - `day + 1` - `energy + 35`, capped at 100 - `cash - 120` - prepends log entry - keeps only latest 8 log entries ### Campaigns Implemented in `src/components/Campaigns.js` and `runCampaign()` in `src/mainProviders.js`. Campaign model: ```js { id: string, name: string, channel: string, emoji: string, cost: number, fans: number, sales: number, risk: number, // percentage chance of weak result description: string } ``` Current campaigns: - `tikburst` - `flyers` - `podcast` - `mascot` - `newsletter` - `influencer` Campaign launch requirements: - Disabled if: - not enough cash for `campaign.cost` - `energy < 12` - another campaign is loading - UI shows a 650ms fake loading state with skeleton. - On completion, `runCampaign(campaign)` updates state. Campaign result formula: ```js const buzzRoll = Math.random(); const multiplier = buzzRoll > 0.82 ? 1.8 : buzzRoll < campaign.risk / 100 ? 0.45 : 1; ``` Effects: - `cash = cash - campaign.cost + revenue` - `revenue = newSales * selectedIdea.price` - `fans += round(campaign.fans * multiplier)` - `customers += round(campaign.sales * multiplier)` - `reputation` changes: - viral: `+7` - weak result: `-5` - normal: `+3` - clamped to `0..100` - `energy -= 12`, min 0 - `day += 1` - newest log entry is prepended - log is capped to 8 entries ### Navigation and route guard Implemented in `src/App.js`. - If no company exists and user navigates to `#/dashboard` or `#/campaigns`, redirect to `#/`. - Unknown routes fall back to `Home` unless the exact dashboard/campaign route matches. - Header always links logo to `#/`. - Header shows nav chips only after a company has been started. ### Persistence Implemented in `src/mainProviders.js`. - On load, app tries to parse `localStorage.getItem('startup-spelet-state')`. - On state change, app writes JSON to the same key. - If localStorage read fails, app falls back to `initialState`. - If write fails, it logs `Kunde inte spara spelet.` to console. - Reset clears in-memory state to `initialState` and routes to `#/`; it does not explicitly remove localStorage, but the reset state is persisted by the effect. ## Design Guidelines - Language: Swedish throughout UI copy. - Tone: playful, casual, “fantasiläge”, explicitly not real business advice. - Visual style: - rounded cards - soft borders - playful emoji icons - glassy card backgrounds - large bold headings - animated blurred background orbs - Color system is CSS-variable based in `styles/main.css`. - main background: warm cream `--background` - foreground: dark blue/purple `--foreground` - primary: purple `--primary` - secondary: mint/cyan `--secondary` - destructive: red/pink `--destructive` - Tailwind classes are used inline, including arbitrary HSL variables such as: - `bg-[hsl(var(--card)/0.82)]` - `text-[hsl(var(--muted-foreground))]` - Custom classes: - `.nav-chip` for header links - `.bg-hero` for dashboard gradient hero - `.orb`, `.orb-one`, `.orb-two` for background decoration - `.skeleton` for campaign loading placeholder - Dark theme variables exist under `.dark`, but there is no current theme toggle applying that class. - Responsive behavior: - main container max width: `max-w-6xl` - Home uses two columns on `lg` - Dashboard stats use 2 columns on `sm`, 5 on `lg` - Campaign cards use 2 columns on `md`, 3 on `lg` - header reset button hidden on small screens ## App Flow 1. User lands on `#/`. 2. User selects an affärsidé card. 3. User enters a company name. - If under 3 chars, inline Swedish error appears. 4. User clicks “Starta företaget 🚀”. 5. App saves company, creates opening log, routes to `#/dashboard`. 6. User reviews stats and progress. 7. User clicks “Marknadsför” or header “Kampanjer”. 8. User launches an affordable campaign if energy is at least 12. 9. Campaign simulates for 650ms, then updates cash/customers/fans/reputation/energy/day/log. 10. User alternates campaigns and rest days until: - `customers >= 250`: win text appears - `cash <= 0`: bankruptcy warning appears - user clicks “Starta nytt spel” / “Nytt spel” Edge cases: - Direct navigation to protected routes redirects home if `state.company` is null. - Campaign button explains disabled reason: “För dyr just nu” or “För lite energi”. - Rest can push cash below zero; this is allowed and shows bankruptcy warning. - Campaigns can also leave cash below zero after cost/revenue calculation. - There is no hard stop on playing after win or bankruptcy. ## Conventions - Components are plain named exports: - `export function Dashboard() { ... }` - Use `html` tagged templates instead of JSX syntax. - Import React only in files that use hooks or React APIs. - Access game state/actions only through `useGame()` from `src/mainProviders.js`. - Keep core game data (`campaigns`, `starterIdeas`, `initialState`) centralized in `src/mainProviders.js`. - Use hash links for navigation, not React Router. - Keep Swedish copy in components and log messages. - Prefer Tailwind utility classes for layout and component styling. - Add reusable global visual helpers only when Tailwind is insufficient, in `styles/main.css`. ### Adding a new page 1. Create `src/components/NewPage.js`. 2. Export a named component using `html`. 3. Import it in `src/App.js`. 4. Add a hash route condition: ```js if (state.company && page === '/new-page') content = html`<${NewPage} />`; ``` 5. Add a nav link in `src/components/Header.js` if it should be user-facing. 6. Decide if it should be protected by `state.company`; current pattern protects all non-home game pages. ### Adding a new campaign 1. Add an object to `campaigns` in `src/mainProviders.js`. 2. Include all required fields: `id`, `name`, `channel`, `emoji`, `cost`, `fans`, `sales`, `risk`, `description`. 3. Ensure `id` is unique; it is used as React key and loading identifier. 4. Tune `cost`, `sales`, and `selectedIdea.price` impact together, since revenue is `sales * price`. ### Adding a new starter idea 1. Add an object to `starterIdeas` in `src/mainProviders.js`. 2. Include `id`, `name`, `icon`, `tagline`, `price`. 3. Remember `price` directly affects campaign revenue and game difficulty. 4. If changing the default idea, update `initialState.selectedIdea`. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.