Puzzle-Data-3D

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>PUZZLE·DATA 3D — procedural data-to-puzzle engine + recognizer</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧩</text></svg>"/>
<!--
  ┌──────────────────────────────────────────────────────────────────┐
  │  PUZZLE·DATA 3D                                                  │
  │                                                                  │
  │  RAW ANYTHING ──▶ INGEST (recognizer) ──▶ {nodes,links} ──▶ 3D   │
  │                                                                  │
  │  Recognition rules:                                              │
  │    id/_id/uuid/key/code ……… → piece identity                     │
  │    nesting ……………………………… → hierarchy snap                        │
  │    *_id / *_ref strings …… → relation join (foreign key)         │
  │    status/state/health ……… → state (glow)                        │
  │    numbers …………………………… → gauges + piece size                    │
  │    container key name ………… → piece type                          │
  │    hints {} ………………………… → override anything                      │
  └──────────────────────────────────────────────────────────────────┘
-->
<style>
  :root{
    --bg:#05070d; --panel:rgba(9,14,27,.86); --line:rgba(148,163,184,.16);
    --txt:#e2e8f0; --mut:#7d8aa3; --accent:#22d3ee; --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
  #scene{position:fixed;inset:0}
  #scene canvas{display:block;touch-action:none;cursor:grab}
  .hud{position:fixed;z-index:10}

  header{top:14px;left:18px;pointer-events:none}
 ...