Hugging Face's logo

Spaces:
Wavetype
/
carcards
Running

App Files Community
Wavetype commited on
Commit
581222f
·
verified ·
1 Parent(s): 584ea9d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +117 -128
index.html CHANGED
@@ -12,17 +12,11 @@
12
  background-size: 200% 200%;
13
  animation: shine 3s infinite linear;
14
  }
15
- @keyframes shine {
16
- 0% { background-position: -200% -200%; }
17
- 100% { background-position: 200% 200%; }
18
- }
19
- #three-container canvas {
20
- border-radius: 1rem;
21
- cursor: grab;
22
- }
23
- #three-container canvas:active {
24
- cursor: grabbing;
25
- }
26
  </style>
27
  </head>
28
  <body class="bg-slate-900 text-white font-sans p-8">
@@ -50,19 +44,20 @@
50
  <table id="rewardTable" class="w-full text-left text-sm">
51
  <thead class="bg-slate-900 sticky top-0">
52
  <tr>
53
- <th class="p-2"><input type="checkbox" id="masterCheck" onclick="toggleAll(this)"></th>
 
54
  <th class="p-2">Title</th>
55
  <th class="p-2">Description</th>
56
- <th class="p-2">Rarity/Color</th>
57
- <th class="p-2">Actions</th>
58
  </tr>
59
  </thead>
60
- <tbody id="tableBody">
61
- </tbody>
62
  </table>
63
  </div>
64
 
65
  <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>
 
66
  </div>
67
  </div>
68
 
@@ -70,12 +65,10 @@
70
  <div class="bg-slate-800 rounded-xl p-6 border border-slate-700 flex flex-col items-center">
71
  <h2 class="text-xl font-semibold mb-4 w-full">3D Card Viewer</h2>
72
  <div id="three-container" class="w-full aspect-[3/4] bg-black rounded-lg overflow-hidden shadow-2xl relative">
73
- <div id="loadingOverlay" class="absolute inset-0 flex items-center justify-center bg-slate-900 z-10 hidden">
74
- <span>Rendering HD Foil...</span>
75
- </div>
76
  </div>
77
  <div class="mt-4 text-center text-slate-400 text-sm italic">
78
- Drag to rotate on X-Axis | Click card to reset view
79
  </div>
80
  </div>
81
  </div>
@@ -83,11 +76,11 @@
83
 
84
  <script>
85
  let rewards = [
86
- { id: 1, title: "Neon Underglow", desc: "Cyberpunk aesthetic pulses.", color: "#3b82f6", rarity: "Rare", selected: false },
87
- { id: 2, title: "Quantum Turbo", desc: "Breaks the sound barrier.", color: "#a855f7", rarity: "Legendary", selected: false }
88
  ];
89
 
90
- let scene, camera, renderer, cardMesh, foilMesh;
91
  let isRotating = true;
92
 
93
  function init3D() {
@@ -97,159 +90,155 @@
97
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
98
  renderer.setSize(container.clientWidth, container.clientHeight);
99
  container.appendChild(renderer.domElement);
100
-
101
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
102
- scene.add(ambientLight);
103
-
104
- const pointLight = new THREE.PointLight(0xffffff, 1);
105
- pointLight.position.set(5, 5, 5);
106
- scene.add(pointLight);
107
-
108
- createCard(rewards[0]);
109
  camera.position.z = 5;
110
  animate();
111
  }
112
 
113
- function createCard(data) {
114
- if (cardMesh) scene.remove(cardMesh);
115
- if (foilMesh) scene.remove(foilMesh);
 
 
116
 
117
- const geometry = new THREE.BoxGeometry(2.5, 3.5, 0.1);
118
- const material = new THREE.MeshStandardMaterial({ color: data.color });
119
- cardMesh = new THREE.Mesh(geometry, material);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
 
121
- // Foil Layer for Legendary/Epic
122
- if (data.rarity === "Legendary") {
123
- const foilGeo = new THREE.PlaneGeometry(2.4, 3.4);
124
- const foilMat = new THREE.MeshPhongMaterial({
125
- color: 0xffffff,
126
- specular: 0xffffff,
127
- shininess: 100,
128
- transparent: true,
129
- opacity: 0.3
130
- });
131
- foilMesh = new THREE.Mesh(foilGeo, foilMat);
132
- foilMesh.position.z = 0.06;
133
- cardMesh.add(foilMesh);
134
  }
 
 
135
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  scene.add(cardMesh);
137
  }
