diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ea42857 Binary files /dev/null and b/.DS_Store differ diff --git a/black.txt b/black.txt new file mode 100644 index 0000000..8cf9425 --- /dev/null +++ b/black.txt @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/old/double.html b/old/double.html deleted file mode 100644 index ca5c8a0..0000000 --- a/old/double.html +++ /dev/null @@ -1,357 +0,0 @@ - - - - - Backgammon Tutorial: When to double/take in race conditions - - - -

- Backgammon Tutorial:

-

- When to double/take in race conditions

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Question:

-
- What should Red do if Black doubles?
- - -
-
- What if it is Red's turn to play?
- - - -
-
- - - - - - diff --git a/old/public/css/backgammon-board.css b/old/public/css/backgammon-board.css deleted file mode 100644 index d7a310c..0000000 --- a/old/public/css/backgammon-board.css +++ /dev/null @@ -1,77 +0,0 @@ - -DIV.board -{ - width: 392px; - border: 4px solid brown; -} -DIV.counter -{ - float: left; - width: 20px; - height: 20px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; -} -DIV.red -{ - background: red; - text-align: center; - color: Black; - font-weight: bold; -} -DIV.black -{ - background: black; - text-align: center; - color: Red; - font-weight: bold; -} -DIV.pip -{ - float: left; - width: 20px; - height: 110px; - padding: 4px; -} -DIV.bar -{ - background: brown; -} -DIV.home -{ - border: none; - border-left: 4px solid brown; - padding-left: 2px; - padding-right: 2px; -} -DIV.bottom-pip -{ - -moz-transform:rotate(180deg); - -webkit-transform:rotate(180deg); - -ms-transform:rotate(180deg); -} -DIV.top-pip -{ - /* - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 100px solid; - */ -} -DIV.red-pip -{ - background: #F99; - border-top-color: #F99; - border-bottom-color: #F99; -} -DIV.black-pip -{ - background: #999; - border-top-color: #999; - border-bottom-color: #999; -} -BR.clear -{ - clear: both; -} diff --git a/old/public/js/backgammon.js b/old/public/js/backgammon.js deleted file mode 100644 index 0c86170..0000000 --- a/old/public/js/backgammon.js +++ /dev/null @@ -1,276 +0,0 @@ -'use strict'; - -var Backgammon = { - - CONSTANTS: Object.freeze({ - HOME: 0, - BAR: 25, - RED: 0, - BLACK: 1 - }), - - Dice: function() { - this.rollOne = function() { - return Math.floor(Math.random() * 6) + 1; - } - this.rollTwo = function() { - return [this.rollOne(), this.rollOne()]; - } - }, - - BoardData: function() { - var _data = new Array(26); - for (var i = 0; i < 26; i++) { - _data[i] = [0, 0]; - } - function getPipIndex(pipNumber, player) { - // special pips: - if ((pipNumber == Backgammon.CONSTANTS.HOME) || (pipNumber == Backgammon.CONSTANTS.BAR)) { - return pipNumber; - } - // otherwise invert board if we are black - return player == Backgammon.CONSTANTS.RED ? pipNumber : 25 - pipNumber; - } - this.increment = function(pipNumber, player) { - return ++_data[getPipIndex(pipNumber, player)][player]; - } - this.decrement = function(pipNumber, player) { - return --_data[getPipIndex(pipNumber, player)][player]; - } - this.getCounters = function(pipNumber, player) { - return _data[getPipIndex(pipNumber, player)][player]; - } - }, - - BoardGui: function(boardElementId) { - - var _playerNames = ["red", "black"]; - var $board = $('#' + boardElementId); - - function init() { - $board.empty(); - $board.addClass('board') - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')) - .append($('
')); - } - init(); - - function getPipDiv(pipNumber, player) { - var playerName = _playerNames[player]; - switch (pipNumber) { - case Backgammon.CONSTANTS.HOME : { - return $('div#' + playerName + '-home'); - } - case Backgammon.CONSTANTS.BAR: { - return $('div#' + playerName + '-bar'); - } - default: { - return $('div#' + pipNumber); - } - } - } - - function getCounters($pipDiv) { - var totalCounters = parseInt($('.counter-total', $pipDiv).text()); - if (isNaN(totalCounters)) { - totalCounters = $('.counter', $pipDiv).length; - } - return totalCounters; - } - - this.addCounter = function(pipNumber, player) { - var playerName = _playerNames[player]; - var $pipDiv = getPipDiv(pipNumber, player); - var totalCounters = getCounters($pipDiv) + 1; - if (totalCounters > 5) { - $('.counter-total', $pipDiv).text(totalCounters); - } else if (totalCounters == 5) { - $pipDiv.append($('
').addClass(playerName)); - } else { - $pipDiv.append($('
').addClass(playerName)); - } - } - this.removeCounter = function(pipNumber, player) { - - var $pipDiv = getPipDiv(pipNumber, player); - var totalCounters = getCounters($pipDiv) - 1; - if (totalCounters > 5) { - $('.counter-total', $pipDiv).text(totalCounters); - } else if (totalCounters == 5) { - // remove number on the counter total - $('.counter-total', $pipDiv).text(''); - } else { - $('.counter', $pipDiv).first().remove(); - } - } - }, - - Board: function(boardElementId) { - - var _boardData, _boardGui; - var _boardElementId = boardElementId; - - function init() { - _boardData = new Backgammon.BoardData(); - _boardGui = new Backgammon.BoardGui(_boardElementId); - - addCounterToPip(24, Backgammon.CONSTANTS.RED); - addCounterToPip(24, Backgammon.CONSTANTS.RED); - addCounterToPip(1, Backgammon.CONSTANTS.BLACK); - addCounterToPip(1, Backgammon.CONSTANTS.BLACK); - addCounterToPip(6, Backgammon.CONSTANTS.RED); - addCounterToPip(6, Backgammon.CONSTANTS.RED); - addCounterToPip(6, Backgammon.CONSTANTS.RED); - addCounterToPip(6, Backgammon.CONSTANTS.RED); - addCounterToPip(6, Backgammon.CONSTANTS.RED); - addCounterToPip(19, Backgammon.CONSTANTS.BLACK); - addCounterToPip(19, Backgammon.CONSTANTS.BLACK); - addCounterToPip(19, Backgammon.CONSTANTS.BLACK); - addCounterToPip(19, Backgammon.CONSTANTS.BLACK); - addCounterToPip(19, Backgammon.CONSTANTS.BLACK); - addCounterToPip(8, Backgammon.CONSTANTS.RED); - addCounterToPip(8, Backgammon.CONSTANTS.RED); - addCounterToPip(8, Backgammon.CONSTANTS.RED); - addCounterToPip(17, Backgammon.CONSTANTS.BLACK); - addCounterToPip(17, Backgammon.CONSTANTS.BLACK); - addCounterToPip(17, Backgammon.CONSTANTS.BLACK); - addCounterToPip(13, Backgammon.CONSTANTS.RED); - addCounterToPip(13, Backgammon.CONSTANTS.RED); - addCounterToPip(13, Backgammon.CONSTANTS.RED); - addCounterToPip(13, Backgammon.CONSTANTS.RED); - addCounterToPip(13, Backgammon.CONSTANTS.RED); - addCounterToPip(12, Backgammon.CONSTANTS.BLACK); - addCounterToPip(12, Backgammon.CONSTANTS.BLACK); - addCounterToPip(12, Backgammon.CONSTANTS.BLACK); - addCounterToPip(12, Backgammon.CONSTANTS.BLACK); - addCounterToPip(12, Backgammon.CONSTANTS.BLACK); - } - init(); - - function addCounterToPip(pipNumber, player) { - // todo: check for legal moves - - _boardData.increment(pipNumber, player); - _boardGui.addCounter(pipNumber, player); - } - function removeCounterFromPip(pipNumber, player) { - // todo: check for legal moves - - _boardData.decrement(pipNumber, player); - _boardGui.removeCounter(pipNumber, player); - } - - function getDestinationPipNumber(player, pipNumber, moves) { - if (pipNumber == Backgammon.CONSTANTS.BAR && player == Backgammon.CONSTANTS.BLACK) { - // when coming off bar - return moves; - } - - var direction = (player == 0) ? -1 : 1; - var dest = pipNumber + (moves*direction); - if (dest > 24 || dest < 0) return 0; // when bearing off to home - return dest; - } - - this.isMoveLegal = function(player, pipNumber, moves) { - var startPip = this.getPip(pipNumber); - - // case: there is no counter to move: fail - if (startPip[player] == 0) { - console.info('no counter at ' + pipNumber); - return false; - } - - // case: there is a counter on the bar, and this is not it - if ((pipNumber != Backgammon.CONSTANTS.BAR) && (this.getPip(Backgammon.CONSTANTS.BAR)[player] > 0)) { - console.info('must move counter off bar first'); - return false; - } - - var destPipNumber = getDestinationPipNumber(player, pipNumber, moves); - if (destPipNumber == 0) { - // check all pieces are in home board - // REVIEW: this code is fiddly, should be extracted away somewhere - var p1 = 1, p2 = 18; - if (player == 0) { - p1 += 6; - p2 += 6; - } - for (var p = p1; p <= p2; p++) { - if (_boardData.getCounters(p, player) > 0) { - return false; - } - } - // already checked bar above - return true; - } - - var opponent = (player == 0) ? 1 : 0; - var destPip = this.getPip(destPipNumber); - - // case: there is a counter, but opponent blocks the end pip - if (destPip[opponent] >= 2) { - console.info('pip is blocked'); - return false; - } - // todo: more checks, eg player can bear off etc - return true; - } - - this.move = function(player, pipNumber, moves) { - // check it's legal first - if (!this.isMoveLegal(player, pipNumber, moves)) { - return false; - } - - var startPip = this.getPip(pipNumber); - - var opponent = (player == 0) ? 1 : 0; - - var destPipNumber = getDestinationPipNumber(player, pipNumber, moves); - - var destPip = this.getPip(destPipNumber); - if (destPip[opponent] == 1) { - removeCounterFromPip(destPipNumber, opponent); - addCounterToPip(Backgammon.CONSTANTS.BAR, opponent); - } - - removeCounterFromPip(pipNumber, player); - addCounterToPip(destPipNumber, player); - - return true; - } - - this.getPip = function(pipNumber) { - return [_boardData.getCounters(pipNumber, 0), _boardData.getCounters(pipNumber, 1)]; - } - } -}; \ No newline at end of file diff --git a/old/public/play.html b/old/public/play.html deleted file mode 100644 index 8d661f8..0000000 --- a/old/public/play.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - Backgammon - - - - - - -

