-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGreenFides.html
250 lines (228 loc) · 21.2 KB
/
GreenFides.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<link rel="icon" type="image/x-icon" href="logo.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script>
// Call populateCards function when the page is fully loaded
document.addEventListener("DOMContentLoaded", () => {
//modal~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const modal = document.getElementById("myModal");
const closeBtn = document.getElementsByClassName("close")[0];
const modalImg = document.getElementById("modalImg");
const modalDescription = document.getElementById("modalDescription");
const cardContainer = document.getElementById("cardDisplay");
const basePath = "cards/";
// Function to open modal with card details
function openModal(card) {
// Set image source and other card details
modalImg.src = `${basePath}${card.folder}/${card.id}.png`;
//modal content here
modalDescription.innerHTML = `
<table class="table custom-table">
<tbody>
<tr>
<th colspan="2" class="h2">${card.name}<br>${card.subName}</th>
</tr>
<tr>
<th scope="row" class="h4">Level</th>
<td class="h4">${card.level}</td>
</tr>
<tr>
<th scope="row" class="h4">Mana Cost</th>
<td class="h4">${card.Cost}</td>
</tr>
<tr>
<th scope="row" class="h4">Terrain Suitability</th>
<td class="h4">${card.terrain}</td>
</tr>
<tr>
<th scope="row" class="h4">Common Trait</th>
<td class="h4">${card.trait}</td>
</tr>
<tr>
<th scope="row" class="h4">Combat Power</th>
<td class="h4">${card.power}</td>
</tr>
<tr>
<th scope="row" class="h4">Ability</th>
<td class="h4">${card.description}</td>
</tr>
</tbody>
</table>
`;
// Display the modal
modal.style.display = "block";
}
// Close modal when close button is clicked
closeBtn.onclick = function() {
modal.style.display = "none";
};
// Close modal when user clicks outside the modal content
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
//modal end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Card data here
const cardData = [
{ id: "GF001", name: "Fountain Square", subName: "The Elf Construction", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "", trait: "Power-spot/Supply (1)", power: "0-0-4", description: "C: When you activate Supply in your turn > You heal 2" },
{ id: "GF002", name: "Jonas", subName: "Wild- Parrot", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Flexible/ Swift", power: "1-1-1", description: "1. C: When this card deals battle damage to player > You may pay 1 Mana > You draw 1 card 2. C:When this card attacks in G Battle-area > (This card) loses Swift until the end of turn" },
{ id: "GF003", name: "", subName: "Little Sylph", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Swift", power: "1-0-1", description: "1. A: Target player > Randonly discard 1 card from his hand > that player draws 2 cards > This card gains 1 +1 Power Token > If the game is in Stage II and your Ace Galea is in play > This card gains 1 +1 Power Token 2. C:When this card attacks in G Battle-area > (This card) loses Swift until the end of turn " },
{ id: "GF004", name: "", subName: "Planta- Little Tree Sapling", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Flexibe", power: "1-1-1", description: "Any Damage Phase: (1) ▷ Destroy this card > All Fides in the same area of this card > Receives 2 damage > gains 1 Fire Token & gain 1 Poison Token" },
{ id: "GF005", name: "Troublemakers", subName: "The Elf Kids", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "", power: "1-0-1", description: "1. A: You draw 1 card at the end of turn 2. Self Return Phase: (1) ▷ Destroy this card > If this card is in Battle-area > Target non-Fides card > Destroy > You draw 1 card" },
{ id: "GF006", name: "", subName: "Wild- Giant Squirrel ", level: "1", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "", power: "2-0-2", description: "A: You draw 1 card at the end of turn " },
{ id: "GF007", name: "", subName: "Elf Archer", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Flexible", power: "1-2-3", description: "Any Battle Phase: (1) > Target Fides ▷ If that Fides is in A Battle-area > receives 2 damage" },
{ id: "GF008", name: "", subName: "Elf Swordsman Apprentice", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz", power: "3-1-3", description: "Any Battle Phase: (1G) ▷ This card gains First strike until the end of turn" },
{ id: "GF009", name: "Ivy", subName: "Dryad Priest", level: "2", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Power-spot", power: "1-2-4", description: "1.Any Battle Phase: (2G)(Self) ▷ Target Level 6+ Fides that in the same area of this card > gains Phantom in this Resolve 2. P: Level 6+ Fides in your hand > Level -1 & Mana-cost -1 " },
{ id: "GF010", name: "", subName: "Planta- Construction- Stamina Fruit Tree", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "", trait: "Power-spot/Supply (1)", power: "0-0-4", description: "Any Battle Phase: (Self) ▷ Target (not this card) Fides > Untap > All combat power +2 until the end of turn " },
{ id: "GF011", name: "", subName: "Planta- Wall of Throne", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Reach/ Wall", power: "2-0-6", description: "C: When this card leaves play > All Fides in the same area of this card gain 1 -1 Power Token" },
{ id: "GF012", name: "", subName: "Wild- Silver Viper", level: "2", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Flexible", power: "3-0-3", description: "C: When this card deals battle damage to player > That player choose a non-Ace card that player control > Destroy (the chosen card) " },
{ id: "GF013", name: "", subName: "Wild Wolf Pack", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "", power: "1-1-1", description: "A: You execute 2 Wolf token > You may (1G) > execute 1 Wolf token" },
{ id: "GF014", name: "Alpha Fangstorm ", subName: "Wild- Wolf Pack Leader", level: "3", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Blitz", power: "4-0-4", description: "1. Any Battle Phase: (1G) ▷ All Fides in the same battle-area of this card gain overwhelming until the end of turn 2. C: When this card deals Battle damage > You execute 1 Wolf Token > If this card deal Battle damage to player > You execute 1 Wolf token" },
{ id: "GF015", name: "Elara", subName: "Elf Scout", level: "3", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "", power: "4-2-4", description: "1. Any Battle Phase: (3G) > Target (not this card) Fides in the same area of this card ▷ gains Phantom in this resolve > This card returns to its owner hand at the end of turn 2. P: All Fides in the same battle-area of this card gain Mageward(1)" },
{ id: "GF016", name: "Elfasado", subName: "The Elf Teacher", level: "3", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "", power: "3-2-3", description: "1. Self Prepare Phase (1) ▷ Target non-Ace Fides > gains 1 +1 Power Token 2. When this card leaves play > Target Fides > Gains 1 +1 Power Token > You heal 3 " },
{ id: "GF017", name: "", subName: "Insectrix Forest Spider", level: "3", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Reach ", power: "3-1-3", description: "1. A: Target Fides > gains 1 Poison Token > You heal 2 2: Any Battle Phase: (1G) > Target Fides in Summon-area ▷ loses 1 Poison Token > Tap > Untap at the end of turn" },
{ id: "GF018", name: "", subName: "Planta- Wild- Shobizu", level: "3", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Flexible", power: "4-2-4", description: "1. A: If you control Ralph > You execute 2 Wolf token 2. C: At your start turn > You execute 1 Wolf Token > You may (1G) > You execute 1 Wolf Token" },
{ id: "GF019", name: "", subName: "Tiny Dryad", level: "3", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "", power: "3-2-3", description: "Self Turn: (2G) ▷ You draw 1 card > Target Fides or Player > Heal 2 " },
{ id: "GF020", name: "Ugo", subName: "The Elf Healer", level: "3", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Flexible", power: "1-1-4", description: "A: Target Fides > Recover > You heal 2" },
{ id: "GF021", name: "", subName: "Wild Golden Eagle", level: "3", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "A", trait: "Swift", power: "4-0-3", description: "C: When this card attack alone > +2 Melee power until the end of turn" },
{ id: "GF022", name: "", subName: "Elf Swordsman ", level: "4", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz", power: "4-0-4", description: "C: When this card deals battle damage > You may (1) > This card gains 1 +1 Power Token > If this card deals battle damage to player > This card gains 1 +1 Power Token" },
{ id: "GF023", name: "", subName: "Felidians Soldier", level: "4", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz", power: "4-2-4", description: "Any Battle Phase: (1) ▷ You discard 1 card from hand > This card gains 2 +1 Power Token" },
{ id: "GF024", name: "", subName: "Insectrix- Acient Dragonfly", level: "4", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "A", trait: "Swift", power: "4-1-4", description: "1. A: You may (1G) > This card gains Blitz 2. Any Battle Phase: (1)(1G) > If this card in Battle-area > Target 2 Fides ▷ receives 2 damage > (Those Fides) gains 1 Poison Token" },
{ id: "GF025", name: "", subName: "Planta- Giant Treant", level: "4", Cost: "3G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Slow/ Overwhelming ", power: "8-3-9", description: "-" },
{ id: "GF026", name: "", subName: "Sakura Tree Dryad", level: "4", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz", power: "4-2-4", description: "1. Any Defence Phase (2G) > Target your Fides ▷ Move to an area with your Planta Fides at any position of your side > Untap 2. P: Your Planta Fides gain Reach and gain G-A " },
{ id: "GF027", name: "", subName: "Wild- Giant Frog", level: "4", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Flexible", power: "5-1-5", description: "Any Battle Phase: (1) > If this card in Battle-area > Target Fides ▷ If that Fides in A Battle-area > Move to G Battle-area at any position of its side > Receives 2 damage" },
{ id: "GF028", name: "Elysia", subName: "The Swiftblade Elf Elite Swordsman", level: "5", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Reach/ Blitz", power: "6-1-6", description: "1. Self Battle Phase: (1G) ▷ If this card in Battle-area > This card gain 1 +1 Power Token > You discard 1 card from hand > You draw 1 card 2. P: If 4+ +1 Power Token on this card > This card gains First strike" },
{ id: "GF029", name: "Raja", subName: "Wild- The Tiger King", level: "5", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Duelist/ Flexible", power: "6-1-6", description: "C: When this card Attack alone > +3 Melee power until the end of turn > Gains First strike until the end of turn" },
{ id: "GF030", name: "", subName: "Wild Grizzly Bear", level: "5", Cost: "3G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Blitz/ Overwhelming", power: "5-2-5", description: "Any Battle Phase: (1) ▷ All your FIdes in the same Battle-area of this card all power +1 and gain Overwhelming until the end of turn " },
{ id: "GF031", name: "", subName: "Wild War Elephant", level: "5", Cost: "3G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Mageward(1)/ Shield(1)/ Overwhelming", power: "6-1-6", description: "C: When this card deals battle damage to player > target non-Fides card of that player control > Destroy > You draw 1 card" },
{ id: "GF032", name: "Avis", subName: "The Elder Dryad", level: "6", Cost: "3G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz/ Flexible", power: "6-3-6", description: "1. A: You heal 4 2. Any Battle Phase: (2G) ▷ Target your Dryad or Planta Fides > Trash > Target card > Recover > You heal 2 > You Draw 1 card" },
{ id: "GF033", name: "Fenrir", subName: "The Wolf Deity", level: "6", Cost: "3G", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Blitz", power: "7-4-7", description: "1. Any Battle Phase: (2) ▷ This card All power +1 per Wolf Fides you control until the end of turn(Max.5) > If you control 4+ Wolf Fides > This card gains Overwhelming until the end of turn 2. C: When you start your turn > You execute 2 Wolf Tokens" },
{ id: "GF034", name: "Solara", subName: "The Elf Sorcerer", level: "6", Cost: "3G/B", folder: "GreenFides", type: "Fides", terrain: "G-A", trait: "Shield(1)/ Blitz/ Flexible", power: "3-5-6", description: "1. A: Target Fides > receives 4 damage > Target Player > receives 4 damage 2. Any Defence Phase: (2G) ▷ All Fides in the same Battle-area that in front of this card receive 4 damage " },
{ id: "GF035", name: "Strips", subName: "Mountainous Worm", level: "8", Cost: "5G", folder: "GreenFides", type: "Fides", terrain: "Behemoth", trait: "Reach", power: "6-0-14", description: "1. A: Target 1-2 Non-Fides card > Destroy 2. Self Damage Phase: (1G) ▷ If this card in Battle-area > Distribute 6 damage to any Fides in 1 Area" },
{ id: "GF036", name: "", subName: "Insectrix- Mana Leeches", level: "2", Cost: "1G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "", power: "2-2-2", description: "C: When Enemy Fides with Power-spot Tap > You may (Self) > That Player receives 2 damage > This card gain 1 +1 Power Token" },
// { id: "GF037", name: "", subName: "Wild- White Rhinoceros", level: "4", Cost: "2G", folder: "GreenFides", type: "Fides", terrain: "G", trait: "Overwhelming/ Blitz", power: "6-0-5", description: "P: All Enemy Fides in the same Battle-area of this card -1 Ranged Attack" },
];
// Loop through cardData and create card elements with image paths
cardData.forEach(card => {
const imagePath = `${basePath}${card.folder}/${card.id}.png`; // Construct image path
const cardHtml = `
<div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-4">
<div class="card-container">
<div class="card">
<button class="card-button">
<img src="${imagePath}" class="card-img-top" alt="${card.name}">
<div class="card-text">
<p>${card.description}</p>
</div>
</button>
</div>
</div>
</div>
`;
// Append card HTML to card container
cardContainer.innerHTML += cardHtml;
});
// Add hover behavior to each card image
const cardContainers = document.querySelectorAll(".card-container");
const cardImages = document.querySelectorAll(".card-button");
cardContainers.forEach(container => {
const cardText = container.querySelector(".card-text");
//const cardText = image.nextElementSibling; // Get the card-text element (sibling of the image)
// Show card text on image hover
container.addEventListener("mouseenter", () => {
cardText.style.opacity = "1";
cardText.style.zIndex = "1";
});
// Hide card text when mouse leaves the image
container.addEventListener("mouseleave", () => {
cardText.style.opacity = "0";
cardText.style.zIndex = "0";
});
container.addEventListener("click", () => {
const cardIndex = Array.from(cardContainers).indexOf(container); // Get the index of the clicked card
const selectedCard = cardData[cardIndex]; // Get the corresponding card data
openModal(selectedCard); // Open modal with selected card data
});
});
//ScrollReveal().reveal(cardContainers, { interval: 20 });
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>-RE- AETHERIUS</title>
</head>
<body style="background-color: #343a40;">
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" >
<a class="navbar-brand" href="https://recardgame.wordpress.com/"><img src="logo.png" alt="Logo" style="width: 30px; height: 30px;"> -RE- AETHERIUS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"></ul>
</div>
</nav>
<!-- Banner Area -->
<div class="container-fluid" style="padding-top: 59px;">
<div class="row">
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-blue" href="./BlueFides.html"><span class="hover-text">Blue</span></a>
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-green" href="./GreenFides.html"><span class="hover-text">Green</span></a>
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-purple" href="./PurpleFides.html"><span class="hover-text">Purple</span></a>
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-red" href="./RedFides.html"><span class="hover-text">Red</span></a>
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-white" href="./WhiteFides.html"><span class="hover-text">White</span></a>
<a class="col-lg-4 col-md-6 col-sm-12 banner-section banner-yellow" href="./YellowFides.html"><span class="hover-text">Yellow</span></a>
</div>
</div>
<!-- Page Content -->
<div class="container-fluid">
<!-- Sub-class buttons-->
<div class="d-flex justify-content-center align-items-center vh-20">
<h1 class="d-flex gap-2 button-container">
<a href="./GreenFides.html" class="hvr-underline-from-center selected">Fides</a>
<a href="./GreenItems.html" class="hvr-underline-from-center">Non-Fides</a>
</h1>
</div>
<div class="row" id="cardDisplay">
<!-- Card display area will be dynamically populated here -->
<!-- Example: -->
<!-- <div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Sub-Name</h6>
<p class="card-text">Card Description</p>
<!-- Add more card details here -->
<!-- </div>
</div>
</div> -->
</div>
</div>
<div id="myModal" class="modal" >
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content" style="background-color: #b0fcdd;">
<div class="row">
<div class="col-md-6">
<img id="modalImg" src="" alt="Card Image" class="img-fluid">
</div>
<div class="col-md-6" id="modalDescriptionWindow">
<!-- Detailed card description will be displayed here -->
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-description py-4 px-4" id="modalDescription">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>