Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +162 -76
static/script.js
CHANGED
@@ -4,95 +4,181 @@ let currentCoin = 0;
|
|
4 |
let isGenerating = false;
|
5 |
|
6 |
function updateInfo() {
|
7 |
-
|
8 |
-
|
9 |
}
|
10 |
|
11 |
function flipCoin() {
|
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 |
function buyCoin(index) {
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
}
|
58 |
|
59 |
function generateCoin() {
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 |
})
|
66 |
-
|
67 |
-
|
68 |
if (data.success) {
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
<div class="shop-coin">
|
76 |
-
<div>P: ${data.coin.winrate.toFixed(2)}</div>
|
77 |
-
<div>V: $${data.coin.value.toFixed(2)}</div>
|
78 |
-
<div>C: $${data.coin.price.toFixed(2)}</div>
|
79 |
-
</div>
|
80 |
-
`;
|
81 |
-
newCoin.onclick = () => buyCoin(coins.length - 1);
|
82 |
-
shop.appendChild(newCoin);
|
83 |
-
} else {
|
84 |
-
console.error("Failed to generate new coin:", data.error);
|
85 |
}
|
86 |
-
|
87 |
-
.finally(() => {
|
88 |
-
isGenerating = false;
|
89 |
-
document.getElementById("loading-overlay").style.display = "none";
|
90 |
-
});
|
91 |
-
}
|
92 |
}
|
93 |
|
94 |
document.addEventListener("DOMContentLoaded", () => {
|
95 |
-
|
96 |
-
|
97 |
-
|
|
|
|
|
98 |
});
|
|
|
4 |
let isGenerating = false;
|
5 |
|
6 |
function updateInfo() {
|
7 |
+
document.getElementById("balance").textContent = balance.toFixed(2);
|
8 |
+
document.getElementById("flips-left").textContent = flipsLeft;
|
9 |
}
|
10 |
|
11 |
function flipCoin() {
|
12 |
+
if (flipsLeft > 0 && !isGenerating) {
|
13 |
+
fetch("/flip", {
|
14 |
+
method: "POST",
|
15 |
+
headers: {
|
16 |
+
"Content-Type": "application/json",
|
17 |
+
},
|
18 |
+
body: JSON.stringify({ coin_index: currentCoin }),
|
19 |
+
})
|
20 |
+
.then((response) => response.json())
|
21 |
+
.then((data) => {
|
22 |
+
if (data.error) {
|
23 |
+
alert(data.error);
|
24 |
+
} else {
|
25 |
+
const coin = document.getElementById("coin");
|
26 |
+
coin.textContent = data.result;
|
27 |
+
balance = data.balance;
|
28 |
+
flipsLeft = data.flips_left;
|
29 |
+
updateInfo();
|
30 |
+
|
31 |
+
// Reset coin appearance after a short delay
|
32 |
+
setTimeout(() => {
|
33 |
+
coin.textContent = "";
|
34 |
+
}, 500);
|
35 |
+
|
36 |
+
if (flipsLeft === 0) {
|
37 |
+
showGameOver();
|
38 |
+
}
|
39 |
+
}
|
40 |
+
});
|
41 |
+
}
|
42 |
}
|
43 |
|
44 |
function buyCoin(index) {
|
45 |
+
if (!isGenerating && index !== currentCoin) {
|
46 |
+
fetch("/buy", {
|
47 |
+
method: "POST",
|
48 |
+
headers: {
|
49 |
+
"Content-Type": "application/json",
|
50 |
+
},
|
51 |
+
body: JSON.stringify({ index: index }),
|
52 |
+
})
|
53 |
+
.then((response) => response.json())
|
54 |
+
.then((data) => {
|
55 |
+
if (data.success) {
|
56 |
+
balance = data.balance;
|
57 |
+
currentCoin = index;
|
58 |
+
document.getElementById("coin").style.backgroundColor = coins[index].color;
|
59 |
+
updateInfo();
|
60 |
+
} else {
|
61 |
+
alert("Not enough money to buy this coin or you already own it!");
|
62 |
+
}
|
63 |
+
});
|
64 |
+
}
|
65 |
}
|
66 |
|
67 |
function generateCoin() {
|
68 |
+
if (!isGenerating && balance >= 4) {
|
69 |
+
isGenerating = true;
|
70 |
+
document.getElementById("loading-overlay").style.display = "flex";
|
71 |
+
fetch("/generate_coin", {
|
72 |
+
method: "POST",
|
73 |
+
})
|
74 |
+
.then((response) => response.json())
|
75 |
+
.then((data) => {
|
76 |
+
if (data.success) {
|
77 |
+
coins.push(data.coin);
|
78 |
+
const shop = document.getElementById("shop");
|
79 |
+
const newCoin = createShopItem(data.coin, coins.length - 1);
|
80 |
+
shop.appendChild(newCoin);
|
81 |
+
balance = data.balance;
|
82 |
+
updateInfo();
|
83 |
+
} else {
|
84 |
+
alert("Failed to generate new coin: " + data.error);
|
85 |
+
}
|
86 |
+
})
|
87 |
+
.finally(() => {
|
88 |
+
isGenerating = false;
|
89 |
+
document.getElementById("loading-overlay").style.display = "none";
|
90 |
+
});
|
91 |
+
} else if (balance < 4) {
|
92 |
+
alert("Not enough balance to generate a coin");
|
93 |
+
}
|
94 |
+
}
|
95 |
+
|
96 |
+
function createShopItem(coin, index) {
|
97 |
+
const shopItem = document.createElement("div");
|
98 |
+
shopItem.className = "shop-item";
|
99 |
+
shopItem.dataset.index = index;
|
100 |
+
|
101 |
+
const shopCoin = document.createElement("div");
|
102 |
+
shopCoin.className = "shop-coin";
|
103 |
+
shopCoin.style.backgroundColor = coin.color;
|
104 |
+
|
105 |
+
const coinPrice = document.createElement("span");
|
106 |
+
coinPrice.className = "coin-price";
|
107 |
+
coinPrice.textContent = `$${coin.price.toFixed(2)}`;
|
108 |
+
|
109 |
+
const coinName = document.createElement("div");
|
110 |
+
coinName.className = "coin-name";
|
111 |
+
coinName.textContent = coin.name;
|
112 |
+
|
113 |
+
const coinTooltip = document.createElement("div");
|
114 |
+
coinTooltip.className = "coin-tooltip";
|
115 |
+
coinTooltip.innerHTML = `
|
116 |
+
<strong>${coin.name}</strong><br>
|
117 |
+
Cost: $${coin.price.toFixed(2)}<br>
|
118 |
+
Value: $${coin.value.toFixed(2)}<br>
|
119 |
+
Win rate: ${coin.winrate.toFixed(2)}<br>
|
120 |
+
${coin.ability ? `Ability: ${coin.ability}` : ''}
|
121 |
+
`;
|
122 |
+
|
123 |
+
shopCoin.appendChild(coinPrice);
|
124 |
+
shopItem.appendChild(shopCoin);
|
125 |
+
shopItem.appendChild(coinName);
|
126 |
+
shopItem.appendChild(coinTooltip);
|
127 |
+
|
128 |
+
shopItem.onclick = () => buyCoin(index);
|
129 |
+
|
130 |
+
return shopItem;
|
131 |
+
}
|
132 |
+
|
133 |
+
function showGameOver() {
|
134 |
+
const modal = document.getElementById("game-over");
|
135 |
+
const finalScore = document.getElementById("final-score");
|
136 |
+
finalScore.textContent = balance.toFixed(2);
|
137 |
+
modal.style.display = "block";
|
138 |
+
}
|
139 |
+
|
140 |
+
function submitScore() {
|
141 |
+
const initials = document.getElementById("initials").value.toUpperCase();
|
142 |
+
if (initials.length > 0) {
|
143 |
+
fetch("/game_over", {
|
144 |
+
method: "POST",
|
145 |
+
headers: {
|
146 |
+
"Content-Type": "application/json",
|
147 |
+
},
|
148 |
+
body: JSON.stringify({ initials: initials }),
|
149 |
+
})
|
150 |
+
.then((response) => response.json())
|
151 |
+
.then((data) => {
|
152 |
+
if (data.success) {
|
153 |
+
location.reload(); // Reload the page to start a new game and show updated leaderboard
|
154 |
+
}
|
155 |
+
});
|
156 |
+
} else {
|
157 |
+
alert("Please enter your initials");
|
158 |
+
}
|
159 |
+
}
|
160 |
+
|
161 |
+
function resetGame() {
|
162 |
+
fetch("/reset_game", {
|
163 |
+
method: "POST",
|
164 |
})
|
165 |
+
.then((response) => response.json())
|
166 |
+
.then((data) => {
|
167 |
if (data.success) {
|
168 |
+
balance = 0;
|
169 |
+
flipsLeft = 1000;
|
170 |
+
currentCoin = 0;
|
171 |
+
updateInfo();
|
172 |
+
document.getElementById("coin").style.backgroundColor = coins[0].color;
|
173 |
+
document.getElementById("game-over").style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
174 |
}
|
175 |
+
});
|
|
|
|
|
|
|
|
|
|
|
176 |
}
|
177 |
|
178 |
document.addEventListener("DOMContentLoaded", () => {
|
179 |
+
updateInfo();
|
180 |
+
document.getElementById("coin").onclick = flipCoin;
|
181 |
+
document.getElementById("generate-coin").onclick = generateCoin;
|
182 |
+
document.getElementById("submit-score").onclick = submitScore;
|
183 |
+
document.getElementById("play-again").onclick = resetGame;
|
184 |
});
|