/** @jsxImportSource https://esm.sh/react */ import React, { useState, useCallback, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [gameState, setGameState] = useState({ specs: 0, features: 0, users: 0, dollars: 0, usersPerSecond: 0, dollarsPerSecond: 0, productManagers: 0, softwareEngineers: 0, directorOfProduct: 0, directorOfEngineering: 0, vpOfProduct: 0, vpOfEngineering: 0, specsPerSecond: 0, featuresPerSecond: 0, productManagersHiredPerSecond: 0, softwareEngineersHiredPerSecond: 0, directorsOfProductHiredPerSecond: 0, directorsOfEngineeringHiredPerSecond: 0, homePageABTests: 0, paywallABTests: 0, homePageABTestCost: 500000, paywallABTestCost: 500000, userMultiplier: 1, dollarMultiplier: 1, }); const lastUpdateTime = useRef(Date.now()); const updateGame = useCallback(() => { const currentTime = Date.now(); const deltaTime = (currentTime - lastUpdateTime.current) / 1000; // Convert to seconds lastUpdateTime.current = currentTime; setGameState(prevState => { const totalPMOutput = prevState.productManagers; const totalEngineerOutput = prevState.softwareEngineers; const newSpecs = prevState.specs + totalPMOutput * deltaTime; const newFeatures = prevState.features + Math.min(prevState.specs, totalEngineerOutput) * deltaTime; const newUsers = prevState.users + prevState.features * prevState.userMultiplier * deltaTime; const newDollars = prevState.dollars + prevState.users * prevState.dollarMultiplier * deltaTime; const newProductManagers = prevState.productManagers + prevState.directorOfProduct * deltaTime; const newSoftwareEngineers = prevState.softwareEngineers + prevState.directorOfEngineering * deltaTime; const newDirectorsOfProduct = prevState.directorOfProduct + prevState.vpOfProduct * deltaTime; const newDirectorsOfEngineering = prevState.directorOfEngineering + prevState.vpOfEngineering * deltaTime; return { ...prevState, specs: Math.max(0, newSpecs - Math.min(prevState.specs, totalEngineerOutput) * deltaTime), features: newFeatures, users: newUsers, dollars: newDollars, usersPerSecond: prevState.features * prevState.userMultiplier, dollarsPerSecond: prevState.users * prevState.dollarMultiplier, productManagers: newProductManagers, softwareEngineers: newSoftwareEngineers, directorOfProduct: newDirectorsOfProduct, directorOfEngineering: newDirectorsOfEngineering, specsPerSecond: totalPMOutput, featuresPerSecond: Math.min(prevState.specs, totalEngineerOutput), productManagersHiredPerSecond: prevState.directorOfProduct, softwareEngineersHiredPerSecond: prevState.directorOfEngineering, directorsOfProductHiredPerSecond: prevState.vpOfProduct, directorsOfEngineeringHiredPerSecond: prevState.vpOfEngineering, }; }); requestAnimationFrame(updateGame); }, []); useEffect(() => { const animationId = requestAnimationFrame(updateGame); return () => cancelAnimationFrame(animationId); }, [updateGame]); const incrementSpecs = useCallback(() => { setGameState(prev => ({ ...prev, specs: prev.specs + 1 })); }, []); const incrementFeatures = useCallback(() => { setGameState(prev => ({ ...prev, specs: Math.max(0, prev.specs - 1), features: prev.features + 1, })); }, []); const incrementUsers = useCallback(() => { setGameState(prev => ({ ...prev, users: prev.users + 1 })); }, []); const hireProductManager = useCallback(() => { setGameState(prev => { if (prev.dollars >= 100000) { return { ...prev, dollars: prev.dollars - 100000, productManagers: prev.productManagers + 1, }; } return prev; }); }, []); const hireSoftwareEngineer = useCallback(() => { setGameState(prev => { if (prev.dollars >= 100000) { return { ...prev, dollars: prev.dollars - 100000, softwareEngineers: prev.softwareEngineers + 1, }; } return prev; }); }, []); const hireDirectorOfProduct = useCallback(() => { setGameState(prev => { if (prev.dollars >= 200000) { return { ...prev, dollars: prev.dollars - 200000, directorOfProduct: prev.directorOfProduct + 1, }; } return prev; }); }, []); const hireDirectorOfEngineering = useCallback(() => { setGameState(prev => { if (prev.dollars >= 200000) { return { ...prev, dollars: prev.dollars - 200000, directorOfEngineering: prev.directorOfEngineering + 1, }; } return prev; }); }, []); const hireVPOfProduct = useCallback(() => { setGameState(prev => { if (prev.dollars >= 500000) { return { ...prev, dollars: prev.dollars - 500000, vpOfProduct: prev.vpOfProduct + 1, }; } return prev; }); }, []); const hireVPOfEngineering = useCallback(() => { setGameState(prev => { if (prev.dollars >= 500000) { return { ...prev, dollars: prev.dollars - 500000, vpOfEngineering: prev.vpOfEngineering + 1, }; } return prev; }); }, []); const runHomePageABTest = useCallback(() => { setGameState(prev => { if (prev.dollars >= prev.homePageABTestCost) { const improvement = 1 + Math.random() * 0.05; // 0-5% improvement return { ...prev, dollars: prev.dollars - prev.homePageABTestCost, homePageABTests: prev.homePageABTests + 1, homePageABTestCost: prev.homePageABTestCost + 500000, userMultiplier: prev.userMultiplier * improvement, }; } return prev; }); }, []); const runPaywallABTest = useCallback(() => { setGameState(prev => { if (prev.dollars >= prev.paywallABTestCost) { const improvement = 1 + Math.random() * 0.05; // 0-5% improvement return { ...prev, dollars: prev.dollars - prev.paywallABTestCost, paywallABTests: prev.paywallABTests + 1, paywallABTestCost: prev.paywallABTestCost + 500000, dollarMultiplier: prev.dollarMultiplier * improvement, }; } return prev; }); }, []); return (

Tech Startup Clicker

{Math.floor(gameState.specs)}

Specs

{gameState.specsPerSecond > 0 && (

+{gameState.specsPerSecond.toFixed(1)}/s

)} {gameState.productManagers > 0 && (

Product Managers: {Math.floor(gameState.productManagers)}

)} {gameState.productManagersHiredPerSecond > 0 && (

Hiring: +{gameState.productManagersHiredPerSecond.toFixed(1)} PMs/s

)} {gameState.directorsOfProductHiredPerSecond > 0 && (

Hiring: +{gameState.directorsOfProductHiredPerSecond.toFixed(1)} Directors/s

)}

{Math.floor(gameState.features)}

Features

{gameState.featuresPerSecond > 0 && (

+{gameState.featuresPerSecond.toFixed(1)}/s

)} {gameState.softwareEngineers > 0 && (

Software Engineers: {Math.floor(gameState.softwareEngineers)}

)} {gameState.softwareEngineersHiredPerSecond > 0 && (

Hiring: +{gameState.softwareEngineersHiredPerSecond.toFixed(1)} SEs/s

)} {gameState.directorsOfEngineeringHiredPerSecond > 0 && (

Hiring: +{gameState.directorsOfEngineeringHiredPerSecond.toFixed(1)} Directors/s

)}

{Math.floor(gameState.users)}

Users

+{gameState.userMultiplier.toFixed(2)}/s per feature

+{gameState.usersPerSecond.toFixed(1)}/s

${Math.floor(gameState.dollars).toLocaleString()}

Dollars

+${gameState.dollarMultiplier.toFixed(2)}/s per user

+${gameState.dollarsPerSecond.toFixed(1)}/s

View Source

); } function Store({ hireProductManager, hireSoftwareEngineer, hireDirectorOfProduct, hireDirectorOfEngineering, hireVPOfProduct, hireVPOfEngineering, runHomePageABTest, runPaywallABTest, productManagers, softwareEngineers, directorOfProduct, directorOfEngineering, vpOfProduct, vpOfEngineering, homePageABTests, paywallABTests, homePageABTestCost, paywallABTestCost, dollars }) { const [activeTab, setActiveTab] = useState('recruit'); return (

{activeTab === 'recruit' && (

Product Manager

Cost: $100,000

Effect: +1 spec/s

Owned: {Math.floor(productManagers)}

Software Engineer

Cost: $100,000

Effect: +1 feature/s

Owned: {Math.floor(softwareEngineers)}

Director of Product

Cost: $200,000

Effect: Hires 1 PM/s

Owned: {Math.floor(directorOfProduct)}

Director of Engineering

Cost: $200,000

Effect: Hires 1 SE/s

Owned: {Math.floor(directorOfEngineering)}

VP of Product

Cost: $500,000

Effect: Hires 1 Director of Product/s

Owned: {vpOfProduct}

VP of Engineering

Cost: $500,000

Effect: Hires 1 Director of Engineering/s

Owned: {vpOfEngineering}

)} {activeTab === 'optimize' && (

Home Page A/B Test

Cost: ${homePageABTestCost.toLocaleString()}

Effect: 0-5% more users per feature

Completed: {homePageABTests}

Paywall A/B Test

Cost: ${paywallABTestCost.toLocaleString()}

Effect: 0-5% more $ per user

Completed: {paywallABTests}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Tech Startup Clicker

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: 'Courier New', monospace; background-color: #000; color: #0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; } .game-container { text-align: center; background-color: rgba(0, 20, 0, 0.8); padding: 2rem; border-radius: 10px; box-shadow: 0 0 10px #0f0; max-width: 800px; width: 100%; } h1 { font-size: 2.5rem; margin-bottom: 2rem; text-shadow: 0 0 5px #0f0; } .currency-container { display: flex; justify-content: space-around; margin-bottom: 2rem; flex-wrap: wrap; } .currency { background-color: rgba(0, 40, 0, 0.6); padding: 1rem; border-radius: 5px; min-width: 120px; margin: 0.5rem; } .currency h2 { font-size: 2rem; margin: 0; } .currency.dollars { background-color: rgba(40, 40, 0, 0.6); } .currency.dollars h2 { color: #ff0; } .rate-info { font-size: 0.8rem; margin: 0.2rem 0; opacity: 0.8; } .rate-info.bold { font-weight: bold; opacity: 1; } .button-container { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } button { background-color: #0f0; color: #000; border: none; padding: 1rem; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Courier New', monospace; font-weight: bold; text-transform: uppercase; } button:hover:not(:disabled) { background-color: #0a0; box-shadow: 0 0 10px #0f0; } button:active:not(:disabled) { transform: scale(0.98); } button:disabled { background-color: #030; color: #060; cursor: not-allowed; } .store { background-color: rgba(0, 40, 0, 0.6); border-radius: 5px; padding: 1rem; margin-top: 2rem; } .store-tabs { display: flex; justify-content: space-around; margin-bottom: 1rem; } .store-tabs button { background-color: transparent; color: #0f0; border: 1px solid #0f0; padding: 0.5rem 1rem; font-size: 1rem; } .store-tabs button.active { background-color: #0f0; color: #000; } .store-content { text-align: left; } .recruit-tab, .optimize-tab { display: flex; justify-content: space-around; flex-wrap: wrap; } .store-item { background-color: rgba(0, 60, 0, 0.6); padding: 1rem; border-radius: 5px; margin: 0.5rem; min-width: 200px; } .store-item h3 { margin-top: 0; } .store-item button { font-size: 1rem; padding: 0.5rem 1rem; margin-top: 0.5rem; } .source-link { margin-top: 2rem; } .source-link a { color: #0f0; text-decoration: none; } .source-link a:hover { text-decoration: underline; } @keyframes matrix-bg { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 20, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%), url('data:image/svg+xml;utf8,'); opacity: 0.1; z-index: -1; animation: matrix-bg 20s linear infinite; } `;

jaredsilver