Hugging Face's logo

Spaces:
Juno360219
/
dnd-style-card-game
Running

App Files Community
Juno360219 commited on
Commit
c77b1f4
·
verified ·
1 Parent(s): 813c735

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +62 -15
index.html CHANGED
@@ -49,7 +49,7 @@
49
  }
50
 
51
  .lane {
52
- min-height: 200px;
53
  background: rgba(30, 41, 59, 0.5);
54
  border: 2px solid rgba(148, 163, 184, 0.3);
55
  border-radius: 8px;
@@ -71,6 +71,7 @@
71
  color: #f87171;
72
  font-weight: bold;
73
  pointer-events: none;
 
74
  }
75
 
76
  @keyframes floatUp {
@@ -84,7 +85,7 @@
84
 
85
  .card-tooltip {
86
  visibility: hidden;
87
- width: 200px;
88
  background-color: #1e293b;
89
  color: #fff;
90
  text-align: center;
@@ -117,6 +118,52 @@
117
  .end-turn-btn:hover {
118
  transform: scale(1.05);
119
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  </style>
121
  </head>
122
  <body class="min-h-screen">
@@ -177,7 +224,7 @@
177
  <!-- Player Hand -->
178
  <div class="player-hand-container bg-slate-900 bg-opacity-70 p-4 rounded-t-lg">
179
  <h3 class="text-xl font-semibold mb-4 text-center">Your Hand</h3>
180
- <div class="flex justify-center flex-wrap gap-4 min-h-32" id="player-hand">
181
  <!-- Player cards will appear here -->
182
  </div>
183
  </div>
@@ -1005,7 +1052,7 @@
1005
 
1006
  function createCardElement(card, location) {
1007
  const cardEl = document.createElement('div');
1008
- cardEl.className = `card relative ${location === 'hand' ? 'hand-card w-24 h-32' : 'w-full h-full'} bg-slate-700 rounded-lg overflow-hidden shadow-lg`;
1009
  cardEl.dataset.id = card.id;
1010
 
1011
  // Card front
@@ -1014,7 +1061,7 @@
1014
 
1015
  // Card image
1016
  const imgContainer = document.createElement('div');
1017
- imgContainer.className = 'flex-1 bg-cover bg-center';
1018
  imgContainer.style.backgroundImage = `url(${card.image})`;
1019
 
1020
  // Card info
@@ -1026,11 +1073,11 @@
1026
  nameCost.className = 'flex justify-between items-center mb-1';
1027
 
1028
  const nameEl = document.createElement('div');
1029
- nameEl.className = 'font-semibold text-sm truncate';
1030
  nameEl.textContent = card.name;
1031
 
1032
  const costEl = document.createElement('div');
1033
- costEl.className = 'bg-blue-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center';
1034
  costEl.textContent = card.cost;
1035
 
1036
  nameCost.appendChild(nameEl);
@@ -1038,24 +1085,24 @@
1038
 
1039
  // Type and stats (if creature)
1040
  const typeStats = document.createElement('div');
1041
- typeStats.className = 'flex justify-between items-center text-xs';
1042
 
1043
  const typeEl = document.createElement('div');
1044
- typeEl.className = 'text-slate-300 italic';
1045
  typeEl.textContent = card.type;
1046
 
1047
  typeStats.appendChild(typeEl);
1048
 
1049
  if (card.type === 'creature') {
1050
  const statsEl = document.createElement('div');
1051
- statsEl.className = 'flex space-x-2';
1052
 
1053
  const attackEl = document.createElement('div');
1054
- attackEl.className = 'bg-red-500 text-white font-bold rounded-full w-6 h-6 flex items-center justify-center';
1055
  attackEl.textContent = card.attack;
1056
 
1057
  const healthEl = document.createElement('div');
1058
- healthEl.className = 'bg-green-500 text-white font-bold rounded-full w-6 h-6 flex items-center justify-center';
1059
  healthEl.textContent = card.health;
1060
 
1061
  statsEl.appendChild(attackEl);
@@ -1091,7 +1138,7 @@
1091
 
1092
  card.keywords.forEach(keyword => {
1093
  const keywordEl = document.createElement('span');
1094
- keywordEl.className = 'bg-slate-600 text-xs px-2 py-1 rounded';
1095
  keywordEl.textContent = keyword;
1096
  tooltipKeywords.appendChild(keywordEl);
1097
  });
@@ -1155,7 +1202,7 @@
1155
  // Add summoning sickness indicator
1156
  if (creature.summoningSickness) {
1157
  const sicknessIcon = document.createElement('div');
1158
- sicknessIcon.className = 'absolute top-0 right-0 bg-yellow-500 text-black text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center';
1159
  sicknessIcon.title = "Summoning Sickness";
1160
  sicknessIcon.innerHTML = '<i class="fas fa-hourglass-start"></i>';
1161
  cardEl.appendChild(sicknessIcon);
@@ -1164,7 +1211,7 @@
1164
  // Add attack indicator if hasn't attacked
1165
  if (!creature.hasAttacked && !creature.summoningSickness && gameState.turn === who) {
1166
  const attackIcon = document.createElement('div');
1167
- attackIcon.className = 'absolute top-0 left-0 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center';
1168
  attackIcon.title = "Ready to Attack";
1169
  attackIcon.innerHTML = '<i class="fas fa-bolt"></i>';
1170
  cardEl.appendChild(attackIcon);
 
49
  }
50
 
51
  .lane {
52
+ min-height: 250px;
53
  background: rgba(30, 41, 59, 0.5);
54
  border: 2px solid rgba(148, 163, 184, 0.3);
55
  border-radius: 8px;
 
71
  color: #f87171;
72
  font-weight: bold;
73
  pointer-events: none;
74
+ font-size: 1.5rem;
75
  }
76
 
77
  @keyframes floatUp {
 
85
 
86
  .card-tooltip {
87
  visibility: hidden;
88
+ width: 250px;
89
  background-color: #1e293b;
90
  color: #fff;
91
  text-align: center;
 
118
  .end-turn-btn:hover {
119
  transform: scale(1.05);
120
  }
121
+
122
+ /* Larger card styles */
123
+ .hand-card {
124
+ width: 160px;
125
+ height: 240px;
126
+ }
127
+
128
+ .board-card {
129
+ width: 180px;
130
+ height: 270px;
131
+ }
132
+
133
+ .card-image {
134
+ height: 160px;
135
+ background-size: cover;
136
+ background-position: center;
137
+ }
138
+
139
+ .board-card .card-image {
140
+ height: 180px;
141
+ }
142
+
143
+ .card-stats {
144
+ font-size: 1.1rem;
145
+ }
146
+
147
+ .card-name {
148
+ font-size: 1.1rem;
149
+ white-space: nowrap;
150
+ overflow: hidden;
151
+ text-overflow: ellipsis;
152
+ }
153
+
154
+ .card-cost {
155
+ width: 28px;
156
+ height: 28px;
157
+ font-size: 1rem;
158
+ }
159
+
160
+ .card-type {
161
+ font-size: 0.9rem;
162
+ }
163
+
164
+ .card-keyword {
165
+ font-size: 0.8rem;
166
+ }
167
  </style>
168
  </head>
169
  <body class="min-h-screen">
 
224
  <!-- Player Hand -->
225
  <div class="player-hand-container bg-slate-900 bg-opacity-70 p-4 rounded-t-lg">
226
  <h3 class="text-xl font-semibold mb-4 text-center">Your Hand</h3>
227
+ <div class="flex justify-center flex-wrap gap-4 min-h-40" id="player-hand">
228
  <!-- Player cards will appear here -->
229
  </div>
230
  </div>
 
1052
 
1053
  function createCardElement(card, location) {
1054
  const cardEl = document.createElement('div');
1055
+ cardEl.className = `card relative ${location === 'hand' ? 'hand-card' : 'board-card'} bg-slate-700 rounded-lg overflow-hidden shadow-lg`;
1056
  cardEl.dataset.id = card.id;
1057
 
1058
  // Card front
 
1061
 
1062
  // Card image
1063
  const imgContainer = document.createElement('div');
1064
+ imgContainer.className = `card-image ${location === 'hand' ? '' : 'board-card-image'}`;
1065
  imgContainer.style.backgroundImage = `url(${card.image})`;
1066
 
1067
  // Card info
 
1073
  nameCost.className = 'flex justify-between items-center mb-1';
1074
 
1075
  const nameEl = document.createElement('div');
1076
+ nameEl.className = 'font-semibold card-name text-amber-200';
1077
  nameEl.textContent = card.name;
1078
 
1079
  const costEl = document.createElement('div');
1080
+ costEl.className = 'bg-blue-500 text-white font-bold rounded-full card-cost flex items-center justify-center';
1081
  costEl.textContent = card.cost;
1082
 
1083
  nameCost.appendChild(nameEl);
 
1085
 
1086
  // Type and stats (if creature)
1087
  const typeStats = document.createElement('div');
1088
+ typeStats.className = 'flex justify-between items-center';
1089
 
1090
  const typeEl = document.createElement('div');
1091
+ typeEl.className = 'text-slate-300 italic card-type';
1092
  typeEl.textContent = card.type;
1093
 
1094
  typeStats.appendChild(typeEl);
1095
 
1096
  if (card.type === 'creature') {
1097
  const statsEl = document.createElement('div');
1098
+ statsEl.className = 'flex space-x-2 card-stats';
1099
 
1100
  const attackEl = document.createElement('div');
1101
+ attackEl.className = 'bg-red-500 text-white font-bold rounded-full w-7 h-7 flex items-center justify-center';
1102
  attackEl.textContent = card.attack;
1103
 
1104
  const healthEl = document.createElement('div');
1105
+ healthEl.className = 'bg-green-500 text-white font-bold rounded-full w-7 h-7 flex items-center justify-center';
1106
  healthEl.textContent = card.health;
1107
 
1108
  statsEl.appendChild(attackEl);
 
1138
 
1139
  card.keywords.forEach(keyword => {
1140
  const keywordEl = document.createElement('span');
1141
+ keywordEl.className = 'bg-slate-600 text-xs px-2 py-1 rounded card-keyword';
1142
  keywordEl.textContent = keyword;
1143
  tooltipKeywords.appendChild(keywordEl);
1144
  });
 
1202
  // Add summoning sickness indicator
1203
  if (creature.summoningSickness) {
1204
  const sicknessIcon = document.createElement('div');
1205
+ sicknessIcon.className = 'absolute top-0 right-0 bg-yellow-500 text-black text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center';
1206
  sicknessIcon.title = "Summoning Sickness";
1207
  sicknessIcon.innerHTML = '<i class="fas fa-hourglass-start"></i>';
1208
  cardEl.appendChild(sicknessIcon);
 
1211
  // Add attack indicator if hasn't attacked
1212
  if (!creature.hasAttacked && !creature.summoningSickness && gameState.turn === who) {
1213
  const attackIcon = document.createElement('div');
1214
+ attackIcon.className = 'absolute top-0 left-0 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center';
1215
  attackIcon.title = "Ready to Attack";
1216
  attackIcon.innerHTML = '<i class="fas fa-bolt"></i>';
1217
  cardEl.appendChild(attackIcon);