| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Fantasy Rally: Card Architect</title> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <style> |
| | .card-foil { |
| | background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.4) 100%); |
| | background-size: 200% 200%; |
| | animation: shine 3s infinite linear; |
| | } |
| | @keyframes shine { 0% { background-position: -200% -200%; } 100% { background-position: 200% 200%; } } |
| | #three-container canvas { border-radius: 1rem; cursor: grab; } |
| | #three-container canvas:active { cursor: grabbing; } |
| | .thumbnail-preview { width: 45px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #475569; cursor: pointer; } |
| | .thumbnail-preview:hover { border-color: #3b82f6; } |
| | </style> |
| | </head> |
| | <body class="bg-slate-900 text-white font-sans p-8"> |
| |
|
| | <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| | |
| | <div class="space-y-6"> |
| | <header> |
| | <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> |
| | Fantasy Rally: Card Architect |
| | </h1> |
| | <p class="text-slate-400">Manage car customizer rewards and rarities.</p> |
| | </header> |
| |
|
| | <div class="bg-slate-800 rounded-xl p-6 border border-slate-700"> |
| | <div class="flex justify-between mb-4"> |
| | <h2 class="text-xl font-semibold">Reward Inventory</h2> |
| | <div class="space-x-2"> |
| | <button onclick="selectAll()" class="text-xs bg-slate-700 px-3 py-1 rounded hover:bg-slate-600">Select All</button> |
| | <button onclick="exportSQL()" class="text-xs bg-green-600 px-3 py-1 rounded hover:bg-green-500 font-bold">Export SQL</button> |
| | </div> |
| | </div> |
| | |
| | <div class="overflow-x-auto max-h-96 overflow-y-auto"> |
| | <table id="rewardTable" class="w-full text-left text-sm"> |
| | <thead class="bg-slate-900 sticky top-0"> |
| | <tr> |
| | <th class="p-2 w-8"><input type="checkbox" id="masterCheck" onclick="toggleAll(this)"></th> |
| | <th class="p-2 w-16">Image</th> |
| | <th class="p-2">Title</th> |
| | <th class="p-2">Description</th> |
| | <th class="p-2">Rarity</th> |
| | <th class="p-2 w-8"></th> |
| | </tr> |
| | </thead> |
| | <tbody id="tableBody"></tbody> |
| | </table> |
| | </div> |
| | |
| | <button onclick="addRow()" class="mt-4 w-full py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition-colors">+ Add New Card</button> |
| | <input type="file" id="hiddenFileInput" accept="image/*" class="hidden" onchange="handleFileSelect(event)"> |
| | </div> |
| | </div> |
| |
|
| | <div class="sticky top-8 h-fit"> |
| | <div class="bg-slate-800 rounded-xl p-6 border border-slate-700 flex flex-col items-center"> |
| | <h2 class="text-xl font-semibold mb-4 w-full">3D Card Viewer</h2> |
| | <div id="three-container" class="w-full aspect-[3/4] bg-black rounded-lg overflow-hidden shadow-2xl relative"> |
| | <canvas id="cardCanvas" width="512" height="716" style="display:none;"></canvas> |
| | </div> |
| | <div class="mt-4 text-center text-slate-400 text-sm italic"> |
| | Click a card thumbnail to upload image | Drag to rotate | Click 3D for auto-spin |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | let rewards = [ |
| | { id: 1, title: "Neon Underglow", desc: "Cyberpunk aesthetic pulses.", color: "#3b82f6", rarity: "Rare", selected: false, img: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=400&q=80" }, |
| | { id: 2, title: "Quantum Turbo", desc: "Breaks the sound barrier.", color: "#a855f7", rarity: "Legendary", selected: false, img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=400&q=80" } |
| | ]; |
| | |
| | let scene, camera, renderer, cardMesh, currentEditingIndex = null; |
| | let isRotating = true; |
| | |
| | function init3D() { |
| | const container = document.getElementById('three-container'); |
| | scene = new THREE.Scene(); |
| | camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000); |
| | renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
| | renderer.setSize(container.clientWidth, container.clientHeight); |
| | container.appendChild(renderer.domElement); |
| | scene.add(new THREE.AmbientLight(0xffffff, 0.9)); |
| | const light = new THREE.PointLight(0xffffff, 1.2); |
| | light.position.set(5, 5, 5); |
| | scene.add(light); |
| | previewCard(0); |
| | camera.position.z = 5; |
| | animate(); |
| | } |
| | |
| | async function createCardTexture(data) { |
| | const canvas = document.getElementById('cardCanvas'); |
| | const ctx = canvas.getContext('2d'); |
| | ctx.fillStyle = data.color; |
| | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| | |
| | const img = new Image(); |
| | img.crossOrigin = "anonymous"; |
| | img.src = data.img; |
| | |
| | return new Promise((resolve) => { |
| | img.onload = () => { |
| | ctx.drawImage(img, 20, 20, canvas.width - 40, canvas.height * 0.65); |
| | ctx.fillStyle = "rgba(0,0,0,0.7)"; |
| | ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height * 0.3); |
| | ctx.fillStyle = "white"; |
| | ctx.font = "bold 38px sans-serif"; |
| | ctx.fillText(data.title.toUpperCase(), 30, canvas.height * 0.78); |
| | ctx.font = "22px sans-serif"; |
| | ctx.fillStyle = "#cbd5e1"; |
| | wrapText(ctx, data.desc, 30, canvas.height * 0.84, canvas.width - 60, 28); |
| | |
| | ctx.fillStyle = data.color; |
| | ctx.fillRect(canvas.width - 150, 30, 120, 45); |
| | ctx.fillStyle = "white"; |
| | ctx.font = "bold 20px sans-serif"; |
| | ctx.textAlign = "center"; |
| | ctx.fillText(data.rarity, canvas.width - 90, 60); |
| | ctx.textAlign = "left"; |
| | resolve(new THREE.CanvasTexture(canvas)); |
| | }; |
| | }); |
| | } |
| | |
| | function wrapText(ctx, text, x, y, maxWidth, lineHeight) { |
| | let words = text.split(' '), line = ''; |
| | for(let n = 0; n < words.length; n++) { |
| | let testLine = line + words[n] + ' '; |
| | if (ctx.measureText(testLine).width > maxWidth && n > 0) { |
| | ctx.fillText(line, x, y); |
| | line = words[n] + ' '; |
| | y += lineHeight; |
| | } else { line = testLine; } |
| | } |
| | ctx.fillText(line, x, y); |
| | } |
| | |
| | async function createCard(data) { |
| | if (cardMesh) scene.remove(cardMesh); |
| | const texture = await createCardTexture(data); |
| | const materials = [ |
| | new THREE.MeshStandardMaterial({ color: 0x333333 }), |
| | new THREE.MeshStandardMaterial({ color: 0x333333 }), |
| | new THREE.MeshStandardMaterial({ color: 0x333333 }), |
| | new THREE.MeshStandardMaterial({ color: 0x333333 }), |
| | new THREE.MeshStandardMaterial({ map: texture }), |
| | new THREE.MeshStandardMaterial({ color: 0x111111 }) |
| | ]; |
| | cardMesh = new THREE.Mesh(new THREE.BoxGeometry(2.5, 3.5, 0.1), materials); |
| | if (data.rarity === "Legendary") { |
| | const foil = new THREE.Mesh(new THREE.PlaneGeometry(2.5, 3.5), new THREE.MeshPhongMaterial({ |
| | color: 0xffffff, specular: 0xffffff, shininess: 100, transparent: true, opacity: 0.25, map: texture |
| | })); |
| | foil.position.z = 0.051; |
| | cardMesh.add(foil); |
| | } |
| | scene.add(cardMesh); |
| | } |
| | |
| | function animate() { |
| | requestAnimationFrame(animate); |
| | if (cardMesh && isRotating) cardMesh.rotation.y += 0.01; |
| | renderer.render(scene, camera); |
| | } |
| | |
| | function renderTable() { |
| | const tbody = document.getElementById('tableBody'); |
| | tbody.innerHTML = ''; |
| | rewards.forEach((reward, index) => { |
| | const tr = document.createElement('tr'); |
| | tr.className = "border-b border-slate-700 hover:bg-slate-700/50 transition-colors cursor-pointer"; |
| | tr.onclick = (e) => { if(!['INPUT', 'BUTTON', 'SELECT'].includes(e.target.tagName)) previewCard(index); }; |
| | tr.innerHTML = ` |
| | <td class="p-2"><input type="checkbox" ${reward.selected ? 'checked' : ''} onchange="toggleSelect(${index})"></td> |
| | <td class="p-2"><img src="${reward.img}" class="thumbnail-preview" onclick="triggerUpload(${index})"></td> |
| | <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1 w-full" value="${reward.title}" onchange="updateReward(${index}, 'title', this.value)"></td> |
| | <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1 w-full" value="${reward.desc}" onchange="updateReward(${index}, 'desc', this.value)"></td> |
| | <td class="p-2 flex items-center gap-2"> |
| | <select class="bg-slate-900 border-none text-xs rounded p-1" onchange="updateReward(${index}, 'rarity', this.value)"> |
| | <option value="Common" ${reward.rarity === 'Common' ? 'selected' : ''}>Common</option> |
| | <option value="Rare" ${reward.rarity === 'Rare' ? 'selected' : ''}>Rare</option> |
| | <option value="Legendary" ${reward.rarity === 'Legendary' ? 'selected' : ''}>Legendary</option> |
| | </select> |
| | <input type="color" value="${reward.color}" onchange="updateReward(${index}, 'color', this.value)" class="w-6 h-6 bg-transparent border-none"> |
| | </td> |
| | <td class="p-2"><button onclick="deleteRow(${index})" class="text-red-400 hover:text-red-300">✕</button></td> |
| | `; |
| | tbody.appendChild(tr); |
| | }); |
| | } |
| | |
| | function triggerUpload(index) { currentEditingIndex = index; document.getElementById('hiddenFileInput').click(); } |
| | function handleFileSelect(e) { |
| | const file = e.target.files[0]; |
| | if (file && currentEditingIndex !== null) { |
| | const reader = new FileReader(); |
| | reader.onload = (event) => { updateReward(currentEditingIndex, 'img', event.target.result); }; |
| | reader.readAsDataURL(file); |
| | } |
| | } |
| | |
| | function addRow() { |
| | rewards.push({ id: Date.now(), title: "New Item", desc: "Description here", color: "#64748b", rarity: "Common", selected: false, img: "https://via.placeholder.com/400x300/334155/ffffff?text=Upload+Image" }); |
| | renderTable(); |
| | } |
| | function deleteRow(index) { rewards.splice(index, 1); renderTable(); } |
| | function updateReward(index, field, value) { rewards[index][field] = value; renderTable(); previewCard(index); } |
| | function toggleSelect(index) { rewards[index].selected = !rewards[index].selected; } |
| | function toggleAll(master) { rewards.forEach(r => r.selected = master.checked); renderTable(); } |
| | function selectAll() { rewards.forEach(r => r.selected = true); document.getElementById('masterCheck').checked = true; renderTable(); } |
| | function previewCard(index) { createCard(rewards[index]); } |
| | |
| | function exportSQL() { |
| | const selected = rewards.filter(r => r.selected); |
| | if (selected.length === 0) return alert("Select cards to export."); |
| | let sql = "INSERT INTO cards (title, description, rarity, color, img_data) VALUES \n"; |
| | const values = selected.map(r => `('${r.title.replace(/'/g, "''")}', '${r.desc.replace(/'/g, "''")}', '${r.rarity}', '${r.color}', '${r.img.substring(0,50)}...')`).join(",\n"); |
| | const blob = new Blob([sql + values + ";"], { type: 'text/sql' }); |
| | const url = window.URL.createObjectURL(blob); |
| | const a = document.createElement('a'); a.href = url; a.download = "cards.sql"; a.click(); |
| | } |
| | |
| | let isDragging = false, prevX = 0; |
| | const cont = document.getElementById('three-container'); |
| | cont.addEventListener('mousedown', (e) => { isDragging = true; isRotating = false; prevX = e.clientX; }); |
| | window.addEventListener('mouseup', () => isDragging = false); |
| | window.addEventListener('mousemove', (e) => { if (isDragging && cardMesh) { cardMesh.rotation.y += (e.clientX - prevX) * 0.01; prevX = e.clientX; }}); |
| | cont.addEventListener('click', (e) => { if (e.target.tagName === 'CANVAS') isRotating = !isRotating; }); |
| | |
| | window.onload = () => { renderTable(); init3D(); }; |
| | </script> |
| | </body> |
| | </html> |
