-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
264 lines (243 loc) · 9.1 KB
/
index.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spin to Win!</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: url('bank.webp') no-repeat center center fixed;
background-size: cover;
color: white;
}
.description {
margin: 20px auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
width: 80%;
max-width: 600px;
}
.slot-machine {
margin: 20px auto;
width: 300px;
height: 300px;
border: 5px solid #ccc;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.slot {
width: 80px;
height: 80px;
font-size: 40px;
border: 2px solid #333;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
}
#spin-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#spin-button:disabled {
background-color: #ccc;
}
#winner-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #333;
color: white;
padding: 20px;
border-radius: 10px;
text-align: left;
}
.modal-content input {
width: 100%;
padding: 10px;
margin-top: 10px;
font-size: 16px;
color: black;
}
#pool-prize {
margin: 20px auto;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 2px 2px 5px #000;
}
.shiny {
color: gold;
animation: shine 2s infinite;
}
@keyframes shine {
0% {
text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold, 0 0 50px gold;
}
100% {
text-shadow: 0 0 20px gold, 0 0 30px gold, 0 0 40px gold, 0 0 50px gold, 0 0 60px gold;
}
}
</style>
</head>
<body>
<h1>Spin to Win a Prize!</h1>
<div class="description">
<p>Welcome to the SPIN to Win game! Each spin costs 1 GNET, and you have a chance to win big. If you win, 10% of the prize pool will be sent to your wallet. All spin fees are added to the prize pool, increasing the potential winnings for everyone. Good luck!</p>
<div id="pool-prize" class="shiny">Pool Prize: Loading...</div>
</div>
<button id="connect-button" onclick="connectWallet()">Connect MetaMask</button>
<div class="slot-machine">
<div class="slot" id="slot1">🍒</div>
<div class="slot" id="slot2">🍋</div>
<div class="slot" id="slot3">🍉</div>
</div>
<button id="spin-button" onclick="payAndSpin()" disabled>Spin</button>
<div id="winner-modal">
<div class="modal-content">
<h2>Congratulations, You Won!</h2>
<p>Enter your wallet address to receive your prize:</p>
<input type="text" id="wallet-address" placeholder="Wallet Address">
<button onclick="submitAddress()">Submit</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script>
const slotItems = ["🍒", "🍋", "🍉", "🍊", "🍇"];
let spinning = false;
let web3;
let userAccount;
const GNETAddress = '0x67A4B50798c190C77d872D9f02C8a860ad1488e7'; // GNET token contract address
const poolAddress = '0x20a9486CdfAb3A6B8f4A9A32c11dA07623632596'; // Pool address
async function connectWallet() {
if (window.ethereum) {
try {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
userAccount = accounts[0];
web3 = new Web3(window.ethereum);
document.getElementById('connect-button').innerText = 'Connected';
document.getElementById('spin-button').disabled = false;
updatePoolPrize();
} catch (error) {
console.error("User denied account access");
}
} else {
alert("MetaMask is not installed. Please install it to use this feature.");
}
}
async function updatePoolPrize() {
const balance = await web3.eth.getBalance(poolAddress);
const balanceInGNET = web3.utils.fromWei(balance, 'ether');
document.getElementById('pool-prize').innerText = `Pool Prize: ${balanceInGNET} GNET`;
}
async function payAndSpin() {
if (spinning) return;
spinning = true;
const amountInEther = '1'; // 1 GNET
const recipientAddress = poolAddress;
try {
const transactionParameters = {
to: recipientAddress,
from: userAccount,
value: web3.utils.toHex(web3.utils.toWei(amountInEther, 'ether')),
gas: web3.utils.toHex(21000),
gasPrice: web3.utils.toHex(web3.utils.toWei('20', 'gwei')),
};
await ethereum.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
spin();
updatePoolPrize();
} catch (error) {
console.error("Transaction failed", error);
spinning = false;
}
}
function getRandomItem() {
return slotItems[Math.floor(Math.random() * slotItems.length)];
}
function spin() {
document.getElementById("spin-button").disabled = true;
let slot1 = document.getElementById("slot1");
let slot2 = document.getElementById("slot2");
let slot3 = document.getElementById("slot3");
let interval1 = setInterval(() => slot1.textContent = getRandomItem(), 100);
let interval2 = setInterval(() => slot2.textContent = getRandomItem(), 100);
let interval3 = setInterval(() => slot3.textContent = getRandomItem(), 100);
setTimeout(() => {
clearInterval(interval1);
slot1.textContent = getRandomItem();
}, 2000);
setTimeout(() => {
clearInterval(interval2);
slot2.textContent = getRandomItem();
}, 3000);
setTimeout(() => {
clearInterval(interval3);
slot3.textContent = getRandomItem();
spinning = false;
document.getElementById("spin-button").disabled = false;
checkWinner(slot1.textContent, slot2.textContent, slot3.textContent);
}, 4000);
}
function checkWinner(slot1, slot2, slot3) {
document.getElementById("winner-modal").style.display = "flex";
const winProbability = 0.01; // 1% chance to win
const randomChance = Math.random();
if (slot1 === slot2 && slot2 === slot3 && randomChance < winProbability) {
//document.getElementById("winner-modal").style.display = "flex";
}
}
async function submitAddress() {
let address = document.getElementById("wallet-address").value;
if (address) {
try {
const response = await fetch('https://128.65.199.22:3000/send-prize', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
clientAddress: address
})
});
const result = await response.json();
if (result.success) {
alert("Prize sent to address: " + address);
} else {
alert("Failed to send prize: " + result.error);
}
} catch (error) {
console.error("Transaction failed", error);
alert("Transaction failed: " + error.message);
}
document.getElementById("winner-modal").style.display = "none";
} else {
alert("Please enter a valid wallet address.");
}
}
</script>
</body>
</html>