Last active
September 19, 2018 10:05
-
-
Save irgeek/5709f9964f608c92333919b2b61d794e to your computer and use it in GitHub Desktop.
HTML/CSS/JS Dice
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Dé de Couleurs</title> | |
<meta name="description" content="Dé de Couleurs"> | |
<meta name="keywords" content="dice colour random"> | |
<meta charset="utf-8"> | |
</head> | |
<style type="text/css" media="screen"> | |
* { | |
font-family: "Gill Sans", sans-serif; | |
font-size: 12; | |
} | |
.flex { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
#dice { | |
margin: 20px; | |
} | |
.die { | |
height:3ex; | |
width:3ex; | |
line-height: 2.8ex; | |
margin: 50px; | |
background-color: lightgray; | |
border-radius: 10px; | |
text-align: center; | |
font-size: 12ex; | |
} | |
.face {} | |
.buttoncontainer { | |
margin: 0 auto; | |
display: table; | |
} | |
button { | |
font-size: 2em; | |
} | |
#roll { | |
margin-top: 40px; | |
} | |
.key { | |
margin-top: 20px; | |
} | |
.keycontainer { | |
position: relative; | |
} | |
.colour { | |
width: 8ex; | |
height: 8ex; | |
line-height: 7.5ex; | |
margin: 0px 10px; | |
border-radius: 5px; | |
text-align: center; | |
} | |
.colour.block .colour.label { | |
position: absolute; | |
} | |
.colour.block span { | |
font-size: 5ex; | |
} | |
.names { | |
font-size: .8em; | |
text-align: center; | |
} | |
</style> | |
<body> | |
<div class="button-div"> | |
<div class="buttoncontainer"> | |
<button id="roll">Lancer</button> | |
<!-- <button id="add">Ajouter</button> --> | |
</div> | |
</div> | |
<div class="flex" id="dice"></div> | |
<div class="key flex" id="key"></div> | |
<div class="names flex" id="names"></div> | |
</body> | |
<script> | |
var colours = [ "hotpink", "red", "green", "royalblue", "saddlebrown", "gold" ] | |
var colour_labels = [ "Rose", "Rouge", "Vert", "Bleu", "Marron", "Jaune" ] | |
var faces = [ "⚀", "⚁", "⚂", "⚃", "⚄", "⚅" ] | |
function roll() { | |
return Math.floor(Math.random() * colours.length); | |
} | |
function update_colours() { | |
document.querySelectorAll("#dice > .die").forEach(function(node) { | |
rolled = roll() | |
node.style.backgroundColor = colours[rolled]; | |
node.innerHTML = `<div class="face">${faces[rolled]}</div>`; | |
}); | |
} | |
function add_die() { | |
document.querySelector("#dice").innerHTML += '<div class="die"></div>' | |
} | |
function setup() { | |
let key = document.querySelector("#key"); | |
let names = document.querySelector("#names"); | |
for (i in colours) { | |
key.innerHTML += (` | |
<div class="keycontainer"> | |
<div class="colour block" style="background-color: ${colours[i]}"> | |
<div class=".face"><span>${faces[i]}</span></div> | |
</div> | |
<div class="colour label">${colour_labels[i]}</div> | |
</div> | |
`); | |
} | |
let qs = new URLSearchParams(window.location.search); | |
let count = qs.get('count'); | |
if (count) { | |
for (i=0; i<count; i++) { | |
add_die() | |
} | |
} else { | |
add_die() | |
} | |
} | |
document.querySelector('#roll').addEventListener('click', update_colours); | |
document.addEventListener('DOMContentLoaded', setup); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment