Spaces:

web3district
/

businessmodelreactable

Running

File size: 27,948 Bytes

5ccbd28

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Business Model Canvas Game</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    :root {
      --customer-segments: #ffa500;
      --value-propositions: #ff5252;
      --channels: #ffd700;
      --customer-relationships: #4caf50;
      --revenue-streams: #9c27b0;
      --key-resources: #2196f3;
      --key-activities: #00bcd4;
      --key-partnerships: #795548;
      --cost-structure: #9e9e9e;
      --market-trends: #cddc39;
      --team-talent: #e91e63;
      --investor-relations: #3f51b5;
      --technology-stack: #00bcd4;
      --risk-factors: #8b0000;
      --sustainability-impact: #808000;
      --customer-feedback-loop: #ff00ff;
    }

    .canvas-grid {
      display: flex;
      gap: 16px;
      height: 80vh;
      max-height: 700px;
      overflow-x: auto;
      padding: 8px;
    }

    .canvas-block {
      min-width: 300px;
      width: 300px;
      border-radius: 8px;
      background-color: #ebecf0;
      padding: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      max-height: 100%;
    }

    .canvas-block-header {
      padding: 8px 10px;
      font-weight: bold;
      color: #172b4d;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .canvas-block-content {
      flex: 1;
      overflow-y: auto;
      padding: 0 4px;
      margin: 8px 0;
    }

    .canvas-block:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .canvas-block.active {
      box-shadow: 0 0 0 3px white, 0 0 0 6px currentColor;
    }

    .cube {
      background: white;
      border-radius: 4px;
      box-shadow: 0 1px 0 rgba(9,30,66,.25);
      padding: 8px 10px;
      margin-bottom: 8px;
      cursor: grab;
      transition: all 0.2s ease;
      font-size: 14px;
      color: #172b4d;
      position: relative;
    }

    .cube:hover {
      background-color: #f4f5f7;
    }

    .cube.dragging {
      transform: rotate(3deg);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .cube-container {
      flex: 1;
      overflow-y: auto;
      padding: 0 4px;
    }

    .applied-cube {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .stats-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .progress-bar {
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
      background: #e0e0e0;
    }

    .progress-fill {
      height: 100%;
      border-radius: 6px;
      transition: width 0.5s ease;
    }

    .firework {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      pointer-events: none;
    }

    .sidebar {
      transition: transform 0.3s ease;
    }

    /* SortableJS ghost placeholder */
    .sortable-ghost {
      opacity: 0.4;
      transform: rotate(3deg);
    }

    @media (max-width: 1024px) {
      .canvas-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
        height: 70vh;
      }
    }

    @media (max-width: 768px) {
      .canvas-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
        height: 100vh;
      }

      .main-container {
        flex-direction: column;
      }

      .sidebar {
        width: 100% !important;
        transform: translateX(100%);
      }

      .sidebar.open {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-indigo-50 to-purple-100 min-h-screen p-4">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <header class="text-center mb-8">
      <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-2">Business Model Canvas Game</h1>
      <p class="text-lg text-indigo-600 max-w-3xl mx-auto">Strategize, simulate, and succeed! Build your business model and see the financial impact in real-time.</p>
    </header>

    <!-- Main Game Area -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- Canvas Area -->
      <div class="flex-1">
        <div class="bg-white rounded-2xl shadow-xl p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-gray-800">Business Model Canvas</h2>
            <div class="flex gap-2">
              <button id="resetBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-all">
                <i class="fas fa-sync-alt mr-2"></i>Reset
              </button>
              <button id="tutorialBtn" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg transition-all">
                <i class="fas fa-question-circle mr-2"></i>Tutorial
              </button>
            </div>
          </div>
          <div class="canvas-grid"></div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <div class="stats-card">
            <div class="flex justify-between mb-2">
              <span class="font-semibold text-gray-600">Revenue</span>
              <span id="revenueValue" class="font-bold text-green-600">$100,000</span>
            </div>
            <div class="progress-bar">
              <div id="revenueBar" class="progress-fill bg-green-500" style="width: 100%"></div>
            </div>
          </div>
          <div class="stats-card">
            <div class="flex justify-between mb-2">
              <span class="font-semibold text-gray-600">Cost</span>
              <span id="costValue" class="font-bold text-red-600">$50,000</span>
            </div>
            <div class="progress-bar">
              <div id="costBar" class="progress-fill bg-red-500" style="width: 50%"></div>
            </div>
          </div>
          <div class="stats-card">
            <div class="flex justify-between mb-2">
              <span class="font-semibold text-gray-600">Profit</span>
              <span id="profitValue" class="font-bold text-blue-600">$50,000</span>
            </div>
            <div class="progress-bar">
              <div id="profitBar" class="progress-fill bg-blue-500" style="width: 50%"></div>
            </div>
          </div>
          <div class="stats-card">
            <div class="flex justify-between mb-2">
              <span class="font-semibold text-gray-600">Margin</span>
              <span id="marginValue" class="font-bold text-purple-600">50%</span>
            </div>
            <div class="progress-bar">
              <div id="marginBar" class="progress-fill bg-purple-500" style="width: 50%"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Sidebar -->
      <div class="w-full lg:w-80 flex flex-col gap-6">
        <div class="bg-white rounded-2xl shadow-xl p-4">
          <h2 class="text-xl font-bold text-gray-800 mb-4">Mini-Cube Config</h2>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">Create New Segment</label>
            <div class="flex gap-2">
              <input id="cubeLabel" type="text" placeholder="Segment Name" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg"/>
              <button id="addCubeBtn" class="px-3 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">Cube Impact</label>
            <div class="space-y-3">
              <div>
                <span class="text-xs text-gray-500">Base Impact (%)</span>
                <input id="cubeValue" type="range" min="-30" max="30" value="10" class="w-full"/>
                <div class="flex justify-between text-xs text-gray-500">
                  <span>-30%</span>
                  <span id="cubeValueDisplay">+10%</span>
                  <span>+30%</span>
                </div>
              </div>
              <div>
                <span class="text-xs text-gray-500">Impact Type</span>
                <select id="cubeImpactType" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                  <option value="direct">Direct (this block only)</option>
                  <option value="adjacent">Adjacent (neighbors)</option>
                  <option value="global">Global (all blocks)</option>
                </select>
              </div>
              <div>
                <span class="text-xs text-gray-500">Multiplier Effect</span>
                <input id="cubeMultiplier" type="range" min="1" max="5" value="1" step="0.1" class="w-full"/>
                <div class="flex justify-between text-xs text-gray-500">
                  <span>1x</span>
                  <span id="cubeMultiplierDisplay">1x</span>
                  <span>5x</span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <h3 class="font-medium text-gray-700 mb-2">Your Cubes</h3>
            <div id="cubePalette" class="cube-container"></div>
          </div>
        </div>
        <div class="bg-white rounded-2xl shadow-xl p-4">
          <h2 class="text-xl font-bold text-gray-800 mb-4">Financial Performance</h2>
          <canvas id="financeChart" height="250"></canvas>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-2xl shadow-xl p-4 mt-6">
      <h2 class="text-xl font-bold text-gray-800 mb-4">Active Interactions</h2>
      <div id="rulesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        <!-- Dynamic rules appear here -->
      </div>
    </div>
  </div>

  <!-- Tutorial Modal -->
  <div id="tutorialModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
    <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl font-bold text-indigo-800">How to Play</h3>
        <button id="closeTutorial" class="text-gray-500 hover:text-gray-700">
          <i class="fas fa-times text-2xl"></i>
        </button>
      </div>
      <div class="space-y-4">
        <div><h4 class="font-bold text-lg text-gray-800 mb-2">1. Canvas Blocks</h4><p class="text-gray-600">Click any block to activate it.</p></div>
        <div><h4 class="font-bold text-lg text-gray-800 mb-2">2. Mini-Cubes</h4><p class="text-gray-600">Create cubes and drag onto blocks to apply effects.</p></div>
        <div><h4 class="font-bold text-lg text-gray-800 mb-2">3. Financial Impact</h4><p class="text-gray-600">Watch real-time updates to revenue, cost, profit, and margin.</p></div>
        <div><h4 class="font-bold text-lg text-gray-800 mb-2">4. Special Interactions</h4><p class="text-gray-600">Combine blocks and cubes for synergies.</p></div>
        <div><h4 class="font-bold text-lg text-gray-800 mb-2">5. Level Up</h4><p class="text-gray-600">Hit >25% margin or investor milestones for bonuses!</p></div>
        <div class="pt-4"><button id="startPlayingBtn" class="w-full py-3 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700">Start Playing</button></div>
      </div>
    </div>
  </div>

  <script>
    // ---------- Data & State ----------
    const canvasBlocks = [
      { id: 1, title: "Customer Segments", color: "var(--customer-segments)", active:false, cubeCount: 0 },
      { id: 2, title: "Value Propositions", color: "var(--value-propositions)", active:false, cubeCount: 0 },
      { id: 3, title: "Channels", color: "var(--channels)", active:false, cubeCount: 0 },
      { id: 4, title: "Customer Relationships", color: "var(--customer-relationships)", active:false, cubeCount: 0 },
      { id: 5, title: "Revenue Streams", color: "var(--revenue-streams)", active:false, cubeCount: 0 },
      { id: 6, title: "Key Resources", color: "var(--key-resources)", active:false, cubeCount: 0 },
      { id: 7, title: "Key Activities", color: "var(--key-activities)", active:false, cubeCount: 0 },
      { id: 8, title: "Key Partnerships", color: "var(--key-partnerships)", active:false, cubeCount: 0 },
      { id: 9, title: "Cost Structure", color: "var(--cost-structure)", active:false, cubeCount: 0 }
    ];
    const base = { revenue:100000, cost:50000 };
    const cubePresets = [
      { label:"Segment 1", baseValue:0.10, impactType:"direct", multiplier:1, color:"#10B981" },
      { label:"Segment 2", baseValue:0.15, impactType:"direct", multiplier:1, color:"#3B82F6" },
      { label:"Segment 3", baseValue:0.08, impactType:"direct", multiplier:1, color:"#EC4899" }
    ];
    const rules = [
      { condition:(blocks)=>false, effect:()=>({}), message:"" }
    ];
    let state = {
      blocks: JSON.parse(JSON.stringify(canvasBlocks)),
      cubes: JSON.parse(JSON.stringify(cubePresets)),
      appliedCubes: [],
      revenue: base.revenue,
      cost: base.cost,
      profit: base.revenue-base.cost,
      margin: (base.revenue-base.cost)/base.revenue,
      activeRules: [],
      levelUp:false
    };

    // ---------- Rendering & Logic ----------
    const canvasGrid = document.querySelector('.canvas-grid');
    const cubePalette = document.getElementById('cubePalette');
    const cubeValue = document.getElementById('cubeValue');
    const cubeValueDisplay = document.getElementById('cubeValueDisplay');
    const cubeImpactType = document.getElementById('cubeImpactType');
    const cubeMultiplier = document.getElementById('cubeMultiplier');
    const cubeMultiplierDisplay = document.getElementById('cubeMultiplierDisplay');
    document.getElementById('addCubeBtn').addEventListener('click', createCube);
    document.getElementById('resetBtn').addEventListener('click', resetGame);
    document.getElementById('tutorialBtn').addEventListener('click', ()=>tutorialModal.classList.remove('hidden'));
    document.getElementById('closeTutorial').addEventListener('click', ()=>tutorialModal.classList.add('hidden'));
    document.getElementById('startPlayingBtn').addEventListener('click', ()=>tutorialModal.classList.add('hidden'));
    cubeValue.addEventListener('input', ()=> cubeValueDisplay.textContent = `${cubeValue.value>=0?'+':''}${cubeValue.value}%`);
    cubeMultiplier.addEventListener('input', ()=> cubeMultiplierDisplay.textContent = `${cubeMultiplier.value}x`);
    
    function initGame(){
      renderCanvasBlocks();
      renderCubePalette();
      setupDragDrop();
      setupSortable();
      updateFinancials();
      renderFinanceChart();
      if(!localStorage.getItem('bmcVisited')){
        tutorialModal.classList.remove('hidden');
        localStorage.setItem('bmcVisited','true');
      }
    }

    function renderCanvasBlocks(){
      canvasGrid.innerHTML='';
      state.blocks.forEach(b=>{
        const el=document.createElement('div');
        el.className=`canvas-block ${b.active?'active':''}`;
        el.style.backgroundColor=`${b.color}20`;
        el.style.border=`2px solid ${b.color}`;
        el.dataset.id=b.id;
        el.innerHTML=`
          <div class="canvas-block-header">
            <span>${b.title}</span>
            <span class="text-xs text-gray-500">${b.cubeCount} items</span>
          </div>
          <div class="canvas-block-content"></div>
        `;
        el.querySelector('.canvas-block-content').append(...state.appliedCubes
          .filter(c=>c.blockId===b.id)
          .map(cube=>{
            const ce=document.createElement('div');
            ce.className='cube';
            ce.style.borderLeft=`4px solid ${cube.color}`;
            ce.innerHTML=`${cube.label}<span class="text-xs text-gray-500 ml-2">${cube.value>0?'+':''}${Math.round(cube.value*100)}%</span>`;
            return ce;
          })
        );
        el.addEventListener('click',()=>toggleBlock(b.id));
        canvasGrid.append(el);
      });
    }

    function renderCubePalette(){
      cubePalette.innerHTML='';
      state.cubes.forEach((c,i)=>{
        const el=document.createElement('div');
        el.className='cube';
        el.style.background=c.color;
        el.style.color=getContrastColor(c.color);
        el.textContent=c.label;
        el.draggable=true;
        el.dataset.index=i;
        el.addEventListener('dragstart',dragStart);
        el.addEventListener('dragend',dragEnd);
        cubePalette.append(el);
      });
    }

    function toggleBlock(id){
      const b=state.blocks.find(x=>x.id===id);
      b.active=!b.active;
      updateFinancials(); checkRules(); renderCanvasBlocks();
    }

    function dragStart(e){
      e.target.classList.add('dragging');
      const i=+e.target.dataset.index, c=state.cubes[i];
      e.dataTransfer.setData('application/json',JSON.stringify({i,label:c.label,color:c.color,value:c.baseValue,impactType:c.impactType,multiplier:c.multiplier}));
      e.dataTransfer.effectAllowed='copy';
    }
    function dragEnd(e){ e.target.classList.remove('dragging'); }

    function setupDragDrop(){
      document.querySelectorAll('.canvas-block').forEach(block=>{
        block.ondragover=e=>{e.preventDefault(); block.style.boxShadow=`0 0 10px ${block.style.borderColor}`;};
        block.ondragleave=_=>block.style.boxShadow='';
        block.ondrop=e=>{
          e.preventDefault(); block.style.boxShadow='';
          try{
            const data=JSON.parse(e.dataTransfer.getData('application/json'));
            applyCubeToBlock(data, +block.dataset.id);
          }catch{}
        };
      });
    }

    function applyCubeToBlock(c,blockId){
      const cube={...c,blockId,id:Date.now()};
      cube.impacts={
        direct:c.value*c.multiplier,
        adjacent:c.value*c.multiplier*0.5,
        global:c.value*c.multiplier*0.2
      };
      state.appliedCubes.push(cube);
      updateFinancials(); checkRules(); renderCanvasBlocks();
      animateDrop(blockId,c.color);
      if(state.margin>0.25&&!state.levelUp){ state.levelUp=true; triggerLevelUp(); }
    }

    function animateDrop(blockId,color){
      const el=document.querySelector(`.canvas-block[data-id="${blockId}"]`);
      el.animate([{transform:'scale(1)',boxShadow:`0 0 0 0 ${color}`},{transform:'scale(1.05)',boxShadow:`0 0 20px 10px ${color}`},{transform:'scale(1)',boxShadow:`0 0 0 0 ${color}`}],{duration:800});
    }

    function updateFinancials(){
      let rev=base.revenue, cost=base.cost;
      state.blocks.forEach(b=>b.cubeCount=0);
      state.appliedCubes.forEach(c=>{
        const b=state.blocks.find(x=>x.id===c.blockId);
        if(!b) return;
        b.cubeCount++;
        // direct
        if(c.impactType==='direct') rev+=rev*c.impacts.direct;
        // adjacent (example: seg→valprop)
        if(c.impactType==='adjacent'&&c.blockId===1){
          rev+=rev*c.impacts.adjacent;
        }
        // global
        if(c.impactType==='global'){
          rev+=rev*c.impacts.global*(state.blocks.length-1);
        }
      });
      // rules
      state.activeRules.forEach(r=>{
        if(r.effect.revenueImpact) rev+=rev*r.effect.revenueImpact;
        if(r.effect.costImpact) cost+=cost*r.effect.costImpact;
      });
      const profit=rev-cost, margin=profit/rev;
      state.revenue=rev; state.cost=cost; state.profit=profit; state.margin=margin;
      updateFinancialUI();
    }

    function updateFinancialUI(){
      document.getElementById('revenueValue').textContent=`$${formatNumber(state.revenue)}`;
      document.getElementById('costValue').textContent=`$${formatNumber(state.cost)}`;
      document.getElementById('profitValue').textContent=`$${formatNumber(state.profit)}`;
      document.getElementById('marginValue').textContent=`${Math.round(state.margin*100)}%`;
      document.getElementById('costBar').style.width=`${(state.cost/state.revenue)*100}%`;
      document.getElementById('profitBar').style.width=`${(state.profit/state.revenue)*100}%`;
      document.getElementById('marginBar').style.width=`${state.margin*100}%`;
      updateFinanceChart();
    }

    function checkRules(){
      state.activeRules=[];
      rules.forEach(r=>{ if(r.condition(state.blocks,state.appliedCubes)) state.activeRules.push(r); });
      renderRules();
    }

    function renderRules(){
      const c=document.getElementById('rulesContainer');
      c.innerHTML='';
      if(state.activeRules.length===0){
        c.innerHTML=`<div class="text-center py-4 text-gray-500"><i class="fas fa-info-circle text-xl mb-2"></i><p>Activate blocks & apply cubes to see interactions.</p></div>`;
      } else {
        state.activeRules.forEach(r=>{
          const el=document.createElement('div');
          el.className='bg-indigo-50 border-l-4 border-indigo-500 p-3 rounded-lg';
          el.innerHTML=`<div class="flex items-start"><i class="fas fa-bolt text-indigo-500 mt-1"></i><p class="ml-3 text-sm text-indigo-700">${r.message}</p></div>`;
          c.append(el);
        });
      }
    }

    function createCube(){
      const label=document.getElementById('cubeLabel').value.trim();
      if(!label) return;
      const baseValue=+document.getElementById('cubeValue').value/100;
      const impactType=document.getElementById('cubeImpactType').value;
      const multiplier=+document.getElementById('cubeMultiplier').value;
      const newCube={label,baseValue,impactType,multiplier,color:getRandomColor()};
      state.cubes.push(newCube);
      renderCubePalette();
      document.getElementById('cubeLabel').value='';
      document.getElementById('cubeValue').value='10';
      cubeValueDisplay.textContent='+10%';
      document.getElementById('cubeMultiplier').value='1';
      cubeMultiplierDisplay.textContent='1x';
    }

    function resetGame(){
      state.blocks=JSON.parse(JSON.stringify(canvasBlocks));
      state.cubes=JSON.parse(JSON.stringify(cubePresets));
      state.appliedCubes=[];
      state.activeRules=[];
      state.levelUp=false;
      renderCanvasBlocks(); renderCubePalette(); renderRules(); updateFinancials(); setupDragDrop(); setupSortable();
    }

    function triggerLevelUp(){
      for(let i=0;i<30;i++) setTimeout(createFirework,i*100);
      const confettiCount=150;
      for(let i=0;i<confettiCount;i++){
        const conf=document.createElement('div');
        conf.className='confetti';
        conf.style.left=`${Math.random()*100}%`;
        conf.style.top='-20px';
        conf.style.backgroundColor=`hsl(${Math.random()*360},100%,50%)`;
        conf.style.width=`${Math.random()*10+5}px`;
        conf.style.height=`${Math.random()*10+5}px`;
        document.body.append(conf);
        anime({targets:conf,translateY:window.innerHeight+50,rotate:Math.random()*360,duration:Math.random()*3000+2000,easing:'easeInOutQuad',complete:()=>conf.remove()});
      }
      const msg=document.createElement('div');
      msg.className='fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-white bg-gradient-to-r from-indigo-600 to-purple-600 px-8 py-6 rounded-2xl shadow-2xl z-50';
      msg.textContent='Level Up! Margin > 25%';
      document.body.append(msg);
      setTimeout(()=>msg.remove(),3000);
    }

    function createFirework(){
      const colors=['#FF5252','#FFD700','#4CAF50','#2196F3','#9C27B0','#FF9800'];
      const f=document.createElement('div');
      f.className='firework';
      f.style.left=`${Math.random()*90+5}%`;
      f.style.top=`${Math.random()*90+5}%`;
      f.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)];
      document.body.append(f);
      anime({targets:f,scale:[0,20],opacity:[1,0],duration:1000,easing:'easeOutExpo',complete:()=>f.remove()});
    }

    // Chart
    let financeChart;
    function renderFinanceChart(){
      const ctx=document.getElementById('financeChart').getContext('2d');
      financeChart=new Chart(ctx,{type:'line',data:{
        labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        datasets:[
          {label:'Revenue',data:Array(12).fill(base.revenue),borderColor:'#10B981',backgroundColor:'rgba(16,185,129,0.1)',tension:0.3,fill:true},
          {label:'Cost',data:Array(12).fill(base.cost),borderColor:'#EF4444',backgroundColor:'rgba(239,68,68,0.1)',tension:0.3,fill:true},
          {label:'Profit',data:Array(12).fill(base.revenue-base.cost),borderColor:'#3B82F6',backgroundColor:'rgba(59,130,246,0.1)',tension:0.3,fill:true}
        ]
      },options:{
        responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'top'},tooltip:{mode:'index',intersect:false}},scales:{y:{beginAtZero:true,ticks:{callback:v=>'$'+v.toLocaleString()}}}
      }});
    }

    function updateFinanceChart(){
      if(!financeChart) return;
      const m=12;
      financeChart.data.datasets[0].data=Array(m).fill().map((_,i)=>base.revenue+(state.revenue-base.revenue)*(i/(m-1)));
      financeChart.data.datasets[1].data=Array(m).fill().map((_,i)=>base.cost+(state.cost-base.cost)*(i/(m-1)));
      financeChart.data.datasets[2].data=financeChart.data.datasets[0].data.map((r,i)=>r-financeChart.data.datasets[1].data[i]);
      financeChart.update();
    }

    // SortableJS setup
    function setupSortable(){
      Sortable.create(document.querySelector('.canvas-grid'),{
        animation:150,
        ghostClass:'sortable-ghost',
        handle:'.canvas-block-header',
        onEnd:()=> {
          const newOrder=[...document.querySelectorAll('.canvas-block')].map(el=>+el.dataset.id);
          state.blocks=newOrder.map(id=>state.blocks.find(b=>b.id===id));
        }
      });
      Sortable.create(document.getElementById('cubePalette'),{
        animation:150,
        ghostClass:'sortable-ghost',
        handle:'.cube',
        onEnd:({oldIndex,newIndex})=>{
          state.cubes.splice(newIndex,0,state.cubes.splice(oldIndex,1)[0]);
        }
      });
    }

    // Helpers
    function formatNumber(n){return n.toLocaleString('en-US',{maximumFractionDigits:0});}
    function getRandomColor(){const cs=['#EF4444','#F59E0B','#10B981','#3B82F6','#6366F1','#8B5CF6','#EC4899','#06B6D4'];return cs[Math.floor(Math.random()*cs.length)];}
    function getContrastColor(h){const r=parseInt(h.substr(1,2),16),g=parseInt(h.substr(3,2),16),b=parseInt(h.substr(5,2),16);return((0.299*r+0.587*g+0.114*b)/255)>0.5?'#000':'#fff';}

    document.addEventListener('DOMContentLoaded',initGame);
  </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/businessmodelreactable" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>