EncodeTheCode · December 20, 2025 13:22
diff --git a/skill_tree_rpg_revision4_v5.htm b/skill_tree_rpg_revision4_v5.htm
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Rogue — Talent Build Mock (HTML5 + JS)</title>
  <style>
    :root{--bg:#0f1724;--panel:#0b1220;--accent:#0ea5e9;--muted:#94a3b8;--node:#111827}
    html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#071226 0%, #021017 100%);color:#e6eef6}
    #game-wrap{display:flex;height:100vh;gap:12px;padding:12px;box-sizing:border-box}
    #left{flex:1;position:relative;display:flex;flex-direction:column}
    canvas{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
    .hud{position:absolute;left:20px;top:20px;background:rgba(2,6,23,0.6);padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
    .hud small{display:block;color:var(--muted);}

    #right{width:380px;display:flex;flex-direction:column;gap:12px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
    .title{font-weight:700;font-size:18px;color:#fff;margin-bottom:8px}
    .muted{color:var(--muted);font-size:13px}

    /* Modal / Talent Window */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1000}
    .talent-window{width:1000px;max-width:calc(100% - 40px);height:680px;background:linear-gradient(180deg,#071226,#07142a);border-radius:12px;padding:18px;display:flex;gap:12px;box-shadow:0 10px 40px rgba(1,4,10,0.8);border:1px solid rgba(255,255,255,0.04)}
    .tree{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center}
    .tree h3{margin:0 0 6px 0}
    .points{font-weight:700;color:var(--accent)}

    .grid{display:grid;grid-template-rows:repeat(7,60px);grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
    .node{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:6px}
    .node.locked{opacity:0.35}
    .node.threshold{background:linear-gradient(180deg, rgba(14,165,233,0.06), rgba(2,6,23,0.02));border:1px dashed rgba(14,165,233,0.18)}
    .node .label{font-size:12px;text-align:center}
    .node .count{position:absolute;right:6px;top:6px;background:rgba(0,0,0,0.4);padding:2px 6px;border-radius:8px;font-size:11px}
    .node .controls{position:absolute;left:6px;bottom:6px;display:flex;gap:6px}
    .btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:2px 6px;border-radius:6px;color:var(--muted);font-weight:700;cursor:pointer}
    .btn:disabled{opacity:0.35;cursor:not-allowed}

    .footer{display:flex;justify-content:space-between;margin-top:10px}
    .close{background:var(--accent);border:none;padding:8px 10px;border-radius:8px;color:#022235;font-weight:700;cursor:pointer}

    /* Tooltip */
    .tooltip{position:fixed;background:#071226;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;pointer-events:none;display:none;max-width:300px;z-index:2000}
    .tooltip h4{margin:0 0 4px 0}
    .tooltip p{margin:0;color:var(--muted);font-size:13px}

    /* Simple responsive */
    @media (max-width:1100px){#right{display:none}}  
  </style>
 </head>
 <body>
  <div id="game-wrap">
    <div id="left">
      <canvas id="game" width="960" height="640"></canvas>
      <div class="hud">
        <div><strong>Rogue Mock — Playable</strong></div>
        <small>Move: WASD / Aim: mouse — Open talent window: <strong>K</strong></small>
      </div>
    </div>

    <div id="right">
      <div class="card">
        <div class="title">Controls</div>
        <div class="muted">Use WASD to move the blue orb. Move your mouse to aim the black line.</div>
        <hr style="margin:10px 0;opacity:0.07">
        <div class="muted">Open/close talent window with <strong>K</strong>. Click + to place a point (subject to requirements). You cannot remove points unless you call <code>reset_talents()</code>.</div>
      </div>

      <div class="card">
        <div class="title">Talent Points</div>
        <div style="display:flex;gap:10px;align-items:center"><div>Available:</div><div class="points" id="availablePoints">51</div></div>
        <div style="margin-top:8px;color:var(--muted)">Baseline: 51 points (WoW Classic). Tier unlocks: 5, 10, 15, 20, 25, 30 points in a tree.</div>
      </div>

      <div class="card">
        <div class="title">Quick Tips</div>
        <ul style="margin:6px 0 0 18px;color:var(--muted)">
          <li>Some talents are single-point (unique). Others allow multiple points.</li>
          <li>Invest points in a tree to unlock higher-tier talents.</li>
          <li>Third row (row index 2) unlocks if at least half of the talents in each of the first two rows have at least one point, OR when the tree reaches the usual 10-point threshold.</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Talent overlay -->
  <div class="overlay" id="overlay" aria-hidden="true">
    <div class="talent-window" role="dialog" aria-modal="true">
      <div class="tree" id="tree0">
        <h3>Stalker</h3>
        <div class="muted">A nimble specialist who relies on stealth and critical strikes.</div>
        <div style="margin-top:8px">Points: <span class="points" id="tree0Points">0</span></div>
        <div class="grid" data-tree="0" id="grid0"></div>
      </div>

      <div class="tree" id="tree1">
        <h3>Duelist</h3>
        <div class="muted">A master of sustained combat and tactical advantage.</div>
        <div style="margin-top:8px">Points: <span class="points" id="tree1Points">0</span></div>
        <div class="grid" data-tree="1" id="grid1"></div>
      </div>

      <div class="tree" id="tree2">
        <h3>Nightblade</h3>
        <div class="muted">Focuses on shadowy tricks and speed to outmaneuver foes.</div>
        <div style="margin:8px 0 0 0">Points: <span class="points" id="tree2Points">0</span></div>
        <div class="grid" data-tree="2" id="grid2"></div>
      </div>

    </div>
  </div>

  <div class="tooltip" id="tooltip" role="tooltip"></div>

  <script>
    // === Configuration ===
    const TOTAL_POINTS = 51; // same as WoW Classic baseline
    const ROWS = 7, COLS = 3;
    // Exact tier unlock thresholds (points spent in that tree required before placing a point in that tier)
    const TIER_THRESHOLDS = [0,5,10,15,20,25,30]; // row index -> required points
    function tierRequirement(row){ return TIER_THRESHOLDS[row] ?? (row*5); }

    // We'll programmatically generate talents per tree. Each talent has: id,name,desc,max,spent,prereq(optional)
    const trees = [];
    const treeNames = ['Stalker','Duelist','Nightblade'];

    function makeTalentId(ti,row,col){return `t${ti}r${row}c${col}`}

    // Updated max ranks so each tree can reach 30+ points (allowing all tiers to be unlocked)
    function maxRanksFor(ti,row,col){
      // row 0: sides 2, center 3 => 7
      if(row === 0) return (col === 1 ? 3 : 2);
      // row 1: center 2, sides 1 => 4
      if(row === 1) return (col === 1 ? 2 : 1);
      // row 2: center 3, sides 1 => 5
      if(row === 2) return (col === 1 ? 3 : 1);
      // row 3: center 2, sides 1 => 4
      if(row === 3) return (col === 1 ? 2 : 1);
      // row 4: center 3, sides 1 => 5
      if(row === 4) return (col === 1 ? 3 : 1);
      // row 5: center 2, sides 1 => 4
      if(row === 5) return (col === 1 ? 2 : 1);
      // row 6: center 2, sides 1 => 4
      if(row === 6) return (col === 1 ? 2 : 1);
      return 1;
    }

    const ADJ = ['Quick','Keen','Shadow','Deadly','Fleet','Razor','Lethal'];
    const NNS = ['Strike','Edge','Trick','Focus','Assault','Ambush','Feint'];

    // Build talents and ensure ALL start at 0 spent by default
    for(let ti=0;ti<3;ti++){
      const talents = [];
      for(let r=0;r<ROWS;r++){
        for(let c=0;c<COLS;c++){
          const id = makeTalentId(ti,r,c);
          const isThreshold = (c===1 && r>=1);
          const name = isThreshold ? `Tier ${r+1} Gate` : `${ADJ[(r+c+ti)%ADJ.length]} ${NNS[(r*3+c+ti)%NNS.length]}`;
          const desc = isThreshold ? `Tier ${r+1} marker. Becomes active when the required tree conditions are met.` : `Tier ${r+1} talent. ${name} grants a fantasy passive.`;
          const max = isThreshold ? 1 : maxRanksFor(ti,r,c);
          // IMPORTANT: spent always initialized to 0 here to meet your request
          const talent = {id,name,desc,max,spent:0,row:r,col:c,prereq:null,isThreshold:isThreshold,threshold: isThreshold ? tierRequirement(r) : null};

          if(r >= 2 && !isThreshold){
            const aboveId = makeTalentId(ti, Math.max(0,r-1), c);
            talent.prereq = {id: aboveId, points: 1};
          }

          talents.push(talent);
        }
      }
      trees.push({name:treeNames[ti],talents,spent:0});
    }

    // === State ===
    let availablePoints = TOTAL_POINTS;

    // expose reset function to global scope
    window.reset_talents = function(){
      if(!confirm('Reset all talent points in all trees?')) return;
      for(const tr of trees) for(const t of tr.talents) t.spent = 0;
      availablePoints = TOTAL_POINTS;
      refreshUI(); saveLS();
    }

    // DOM refs
    const overlay = document.getElementById('overlay');
    const availableEl = document.getElementById('availablePoints');
    const tooltip = document.getElementById('tooltip');

    // Build UI grid
    function buildGrids(){
      for(let ti=0;ti<3;ti++){
        const grid = document.getElementById(`grid${ti}`);
        grid.innerHTML='';
        const talents = trees[ti].talents;
        for(const t of talents){
          const node = document.createElement('div');
          node.className = 'node';
          if(t.isThreshold) node.classList.add('threshold');
          node.dataset.id = t.id;
          node.dataset.tree = ti;
          node.dataset.row = t.row;
          node.dataset.col = t.col;

          const label = document.createElement('div'); label.className='label'; label.innerText = t.name;
          const count = document.createElement('div'); count.className='count'; count.innerText = `${t.spent}/${t.max}`;
          const controls = document.createElement('div'); controls.className='controls';

          // All talents (including threshold nodes) can now be clicked to spend a single point (thresholds max=1)
          const plus = document.createElement('button'); plus.className='btn'; plus.innerText='+';
          plus.addEventListener('click', (e)=>{e.stopPropagation(); trySpendPoint(t.id);});
          controls.appendChild(plus);

          node.appendChild(label); node.appendChild(count); node.appendChild(controls);

          node.addEventListener('mouseenter',(e)=>{showTooltip(t,e.clientX,e.clientY);});
          node.addEventListener('mousemove',(e)=>{moveTooltip(e.clientX,e.clientY);});
          node.addEventListener('mouseleave',hideTooltip);

          grid.appendChild(node);
        }
      }
      refreshUI();
    }

    function pointsSpentInTree(ti){
      // thresholds count if you've placed a point into them
      return trees[ti].talents.reduce((s,t)=> s + (t.spent || 0), 0);
    }

    function findTalentById(id){
      for(let ti=0;ti<3;ti++){
        const t = trees[ti].talents.find(x=>x.id===id);
        if(t) return {tal:t, tree:ti};
      }
      return null;
    }

    // third-row half-fill logic
    function halfFilledPriorRows(ti){
      const tr = trees[ti];
      for(let r=0;r<=1;r++){
        const rowTalents = tr.talents.filter(x=>x.row===r && !x.isThreshold);
        const need = Math.ceil(rowTalents.length/2);
        const have = rowTalents.reduce((s,x)=> s + (x.spent>0?1:0), 0);
        if(have < need) return false;
      }
      return true;
    }

    function isTalentUnlocked(ti,t){
      // For threshold nodes: unlocked when tree points >= threshold OR (row2 special rule)
      if(t.isThreshold){
        return pointsSpentInTree(ti) >= t.threshold || (t.row===2 && halfFilledPriorRows(ti));
      }

      // Special rule for third row (index 2)
      if(t.row === 2){
        const byPoints = pointsSpentInTree(ti) >= tierRequirement(2);
        const byHalf = halfFilledPriorRows(ti);
        if(!(byPoints || byHalf)) return false;
      } else {
        const req = tierRequirement(t.row);
        if(pointsSpentInTree(ti) < req) return false;
      }

      // check explicit prerequisite talent if present
      if(t.prereq){
        const p = findTalentById(t.prereq.id);
        if(!p) return false;
        if(p.tal.isThreshold){
          if(pointsSpentInTree(ti) < p.tal.threshold) return false;
        } else {
          if(p.tal.spent < t.prereq.points) return false;
        }
      }

      return true;
    }

    function trySpendPoint(id){
      const info = findTalentById(id); if(!info) return;
      const t = info.tal; const ti = info.tree;
      if(availablePoints <=0) return; // no points
      if(t.spent >= t.max) return;
      if(!isTalentUnlocked(ti,t)){
        flashNode(id,'locked'); return;
      }
      // spend one point (even threshold nodes only accept 1)
      t.spent += 1; availablePoints -=1; refreshUI(); saveLS();
    }

    function flashNode(id,cls){
      const el = document.querySelector(`[data-id='${id}']`);
      if(!el) return; el.classList.add(cls);
      setTimeout(()=>el.classList.remove(cls),350);
    }

    function refreshUI(){
      for(let ti=0;ti<3;ti++){
        const grid = document.getElementById(`grid${ti}`);
        const nodes = grid.querySelectorAll('.node');
        nodes.forEach(n=>{
          const id = n.dataset.id; const info = findTalentById(id);
          const t = info.tal;
          // always show actual spent value
          n.querySelector('.count').innerText = `${t.spent}/${t.max}`;
          const unlocked = isTalentUnlocked(ti,t);
          if(unlocked) n.classList.remove('locked'); else n.classList.add('locked');
          const plus = n.querySelector('.controls .btn');
          if(plus) plus.disabled = !(availablePoints>0 && t.spent < t.max && unlocked);
        });
        document.getElementById(`tree${ti}Points`).innerText = pointsSpentInTree(ti);
      }
      availableEl.innerText = availablePoints;
    }

    function showTooltip(t,eX,eY){
      tooltip.style.display='block';
      const ti = findTalentById(t.id).tree;
      const unlocked = isTalentUnlocked(ti,t);
      const extra = (t.row===2 && !t.isThreshold) ? `<div style="margin-top:6px;color:var(--muted);font-size:12px">Note: this row also unlocks when half of talents in rows 1 and 2 have at least 1 point.</div>` : '';
      const status = unlocked ? '<div style="color:var(--accent);font-weight:700;margin-top:6px">Unlocked</div>' : `<div style="color:var(--muted);margin-top:6px">Locked — requires ${t.isThreshold? t.threshold : tierRequirement(t.row)} pts or prerequisites</div>`;
      tooltip.innerHTML = `<h4>${t.name} <span style="float:right;font-weight:700;color:var(--accent)">${t.spent}/${t.max}</span></h4><p>${t.desc}</p>${status}${extra}`;
      moveTooltip(eX,eY);
    }
    function moveTooltip(x,y){
      const pad = 14;
      const winW = window.innerWidth, winH = window.innerHeight;
      const tw = tooltip.offsetWidth || 260, th = tooltip.offsetHeight || 60;
      let left = x + pad; let top = y + pad;
      if(left + tw > winW) left = x - tw - pad;
      if(top + th > winH) top = y - th - pad;
      tooltip.style.left = (left) + 'px'; tooltip.style.top = (top) + 'px';
    }
    function hideTooltip(){tooltip.style.display='none'}

    // Toggle overlay with key
    let overlayOpen = false;
    function toggleOverlay(){overlayOpen = !overlayOpen; overlay.style.display = overlayOpen?'flex':'none'; overlay.setAttribute('aria-hidden', overlayOpen ? 'false' : 'true');}
    document.addEventListener('keydown',(e)=>{ if(e.key.toLowerCase()==='k'){ toggleOverlay(); } if(e.key==='Escape' && overlayOpen){ toggleOverlay(); }});

    // Initialize UI (talents start at 0; no auto-load)
    buildGrids();

    // === Game canvas: player movement and aiming ===
    const canvasGame = document.getElementById('game');
    const ctxGame = canvasGame.getContext('2d');
    const playerState = {x:canvasGame.width/2,y:canvasGame.height/2, speed:180, aimX:canvasGame.width/2, aimY:canvasGame.height/2};
    const keysState = {};
    window.addEventListener('keydown', e=>{ keysState[e.key.toLowerCase()] = true; });
    window.addEventListener('keyup', e=>{ keysState[e.key.toLowerCase()] = false; });
    canvasGame.addEventListener('mousemove',(e)=>{ const rect = canvasGame.getBoundingClientRect(); playerState.aimX = e.clientX-rect.left; playerState.aimY = e.clientY-rect.top; });

    let lastFrame = performance.now();
    function frame(now){ const dt = Math.min(0.06,(now-lastFrame)/1000); lastFrame = now; update(dt); draw(); requestAnimationFrame(frame);} 
    function update(dt){ let dx=0,dy=0; if(keysState['w']||keysState['arrowup']) dy-=1; if(keysState['s']||keysState['arrowdown']) dy+=1; if(keysState['a']||keysState['arrowleft']) dx-=1; if(keysState['d']||keysState['arrowright']) dx+=1; const mag = Math.hypot(dx,dy); if(mag>0){dx/=mag;dy/=mag} playerState.x += dx*playerState.speed*dt; playerState.y += dy*playerState.speed*dt; playerState.x = Math.max(16,Math.min(canvasGame.width-16,playerState.x)); playerState.y = Math.max(16,Math.min(canvasGame.height-16,playerState.y)); }
    function draw(){ ctxGame.clearRect(0,0,canvasGame.width,canvasGame.height); ctxGame.save(); for(let i=0;i<canvasGame.width;i+=40){ctxGame.beginPath();ctxGame.moveTo(i,0);ctxGame.lineTo(i,canvasGame.height);ctxGame.strokeStyle='rgba(255,255,255,0.02)';ctxGame.lineWidth=1;ctxGame.stroke();} for(let j=0;j<canvasGame.height;j+=40){ctxGame.beginPath();ctxGame.moveTo(0,j);ctxGame.lineTo(canvasGame.width,j);ctxGame.strokeStyle='rgba(255,255,255,0.02)';ctxGame.lineWidth=1;ctxGame.stroke();} ctxGame.restore(); ctxGame.beginPath(); ctxGame.moveTo(playerState.x,playerState.y); ctxGame.lineTo(playerState.aimX,playerState.aimY); ctxGame.strokeStyle='#000'; ctxGame.lineWidth=3; ctxGame.stroke(); ctxGame.beginPath(); ctxGame.arc(playerState.x,playerState.y,14,0,Math.PI*2); ctxGame.fillStyle='#2ea3ff'; ctxGame.fill(); ctxGame.beginPath(); ctxGame.arc(playerState.x,playerState.y,14,0,Math.PI*2); ctxGame.strokeStyle='rgba(0,0,0,0.25)'; ctxGame.lineWidth=2; ctxGame.stroke(); ctxGame.beginPath(); ctxGame.arc(playerState.aimX,playerState.aimY,4,0,Math.PI*2); ctxGame.fillStyle='rgba(255,255,255,0.9)'; ctxGame.fill(); }
    requestAnimationFrame(frame);

    // Export/Save helpers - now saving actual spent values for thresholds too
    function exportBuild(){ const data = {trees:trees.map(t=>t.talents.map(x=>x.spent)), available:availablePoints}; const blob = new Blob([JSON.stringify(data,null,2)],{type:'application/json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'rogue_build.json'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);} 
    document.addEventListener('keydown',(e)=>{ if((e.ctrlKey||e.metaKey) && e.key.toLowerCase()==='e'){ e.preventDefault(); exportBuild(); alert('Build exported to rogue_build.json'); }});

    function saveLS(){ const payload = {trees:trees.map(t=>t.talents.map(x=>x.spent)), available:availablePoints}; localStorage.setItem('rogue_mock_build',JSON.stringify(payload)); }
    function loadLS(){ const raw = localStorage.getItem('rogue_mock_build'); if(!raw) return; try { const s = JSON.parse(raw); if(s && s.trees){ s.trees.forEach((arr,ti)=>{ trees[ti].talents.forEach((t,i)=>{ t.spent = arr[i] || 0 }); }); availablePoints = (typeof s.available === 'number') ? s.available : TOTAL_POINTS; refreshUI(); } } catch(e){ console.warn('Failed to load saved build:', e); }}
    // autosave
    setInterval(()=>{ saveLS(); },2000);

  </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>Rogue — Talent Build Mock (HTML5 + JS)</title>
	<style>
	:root{--bg:#0f1724;--panel:#0b1220;--accent:#0ea5e9;--muted:#94a3b8;--node:#111827}
	html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#071226 0%, #021017 100%);color:#e6eef6}
	#game-wrap{display:flex;height:100vh;gap:12px;padding:12px;box-sizing:border-box}
	#left{flex:1;position:relative;display:flex;flex-direction:column}
	canvas{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
	.hud{position:absolute;left:20px;top:20px;background:rgba(2,6,23,0.6);padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
	.hud small{display:block;color:var(--muted);}

	#right{width:380px;display:flex;flex-direction:column;gap:12px}
	.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
	.title{font-weight:700;font-size:18px;color:#fff;margin-bottom:8px}
	.muted{color:var(--muted);font-size:13px}

	/* Modal / Talent Window */
	.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1000}
	.talent-window{width:1000px;max-width:calc(100% - 40px);height:680px;background:linear-gradient(180deg,#071226,#07142a);border-radius:12px;padding:18px;display:flex;gap:12px;box-shadow:0 10px 40px rgba(1,4,10,0.8);border:1px solid rgba(255,255,255,0.04)}
	.tree{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center}
	.tree h3{margin:0 0 6px 0}
	.points{font-weight:700;color:var(--accent)}

	.grid{display:grid;grid-template-rows:repeat(7,60px);grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
	.node{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:6px}
	.node.locked{opacity:0.35}
	.node.threshold{background:linear-gradient(180deg, rgba(14,165,233,0.06), rgba(2,6,23,0.02));border:1px dashed rgba(14,165,233,0.18)}
	.node .label{font-size:12px;text-align:center}
	.node .count{position:absolute;right:6px;top:6px;background:rgba(0,0,0,0.4);padding:2px 6px;border-radius:8px;font-size:11px}
	.node .controls{position:absolute;left:6px;bottom:6px;display:flex;gap:6px}
	.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:2px 6px;border-radius:6px;color:var(--muted);font-weight:700;cursor:pointer}
	.btn:disabled{opacity:0.35;cursor:not-allowed}

	.footer{display:flex;justify-content:space-between;margin-top:10px}
	.close{background:var(--accent);border:none;padding:8px 10px;border-radius:8px;color:#022235;font-weight:700;cursor:pointer}

	/* Tooltip */
	.tooltip{position:fixed;background:#071226;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;pointer-events:none;display:none;max-width:300px;z-index:2000}
	.tooltip h4{margin:0 0 4px 0}
	.tooltip p{margin:0;color:var(--muted);font-size:13px}

	/* Simple responsive */
	@media (max-width:1100px){#right{display:none}}
	</style>
	</head>
	<body>
	<div id="game-wrap">
	<div id="left">
	<canvas id="game" width="960" height="640"></canvas>
	<div class="hud">
	<div><strong>Rogue Mock — Playable</strong></div>
	<small>Move: WASD / Aim: mouse — Open talent window: <strong>K</strong></small>
	</div>
	</div>

	<div id="right">
	<div class="card">
	<div class="title">Controls</div>
	<div class="muted">Use WASD to move the blue orb. Move your mouse to aim the black line.</div>
	<hr style="margin:10px 0;opacity:0.07">
	<div class="muted">Open/close talent window with <strong>K</strong>. Click + to place a point (subject to requirements). You cannot remove points unless you call <code>reset_talents()</code>.</div>
	</div>

	<div class="card">
	<div class="title">Talent Points</div>
	<div style="display:flex;gap:10px;align-items:center"><div>Available:</div><div class="points" id="availablePoints">51</div></div>
	<div style="margin-top:8px;color:var(--muted)">Baseline: 51 points (WoW Classic). Tier unlocks: 5, 10, 15, 20, 25, 30 points in a tree.</div>
	</div>

	<div class="card">
	<div class="title">Quick Tips</div>
	<ul style="margin:6px 0 0 18px;color:var(--muted)">
	<li>Some talents are single-point (unique). Others allow multiple points.</li>
	<li>Invest points in a tree to unlock higher-tier talents.</li>
	<li>Third row (row index 2) unlocks if at least half of the talents in each of the first two rows have at least one point, OR when the tree reaches the usual 10-point threshold.</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Talent overlay -->
	<div class="overlay" id="overlay" aria-hidden="true">
	<div class="talent-window" role="dialog" aria-modal="true">
	<div class="tree" id="tree0">
	<h3>Stalker</h3>
	<div class="muted">A nimble specialist who relies on stealth and critical strikes.</div>
	<div style="margin-top:8px">Points: <span class="points" id="tree0Points">0</span></div>
	<div class="grid" data-tree="0" id="grid0"></div>
	</div>

	<div class="tree" id="tree1">
	<h3>Duelist</h3>
	<div class="muted">A master of sustained combat and tactical advantage.</div>
	<div style="margin-top:8px">Points: <span class="points" id="tree1Points">0</span></div>
	<div class="grid" data-tree="1" id="grid1"></div>
	</div>

	<div class="tree" id="tree2">
	<h3>Nightblade</h3>
	<div class="muted">Focuses on shadowy tricks and speed to outmaneuver foes.</div>
	<div style="margin:8px 0 0 0">Points: <span class="points" id="tree2Points">0</span></div>
	<div class="grid" data-tree="2" id="grid2"></div>
	</div>

	</div>
	</div>

	<div class="tooltip" id="tooltip" role="tooltip"></div>

	<script>
	// === Configuration ===
	const TOTAL_POINTS = 51; // same as WoW Classic baseline
	const ROWS = 7, COLS = 3;
	// Exact tier unlock thresholds (points spent in that tree required before placing a point in that tier)
	const TIER_THRESHOLDS = [0,5,10,15,20,25,30]; // row index -> required points
	function tierRequirement(row){ return TIER_THRESHOLDS[row] ?? (row*5); }

	// We'll programmatically generate talents per tree. Each talent has: id,name,desc,max,spent,prereq(optional)
	const trees = [];
	const treeNames = ['Stalker','Duelist','Nightblade'];

	function makeTalentId(ti,row,col){return `t${ti}r${row}c${col}`}

	// Updated max ranks so each tree can reach 30+ points (allowing all tiers to be unlocked)
	function maxRanksFor(ti,row,col){
	// row 0: sides 2, center 3 => 7
	if(row === 0) return (col === 1 ? 3 : 2);
	// row 1: center 2, sides 1 => 4
	if(row === 1) return (col === 1 ? 2 : 1);
	// row 2: center 3, sides 1 => 5
	if(row === 2) return (col === 1 ? 3 : 1);
	// row 3: center 2, sides 1 => 4
	if(row === 3) return (col === 1 ? 2 : 1);
	// row 4: center 3, sides 1 => 5
	if(row === 4) return (col === 1 ? 3 : 1);
	// row 5: center 2, sides 1 => 4
	if(row === 5) return (col === 1 ? 2 : 1);
	// row 6: center 2, sides 1 => 4
	if(row === 6) return (col === 1 ? 2 : 1);
	return 1;
	}

	const ADJ = ['Quick','Keen','Shadow','Deadly','Fleet','Razor','Lethal'];
	const NNS = ['Strike','Edge','Trick','Focus','Assault','Ambush','Feint'];

	// Build talents and ensure ALL start at 0 spent by default
	for(let ti=0;ti<3;ti++){
	const talents = [];
	for(let r=0;r<ROWS;r++){
	for(let c=0;c<COLS;c++){
	const id = makeTalentId(ti,r,c);
	const isThreshold = (c===1 && r>=1);
	const name = isThreshold ? `Tier ${r+1} Gate` : `${ADJ[(r+c+ti)%ADJ.length]} ${NNS[(r*3+c+ti)%NNS.length]}`;
	const desc = isThreshold ? `Tier ${r+1} marker. Becomes active when the required tree conditions are met.` : `Tier ${r+1} talent. ${name} grants a fantasy passive.`;
	const max = isThreshold ? 1 : maxRanksFor(ti,r,c);
	// IMPORTANT: spent always initialized to 0 here to meet your request
	const talent = {id,name,desc,max,spent:0,row:r,col:c,prereq:null,isThreshold:isThreshold,threshold: isThreshold ? tierRequirement(r) : null};

	if(r >= 2 && !isThreshold){
	const aboveId = makeTalentId(ti, Math.max(0,r-1), c);
	talent.prereq = {id: aboveId, points: 1};
	}

	talents.push(talent);
	}
	}
	trees.push({name:treeNames[ti],talents,spent:0});
	}

	// === State ===
	let availablePoints = TOTAL_POINTS;

	// expose reset function to global scope
	window.reset_talents = function(){
	if(!confirm('Reset all talent points in all trees?')) return;
	for(const tr of trees) for(const t of tr.talents) t.spent = 0;
	availablePoints = TOTAL_POINTS;
	refreshUI(); saveLS();
	}

	// DOM refs
	const overlay = document.getElementById('overlay');
	const availableEl = document.getElementById('availablePoints');
	const tooltip = document.getElementById('tooltip');

	// Build UI grid
	function buildGrids(){
	for(let ti=0;ti<3;ti++){
	const grid = document.getElementById(`grid${ti}`);
	grid.innerHTML='';
	const talents = trees[ti].talents;
	for(const t of talents){
	const node = document.createElement('div');
	node.className = 'node';
	if(t.isThreshold) node.classList.add('threshold');
	node.dataset.id = t.id;
	node.dataset.tree = ti;
	node.dataset.row = t.row;
	node.dataset.col = t.col;

	const label = document.createElement('div'); label.className='label'; label.innerText = t.name;
	const count = document.createElement('div'); count.className='count'; count.innerText = `${t.spent}/${t.max}`;
	const controls = document.createElement('div'); controls.className='controls';

	// All talents (including threshold nodes) can now be clicked to spend a single point (thresholds max=1)
	const plus = document.createElement('button'); plus.className='btn'; plus.innerText='+';
	plus.addEventListener('click', (e)=>{e.stopPropagation(); trySpendPoint(t.id);});
	controls.appendChild(plus);

	node.appendChild(label); node.appendChild(count); node.appendChild(controls);

	node.addEventListener('mouseenter',(e)=>{showTooltip(t,e.clientX,e.clientY);});
	node.addEventListener('mousemove',(e)=>{moveTooltip(e.clientX,e.clientY);});
	node.addEventListener('mouseleave',hideTooltip);

	grid.appendChild(node);
	}
	}
	refreshUI();
	}

	function pointsSpentInTree(ti){
	// thresholds count if you've placed a point into them
	return trees[ti].talents.reduce((s,t)=> s + (t.spent \|\| 0), 0);
	}

	function findTalentById(id){
	for(let ti=0;ti<3;ti++){
	const t = trees[ti].talents.find(x=>x.id===id);
	if(t) return {tal:t, tree:ti};
	}
	return null;
	}

	// third-row half-fill logic
	function halfFilledPriorRows(ti){
	const tr = trees[ti];
	for(let r=0;r<=1;r++){
	const rowTalents = tr.talents.filter(x=>x.row===r && !x.isThreshold);
	const need = Math.ceil(rowTalents.length/2);
	const have = rowTalents.reduce((s,x)=> s + (x.spent>0?1:0), 0);
	if(have < need) return false;
	}
	return true;
	}

	function isTalentUnlocked(ti,t){
	// For threshold nodes: unlocked when tree points >= threshold OR (row2 special rule)
	if(t.isThreshold){
	return pointsSpentInTree(ti) >= t.threshold \|\| (t.row===2 && halfFilledPriorRows(ti));
	}

	// Special rule for third row (index 2)
	if(t.row === 2){
	const byPoints = pointsSpentInTree(ti) >= tierRequirement(2);
	const byHalf = halfFilledPriorRows(ti);
	if(!(byPoints \|\| byHalf)) return false;
	} else {
	const req = tierRequirement(t.row);
	if(pointsSpentInTree(ti) < req) return false;
	}

	// check explicit prerequisite talent if present
	if(t.prereq){
	const p = findTalentById(t.prereq.id);
	if(!p) return false;
	if(p.tal.isThreshold){
	if(pointsSpentInTree(ti) < p.tal.threshold) return false;
	} else {
	if(p.tal.spent < t.prereq.points) return false;
	}
	}

	return true;
	}

	function trySpendPoint(id){
	const info = findTalentById(id); if(!info) return;
	const t = info.tal; const ti = info.tree;
	if(availablePoints <=0) return; // no points
	if(t.spent >= t.max) return;
	if(!isTalentUnlocked(ti,t)){
	flashNode(id,'locked'); return;
	}
	// spend one point (even threshold nodes only accept 1)
	t.spent += 1; availablePoints -=1; refreshUI(); saveLS();
	}

	function flashNode(id,cls){
	const el = document.querySelector(`[data-id='${id}']`);
	if(!el) return; el.classList.add(cls);
	setTimeout(()=>el.classList.remove(cls),350);
	}

	function refreshUI(){
	for(let ti=0;ti<3;ti++){
	const grid = document.getElementById(`grid${ti}`);
	const nodes = grid.querySelectorAll('.node');
	nodes.forEach(n=>{
	const id = n.dataset.id; const info = findTalentById(id);
	const t = info.tal;
	// always show actual spent value
	n.querySelector('.count').innerText = `${t.spent}/${t.max}`;
	const unlocked = isTalentUnlocked(ti,t);
	if(unlocked) n.classList.remove('locked'); else n.classList.add('locked');
	const plus = n.querySelector('.controls .btn');
	if(plus) plus.disabled = !(availablePoints>0 && t.spent < t.max && unlocked);
	});
	document.getElementById(`tree${ti}Points`).innerText = pointsSpentInTree(ti);
	}
	availableEl.innerText = availablePoints;
	}

	function showTooltip(t,eX,eY){
	tooltip.style.display='block';
	const ti = findTalentById(t.id).tree;
	const unlocked = isTalentUnlocked(ti,t);
	const extra = (t.row===2 && !t.isThreshold) ? `<div style="margin-top:6px;color:var(--muted);font-size:12px">Note: this row also unlocks when half of talents in rows 1 and 2 have at least 1 point.</div>` : '';
	const status = unlocked ? '<div style="color:var(--accent);font-weight:700;margin-top:6px">Unlocked</div>' : `<div style="color:var(--muted);margin-top:6px">Locked — requires ${t.isThreshold? t.threshold : tierRequirement(t.row)} pts or prerequisites</div>`;
	tooltip.innerHTML = `<h4>${t.name} <span style="float:right;font-weight:700;color:var(--accent)">${t.spent}/${t.max}</span></h4><p>${t.desc}</p>${status}${extra}`;
	moveTooltip(eX,eY);
	}
	function moveTooltip(x,y){
	const pad = 14;
	const winW = window.innerWidth, winH = window.innerHeight;
	const tw = tooltip.offsetWidth \|\| 260, th = tooltip.offsetHeight \|\| 60;
	let left = x + pad; let top = y + pad;
	if(left + tw > winW) left = x - tw - pad;
	if(top + th > winH) top = y - th - pad;
	tooltip.style.left = (left) + 'px'; tooltip.style.top = (top) + 'px';
	}
	function hideTooltip(){tooltip.style.display='none'}

	// Toggle overlay with key
	let overlayOpen = false;
	function toggleOverlay(){overlayOpen = !overlayOpen; overlay.style.display = overlayOpen?'flex':'none'; overlay.setAttribute('aria-hidden', overlayOpen ? 'false' : 'true');}
	document.addEventListener('keydown',(e)=>{ if(e.key.toLowerCase()==='k'){ toggleOverlay(); } if(e.key==='Escape' && overlayOpen){ toggleOverlay(); }});

	// Initialize UI (talents start at 0; no auto-load)
	buildGrids();

	// === Game canvas: player movement and aiming ===
	const canvasGame = document.getElementById('game');
	const ctxGame = canvasGame.getContext('2d');
	const playerState = {x:canvasGame.width/2,y:canvasGame.height/2, speed:180, aimX:canvasGame.width/2, aimY:canvasGame.height/2};
	const keysState = {};
	window.addEventListener('keydown', e=>{ keysState[e.key.toLowerCase()] = true; });
	window.addEventListener('keyup', e=>{ keysState[e.key.toLowerCase()] = false; });
	canvasGame.addEventListener('mousemove',(e)=>{ const rect = canvasGame.getBoundingClientRect(); playerState.aimX = e.clientX-rect.left; playerState.aimY = e.clientY-rect.top; });

	let lastFrame = performance.now();
	function frame(now){ const dt = Math.min(0.06,(now-lastFrame)/1000); lastFrame = now; update(dt); draw(); requestAnimationFrame(frame);}
	function update(dt){ let dx=0,dy=0; if(keysState['w']\|\|keysState['arrowup']) dy-=1; if(keysState['s']\|\|keysState['arrowdown']) dy+=1; if(keysState['a']\|\|keysState['arrowleft']) dx-=1; if(keysState['d']\|\|keysState['arrowright']) dx+=1; const mag = Math.hypot(dx,dy); if(mag>0){dx/=mag;dy/=mag} playerState.x += dxplayerState.speeddt; playerState.y += dyplayerState.speeddt; playerState.x = Math.max(16,Math.min(canvasGame.width-16,playerState.x)); playerState.y = Math.max(16,Math.min(canvasGame.height-16,playerState.y)); }
	function draw(){ ctxGame.clearRect(0,0,canvasGame.width,canvasGame.height); ctxGame.save(); for(let i=0;i<canvasGame.width;i+=40){ctxGame.beginPath();ctxGame.moveTo(i,0);ctxGame.lineTo(i,canvasGame.height);ctxGame.strokeStyle='rgba(255,255,255,0.02)';ctxGame.lineWidth=1;ctxGame.stroke();} for(let j=0;j<canvasGame.height;j+=40){ctxGame.beginPath();ctxGame.moveTo(0,j);ctxGame.lineTo(canvasGame.width,j);ctxGame.strokeStyle='rgba(255,255,255,0.02)';ctxGame.lineWidth=1;ctxGame.stroke();} ctxGame.restore(); ctxGame.beginPath(); ctxGame.moveTo(playerState.x,playerState.y); ctxGame.lineTo(playerState.aimX,playerState.aimY); ctxGame.strokeStyle='#000'; ctxGame.lineWidth=3; ctxGame.stroke(); ctxGame.beginPath(); ctxGame.arc(playerState.x,playerState.y,14,0,Math.PI2); ctxGame.fillStyle='#2ea3ff'; ctxGame.fill(); ctxGame.beginPath(); ctxGame.arc(playerState.x,playerState.y,14,0,Math.PI2); ctxGame.strokeStyle='rgba(0,0,0,0.25)'; ctxGame.lineWidth=2; ctxGame.stroke(); ctxGame.beginPath(); ctxGame.arc(playerState.aimX,playerState.aimY,4,0,Math.PI*2); ctxGame.fillStyle='rgba(255,255,255,0.9)'; ctxGame.fill(); }
	requestAnimationFrame(frame);

	// Export/Save helpers - now saving actual spent values for thresholds too
	function exportBuild(){ const data = {trees:trees.map(t=>t.talents.map(x=>x.spent)), available:availablePoints}; const blob = new Blob([JSON.stringify(data,null,2)],{type:'application/json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'rogue_build.json'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);}
	document.addEventListener('keydown',(e)=>{ if((e.ctrlKey\|\|e.metaKey) && e.key.toLowerCase()==='e'){ e.preventDefault(); exportBuild(); alert('Build exported to rogue_build.json'); }});

	function saveLS(){ const payload = {trees:trees.map(t=>t.talents.map(x=>x.spent)), available:availablePoints}; localStorage.setItem('rogue_mock_build',JSON.stringify(payload)); }
	function loadLS(){ const raw = localStorage.getItem('rogue_mock_build'); if(!raw) return; try { const s = JSON.parse(raw); if(s && s.trees){ s.trees.forEach((arr,ti)=>{ trees[ti].talents.forEach((t,i)=>{ t.spent = arr[i] \|\| 0 }); }); availablePoints = (typeof s.available === 'number') ? s.available : TOTAL_POINTS; refreshUI(); } } catch(e){ console.warn('Failed to load saved build:', e); }}
	// autosave
	setInterval(()=>{ saveLS(); },2000);

	</script>
	</body>
	</html>
No results found