117 lines
3.9 KiB
HTML
117 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<title>Coin Flip App</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
}
|
|
#coin {
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
transition: transform 0.6s ease-out; /* Transition for flipping effect */
|
|
}
|
|
#countdown {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #0e2c4c;
|
|
font-size: 40px;
|
|
width: 200px;
|
|
height: 125px;
|
|
background-color: #e7d9fc;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
<script src="/ipfs/Qmae5v9zydax9u6C9ceDijURu5PYdd5avmv4NkenCw7RFv/astro.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1><div id="title">Coin Flip Game</div></h1>
|
|
|
|
|
|
<div id="countdown">
|
|
<img id="coin" src="/ipfs/QmYCKyYnYDGq6U7WuMmUoF7v5okvzoEThgYyKj9AzJPeP2" alt="Coin">
|
|
</div>
|
|
|
|
<div id="ainfo">
|
|
<div id="message"><p>Click on the coin to flip!</p></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to extract URL parameters
|
|
function getUrlParameter(name) {
|
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
const results = regex.exec(location.search);
|
|
return results === null ? '' : results[1];
|
|
}
|
|
|
|
const AstroID = getUrlParameter('qrcode') || "";
|
|
const AstroPASS = getUrlParameter('pass') || "";
|
|
const G1PUB = getUrlParameter('g1pub') || "";
|
|
const MAX = getUrlParameter('coins') || "";
|
|
|
|
var title = document.getElementById("title");
|
|
title.innerHTML = "MAX : " + MAX ;
|
|
|
|
let isFlipping = false;
|
|
let consecutiveHeads = 1;
|
|
|
|
document.getElementById('coin').addEventListener('click', (event) => {
|
|
if (!isFlipping) {
|
|
|
|
isFlipping = true;
|
|
document.getElementById('coin').style.transform = 'rotateY(360deg)';
|
|
setTimeout(() => {
|
|
const result = Math.random() < 0.5 ? 'Heads' : 'Tails';
|
|
if (result === 'Heads') {
|
|
consecutiveHeads++;
|
|
document.getElementById('coin').src = '/ipfs/QmZ6jrZGTWo4eimrGxu7BfKjYfRLqknb18WhmekNxppFg9';
|
|
document.getElementById('message').innerHTML = `<p>Pile! ${consecutiveHeads - 1} fois.</p>`;
|
|
|
|
} else {
|
|
// as descibed in https://en.wikipedia.org/wiki/St._Petersburg_paradox
|
|
// TODO : make use of MAX parameter
|
|
var vousgagnez = Math.pow(2, (consecutiveHeads - 1));
|
|
vousgagnez /= 10; // ZEN CONVERSION
|
|
|
|
// STOP CLIC
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
// Open coinflip Application
|
|
var myZenCoinFlip = '/ipfs/QmP7duzqBr6jszapZ9adSe8dBgZyWAdVHsPGep2bNX5Hj3/getreceiver/index.html?qrcode=' + AstroID +'&pass=' + AstroPASS + '&pay=' + vousgagnez + '&max=' + MAX ;
|
|
|
|
var info = document.getElementById("ainfo");
|
|
info.innerHTML = "<h2>" + Math.pow(2, (consecutiveHeads - 1)) + " Ẑen</h2>";
|
|
console.log(myZenCoinFlip);
|
|
window.history.replaceState({}, document.title, "/"); // Forget Page URL in Browser History
|
|
window.open( myZenCoinFlip, "ZENFlipMachine");
|
|
|
|
document.getElementById('message').innerHTML = `<p><b>Face!<br>VOUS GAGNEZ</b><h2>${Math.pow(2, (consecutiveHeads - 1))} ZEN</h2></p>`;
|
|
|
|
consecutiveHeads = 1; // Reset the count for consecutive heads
|
|
document.getElementById('coin').src = '/ipfs/QmeZhZ6yR6YHhiZ9qfBUCA1RKUP83dZL6MtU4PCBrdzjWn'; // Coin Pile Icon
|
|
|
|
}
|
|
isFlipping = false;
|
|
document.getElementById('coin').style.transform = 'rotateY(0deg)';
|
|
}, 600); // Delay must match the transition time in CSS
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|