openzilch.js

commit 37f323c96ec9847ef057f8fffa2364c3c0ad19bc Author: Lurkars Date: Fri Apr 14 19:21:16 2017 +0200 initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0d366de --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2017 Lukas Haubaum + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..a099036 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +TBD diff --git a/index.html b/index.html new file mode 100644 index 0000000..726bbd5 --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + openzilch.js + + + + +

+ +

+ Player +

+ +

+ CPU +

+ + + + + + +

+ +

+ Points +

+ +

Created by Lukas Haubaum. Design template and code inspiration by Gabriele Cirulli's 2048.

+ +

+ + + + + + diff --git a/js/game.js b/js/game.js new file mode 100644 index 0000000..62a3365 --- /dev/null +++ b/js/game.js @@ -0,0 +1,395 @@ +function Game(Interface) { + var self = this; + + self.Interface = new Interface; + + self.Interface.on("restart", self.restart.bind(this)); + self.Interface.on("takePoints", self.takePoints.bind(this)); + self.Interface.on("addPoints", self.addPoints.bind(this)); + self.Interface.on("roleDices", self.roleDices.bind(this)); + self.Interface.on("toggleDice", self.toggleDice.bind(this)); + + + self.setup(); +} + + +Game.prototype.restart = function() { + this.Interface.setup(); + this.setup(); +}; + + +Game.prototype.setup = function() { + var self = this; + self.player = { + score: 0, + zilch: 0 + }; + self.cpu = { + score: 0, + zilch: 0 + }; + self.dices = [] + + self.history = []; + + self.cpuStarts = self.random(2); + + self.playing = !self.cpuStarts; + + self.points = 0; + + self.Interface.setPlaying(self.playing); + self.Interface.setPoints(self.points); + self.Interface.setPlayer(self.player); + self.Interface.setCpu(self.cpu); + + if (self.cpuStarts) { + self.Interface.showMessage("CPU starts!", 1000) + } else { + self.Interface.showMessage("Player starts!", 1000) + } + + self.roleDices(); +}; + +Game.prototype.random = function(int) { + return Math.floor((Math.random() * int)); +}; + +Game.prototype.roleDices = function(all) { + var self = this; + self.Interface.clearMessage(); + + var rollCount = 0; + for (var i = 0; i < 6; i++) { + self.dices[i] = self.dices[i] || {}; + var dice = self.dices[i]; + if (all || !dice.disabled) { + dice.value = this.random(6); + if (all) { + dice.disabled = false; + } + rollCount++; + } + } + + + if (self.playing && self.player.zilch == 3) { + self.player.zilch = 0; + } else if (self.cpu.zilch == 3) { + self.cpu.zilch = 0; + } + + if (rollCount == 0) { + self.roleDices(true); + } else if (self.checkZilch(rollCount == 6)) { + if (self.playing) { + self.player.zilch++; + + var history = {}; + history['player'] = 'Zilch'; + self.history.push(history); + + if (self.player.zilch > 2) { + if (self.player.score < 500) { + self.player.score = 0; + } else { + self.player.score -= 500; + } + + + var history = {}; + history['player'] = '-500'; + self.history.push(history); + } + } else { + self.cpu.zilch++; + + + var history = {}; + history['cpu'] = 'Zilch'; + self.history.push(history); + + if (self.cpu.zilch > 2) { + if (self.cpu.score < 500) { + self.cpu.score = 0; + } else { + self.cpu.score -= 500; + } + + var history = {}; + history['cpu'] = '-500'; + self.history.push(history); + } + + } + + self.Interface.animateDices(self.dices, function() { + self.Interface.showMessage("Zilch!", 1000); + }); + + self.endRound(); + + } else { + self.Interface.animateDices(self.dices); + self.Interface.disableTakePoints(true); + self.Interface.disabledRoleDices(true); + self.Interface.setDices(self.dices); + + if (!self.playing) { + self.cpuPlay(); + } + } +}; + +Game.prototype.checkZilch = function(all) { + var self = this; + + var rawPoints = [0, 0, 0, 0, 0, 0]; + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + if (all || !dice.disabled) { + rawPoints[dice.value]++; + } + } + + // Zilch? + return rawPoints[0] < 1 && rawPoints[1] < 3 && rawPoints[2] < 3 && rawPoints[3] < 3 && rawPoints[4] < 1 && rawPoints[5] < 3; +} + + +Game.prototype.toggleDice = function(diceIndex) { + var self = this; + var dice = self.dices[diceIndex]; + + if (!dice || dice.disabled) { + console.error("This should not happen!") + return; + } + + + dice.selected = !dice.selected; + var points = self.calculatePoints(); + var valid = true; + + for (var i = 0; i < 6; i++) { + var toggleDice = self.dices[i]; + + if (toggleDice.selected) { + toggleDice.selected = false; + var togglePoints = self.calculatePoints(); + if (points > togglePoints) { + toggleDice.invalid = false; + } else if (togglePoints == points) { + toggleDice.invalid = true; + } + + toggleDice.selected = true; + } else { + toggleDice.invalid = false; + } + + valid &= !toggleDice.invalid; + } + + if (valid && points > 0 && self.playing) { + self.Interface.disabledRoleDices(false); + } else { + self.Interface.disabledRoleDices(true); + } + + if (valid && self.points + points >= 300 && self.playing) { + self.Interface.disableTakePoints(false); + } else { + self.Interface.disableTakePoints(true); + } + + + self.Interface.setDices(self.dices); + self.Interface.setPoints(self.points + points); +}; + +Game.prototype.calculatePoints = function(diceIndex) { + var self = this; + var result = [0, 0, 0, 0, 0, 0]; + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + if (dice.selected) { + result[dice.value]++; + } + } + + var straight = true; + var pairs = 0; + var triple1 = 0; + var triple2 = 0; + for (var i = 0; i < 6; i++) { + straight &= (result[i] == 1); + if (result[i] == 2) { + pairs++; + } + if (triple1 == 0 && result[i] > 2) { + triple1 = i + 1; + } else if (result[i] > 2) { + triple2 = i + 1; + } + } + var points = 0; + + if (straight) { + points += 1500; + } else if (pairs == 3) { + points += 1500; + } else if (triple1) { + points += triple1 * (triple1 == 1 ? 1000 : 100) * (result[triple1 - 1] - 2); + + if (triple2) { + points += triple2 * (triple2 == 1 ? 1000 : 100) * (result[triple2 - 1] - 2); + } + } + + // left Ones + if (pairs < 3 && triple1 != 1 && triple2 != 1) { + points += result[0] * 100; + } + + // left Fives + if (pairs < 3 && triple1 != 5 && triple2 != 5) { + points += result[4] * 50; + } + + return points; +} + + +Game.prototype.addPoints = function() { + var self = this; + + self.points += self.calculatePoints(); + + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + if (dice.selected) { + dice.selected = false; + dice.disabled = true; + } + } + + + self.Interface.setDices(self.dices); + self.Interface.setPoints(self.points); +}; + +Game.prototype.takePoints = function() { + var self = this; + + self.addPoints(); + + if (self.playing) { + self.player.score += self.points; + self.player.zilch = 0; + var history = {}; + history['player'] = self.points; + self.history.push(history); + + } else { + self.cpu.score += self.points; + self.cpu.zilch = 0; + var history = {}; + history['cpu'] = self.points; + self.history.push(history); + } + + + if (self.playing && self.cpuStarts && self.player.score > 10000 && self.player.score > self.cpu.score) { + self.Interface.showMessage("Player wins!") + } else if (!self.playing && !self.cpuStarts && self.cpu.score > 10000 && self.cpu.score > self.player.score) { + self.Interface.showMessage("CPU wins!") + } else if (self.player.score > 10000 && self.player.score === self.cpu.score) { + self.Interface.showMessage("Remi!") + } + + self.endRound(); +}; + +Game.prototype.endRound = function() { + var self = this; + + // Reset + self.points = 0; + self.playing = !self.playing; + + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + dice.disabled = true; + } + + self.Interface.disableTakePoints(true); + self.Interface.disabledRoleDices(true); + self.Interface.setDices(self.dices); + self.Interface.setPoints(self.points); + self.Interface.setPlaying(self.playing); + self.Interface.setPlayer(self.player); + self.Interface.setCpu(self.cpu); + + self.Interface.disableTakePoints(true); + if (self.playing) { + self.Interface.disabledRoleDices(false); + } + + if (!self.playing) { + setTimeout(function() { + self.roleDices(); + }, 1500); + } + +} + +Game.prototype.cpuPlay = function() { + var self = this; + + // first select all available dices + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + if (!dice.disabled) { + self.toggleDice(i); + } + } + + // check if dice gains points + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + var tmpPoints = self.calculatePoints(); + if (!dice.disabled) { + self.toggleDice(i); + if (self.calculatePoints() < tmpPoints) { + self.toggleDice(i); + } + } + } + + // count free dices + var freeDices = 0; + for (var i = 0; i < 6; i++) { + var dice = self.dices[i]; + if (!dice.disabled && !dice.selected) { + freeDices++; + } + } + + setTimeout(function() { + // strategy: end round if points > 300 and less than 4 dices left + if (self.points + self.calculatePoints() > 300 && freeDices < 4 && freeDices > 0) { + self.takePoints(); + } else { + self.addPoints(); + self.roleDices(); + } + }, 3000); + + +} + +var game = new Game(Interface); diff --git a/js/interface.js b/js/interface.js new file mode 100644 index 0000000..a074ab2 --- /dev/null +++ b/js/interface.js @@ -0,0 +1,184 @@ +function Interface() { + + var self = this; + + self.events = {}; + + self.restartButton = document.querySelector('#restart-button'); + + self.playerScoreContainer = document.querySelector('#player-score-container'); + self.playerScore = document.querySelector('#player-score'); + + self.cpuScoreContainer = document.querySelector('#cpu-score-container'); + self.cpuScore = document.querySelector('#cpu-score'); + + self.points = document.querySelector('#points'); + self.pointsButton = document.querySelector('#points-button'); + self.dicesButton = document.querySelector('#dices-button'); + self.diceContainer = document.querySelector('#dices'); + self.dices = self.diceContainer.children; + + self.message = document.querySelector('#message'); + + self.dicesButton.disabled = true; + self.pointsButton.disabled = true; + + self.restartButton.addEventListener("click", function() { + self.fireEvent("restart"); + }); + + self.pointsButton.addEventListener("click", function() { + self.fireEvent("takePoints"); + }); + + + self.dicesButton.addEventListener("click", function() { + self.fireEvent("addPoints"); + self.fireEvent("roleDices"); + }); + + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var diceContainer = self.dices[diceIndex]; + diceContainer.diceIndex = diceIndex; + diceContainer.addEventListener("click", function() { + self.fireEvent("toggleDice", this.diceIndex); + }); + } + + this.setup(); +}; + +Interface.prototype.setup = function() { + this.dicesButton.disabled = true; + this.pointsButton.disabled = true; + this.message.classList.remove('visible'); + +}; + +Interface.prototype.on = function(event, callback) { + if (!this.events[event]) { + this.events[event] = []; + } + this.events[event].push(callback); +}; + +Interface.prototype.fireEvent = function(event, data) { + var callbacks = this.events[event]; + if (callbacks) { + callbacks.forEach(function(callback) { + callback(data); + }); + } +}; + +Interface.prototype.setDices = function(dices) { + var self = this; + + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var dice = dices[diceIndex]; + var diceContainer = self.dices[diceIndex]; + diceContainer.innerHTML = dice.value + 1; + + if (dice.disabled) { + diceContainer.disabled = true; + } else { + diceContainer.disabled = false; + } + + if (dice.selected) { + diceContainer.classList.add('selected'); + } else { + diceContainer.classList.remove('selected'); + } + + if (dice.invalid) { + diceContainer.classList.add('invalid'); + diceContainer.classList.remove('selected'); + } else { + diceContainer.classList.remove('invalid'); + } + } + + + + +}; + +Interface.prototype.animateDices = function(dices, callback) { + var self = this; + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var dice = dices[diceIndex]; + if (!dice.disabled && !dice.selected) { + self.dices[diceIndex].classList.add("animate"); + self.dices[diceIndex].classList.add("duration" + diceIndex); + } + } + + setTimeout(function() { + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + self.dices[diceIndex].classList.remove("animate"); + } + if (callback) { + callback(); + } + }, Math.random() * 500 + 500); +}; + +Interface.prototype.disableTakePoints = function(disabled) { + this.pointsButton.disabled = disabled; +}; + +Interface.prototype.disabledRoleDices = function(disabled) { + this.dicesButton.disabled = disabled; +}; + +Interface.prototype.setPoints = function(points) { + this.points.innerHTML = points; +}; + +Interface.prototype.setPlaying = function(playing) { + if (playing) { + this.playerScoreContainer.classList.add('active'); + this.cpuScoreContainer.classList.remove('active'); + } else { + this.playerScoreContainer.classList.remove('active'); + this.cpuScoreContainer.classList.add('active'); + } +}; + +Interface.prototype.setPlayer = function(player) { + this.playerScore.innerHTML = player.score; + this.playerScoreContainer.classList.remove('zilch-0'); + this.playerScoreContainer.classList.remove('zilch-1'); + this.playerScoreContainer.classList.remove('zilch-2'); + this.playerScoreContainer.classList.remove('zilch-3'); + this.playerScoreContainer.classList.add('zilch-' + player.zilch); + +}; + +Interface.prototype.setCpu = function(cpu) { + this.cpuScore.innerHTML = cpu.score; + this.cpuScoreContainer.classList.remove('zilch-0'); + this.cpuScoreContainer.classList.remove('zilch-1'); + this.cpuScoreContainer.classList.remove('zilch-2'); + this.cpuScoreContainer.classList.remove('zilch-3'); + this.cpuScoreContainer.classList.add('zilch-' + cpu.zilch); +}; + +Interface.prototype.showMessage = function(message, fade) { + var self = this; + + self.message.innerHTML = '

