787 lines
24 KiB
HTML
787 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>MANIFOLD</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg: #0e0e1a;
|
||
|
|
--panel: #13132a;
|
||
|
|
--border: #2a2a4a;
|
||
|
|
--gold: #ffd700;
|
||
|
|
--gold-dim: #a08800;
|
||
|
|
--text: #c8c8e0;
|
||
|
|
--muted: #555570;
|
||
|
|
--red: #ff4444;
|
||
|
|
--mono: 'Share Tech Mono', monospace;
|
||
|
|
--serif: 'Cinzel', serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
font-family: var(--mono);
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── subtle grid bg ── */
|
||
|
|
body::before {
|
||
|
|
content: '';
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(var(--border) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||
|
|
background-size: 40px 40px;
|
||
|
|
opacity: 0.25;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── header ── */
|
||
|
|
header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
background: var(--bg);
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
padding: 12px 16px 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-text {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-title {
|
||
|
|
font-family: var(--serif);
|
||
|
|
font-size: 13px;
|
||
|
|
letter-spacing: 4px;
|
||
|
|
color: var(--gold);
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-sub {
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--muted);
|
||
|
|
letter-spacing: 2px;
|
||
|
|
margin-top: 3px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance-block {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance-label {
|
||
|
|
font-size: 8px;
|
||
|
|
color: var(--muted);
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance-value {
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--gold);
|
||
|
|
line-height: 1.1;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance-value.flash {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance-unit {
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--gold-dim);
|
||
|
|
letter-spacing: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── status bar ── */
|
||
|
|
#status-bar {
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--muted);
|
||
|
|
text-align: center;
|
||
|
|
padding: 4px 16px;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
letter-spacing: 1px;
|
||
|
|
min-height: 20px;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#status-bar.error { color: var(--red); }
|
||
|
|
#status-bar.ok { color: #44cc88; }
|
||
|
|
|
||
|
|
|
||
|
|
/* -- cleanup bar */
|
||
|
|
.cleanup-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cleanup-label {
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--muted);
|
||
|
|
letter-spacing: 1px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cleanup {
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
color: var(--muted);
|
||
|
|
font-family: var(--mono);
|
||
|
|
font-size: 9px;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 4px 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: border-color 0.15s, color 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cleanup:hover {
|
||
|
|
border-color: var(--gold-dim);
|
||
|
|
color: var(--gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cleanup.ok {
|
||
|
|
border-color: #44cc88;
|
||
|
|
color: #44cc88;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── shape grid ── */
|
||
|
|
.shapes-header {
|
||
|
|
font-family: var(--serif);
|
||
|
|
font-size: 9px;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
color: var(--muted);
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 14px 16px 8px;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-grid {
|
||
|
|
padding: 10px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── shape card ── */
|
||
|
|
.shape-card {
|
||
|
|
background: var(--panel);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 80px 1fr auto;
|
||
|
|
grid-template-rows: auto auto;
|
||
|
|
gap: 0;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: border-color 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 1px;
|
||
|
|
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-card:hover::before { opacity: 1; }
|
||
|
|
.shape-card:hover { border-color: var(--gold-dim); }
|
||
|
|
|
||
|
|
/* gif frame */
|
||
|
|
.shape-gif {
|
||
|
|
grid-row: 1 / 3;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-right: 1px solid var(--border);
|
||
|
|
background: #0a0a18;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-gif img {
|
||
|
|
width: 72px;
|
||
|
|
height: 72px;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* corner marks */
|
||
|
|
.shape-gif::before,
|
||
|
|
.shape-gif::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-color: var(--gold-dim);
|
||
|
|
border-style: solid;
|
||
|
|
}
|
||
|
|
.shape-gif::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
|
||
|
|
.shape-gif::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
|
||
|
|
|
||
|
|
/* info row */
|
||
|
|
.shape-info {
|
||
|
|
padding: 10px 10px 4px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-name {
|
||
|
|
font-family: var(--serif);
|
||
|
|
font-size: 11px;
|
||
|
|
color: #e8e8ff;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-meta {
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--muted);
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-meta span {
|
||
|
|
color: var(--gold-dim);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* owned badge */
|
||
|
|
.shape-owned {
|
||
|
|
padding: 10px 10px 4px;
|
||
|
|
text-align: right;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
gap: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.owned-count {
|
||
|
|
font-size: 18px;
|
||
|
|
color: var(--text);
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.owned-count.nonzero {
|
||
|
|
color: var(--gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.owned-label {
|
||
|
|
font-size: 8px;
|
||
|
|
color: var(--muted);
|
||
|
|
letter-spacing: 1px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* buy button row */
|
||
|
|
.shape-actions {
|
||
|
|
grid-column: 2 / 4;
|
||
|
|
padding: 0 10px 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-tag {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--gold);
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-tag .unit {
|
||
|
|
font-size: 8px;
|
||
|
|
color: var(--gold-dim);
|
||
|
|
margin-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy {
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid var(--gold-dim);
|
||
|
|
color: var(--gold);
|
||
|
|
font-family: var(--mono);
|
||
|
|
font-size: 9px;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 4px 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy:hover:not(:disabled) {
|
||
|
|
background: rgba(255,215,0,0.1);
|
||
|
|
border-color: var(--gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy:disabled {
|
||
|
|
opacity: 0.4;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy.loading {
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy.loading::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
margin: auto;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border: 1px solid var(--gold-dim);
|
||
|
|
border-top-color: var(--gold);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: spin 0.6s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy.success {
|
||
|
|
border-color: #44cc88;
|
||
|
|
color: #44cc88;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-buy.fail {
|
||
|
|
border-color: var(--red);
|
||
|
|
color: var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── logged out state ── */
|
||
|
|
.logged-out {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 40px 32px;
|
||
|
|
text-align: center;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logged-out p {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--muted);
|
||
|
|
line-height: 1.8;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider {
|
||
|
|
width: 40px;
|
||
|
|
height: 1px;
|
||
|
|
background: var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── connecting overlay ── */
|
||
|
|
#connecting {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 8px;
|
||
|
|
font-size: 10px;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
color: var(--muted);
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
#connecting::before {
|
||
|
|
content: '';
|
||
|
|
width: 8px; height: 8px;
|
||
|
|
border: 1px solid var(--gold-dim);
|
||
|
|
border-top-color: var(--gold);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: spin 0.8s linear infinite;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<img class="logo" src="manifold-icon.svg">
|
||
|
|
<div class="header-text">
|
||
|
|
<div class="app-title">MANIFOLD</div>
|
||
|
|
<div class="app-sub">Platonic Exchange</div>
|
||
|
|
</div>
|
||
|
|
<div class="balance-block">
|
||
|
|
<div class="balance-label">Balance</div>
|
||
|
|
<div class="balance-value" id="balance">—</div>
|
||
|
|
<div class="balance-unit">VERTS</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div id="status-bar">Initialising...</div>
|
||
|
|
|
||
|
|
<div id="connecting"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var API_BASE = "https://wizards.cyou/api";
|
||
|
|
var GIF_BASE = "gifs/";
|
||
|
|
|
||
|
|
var SHAPES = [
|
||
|
|
{ id: "tetrahedron", faces: 4, price: 400 },
|
||
|
|
{ id: "hexahedron", faces: 6, price: 600 },
|
||
|
|
{ id: "octahedron", faces: 8, price: 800 },
|
||
|
|
{ id: "dodecahedron", faces: 12, price: 1200 },
|
||
|
|
{ id: "icosahedron", faces: 20, price: 2000 },
|
||
|
|
];
|
||
|
|
|
||
|
|
var state = {
|
||
|
|
username: null,
|
||
|
|
token: null,
|
||
|
|
balance: 0,
|
||
|
|
inventory: {},
|
||
|
|
tickTimer: null,
|
||
|
|
tokenRefreshTimer: null,
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── DOM helpers ──────────────────────────────────────────────
|
||
|
|
|
||
|
|
function setStatus(msg, cls) {
|
||
|
|
var el = document.getElementById("status-bar");
|
||
|
|
el.textContent = msg;
|
||
|
|
el.className = cls || "";
|
||
|
|
}
|
||
|
|
|
||
|
|
function setBalance(n) {
|
||
|
|
var el = document.getElementById("balance");
|
||
|
|
if (el.textContent !== String(n)) {
|
||
|
|
el.textContent = n;
|
||
|
|
el.classList.add("flash");
|
||
|
|
setTimeout(function() { el.classList.remove("flash"); }, 300);
|
||
|
|
}
|
||
|
|
state.balance = n;
|
||
|
|
// update disabled states
|
||
|
|
SHAPES.forEach(function(s) {
|
||
|
|
var btn = document.getElementById("btn-" + s.id);
|
||
|
|
if (btn && !btn.classList.contains("loading")) {
|
||
|
|
btn.disabled = n < s.price;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setOwned(shape, count) {
|
||
|
|
state.inventory[shape] = count;
|
||
|
|
var el = document.getElementById("owned-" + shape);
|
||
|
|
if (el) {
|
||
|
|
el.textContent = count;
|
||
|
|
el.className = "owned-count" + (count > 0 ? " nonzero" : "");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── API calls ────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function fetchBalance() {
|
||
|
|
fetch(API_BASE + "/balance/" + state.username)
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(d) { setBalance(d.balance); })
|
||
|
|
.catch(function() { setStatus("Balance fetch error", "error"); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function fetchInventory() {
|
||
|
|
fetch(API_BASE + "/inventory/" + state.username)
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(d) {
|
||
|
|
SHAPES.forEach(function(s) {
|
||
|
|
setOwned(s.id, d.inventory[s.id] || 0);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function() {});
|
||
|
|
}
|
||
|
|
|
||
|
|
function refreshSession() {
|
||
|
|
fetch(API_BASE + "/session", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ username: state.username }),
|
||
|
|
})
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(d) { state.token = d.token; })
|
||
|
|
.catch(function() { setStatus("Session refresh failed", "error"); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function buyShape(shapeId, price) {
|
||
|
|
var btn = document.getElementById("btn-" + shapeId);
|
||
|
|
btn.disabled = true;
|
||
|
|
btn.classList.add("loading");
|
||
|
|
|
||
|
|
fetch(API_BASE + "/purchase", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
"Authorization": "Bearer " + state.token,
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ shape: shapeId }),
|
||
|
|
})
|
||
|
|
.then(function(r) {
|
||
|
|
if (!r.ok) return r.text().then(function(t) { throw new Error(t.trim()); });
|
||
|
|
return r.json();
|
||
|
|
})
|
||
|
|
.then(function(d) {
|
||
|
|
btn.classList.remove("loading");
|
||
|
|
btn.classList.add("success");
|
||
|
|
btn.textContent = "acquired";
|
||
|
|
setBalance(d.balance);
|
||
|
|
setOwned(shapeId, d.owned);
|
||
|
|
setStatus("Acquired " + shapeId + " (" + d.owned + " owned)", "ok");
|
||
|
|
setTimeout(function() {
|
||
|
|
btn.classList.remove("success");
|
||
|
|
btn.textContent = "acquire";
|
||
|
|
btn.disabled = state.balance < price;
|
||
|
|
}, 1800);
|
||
|
|
})
|
||
|
|
.catch(function(err) {
|
||
|
|
btn.classList.remove("loading");
|
||
|
|
btn.classList.add("fail");
|
||
|
|
btn.textContent = err.message.includes("insufficient") ? "no funds" : "error";
|
||
|
|
setStatus(err.message, "error");
|
||
|
|
setTimeout(function() {
|
||
|
|
btn.classList.remove("fail");
|
||
|
|
btn.textContent = "acquire";
|
||
|
|
btn.disabled = state.balance < price;
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── render ───────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function recallClones(btn) {
|
||
|
|
if (!state.username || !state.token) return;
|
||
|
|
var orig = btn.textContent;
|
||
|
|
btn.disabled = true;
|
||
|
|
btn.textContent = "recalling...";
|
||
|
|
|
||
|
|
fetch(API_BASE + "/recall", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
"Authorization": "Bearer " + state.token,
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ username: state.username }),
|
||
|
|
})
|
||
|
|
.then(function(r) {
|
||
|
|
btn.classList.add("ok");
|
||
|
|
btn.textContent = r.ok ? "recalled" : "error";
|
||
|
|
setStatus(r.ok ? "Recall sent" : "Recall failed", r.ok ? "ok" : "error");
|
||
|
|
})
|
||
|
|
.catch(function() {
|
||
|
|
btn.textContent = "error";
|
||
|
|
setStatus("Recall failed", "error");
|
||
|
|
})
|
||
|
|
.finally(function() {
|
||
|
|
btn.disabled = false;
|
||
|
|
setTimeout(function() {
|
||
|
|
btn.classList.remove("ok");
|
||
|
|
btn.textContent = orig;
|
||
|
|
setStatus("Connected // earning 1 VERT/sec");
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderShapes() {
|
||
|
|
var container = document.getElementById("connecting");
|
||
|
|
container.id = "shape-area";
|
||
|
|
container.className = "";
|
||
|
|
container.style = "";
|
||
|
|
|
||
|
|
var header = document.createElement("div");
|
||
|
|
header.className = "shapes-header";
|
||
|
|
header.textContent = "Shape Inventory";
|
||
|
|
container.appendChild(header);
|
||
|
|
|
||
|
|
// cleanup bar
|
||
|
|
var cleanupBar = document.createElement("div");
|
||
|
|
cleanupBar.className = "cleanup-bar";
|
||
|
|
var cleanupLabel = document.createElement("span");
|
||
|
|
cleanupLabel.className = "cleanup-label";
|
||
|
|
cleanupLabel.textContent = "Recall all your shapes";
|
||
|
|
var cleanupBtn = document.createElement("button");
|
||
|
|
cleanupBtn.className = "btn-cleanup";
|
||
|
|
cleanupBtn.textContent = "recall";
|
||
|
|
cleanupBtn.onclick = function() { recallClones(cleanupBtn); };
|
||
|
|
cleanupBar.appendChild(cleanupLabel);
|
||
|
|
cleanupBar.appendChild(cleanupBtn);
|
||
|
|
container.appendChild(cleanupBar);
|
||
|
|
|
||
|
|
var grid = document.createElement("div");
|
||
|
|
grid.className = "shape-grid";
|
||
|
|
|
||
|
|
SHAPES.forEach(function(s) {
|
||
|
|
var card = document.createElement("div");
|
||
|
|
card.className = "shape-card";
|
||
|
|
|
||
|
|
// gif frame
|
||
|
|
var gifWrap = document.createElement("div");
|
||
|
|
gifWrap.className = "shape-gif";
|
||
|
|
var img = document.createElement("img");
|
||
|
|
img.src = GIF_BASE + s.id + ".gif";
|
||
|
|
img.alt = s.id;
|
||
|
|
gifWrap.appendChild(img);
|
||
|
|
|
||
|
|
// info
|
||
|
|
var info = document.createElement("div");
|
||
|
|
info.className = "shape-info";
|
||
|
|
var name = document.createElement("div");
|
||
|
|
name.className = "shape-name";
|
||
|
|
name.textContent = s.id;
|
||
|
|
var meta = document.createElement("div");
|
||
|
|
meta.className = "shape-meta";
|
||
|
|
meta.innerHTML = '<span>' + s.faces + '</span> faces';
|
||
|
|
info.appendChild(name);
|
||
|
|
info.appendChild(meta);
|
||
|
|
|
||
|
|
// owned count
|
||
|
|
var ownedBlock = document.createElement("div");
|
||
|
|
ownedBlock.className = "shape-owned";
|
||
|
|
var ownedNum = document.createElement("div");
|
||
|
|
ownedNum.className = "owned-count";
|
||
|
|
ownedNum.id = "owned-" + s.id;
|
||
|
|
ownedNum.textContent = state.inventory[s.id] || 0;
|
||
|
|
var ownedLbl = document.createElement("div");
|
||
|
|
ownedLbl.className = "owned-label";
|
||
|
|
ownedLbl.textContent = "owned";
|
||
|
|
ownedBlock.appendChild(ownedNum);
|
||
|
|
ownedBlock.appendChild(ownedLbl);
|
||
|
|
|
||
|
|
// actions row
|
||
|
|
var actions = document.createElement("div");
|
||
|
|
actions.className = "shape-actions";
|
||
|
|
var priceTag = document.createElement("div");
|
||
|
|
priceTag.className = "price-tag";
|
||
|
|
priceTag.innerHTML = s.price + '<span class="unit">VERTS</span>';
|
||
|
|
var btn = document.createElement("button");
|
||
|
|
btn.className = "btn-buy";
|
||
|
|
btn.id = "btn-" + s.id;
|
||
|
|
btn.textContent = "acquire";
|
||
|
|
btn.disabled = state.balance < s.price;
|
||
|
|
(function(shapeId, shapePrice) {
|
||
|
|
btn.onclick = function() { buyShape(shapeId, shapePrice); };
|
||
|
|
})(s.id, s.price);
|
||
|
|
actions.appendChild(priceTag);
|
||
|
|
actions.appendChild(btn);
|
||
|
|
|
||
|
|
card.appendChild(gifWrap);
|
||
|
|
card.appendChild(info);
|
||
|
|
card.appendChild(ownedBlock);
|
||
|
|
card.appendChild(actions);
|
||
|
|
grid.appendChild(card);
|
||
|
|
});
|
||
|
|
|
||
|
|
container.appendChild(grid);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderLoggedOut() {
|
||
|
|
var container = document.getElementById("connecting");
|
||
|
|
container.id = "logged-out-area";
|
||
|
|
container.className = "logged-out";
|
||
|
|
container.innerHTML =
|
||
|
|
'<div class="divider"></div>' +
|
||
|
|
'<p>Login to your Overte account<br>to access Universal Shape Income<br>and the shape exchange.</p>' +
|
||
|
|
'<div class="divider"></div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── init ─────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function startSession(username) {
|
||
|
|
state.username = username;
|
||
|
|
setStatus("Verifying connection...");
|
||
|
|
|
||
|
|
fetch(API_BASE + "/session", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ username: username }),
|
||
|
|
})
|
||
|
|
.then(function(r) {
|
||
|
|
if (!r.ok) throw new Error("not connected");
|
||
|
|
return r.json();
|
||
|
|
})
|
||
|
|
.then(function(d) {
|
||
|
|
state.token = d.token;
|
||
|
|
setStatus("Connected // earning 1 VERT/sec");
|
||
|
|
|
||
|
|
// fetch initial data, then render
|
||
|
|
return Promise.all([
|
||
|
|
fetch(API_BASE + "/balance/" + username).then(function(r) { return r.json(); }),
|
||
|
|
fetch(API_BASE + "/inventory/" + username).then(function(r) { return r.json(); }),
|
||
|
|
]);
|
||
|
|
})
|
||
|
|
.then(function(results) {
|
||
|
|
state.balance = results[0].balance;
|
||
|
|
SHAPES.forEach(function(s) {
|
||
|
|
state.inventory[s.id] = results[1].inventory[s.id] || 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
renderShapes();
|
||
|
|
|
||
|
|
// update balance display after render
|
||
|
|
setBalance(state.balance);
|
||
|
|
SHAPES.forEach(function(s) { setOwned(s.id, state.inventory[s.id]); });
|
||
|
|
|
||
|
|
// tick: refresh balance every second
|
||
|
|
state.tickTimer = setInterval(fetchBalance, 1000);
|
||
|
|
|
||
|
|
// token refresh every 5 minutes
|
||
|
|
state.tokenRefreshTimer = setInterval(refreshSession, 5 * 60 * 1000);
|
||
|
|
})
|
||
|
|
.catch(function(err) {
|
||
|
|
setStatus("Connection error: " + err.message, "error");
|
||
|
|
renderLoggedOut();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
if (typeof EventBridge !== "undefined") {
|
||
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
||
|
|
var msg = JSON.parse(data);
|
||
|
|
if (msg.type === "username") {
|
||
|
|
if (!msg.username) {
|
||
|
|
renderLoggedOut();
|
||
|
|
} else {
|
||
|
|
startSession(msg.username);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: "ready" }));
|
||
|
|
} else {
|
||
|
|
// dev fallback
|
||
|
|
startSession("testuser");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = init;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|