<!DOCTYPE html>
<html>
<head>
<title>Dice Roll</title>
<style>
.dice {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>Dice Roll</h1>
<button onclick="rollDice()">Roll Dice</button>
<div id="dice-container">
<img id="dice1" class="dice" src="" alt="Dice">
<img id="dice2" class="dice" src="" alt="Dice">
</div>
<p id="result"></p>
<script>
// Mapping dice values to their respective inscription IDs
const diceImages = {
1: "132bd973920f7389211e7a1e48d888c9d03038f59146e0323e6854b6cc56e7d7i0",
2: "375dd199cca1b854fcec673b5616f156117b61d44b8f7dc227fb57a1d503e43di0",
3: "252b7c9ce998fdc57d5c051ef34df456b9b78ce07011199bf77e0d0d2bcaf963i0",
4: "f88115cf15434f6e36457f56f52a34ea0f8de332922d6573638a1b237f112a43i0",
5: "0382c4269ca6f680b2dea62952468675ebaf459dcee389ef7d2eceadd03ee60ci0",
6: "4afc58fa970e251fcda6e2224f46a2482ff4ed18c1043dcc9a45accd64e3f8e3i0"
};
function rollDice() {
const dice1 = Math.floor(Math.random() * 6) + 1;
const dice2 = Math.floor(Math.random() * 6) + 1;
const total = dice1 + dice2;
document.getElementById("dice1").src = `https://ordinals.com/inscription/${diceImages[dice1]}`;
document.getElementById("dice2").src = `https://ordinals.com/inscription/${diceImages[dice2]}`;
document.getElementById("result").innerText = `You rolled a ${total} (${dice1} and ${dice2})`;
logResult(total);
}
function logResult(result) {
console.log("Result to be inscribed:", result);
// Inscription logic goes here
}
</script>
</body>
</html>