Added game files

lesterbx · Dec 1, 2017 · 1f116d5 · 1f116d5
1 parent cf8ba48
commit 1f116d5
Show file tree

Hide file tree

Showing 10 changed files with 697 additions and 0 deletions.
diff --git a/css/dice.css b/css/dice.css
@@ -0,0 +1,94 @@
+@keyframes roll {
+	from { transform: rotateX(0deg) rotateY(0deg) }
+	to { transform: rotateX(-1080deg) rotateY(-270deg)}
+}
+
+.dice {
+	/* position: absolute; */
+	/*top: -100px; left: 50%;*/
+	width: 50px;
+	height: 50px;
+	margin: 2em auto;
+	-moz-backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	-ms-backface-visibility: hidden;
+	-o-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	-ms-transform-style: preserve-3d;
+	-o-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	/*transition: 2s linear;*/
+}
+
+.rolling{
+	animation-name: roll;
+	animation-duration: 1.5s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+
+.dice .face {
+	background: url(https://guimagames.azurewebsites.net/images/dice.png) no-repeat;
+	background-size: 150px 100px;
+	color: white;
+	font-size: 20px;
+	position: absolute;
+	width: 50px;
+	height: 50px;
+	display: block;
+}
+
+.dice .front {
+	-webkit-transform: perspective(000px) rotateX(0) translateZ(25px);
+	-moz-transform: perspective(000px) rotateX(0) translateZ(25px);
+	-ms-transform: perspective(000px) rotateX(0) translateZ(25px);
+	-o-transform: perspective(000px) rotateX(0) translateZ(25px);
+	transform: perspective(000px) rotateX(0) translateZ(25px);
+}
+
+.dice .back {
+	background-position: -50px 0;
+	-webkit-transform: perspective(000px) rotateY(180deg) translateZ(25px);
+	-moz-transform: perspective(000px) rotateY(180deg) translateZ(25px);
+	-ms-transform: perspective(000px) rotateY(180deg) translateZ(25px);
+	-o-transform: perspective(000px) rotateY(180deg) translateZ(25px);
+	transform: perspective(000px) rotateY(180deg) translateZ(25px);
+}
+
+.dice .left {
+	background-position: -100px 0;
+	-webkit-transform: perspective(000px) rotateY(90deg) translateZ(25px);
+	-moz-transform: perspective(000px) rotateY(90deg) translateZ(25px);
+	-ms-transform: perspective(000px) rotateY(90deg) translateZ(25px);
+	-o-transform: perspective(000px) rotateY(90deg) translateZ(25px);
+	transform: perspective(000px) rotateY(90deg) translateZ(25px);
+}
+
+.dice .bottom {
+	background-position: 0 -50px;
+	-webkit-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
+	-moz-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
+	-ms-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
+	-o-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
+	transform: perspective(000px) rotateX(-90deg) translateZ(25px);
+}
+
+.dice .top {
+	background-position: -50px -50px;
+	-webkit-transform: perspective(000px) rotateX(90deg) translateZ(25px);
+	-moz-transform: perspective(000px) rotateX(90deg) translateZ(25px);
+	-ms-transform: perspective(000px) rotateX(90deg) translateZ(25px);
+	-o-transform: perspective(000px) rotateX(90deg) translateZ(25px);
+	transform: perspective(000px) rotateX(90deg) translateZ(25px);
+}
+
+.dice .right {
+	background-position: -100px -50px;
+	-webkit-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
+	-moz-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
+	-ms-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
+	-o-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
+	transform: perspective(000px) rotateY(-90deg) translateZ(25px);
+}
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,116 @@
+*{
+    box-sizing: border-box;
+    outline: none;
+}
+body{
+    background: url(../img/fieltro.jpg);
+    color: #fff;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+input[type="number"]{
+    width: 5em;
+}
+
+.container{
+    display: flex;
+    width: 75%;
+    margin: 1em auto;
+    align-items: center;
+}
+
+
+header{
+    background-color: #5d4037;
+    border: 2px solid #321911; 
+    padding: 1em;
+    border-radius: 0.5em;
+    justify-content: space-around;
+}
+
+main{
+    flex-wrap: wrap;
+}
+
+button{
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 0.5em 1em;
+    cursor: pointer;
+    font-size: 1em;
+    width: 100%;
+}
+
+button:disabled, button:disabled:hover{
+    background-color: rgb(175, 175, 175);
+    cursor: auto;
+}
+
+.button-play{
+    background-color: #1faa00;
+}
+
+.button-play:hover{
+    background-color: #64dd17;
+}
+
+.button-play::after{
+    content: "Play \25B6";
+}
+
+.button-stop{
+    background-color: #c30000;
+}
+
+.button-stop:hover{
+    background-color: #ff3d00;
+}
+
+.button-stop::after{
+    content: "Stop \25A0";
+}
+
+.button-roll{
+    background-color: #c68400;
+}
+
+.button-roll:hover{
+    background-color: #ffb300;
+}
+
+.player{
+    border: 2px solid #fff;
+    padding: 1em;
+    text-align: center;
+    border-radius: 0.5em;
+    margin: 0.5em;
+    width: calc(25% - 1em);
+    position: relative;
+}
+
+.player-winner::after{
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    bottom: -5px;
+    right: -5px;
+    border-radius: 0.7em;
+    content: "";
+    z-index: -1;
+    border: 4px solid rgb(1, 211, 1);
+}
+
+.player-loser::after{
+    content: "";
+    z-index: -1;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    bottom: -5px;
+    right: -5px;
+    border-radius: 0.7em;
+    border: 4px solid rgb(179, 0, 0);
+}
+
diff --git a/img/fieltro.jpg b/img/fieltro.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<html>
+
+<head>
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <link rel="stylesheet" type="text/css" href="css/dice.css">
+    <script src="lib/Rx.min.js"></script>
+</head>
+
+<body>
+    <header class="container">
+        <div class="flex-item">
+            <label>Players:</label>
+            <input type="number" id="input-players" value="4">
+        </div>
+        <div class="flex-item">
+            <label>Dices:</label>
+            <input type="number" id="input-dices" value="2">
+        </div>
+        <div class="flex-item">
+            <button id="button-play">
+            </button>
+        </div>
+    </header>
+    <main class="container">
+    </main>
+    <script src="js/index.js"></script>
+    <script src="js/player.js"></script>
+    <script src="js/dice.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/dice-positions.js"></script>
+</body>
+
+</html>
diff --git a/js/dice-positions.js b/js/dice-positions.js
@@ -0,0 +1,29 @@
+var positions = [{
+    x: 0,
+    y: 0
+},
+{
+    x: -900,
+    y: -180
+},
+{
+    x: -1080,
+    y: -180
+},
+{
+    x: -1080,
+    y: -90
+},
+{
+    x: -990,
+    y: -270
+},
+{
+    x: -810,
+    y: -90
+},
+{
+    x: -1080,
+    y: -270
+}
+]
diff --git a/js/dice.js b/js/dice.js
@@ -0,0 +1,37 @@
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+const dice$ = (dice) => Rx.Observable.create(function (observer) {
+    setTimeout(function () {
+        observer.next({diceElement: dice, number: random(1, 6)});
+        observer.complete();
+    }, random(1000, 3000));
+});
+
+const rollDices$ = dices => Rx.Observable.from(dices).mergeMap(dice$);
+
+const roll = (event) => {
+    var id = event.target.id;
+    var dices = document.querySelectorAll(".dice[id^='" + id + "']");
+
+    document.querySelector(".player#" + id).className = "player";
+    document.querySelector("button#" + id).disabled = true;
+
+    dices.forEach(startAnimation);
+    var sum = 0;
+    rollDices$(dices).subscribe({
+        next: function next(dice) {
+            stopAnimation(dice.diceElement, dice.number);
+            sum += dice.number;
+        },
+        error: null,
+        complete: function complete() {
+            document.getElementById(id).classList += sum === 7 ? " player-winner" : " player-loser";
+            document.querySelector("button#" + id).disabled = false;
+        }
+    });
+};
+
+
+startAnimation = (dice) => dice.addAttribute("className", "dice rolling");
+
+stopAnimation = (dice, face) => dice.addAttribute("className", "dice").style.transform = "rotateX(" + positions[face].x + "deg) rotateY(" + positions[face].y + "deg)";
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,54 @@
+"use strict";
+
+function addEvents() {
+    [{
+        selector: "#button-play",
+        event: "onclick",
+        func: play
+    }, {
+        selector: "#input-players",
+        event: "onkeyup",
+        func: function func() {
+            return render();
+        }
+    }, {
+        selector: "#input-dices",
+        event: "onkeyup",
+        func: function func() {
+            return render();
+        }
+    }].forEach(({selector, event, func}) => document.querySelector(selector)[event] = func);
+};
+
+function render() {
+    var isPlaying = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+    var inputs = document.querySelectorAll("header input");
+    var numDices = document.querySelector("#input-dices");
+    var playButton = document.querySelector("#button-play");
+
+    playButton.disabled = Array.from(inputs.values()).some((input) => input.value === "");
+    playButton.className = isPlaying ? "button-stop" : "button-play";
+    playButton.onclick = isPlaying ? stop : play;
+
+    inputs.forEach(function (input) {
+        return input.disabled = isPlaying;
+    });
+};
+
+function play() {
+    createPlayers(numPlayers());
+    render(true);
+};
+
+function stop() {
+    document.querySelector("main").innerHTML = "";
+    render();
+};
+
+function init() {
+    addEvents();
+    render();
+};
+
+init();
diff --git a/js/player.js b/js/player.js
@@ -0,0 +1,18 @@
+const diceFaces = () => '<div class="face front"></div>' +
+                        '<div class="face back"></div>' +
+                        '<div class="face left"></div>' +
+                        '<div class="face bottom"></div>' +
+                        '<div class="face top"></div>' +
+                        '<div class="face right"></div>';
+
+const createDice = id =>  document.createElement("div").addAttribute("id", id).addAttribute("className", "dice").addAttribute("innerHTML", diceFaces());
+
+const createDices = (id, num) => emptyArray(num).map((_, i) => createDice(id + i));
+
+const createButton = id => document.createElement("button").addAttribute("id", id).addAttribute("className", "button-roll").addAttribute("innerHTML", "Roll").addAttribute("onclick", roll);
+
+const createPlayer = name => document.createElement("div").addAttribute("id", slug(name)).addAttribute("className", "player").addAttribute("innerHTML",`<h3>${name}</h3>` );
+
+const newPlayer = name => createPlayer(name).addChilds(createDices(slug(name), numDices())).addChild(createButton(slug(name)));
+
+const createPlayers = num => emptyArray(num).map((_, i) => `Player ${i+1}`).forEach((name => document.querySelector("main").addChild(newPlayer(name))));