138
 
139
  function animate() {
140
  requestAnimationFrame(animate);
141
- if (cardMesh && isRotating) {
142
- cardMesh.rotation.y += 0.01;
143
- }
144
  renderer.render(scene, camera);
145
  }
146
 
147
- // Table Logic
148
  function renderTable() {
149
  const tbody = document.getElementById('tableBody');
150
  tbody.innerHTML = '';
151
  rewards.forEach((reward, index) => {
152
  const tr = document.createElement('tr');
153
  tr.className = "border-b border-slate-700 hover:bg-slate-700/50 transition-colors cursor-pointer";
154
- tr.onclick = (e) => {
155
- if(e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') previewCard(index);
156
- };
157
-
158
  tr.innerHTML = `
159
  <td class="p-2"><input type="checkbox" ${reward.selected ? 'checked' : ''} onchange="toggleSelect(${index})"></td>
160
- <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1" value="${reward.title}" onchange="updateReward(${index}, 'title', this.value)"></td>
161
- <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1" value="${reward.desc}" onchange="updateReward(${index}, 'desc', this.value)"></td>
162
- <td class="p-2">
163
- <select class="bg-slate-900 border-none text-xs rounded" onchange="updateReward(${index}, 'rarity', this.value)">
 
164
  <option value="Common" ${reward.rarity === 'Common' ? 'selected' : ''}>Common</option>
165
  <option value="Rare" ${reward.rarity === 'Rare' ? 'selected' : ''}>Rare</option>
166
  <option value="Legendary" ${reward.rarity === 'Legendary' ? 'selected' : ''}>Legendary</option>
167
  </select>
168
  <input type="color" value="${reward.color}" onchange="updateReward(${index}, 'color', this.value)" class="w-6 h-6 bg-transparent border-none">
169
  </td>
170
- <td class="p-2">
171
- <button onclick="deleteRow(${index})" class="text-red-400 hover:text-red-300">✕</button>
172
- </td>
173
  `;
174
  tbody.appendChild(tr);
175
  });
176
  }
177
 
178
- function addRow() {
179
- rewards.push({ id: Date.now(), title: "New Item", desc: "Add description...", color: "#64748b", rarity: "Common", selected: false });
180
- renderTable();
181
- }
182
-
183
- function deleteRow(index) {
184
- rewards.splice(index, 1);
185
- renderTable();
186
- }
187
-
188
- function updateReward(index, field, value) {
189
- rewards[index][field] = value;
190
- if (field === 'color' || field === 'rarity') previewCard(index);
191
- }
192
-
193
- function toggleSelect(index) {
194
- rewards[index].selected = !rewards[index].selected;
195
- }
196
-
197
- function toggleAll(master) {
198
- rewards.forEach(r => r.selected = master.checked);
199
- renderTable();
200
  }
201
 
202
- function selectAll() {
203
- rewards.forEach(r => r.selected = true);
204
- document.getElementById('masterCheck').checked = true;
205
  renderTable();
206
  }
207
-
208
- function previewCard(index) {
209
- const data = rewards[index];
210
- createCard(data);
211
- }
 
212
 
213
  function exportSQL() {
214
  const selected = rewards.filter(r => r.selected);
215
  if (selected.length === 0) return alert("Select cards to export.");
216
-
217
- let sql = "INSERT INTO fantasy_rally_cards (title, description, rarity, hex_color) VALUES \n";
218
- const values = selected.map(r => `('${r.title}', '${r.desc}', '${r.rarity}', '${r.color}')`).join(",\n");
219
-
220
  const blob = new Blob([sql + values + ";"], { type: 'text/sql' });
221
  const url = window.URL.createObjectURL(blob);
222
- const a = document.createElement('a');
223
- a.href = url;
224
- a.download = "cards_export.sql";
225
- a.click();
226
  }
227
 
228
- // Mouse Rotation Logic
229
- let isDragging = false;
230
- let previousMouseX = 0;
231
-
232
- const container = document.getElementById('three-container');
233
- container.addEventListener('mousedown', (e) => {
234
- isDragging = true;
235
- isRotating = false;
236
- previousMouseX = e.clientX;
237
- });
238
- window.addEventListener('mouseup', () => { isDragging = false; });
239
- window.addEventListener('mousemove', (e) => {
240
- if (isDragging && cardMesh) {
241
- const deltaX = e.clientX - previousMouseX;
242
- cardMesh.rotation.y += deltaX * 0.01;
243
- previousMouseX = e.clientX;
244
- }
245
- });
246
- container.addEventListener('click', () => { isRotating = !isRotating; });
247
 
248
- // Initialize
249
- window.onload = () => {
250
- renderTable();
251
- init3D();
252
- };
253
  </script>
254
  </body>
255
  </html>
 
12
  background-size: 200% 200%;
13
  animation: shine 3s infinite linear;
14
  }