' + message + '

'; + + self.message.classList.add('visible'); + + if (fade) { + setTimeout(function() { + self.clearMessage(); + }, fade); + } +}; + +Interface.prototype.clearMessage = function() { + this.message.classList.remove('visible'); +}; diff --git a/style/fonts/ClearSans-Regular-webfont.eot b/style/fonts/ClearSans-Regular-webfont.eot new file mode 100644 index 0000000..b020e05 Binary files /dev/null and b/style/fonts/ClearSans-Regular-webfont.eot differ diff --git a/style/fonts/ClearSans-Regular-webfont.svg b/style/fonts/ClearSans-Regular-webfont.svg new file mode 100644 index 0000000..1e2cffd --- /dev/null +++ b/style/fonts/ClearSans-Regular-webfont.svg @@ -0,0 +1,669 @@ + + + \ No newline at end of file diff --git a/style/fonts/ClearSans-Regular-webfont.ttf b/style/fonts/ClearSans-Regular-webfont.ttf new file mode 100644 index 0000000..2c7356b Binary files /dev/null and b/style/fonts/ClearSans-Regular-webfont.ttf differ diff --git a/style/fonts/ClearSans-Regular-webfont.woff b/style/fonts/ClearSans-Regular-webfont.woff new file mode 100644 index 0000000..9d58858 Binary files /dev/null and b/style/fonts/ClearSans-Regular-webfont.woff differ diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..e3b8940 --- /dev/null +++ b/style/main.css @@ -0,0 +1,329 @@ +@font-face { + font-family: 'Clear Sans'; + src: url('fonts/ClearSans-Regular-webfont.eot'); + src: url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg'); + font-weight: normal; + font-style: normal; +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + background: #faf8ef; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; + color: #776e65; +} + +a { + color: #776e65; + font-weight: bold; + text-decoration: underline; + cursor: pointer; +} + +hr { + border: none; + border-bottom: 1px solid #d8d4d0; + margin-top: 20px; + margin-bottom: 30px; +} + +.container { + width: 500px; + margin: 0 auto; +} + +.button { + display: inline-block; + height: 40px; + border: 0; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; + color: #f9f6f2; + text-decoration: none; + line-height: 42px; + cursor: pointer; + text-align: center; + font-weight: bold; +} + +.button:disabled { + cursor: auto; + background: #ede0c8; + color: #776e65; +} + +.top { + text-align: center; + height: 75px; + margin-bottom: 25px; +} + +.top .button { + margin: 0 88px; +} + +.score-container { + color: gray; + position: relative; + display: inline-block; + width: 85px; + height: 75px; + background: #bbada0; + border-radius: 3px; + text-align: center; +} + +.score-container .label { + font-size: 13px; + line-height: 13px; + font-weight: bold; + text-transform: uppercase; +} + +.score-container.active { + color: white; +} + +.score-container:after { + content: ' '; + font-weight: normal; + display: inline-block; + height: 13px; + position: relative; + bottom: 5px; +} + +.score-container.zilch-1:after { + content: '\25FE'; +} + +.score-container.zilch-2:after { + content: '\25FE \25FE'; +} + +.score-container.zilch-3:after { + content: '\25FE \25FE \25FE'; +} + +.score-container .score { + font-size: 25px; + line-height: 25px; + font-weight: bold; +} + +.dices-container { + position: relative; + background: #bbada0; + border-radius: 6px; + width: 500px; + height: 341px; +} + +.dices { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +.dice { + position: relative; + cursor: pointer; + display: inline-block; + width: 100px; + height: 100px; + border: 0; + background: #eee4da; + border-radius: 3px; + padding: 0 20px; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 55px; + line-height: 100px; + font-weight: bold; + color: #776e65; + margin-top: 47px; + margin-left: 47px; +} + +.dice:focus { + outline: none; +} + +.dice:disabled { + cursor: auto; + background: rgba(238, 228, 218, 0.35); +} + +.dice.selected { + background: #ede0c8; +} + +.dice.invalid { + background-color: #f2b179; +} + +@keyframes diceAnimation { + 0% { + content: "1"; + } + 20% { + content: "2"; + } + 40% { + content: "3"; + } + 60% { + content: "4"; + } + 80% { + content: "5"; + } + 100% { + content: "6"; + } +} + +.dice.animate:after { + background: #eee4da; + content: "1"; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + animation: diceAnimation 0.5s linear infinite reverse; + -webkit-animation: diceAnimation 0.5s linear infinite reverse; + -moz-animation: diceAnimation 0.5s linear infinite reverse; + -o-animation: diceAnimation 0.5s linear infinite reverse; + -ms-animation: diceAnimation 0.5s linear infinite reverse; +} + +.dice.duration0.animate:after { + animation-delay: 0.1s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.dice.duration1.animate:after { + animation-delay: 0.3s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.dice.duration1.animate:after { + animation-delay: 0.6s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.dice.duration3.animate:after { + animation-delay: 0.7s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.dice.duration4.animate:after { + animation-delay: 1.2s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.dice.duration5.animate:after { + animation-delay: 1.5s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; +} + +.message { + visibility: hidden; + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + text-align: center; + z-index: 5; + transition: all 0.5s ease-out; + -webkit-transition: all 0.5s ease-out; + -moz-transition: all 0.5s ease-out; + -o-transition: all 0.5s ease-out; + -ms-transition: all 0.5s ease-out; +} + +.message.visible { + visibility: visible; + opacity: 1; +} + +.message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 150px; +} + +.action { + margin-top: 25px; + height: 75px; + text-align: center; +} + +.action .button { + margin-top: 15px; +} + +.pointsContainer { + position: relative; + display: inline-block; + width: 85px; + height: 75px; + background: #ede0c8; + color: #776e65; + border-radius: 3px; + text-align: center; + margin: 0 48px; +} + +.pointsContainer .label { + font-size: 13px; + line-height: 13px; + font-weight: bold; + text-transform: uppercase; +} + +.pointsContainer .points { + font-size: 25px; + line-height: 25px; + font-weight: bold; +}