feat: add user and admin page

frontend/assets/js/wheel.js

@@ -0,0 +1,82 @@
+import { getItems, spinWheel } from './api.js';
+
+const canvas = document.getElementById('wheel');
+const ctx = canvas.getContext('2d');
+const btn = document.getElementById('spin-btn');
+const result = document.getElementById('result');
+const colors = ['#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6','#1abc9c'];
+
+let items = [];
+let angle = 0;
+let spinning = false;
+
+async function init() {
+  items = await getItems();
+  drawWheel(angle);
+}
+
+function drawWheel(rotation) {
+  if (items.length === 0) return;
+  const cx = canvas.width / 2;
+  const cy = canvas.height / 2;
+  const r = cx - 10;
+  const slice = (2 * Math.PI) / items.length;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  items.forEach((item, i) => {
+    const start = rotation + i * slice;
+    const end = start + slice;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);
+    ctx.arc(cx, cy, r, start, end);
+    ctx.fillStyle = colors[i % colors.length];
+    ctx.fill();
+    ctx.stroke();
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(start + slice / 2);
+    ctx.textAlign = 'right';
+    ctx.fillStyle = '#fff';
+    ctx.font = 'bold 16px Tahoma';
+    ctx.fillText(item.title, r - 10, 5);
+    ctx.restore();
+  });
+}
+
+btn.onclick = async () => {
+  if (spinning || items.length === 0) return;
+  spinning = true;
+  btn.disabled = true;
+  result.textContent = '';
+
+  const data = await spinWheel();
+  const winner = data.winner;
+  const winnerIdx = items.findIndex(i => i.id === winner.id);
+  const slice = (2 * Math.PI) / items.length;
+  const targetAngle = angle + (Math.PI * 2 * 5) + 
+    (Math.PI * 2 - (winnerIdx * slice + slice / 2));
+
+  const duration = 4000;
+  const start = performance.now();
+  const from = angle;
+
+  function animate(now) {
+    const elapsed = now - start;
+    const t = Math.min(elapsed / duration, 1);
+    const ease = 1 - Math.pow(1 - t, 3);
+    angle = from + (targetAngle - from) * ease;
+    drawWheel(angle);
+
+    if (t < 1) {
+      requestAnimationFrame(animate);
+    } else {
+      spinning = false;
+      btn.disabled = false;
+      result.textContent = `🎉 ${winner.title}`;
+    }
+  }
+
+  requestAnimationFrame(animate);
+};
+
+init();