OpenAI o3

OpenAIApril 2025
What it wrote

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Super Incremental Game</title>
  <style>
    :root {
      --bg: #111827;
      --primary: #38bdf8;
      --secondary: #f472b6;
      --text: #f3f4f6;
      --card: #1f2937;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    body {
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 2rem;
      gap: 2rem;
    }
    h1 {
      font-size: 2.5rem;
      color: var(--primary);
      text-shadow: 0 0 10px var(--primary);
    }
    #score {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    #click-btn {
      padding: 1rem 2.5rem;
      font-size: 1.5rem;
      font-weight: 600;
      border: none;
      border-radius: 9999px;
      background: linear-gradient(145deg, var(--primary), var(--secondary));
      color: #fff;
      cursor: pointer;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      transition: transform 0.1s ease;
    }
    #click-btn:active {
      transform: scale(0.97);
    }
    .shop {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      width: 100%;
      max-width: 900px;
    }
    .card {
      background: var(--card);
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .card h2 {
      font-size: 1.25rem;
    }
    .card button {
      margin-top: auto;
      padding: 0.5rem 1.25rem;
      font-size: 1rem;
      border: none;
      border-radius: 0.5rem;
      background: var(--secondary);
      color: #fff;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
    .card button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    footer {
      margin-top: auto;
      font-size: 0.875rem;
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <h1>Super Incremental Game</h1>
  <div id="score">0</div>
  <button id="click-btn">Click Me!</button>

  <section class="shop" id="shop"></section>

  <footer>
    Progress auto‑saves every few seconds 🙂
  </footer>

  <script>
    const formatter = new Intl.NumberFormat("en-GB", { maximumFractionDigits: 0 });

    const state = {
      score: 0,
      clickPower: 1,
      tick: 0,
      upgrades: [
        {
          id: "cursor",
          name: "Cursor",
          baseCost: 10,
          qty: 0,
          cps: 1,
        },
        {
          id: "grandma",
          name: "Grandma",
          baseCost: 100,
          qty: 0,
          cps: 10,
        },
        {
          id: "factory",
          name: "Factory",
          baseCost: 1000,
          qty: 0,
          cps: 100,
        },
      ],
    };

    function costOf(upgrade) {
      return Math.floor(upgrade.baseCost * Math.pow(1.15, upgrade.qty));
    }

    function load() {
      const saved = JSON.parse(localStorage.getItem("super-incremental"));
      if (saved) {
        Object.assign(state, saved);
      }
    }

    function save() {
      localStorage.setItem(
        "super-incremental",
        JSON.stringify({ score: state.score, upgrades: state.upgrades })
      );
    }

    function updateScoreDisplay() {
      document.getElementById("score").textContent = formatter.format(state.score);
    }

    function renderShop() {
      const shop = document.getElementById("shop");
      shop.innerHTML = "";
      state.upgrades.forEach((u, index) => {
        const cost = costOf(u);
        const card = document.createElement("div");
        card.className = "card";
        card.innerHTML = `
          <h2>${u.name}</h2>
          <p>Owned: ${u.qty}</p>
          <p>Generates: ${u.cps} / sec</p>
          <button id="buy-${u.id}">Buy for ${formatter.format(cost)}</button>
        `;
        const btn = card.querySelector("button");
        btn.disabled = state.score < cost;
        btn.addEventListener("click", () => {
          if (state.score >= cost) {
            state.score -= cost;
            u.qty++;
            state.clickPower = 1 + state.upgrades.reduce((a, up) => a + up.qty, 0) * 0.1;
            updateScoreDisplay();
            renderShop();
          }
        });
        shop.appendChild(card);
      });
    }

    function gameLoop() {
      const cps = state.upgrades.reduce((sum, u) => sum + u.cps * u.qty, 0);
      state.score += cps / 10; // tick 10 times per second
      updateScoreDisplay();
      state.tick++;
      if (state.tick % 10 === 0) {
        renderShop(); // refresh button states once per second
      }
    }

    document.getElementById("click-btn").addEventListener("click", () => {
      state.score += state.clickPower;
      animateClick();
      updateScoreDisplay();
    });

    function animateClick() {
      const btn = document.getElementById("click-btn");
      btn.style.transform = "scale(1.05)";
      setTimeout(() => (btn.style.transform = "scale(1)"), 100);
    }

    // Initialise
    load();
    updateScoreDisplay();
    renderShop();

    // Main game tick (100 ms)
    setInterval(gameLoop, 100);

    // Auto‑save
    setInterval(save, 5000);
  </script>
</body>
</html>