- Backgammon

- -
- - - - diff --git a/play/.DS_Store b/play/.DS_Store new file mode 100644 index 0000000..9acea9b Binary files /dev/null and b/play/.DS_Store differ diff --git a/play/css/ui.css b/play/css/ui.css index 768fb06..383c3c8 100644 --- a/play/css/ui.css +++ b/play/css/ui.css @@ -1,157 +1,285 @@ -DIV.game-container { - font-family: Arial; +body { + margin: 0; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ } -DIV.game-container > DIV { - float: left; + +.game-container { + font-family: Arial; + background-image: url('../img/wood.jpg'); + width: 100%; + } -DIV.game-container::after { + + + +.game-container::after { content: " "; display: block; height: 0; clear: both; } -DIV.board { - width: 392px; - border: 4px solid brown; -} -DIV.checker { + + +.checker { float: left; - width: 20px; - height: 20px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; -} -DIV.red { - background: red; + width: 100%; + -moz-border-radius: 20px; + -webkit-border-radius: 20px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.checker::after{ + content: ""; + display: block; + padding-bottom: 100%; +} + +.white { + background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22base%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ccc%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22center%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eee%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22ring%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ccc%22%2F%3E%3C%2FlinearGradient%3E%3Cstyle%3E%3C%21%5BCDATA%5B%23base%20%7B%20fill%3A%20url%28%23base%29%3B%20%7D%23ring%20%7B%20fill%3A%20url%28%23ring%29%3B%20%7D%23center%20%7B%20fill%3A%20url%28%23center%29%3B%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20id%3D%22base%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2230%22%20id%3D%22ring%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2225%22%20id%3D%22center%22%2F%3E%3C%2Fsvg%3E'); text-align: center; color: black; font-weight: bold; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; } -DIV.black { - background: black; + +.black { + background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22base%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23444%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22center%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23333%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23222%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22ring%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23222%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23444%22%2F%3E%3C%2FlinearGradient%3E%3Cstyle%3E%3C%21%5BCDATA%5B%23base%20%7B%20fill%3A%20url%28%23base%29%3B%20%7D%23ring%20%7B%20fill%3A%20url%28%23ring%29%3B%20%7D%23center%20%7B%20fill%3A%20url%28%23center%29%3B%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20id%3D%22base%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2230%22%20id%3D%22ring%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2225%22%20id%3D%22center%22%2F%3E%3C%2Fsvg%3E'); text-align: center; - color: red; + color: white; font-weight: bold; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; } -DIV.checker-container { + +.checker-container { float: left; - width: 20px; - height: 110px; - padding: 4px; + width: 7.142%; + height: 45%; + padding: 0px; } -DIV.checker-container.valid-source:hover { - background: green; + +.checker-container.valid-source:hover { + background-color: rgb(0, 128, 0,0.5); cursor: pointer; } -DIV.checker-container.valid-source:active, -DIV.checker-container.valid-source.selected { - background: darkgreen; + +.checker-container.valid-source:active, +.checker-container.valid-source.selected { + background-color: rgb(0, 100, 0,0.5); } -DIV.checker-container.valid-destination { - background: yellow; + +.checker-container.valid-destination { + background-color: rgba(255, 255, 0, 0.5); cursor: pointer; } -DIV.checker-container.valid-destination:hover { - background: gold; + +.checker-container.valid-destination:hover { + background-color: rgba(255, 183, 0, 0.5); } -DIV.checker-container.valid-destination:active { - background: goldenrod; + +.checker-container.valid-destination:active { + background-color: rgba(255, 183, 0, 0.5); } -DIV.bar { - background: brown; + +.bar { + background-color: #140d07c4; } -DIV.home { - border: none; - padding-left: 2px; - padding-right: 2px; + +.home { + box-shadow:inset 0px 0px 0px 4px #140d07c4; + } -DIV.home.checker-container-top { - border-left: 4px solid brown; + +.home.checker-container-top { + /*border-left: 8px solid #140d07c4;*/ + } -DIV.home.checker-container-bottom { - border-right: 4px solid brown; + +.home.checker-container-bottom { + /* border-right: 8px solid #140d07c4;*/ } -DIV.checker-container-bottom, DIV.checker-container-bottom > DIV { - -moz-transform:rotate(180deg); - -webkit-transform:rotate(180deg); - -ms-transform:rotate(180deg); + +.checker-container-bottom, +.checker-container-bottom { + -moz-transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } -DIV.checker-container-top { - /* - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 100px solid; - */ + +.checker-container-top { + +} +.checker-container-bottom { + } -DIV.point-red { - background: #F99; - border-top-color: #F99; - border-bottom-color: #F99; + +.point-white { + background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 600' preserveAspectRatio='none'%3E%3Cpolygon points='50 500 100 0 0 0 50 500' fill='%23fcd18082'/%3E%3C/svg%3E"); } -DIV.point-black { - background: #999; - border-top-color: #999; - border-bottom-color: #999; + +.point-black { + background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 600' preserveAspectRatio='none'%3E%3Cpolygon points='50 500 100 0 0 0 50 500' fill='%23140d0782'/%3E%3C/svg%3E"); } + BR.clear { clear: both; } -DIV.side-container { - background: lightgray; -} -DIV.dice-container.active > DIV.die { - box-shadow: 0 0 100px yellow; -} -DIV.dice-container.dice-container-black > DIV.die { - background: black; - color: red; -} -DIV.dice-container.dice-container-red > DIV.die { - background: red; - color: black; + + +.active .die { + box-shadow: 0 0 5px rgb(0, 255, 0); + background-color:rgba(0, 255, 0, 0.4); } -DIV.dice-container DIV.die { - width: 20px; - height: 20px; - border-radius: 8px; - padding: 6px; - margin: 5px; + + + +.dice-container .die { + + border-radius: 5%; float: left; } -DIV.dice-container DIV.die.die-uses-0 { + +.dice-container .die.die-uses-0 { opacity: 0.3; } -DIV.dice-container DIV.die.die-uses-1, DIV.dice-container DIV.die.die-uses-2 { + +.dice-container .die.die-uses-1, +.dice-container .die.die-uses-2 { opacity: 1.0; } -DIV.dice-container DIV.die.die-uses-2::after { + +.dice-container .die.die-uses-2::after { content: 'x2'; font-size: x-small; } -DIV.status-container { - height: 144px; + +.status-container { + height: 385px; overflow-y: scroll; - float: left; - margin: 8px 2px; - width: 100px; + /* margin: 16px 4px;*/ + width: 70px; + display: none; } -DIV.status-container::-webkit-scrollbar { - width: 1em; + +.status-container::-webkit-scrollbar { + width: 0.5em; } -DIV.status-container::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + +.status-container::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3); } -DIV.status-container::-webkit-scrollbar-thumb { - background-color: darkgrey; - outline: 1px solid slategrey; + +.status-container::-webkit-scrollbar-thumb { + background-color: darkgrey; + outline: 1px solid slategrey; } .highlight { - text-shadow: 0px 0px 20px red; + text-shadow: 0px 0px 40px white; } + .highlight.highlight-end { transition: all 1s ease-in-out; text-shadow: inherit; -} \ No newline at end of file +} + +.side-container { + background-color: rgba(211, 211, 211, 0.2); + +} +.dices-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + height:10%; + + +} + +.dice-container.dice-container-black.die { + /*background: black; + color: white;*/ + + +} + +.dice-container.dice-container-white.die { + /* background: white; + color: black;*/ +} + +/* + * Dice.css v1.0 + * Code - MIT License - https://github.com/diafygi/dice-css + * Images - Public Domain - https://openclipart.org/detail/105931/sixsided-dice-faces-lio-01 + */ + .die{ + height: 100%; + + +} + + .dice-container-white .dice-1{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Ccircle cx='38' cy='38' r='7.2' style='fill:%23000;stroke:none'/%3E%3C/svg%3E");} + .dice-container-white .dice-2{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Cg style='fill:%23000;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-white .dice-3{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Cg style='fill:%23000;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='38' cy='38' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-white .dice-4{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Cg style='fill:%23000;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-white .dice-5{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Cg style='fill:%23000;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3Ccircle cx='38' cy='38' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-white .dice-6{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23fff;stroke-width:1.5;stroke:%23000'/%3E%3Cg style='fill:%23000;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3Ccircle cx='20' cy='38' r='7.2'/%3E%3Ccircle cx='57' cy='38' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + + .dice-container-black .dice-1{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Ccircle cx='38' cy='38' r='7.2' style='fill:%23fff;stroke:none'/%3E%3C/svg%3E");} + .dice-container-black .dice-2{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Cg style='fill:%23fff;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-black .dice-3{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Cg style='fill:%23fff;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='38' cy='38' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-black .dice-4{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Cg style='fill:%23fff;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-black .dice-5{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Cg style='fill:%23fff;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3Ccircle cx='38' cy='38' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + .dice-container-black .dice-6{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 77 77' height='21.6' width='21.6'%3E%3Cpath d='M1,26Q1,1 26,1h25Q76,1 76,26v25Q76,76 51,76h-25Q1,76 1,51z' style='fill:%23000;stroke-width:1.5;stroke:%23fff'/%3E%3Cg style='fill:%23fff;stroke:none'%3E%3Ccircle cx='20' cy='20' r='7.2'/%3E%3Ccircle cx='57' cy='57' r='7.2'/%3E%3Ccircle cx='57' cy='20' r='7.2'/%3E%3Ccircle cx='20' cy='57' r='7.2'/%3E%3Ccircle cx='20' cy='38' r='7.2'/%3E%3Ccircle cx='57' cy='38' r='7.2'/%3E%3C/g%3E%3C/svg%3E");} + + .rotate { + -moz-transform: scaleY(-1); + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .rotate .checker { + -moz-transform: scaleY(-1); + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + +.checker-container-bottom .checker{ + -moz-transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + + +.rotate .checker-container-bottom .checker{ + -moz-transform: rotate(0)!important; + -webkit-transform: rotate(0)!important; + -ms-transform: rotate(0)!important; + transform: rotate(0)!important; +} +.rotate .checker-container-bottom { + -moz-transform: inherit!important; + -webkit-transform: inherit!important; + -ms-transform: inherit!important; + transform: inherit!important; + +} + diff --git a/play/img/.DS_Store b/play/img/.DS_Store new file mode 100644 index 0000000..5825acd Binary files /dev/null and b/play/img/.DS_Store differ diff --git a/play/img/wood-orgin.jpg b/play/img/wood-orgin.jpg new file mode 100644 index 0000000..591c761 Binary files /dev/null and b/play/img/wood-orgin.jpg differ diff --git a/play/img/wood.jpg b/play/img/wood.jpg new file mode 100644 index 0000000..d9bb187 Binary files /dev/null and b/play/img/wood.jpg differ diff --git a/play/index.html b/play/index.html index bdf04a0..6982b94 100644 --- a/play/index.html +++ b/play/index.html @@ -1,13 +1,16 @@ + Backgammon - + + - + + + + + + + + + +