15
+ @keyframes shine { 0% { background-position: -200% -200%; } 100% { background-position: 200% 200%; } }
16
+ #three-container canvas { border-radius: 1rem; cursor: grab; }
17
+ #three-container canvas:active { cursor: grabbing; }
18
+ .thumbnail-preview { width: 45px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #475569; cursor: pointer; }
19
+ .thumbnail-preview:hover { border-color: #3b82f6; }
 
 
 
 
 
 
20
  </style>
21
  </head>
22
  <body class="bg-slate-900 text-white font-sans p-8">
 
44
  <table id="rewardTable" class="w-full text-left text-sm">
45
  <thead class="bg-slate-900 sticky top-0">
46
  <tr>
47
+ <th class="p-2 w-8"><input type="checkbox" id="masterCheck" onclick="toggleAll(this)"></th>
48
+ <th class="p-2 w-16">Image</th>
49
  <th class="p-2">Title</th>
50
  <th class="p-2">Description</th>
51
+ <th class="p-2">Rarity</th>
52
+ <th class="p-2 w-8"></th>
53
  </tr>
54
  </thead>
55
+ <tbody id="tableBody"></tbody>
 
56
  </table>
57
  </div>
58
 
59
  <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>
60
+ <input type="file" id="hiddenFileInput" accept="image/*" class="hidden" onchange="handleFileSelect(event)">
61
  </div>
62
  </div>
63
 
 
65
  <div class="bg-slate-800 rounded-xl p-6 border border-slate-700 flex flex-col items-center">
66
  <h2 class="text-xl font-semibold mb-4 w-full">3D Card Viewer</h2>
67
  <div id="three-container" class="w-full aspect-[3/4] bg-black rounded-lg overflow-hidden shadow-2xl relative">
68
+ <canvas id="cardCanvas" width="512" height="716" style="display:none;"></canvas>
 
 
69
  </div>
70
  <div class="mt-4 text-center text-slate-400 text-sm italic">
71
+ Click a card thumbnail to upload image | Drag to rotate | Click 3D for auto-spin
72
  </div>
73
  </div>
74
  </div>
 
76
 
77
  <script>
78
  let rewards = [
79
+ { 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" },
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" }
81
  ];
82
 
83
+ let scene, camera, renderer, cardMesh, currentEditingIndex = null;
84
  let isRotating = true;
85
 
86
  function init3D() {
 
90
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
91
  renderer.setSize(container.clientWidth, container.clientHeight);
92
  container.appendChild(renderer.domElement);
93
+ scene.add(new THREE.AmbientLight(0xffffff, 0.9));
94
+ const light = new THREE.PointLight(0xffffff, 1.2);
95
+ light.position.set(5, 5, 5);
96
+ scene.add(light);
97
+ previewCard(0);
 
 
 
 
98
  camera.position.z = 5;
99
  animate();
100
  }
101
 
102
+ async function createCardTexture(data) {
103
+ const canvas = document.getElementById('cardCanvas');
104
+ const ctx = canvas.getContext('2d');
105
+ ctx.fillStyle = data.color;
106
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
107
 
108
+ const img = new Image();
109
+ img.crossOrigin = "anonymous";
110
+ img.src = data.img;
111
+
112
+ return new Promise((resolve) => {
113
+ img.onload = () => {
114
+ ctx.drawImage(img, 20, 20, canvas.width - 40, canvas.height * 0.65);
115
+ ctx.fillStyle = "rgba(0,0,0,0.7)";
116
+ ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height * 0.3);
117
+ ctx.fillStyle = "white";
118
+ ctx.font = "bold 38px sans-serif";
119
+ ctx.fillText(data.title.toUpperCase(), 30, canvas.height * 0.78);
120
+ ctx.font = "22px sans-serif";
121
+ ctx.fillStyle = "#cbd5e1";
122
+ wrapText(ctx, data.desc, 30, canvas.height * 0.84, canvas.width - 60, 28);
123
+
124
+ ctx.fillStyle = data.color;
125
+ ctx.fillRect(canvas.width - 150, 30, 120, 45);
126
+ ctx.fillStyle = "white";
127
+ ctx.font = "bold 20px sans-serif";
128
+ ctx.textAlign = "center";
129
+ ctx.fillText(data.rarity, canvas.width - 90, 60);
130
+ ctx.textAlign = "left";
131
+ resolve(new THREE.CanvasTexture(canvas));
132
+ };
133
+ });
134
+ }
135
 
136
+ function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
137
+ let words = text.split(' '), line = '';
138
+ for(let n = 0; n < words.length; n++) {
139
+ let testLine = line + words[n] + ' ';
140
+ if (ctx.measureText(testLine).width > maxWidth && n > 0) {
141
+ ctx.fillText(line, x, y);
142
+ line = words[n] + ' ';
143
+ y += lineHeight;
144
+ } else { line = testLine; }
 
 
 
 
145
  }
146
+ ctx.fillText(line, x, y);
147
+ }
148
 
149
+ async function createCard(data) {
150
+ if (cardMesh) scene.remove(cardMesh);
151
+ const texture = await createCardTexture(data);
152
+ const materials = [
153
+ new THREE.MeshStandardMaterial({ color: 0x333333 }),
154
+ new THREE.MeshStandardMaterial({ color: 0x333333 }),
155
+ new THREE.MeshStandardMaterial({ color: 0x333333 }),
156
+ new THREE.MeshStandardMaterial({ color: 0x333333 }),
157
+ new THREE.MeshStandardMaterial({ map: texture }),
158
+ new THREE.MeshStandardMaterial({ color: 0x111111 })
159
+ ];
160
+ cardMesh = new THREE.Mesh(new THREE.BoxGeometry(2.5, 3.5, 0.1), materials);
161
+ if (data.rarity === "Legendary") {
162
+ const foil = new THREE.Mesh(new THREE.PlaneGeometry(2.5, 3.5), new THREE.MeshPhongMaterial({
163
+ color: 0xffffff, specular: 0xffffff, shininess: 100, transparent: true, opacity: 0.25, map: texture
164
+ }));
165
+ foil.position.z = 0.051;
166
+ cardMesh.add(foil);
167
+ }
168
  scene.add(cardMesh);
169
  }
170
 
171
  function animate() {
172
  requestAnimationFrame(animate);
173
+ if (cardMesh && isRotating) cardMesh.rotation.y += 0.01;
 
 
174
  renderer.render(scene, camera);
175
  }
176
 
 
177
  function renderTable() {
178
  const tbody = document.getElementById('tableBody');
179
  tbody.innerHTML = '';
180
  rewards.forEach((reward, index) => {
181
  const tr = document.createElement('tr');
182
  tr.className = "border-b border-slate-700 hover:bg-slate-700/50 transition-colors cursor-pointer";
183
+ tr.onclick = (e) => { if(!['INPUT', 'BUTTON', 'SELECT'].includes(e.target.tagName)) previewCard(index); };
 
 
 
184
  tr.innerHTML = `
185
  <td class="p-2"><input type="checkbox" ${reward.selected ? 'checked' : ''} onchange="toggleSelect(${index})"></td>
186
+ <td class="p-2"><img src="${reward.img}" class="thumbnail-preview" onclick="triggerUpload(${index})"></td>
187
+ <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>
188
+ <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>
189
+ <td class="p-2 flex items-center gap-2">
190
+ <select class="bg-slate-900 border-none text-xs rounded p-1" onchange="updateReward(${index}, 'rarity', this.value)">
191
  <option value="Common" ${reward.rarity === 'Common' ? 'selected' : ''}>Common</option>
192
  <option value="Rare" ${reward.rarity === 'Rare' ? 'selected' : ''}>Rare</option>
193
  <option value="Legendary" ${reward.rarity === 'Legendary' ? 'selected' : ''}>Legendary</option>
194
  </select>
195
  <input type="color" value="${reward.color}" onchange="updateReward(${index}, 'color', this.value)" class="w-6 h-6 bg-transparent border-none">
196
  </td>
197
+ <td class="p-2"><button onclick="deleteRow(${index})" class="text-red-400 hover:text-red-300">✕</button></td>
 
 
198
  `;
199
  tbody.appendChild(tr);
200
  });
201
  }
202
 
203
+ function triggerUpload(index) { currentEditingIndex = index; document.getElementById('hiddenFileInput').click(); }
204
+ function handleFileSelect(e) {
205
+ const file = e.target.files[0];
206
+ if (file && currentEditingIndex !== null) {
207
+ const reader = new FileReader();
208
+ reader.onload = (event) => { updateReward(currentEditingIndex, 'img', event.target.result); };
209
+ reader.readAsDataURL(file);
210
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  }
212
 
213
+ function addRow() {
214
+ 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" });
 
215
  renderTable();
216
  }
217
+ function deleteRow(index) { rewards.splice(index, 1); renderTable(); }
218
+ function updateReward(index, field, value) { rewards[index][field] = value; renderTable(); previewCard(index); }
219
+ function toggleSelect(index) { rewards[index].selected = !rewards[index].selected; }
220
+ function toggleAll(master) { rewards.forEach(r => r.selected = master.checked); renderTable(); }
221
+ function selectAll() { rewards.forEach(r => r.selected = true); document.getElementById('masterCheck').checked = true; renderTable(); }
222
+ function previewCard(index) { createCard(rewards[index]); }
223
 
224
  function exportSQL() {
225
  const selected = rewards.filter(r => r.selected);
226
  if (selected.length === 0) return alert("Select cards to export.");
227
+ let sql = "INSERT INTO cards (title, description, rarity, color, img_data) VALUES \n";
228
+ const values = selected.map(r => `('${r.title.replace(/'/g, "''")}', '${r.desc.replace(/'/g, "''")}', '${r.rarity}', '${r.color}', '${r.img.substring(0,50)}...')`).join(",\n");
 
 
229
  const blob = new Blob([sql + values + ";"], { type: 'text/sql' });
230
  const url = window.URL.createObjectURL(blob);
231
+ const a = document.createElement('a'); a.href = url; a.download = "cards.sql"; a.click();
 
 
 
232
  }
233
 
234
+ let isDragging = false, prevX = 0;
235
+ const cont = document.getElementById('three-container');
236
+ cont.addEventListener('mousedown', (e) => { isDragging = true; isRotating = false; prevX = e.clientX; });
237
+ window.addEventListener('mouseup', () => isDragging = false);
238
+ window.addEventListener('mousemove', (e) => { if (isDragging && cardMesh) { cardMesh.rotation.y += (e.clientX - prevX) * 0.01; prevX = e.clientX; }});
239
+ cont.addEventListener('click', (e) => { if (e.target.tagName === 'CANVAS') isRotating = !isRotating; });
 
 
 
 
 
 
 
 
 
 
 
 
 
240
 
241
+ window.onload = () => { renderTable(); init3D(); };
 
 
 
 
242
  </script>
243
  </body>
244
  </html>