Przydzielanie żetonu wielbłąda, wizerunek maharaja, pokazywanie punktów dopiero po przyznaniu wielbłada. Wydzielenie styli do osobnego pliku. Dodanie kodu gry w pliki html bez pliku php.

.gitignore

@@ -0,0 +1 @@
+.idea

README.md

@@ -7,9 +7,12 @@ Do zrobienia:
 
 - [x] wyświetlenie wszystkich żetonów dóbr istniejących w grze
 - [ ] wyświetlenie bonusowych żetonów istniejących w grze (3, 4 i 5 kart)
-- [ ] wyświetlenie żetonu wielbłąda
-- [ ] pobieranie żetonów po kliknięciu na żetonu
-- [ ] losowanie wartości bonusowych żetonów kart
-- [ ] zliczanie punków 
-- [ ] informowanie o zakończeniu rundy
-- [ ] przydzielanie żetonu Maharadży
+- [x] wyświetlenie żetonu wielbłąda
+- [ ] przydzielenie żetonu wielbłąda przed wyświetleniem wyniku
+- [ ] rozwiązywanie sprawy z remisem
+- [ ] przydzielanie bonusów nawet jak nie żetonów danej karty
+- [x] pobieranie żetonów po kliknięciu na żetonu
+- [x] losowanie wartości bonusowych żetonów kart
+- [x] zliczanie punków 
+- [x] informowanie o zakończeniu rundy
+- [x] przydzielanie żetonu Maharadży

camel.svg

@@ -0,0 +1 @@
+<svg width="200" height="200" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="52 52 96 96" enable-background="new 52 52 96 96" xml:space="preserve"><path d="M70.193,77.634l0.15-1.425c0-0.45,0.075-1.05-0.45-1.275c-0.675-0.225-1.425,0.45-1.65,1.2  c-0.225,0.226-0.075,0-0.225,0.226c-0.675-0.15-0.975-0.675-2.1-0.15c-0.675,0.225-1.05,0.675-1.875,0.825  c-0.975,0.15-1.425,0.45-2.4,0.375c-0.975-0.15-1.2-0.45-2.475-0.375c-4.95,0.675-3.225-0.15-6.075,2.85l-0.375,0.45  c-0.075,0.225-0.375,0.825-0.375,1.05c0.6,0.601,0.375,0.375,1.05,0.825c-0.375,0.375-1.2,0.45-1.275,1.05  c0.975,1.575,3.45-0.825,5.25-0.149c0.825,0.375,1.2,0.675,2.1,1.05c1.8,0.375-1.2-0.225,0,0c0.6,0.225,0.675,5.325,0.975,6  c1.05,1.575,2.55,6.75,2.85,7.05c1.65,0.675,3.15,8.475,3.375,8.1c1.2-1.274,4.8,2.851,6.9,5.625c2.025,2.851,4.5,2.176,7.425,4.051  c1.5,0.975,4.05-8.101,5.85-8.4c2.1-0.375,2.85-0.675,4.5,0.975c0.375,0.375,1.275,1.2,1.65,1.426c0.6,0.449,1.65,0.449,2.1,0.975  c0.15,0.225,0.375,1.8,0.45,2.1c0.375,2.25,1.05,3.9,2.1,5.926c0.975,1.649,2.625,6.149,2.85,7.949c0.225,1.65,0.6,2.7,1.2,4.275  c0.375,1.05,0.449,0.675,0.225,2.025l-0.375,5.024c0,0.375,0,2.4,0,2.4c-0.6,1.5-3.825,0.45-3.3,2.024  c0.075,0.375,2.1,1.2,2.475,1.351c0.601,0.075,0.675-0.15,1.2,0.075c-0.225,0.449-3.3,1.875-1.575,2.699  c1.575,0.676,2.7,0.601,4.275,0.15c1.8-0.6,2.399-0.975,1.875-2.85c-0.226-1.275-0.226-3.676-0.226-5.101  c-0.149-3.3-0.824-6.524-0.449-9.825c0.149-2.175-0.075-2.475-0.976-4.425c-0.45-1.35-0.975-3-1.05-4.274  c-0.15-1.65-0.45-3.075-0.45-4.726c-0.149-1.575-0.975-3.899,0.976-3.899c0.975,0,1.649,0.149,2.475-0.075  c1.2-0.15,1.275-0.15,2.475,0c1.575,0.225,3.301,0,4.95-0.15c2.7-0.375,6.75,0.15,9-1.575c0.976-0.6,2.25-1.649,3.226-2.1  c0.6-0.225,1.199-0.45,1.8-0.825c0.6-0.225,1.2-0.975,1.8-0.6c0.45,0.675,0.225,1.425,0.225,2.1c0,0.601,0.15,1.425,0.226,2.025  c0.45,3.3,1.649,2.7,1.875,4.875c0,0.975,0.975,3.899,1.35,5.475c0.45,3.226,0.825,4.95,0.45,8.175c-0.375,4.125,0,3.9-1.425,7.801  c-0.45,1.05-0.976,2.024-1.425,3.074c-1.426,2.851-5.25,1.2-5.775,3.45c-0.375,1.65,1.875,1.275,3,1.425  c1.2,0.15,2.475-0.375,3.3-1.199c0.45-0.375,1.05-2.476,1.425-3.226c0.825-1.875,1.65-3.825,2.4-5.7  c0.075-0.449,0.075-0.6,0.45-0.675c0,2.25-0.075,2.4-0.825,4.5c-0.15,0.375-0.15,0.675-0.225,1.05l-0.825,1.875  c-0.15,0.601,0,0.601-0.375,1.051c0,0.149-0.075,0.375-0.226,0.375l-0.225,0.449c-1.575,1.65-5.475,3.301-5.475,4.125  c0.375,0.976,1.875,0.676,2.699,0.676c1.426,0,1.65-0.226,3-0.45c1.351-0.375,1.2-1.05,1.351-2.101  c0.075-0.375,1.05-1.649,1.274-2.1c1.051-1.875,0.976-2.475,1.426-3.675c0.225-0.45,0.225-0.825,0.375-1.425  c0.449-1.275,1.05-4.051,1.8-5.101c1.05-1.575,1.649-3.225,1.35-5.1c-0.45-2.851-0.225-6.976-0.225-10.125  c0-2.476,1.05-4.125,1.05-5.775c0-0.6,0-0.975,0.075-1.575c0.149-0.6,0-1.199,0.45-1.274c0,0.6,0.149,0.825,0.149,1.425  l-0.149,1.575c0,0.6-0.375,0.675-0.375,1.274l-0.15,3.075c-0.075,0.45-0.225,0.825-0.225,1.425c0,0.45,0.6,2.025,0.975,2.325  c1.05,0.15,0.975-0.6,0.975-1.425l0.976-0.075l0.149-1.05l0.825-0.225l-0.149-1.051c1.649,1.275,3.3,0.15,2.024-0.675  c-1.649-1.05-0.825-2.1-1.35-3.899c-0.601-1.801-2.101-1.426-2.4-2.7c-0.225-0.976,0.45-3.075,0.601-4.275  c0.225-2.625,0.225-6.899-0.45-9.375c-0.45-1.8-0.825-1.875-2.025-3.075c-1.05-0.975-1.35-1.65-2.625-2.475  c-2.024-1.425-4.274-2.625-6.524-3.6c-4.051-1.875-2.625-2.101-4.95-5.175c-1.05-1.35-4.05-3.45-5.55-4.65  c-1.051-0.975-1.65-1.8-3.075-2.025c-4.275-0.675-3.3,5.101-6.15,7.875c-0.975,0.9-6.075-2.175-8.399-5.475  c-7.351-10.425-9.075,8.4-9.675,8.775c-5.1,3.225-6.525,7.725-11.55,8.775c-0.675,0.075-1.575,0.45-2.025,0.45  c-0.825,0.15-1.2-0.45-1.875-0.825c-1.875-0.975-1.35-0.6-2.625-2.4c-0.6-1.05-1.575-2.025-1.65-3.3c0-1.2-0.45-3-1.2-3.825  C72.593,81.984,72.218,78.834,70.193,77.634z"/></svg>

css/style.css

@@ -0,0 +1,205 @@
+
+.group.inactive {
+    opacity: 0.4;
+}
+
+.group {
+    clear: both;
+}
+
+.group .coin:first-child {
+    margin: 5px 0vh 5px 0vh;
+}
+
+.group .coin.selected:first-child {
+    margin: 5px 0vh 5px -4vh;
+}
+
+.group .coin.selected {
+    float: right;
+}
+
+.group .coin {
+    border-radius: 90px;
+    display: inline-block;
+    height: 9vh;
+    width: 9vh;
+    text-align: center;
+    border: 1px solid transparent;
+    margin: 5px 0vh 5px -4vh;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+    color: #d8d8d8;
+    background-position: center 72%;
+    background-repeat: no-repeat;
+    color: black;
+    cursor: pointer;
+    text-shadow: 0 0 2px #fff;
+    font-size: 3vh;
+}
+
+.group .coin.leather {
+    border-color: saddlebrown;
+    /*background: saddlebrown;*/
+    background-image: url(../leather.svg);
+    background-color: burlywood;
+    background-size: 45%
+}
+
+.group .coin.spice {
+    border-color: forestgreen;
+    background-color: #dff9b6;
+    background-image: url(../spice.svg);
+    background-size: 60%
+}
+
+.group .coin.gold {
+    border-color: goldenrod;
+    background-color: #fcf4ca;
+    background-image: url(../gold.svg);
+    background-size: 40%;
+}
+
+.group .coin.diamond {
+    border-color: darkred;
+    background-color: #f66282;
+    background-image: url(../diamond.svg);
+    background-size: 48%;
+}
+
+.group .coin.fabric {
+    border-color: purple;
+    background-color: #f5d6f5;
+    background-image: url(../fabric.svg);
+    background-size: 71%;
+}
+
+.group .coin.silver {
+    border-color: silver;
+    background-color: #879fc6;
+    background-image: url(../silver.svg);
+    background-size: 44%;
+}
+
+.players {
+    display: flex;
+    justify-content: space-around;
+}
+
+.players .player {
+    border: 2px solid dodgerblue;
+    padding: 0.5vh 4vh;
+    margin: 1.5vh 0;
+    color: #444;
+    cursor: pointer;
+    border-radius: 2px;
+    font-weight: bold;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+    display: flex;
+    align-items: center;
+    height: 50px;
+}
+
+.players .player.selected {
+    background: #6f9cc9;
+    color: #f2eeee;
+
+}
+
+.players .accept {
+    visibility: hidden;
+    border: 2px solid dodgerblue;
+    margin: 1.5vh 0;
+    height: 50px;
+    align-items: center;
+    display: flex;
+    padding: 0.5vh 4vh;
+    font-weight: bold;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+    background-color: #bedfff;
+    cursor: pointer;
+}
+
+.players .accept.on {
+    visibility: visible;
+}
+
+.players .player.player1 {
+}
+
+.players .player.player2 {
+}
+
+.players .player .score {
+    height: 50px;
+    width: 23px;
+    display: inline-block;
+    background-image: none;
+    background-size: auto auto;
+    margin: 0 5px;
+    background-image: url(../maharaja.svg);
+    background-size: 100%;
+    background-repeat: no-repeat;
+
+}
+
+.players .player .score:first-child {
+    margin-left: 15px;
+}
+
+.scoreTable {
+    width: 90vw;
+    background: #fff;
+    content: "";
+    height: 70vh;
+    position: absolute;
+    top: 15vh;
+    left: 5vw;
+    box-shadow: 0 0 207px #0000027F;
+    border: 3px solid #ccc;
+    display: block;
+}
+
+.scoreTable.visible {
+    display: block;
+}
+
+.scoreTable h1 {
+    text-align: center;
+
+}
+
+* {
+    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+}
+
+.players_section, .camel_section {
+    display: flex;
+    justify-content: space-around;
+    font-size: 45px;
+}
+
+.camel_section .player1_camel, .camel_section .player2_camel {
+    background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;
+    height: 10vh;
+    width: 10vh;
+    cursor: pointer;
+    opacity: 0.1;
+}
+.camel_section .nobody {
+    opacity: 0.1;
+}
+
+.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected
+{
+    opacity: 1;
+}
+
+.score_section {
+    display: none;
+    font-size: 35px;
+    justify-content: space-around;
+}
+
+.score_section.show {
+    display: flex;
+}

index.html

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="pl-PL">
+<head>
+    <title>Jaipur score</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+
+    <link rel="stylesheet" href="css/style.css"/>
+    <script>
+
+        function coin(value, group) {
+            this.value = value;
+            this.group = group;
+        }
+
+        function player(name, id) {
+            this.score = 0;
+            this.roundsWon = 0;
+            this.coins = [];
+            this.bonus = [];
+            this.name = name;
+            this.id = id;
+            this.selector = '.players .player.player' + id;
+
+            this.hasCamelCoin = true;
+
+            this.calculateScore = function () {
+                var score = 0;
+                for (var i in this.coins) {
+                    score += this.coins[i];
+                }
+                for (var i in this.bonus) {
+                    score += this.bonus[i];
+                }
+
+                if (this.hasCamelCoin) {
+                    score += 5;
+                }
+                return this.score = score;
+            };
+
+            this.wonRound = function () {
+                this.roundsWon += 1;
+            };
+
+            this.reset = function () {
+                this.roundsWon = 0;
+                this.score = 0;
+                this.coins = [];
+            };
+
+            this.removePoints = function () {
+                var playerScore = document.querySelectorAll(this.selector + ' .score');
+                for (var i = 0; i < playerScore.length; i++) {
+                    playerScore[i].remove();
+                }
+            };
+
+
+            this.drawPoints = function () {
+                this.removePoints();
+                var scoreDiv = document.querySelector(this.selector);
+                for (var i = 0; i < this.score; i++) {
+                    var score = document.createElement("span");
+                    score.classList.add('score');
+                    scoreDiv.appendChild(score)
+                }
+            };
+
+            this.addPoint = function () {
+                this.score++;
+                this.drawPoints();
+            }
+        }
+
+        function game(player1, player2, board) {
+            this.round = 1;
+            this.player1 = player1;
+            this.player2 = player2;
+            this.activePlayer = null;
+            this.board = board;
+            this.isOver = false;
+            this.selectedCointType = false;
+
+            this.setActivePlayer = function (playerId) {
+                if (playerId == 1) {
+                    jaipur.activePlayer = this.player1;
+                    document.querySelector('.players .player.player1').classList.add("selected");
+                    document.querySelector('.players .player.player2').classList.remove("selected");
+                    jaipur.showAcceptButton();
+                } else if (playerId == 2) {
+                    jaipur.activePlayer = this.player2;
+
+                    document.querySelector('.players .player.player1').classList.remove("selected");
+                    document.querySelector('.players .player.player2').classList.add("selected");
+                    jaipur.showAcceptButton();
+                } else {
+                    document.querySelector('.players .player.player1').classList.remove("selected");
+                    document.querySelector('.players .player.player2').classList.remove("selected");
+                    jaipur.activePlayer = false;
+
+                }
+
+                return this.activePlayer;
+            };
+
+            this.init = function () {
+                this.initializePlayerButtons();
+                this.initializeAcceptButton();
+                this.initializeCoins();
+                this.initializeCamels();
+            };
+
+            this.reset = function () {
+                this.player1.reset();
+                this.player2.reset();
+                this.isOver = false;
+            };
+
+            /**
+             * sprawdza czy runda jest już zakończona (jest 3 lub mniej typów dóbr)
+             * @returns {boolean}
+             */
+            this.isRoundOver = function () {
+                var emptyRows = 0;
+                for (var i in board.goods) {
+                    emptyRows += !board.goods[i].length ? 1 : 0;
+
+                    console.info(board.goods[i]);
+                }
+                return emptyRows >= 3;
+            };
+
+            this.initializePlayerButtons = function () {
+                document.querySelector('.players .player.player1').addEventListener('click', function () {
+                    jaipur.setActivePlayer(1)
+                });
+                document.querySelector('.players .player.player2').addEventListener('click', function () {
+                    jaipur.setActivePlayer(2)
+                });
+            };
+
+            this.showAcceptButton = function () {
+                if (!!jaipur.activePlayer && !!document.querySelector('.coin.selected')) {
+                    document.querySelector('.players .accept').style.visibility = 'visible';
+                }
+            };
+
+            this.hideAcceptButton = function () {
+                document.querySelector('.players .accept').style.visibility = 'hidden';
+            };
+
+            this.camelClick = function (player) {
+                document.querySelector('.nobody').classList.remove('selected');
+                document.querySelector('.player1_camel').classList.remove('selected');
+                document.querySelector('.player2_camel').classList.remove('selected');
+
+                if (player == 1) {
+                    document.querySelector('.player1_camel').classList.add('selected');
+                    jaipur.player1.hasCamelCoin = true;
+                    jaipur.player2.hasCamelCoin = false;
+                } else if (player == 2) {
+                    document.querySelector('.player2_camel').classList.add('selected');
+                    jaipur.player1.hasCamelCoin = false;
+                    jaipur.player2.hasCamelCoin = true;
+                } else if (player == 0) {
+                    document.querySelector('.nobody').classList.add('selected');
+                    jaipur.player1.hasCamelCoin = false;
+                    jaipur.player2.hasCamelCoin = false;
+
+                }
+                jaipur.player1.calculateScore();
+                jaipur.player2.calculateScore();
+                jaipur.showScore();
+            };
+
+            this.coinClick = function () {
+
+                if (!jaipur.selectedCointType) {
+                    jaipur.selectedCointType = this.dataset.group;
+                }
+
+                if (jaipur.selectedCointType == this.dataset.group) {
+
+                    //ustawienie active inactive na wszystkich grupach
+                    var groups = document.querySelectorAll('.group');
+                    for (var i = 0; i < groups.length; i++) {
+                        groups[i].classList.add('inactive');
+                    }
+
+                    //usuniecie inactive na tej jednej klikniętej grupie
+                    this.selectedCointType = this.dataset.group;
+                    document.querySelector('.group.' + this.dataset.group).classList.remove('inactive');
+
+                    if (this.classList.contains('selected')) {
+                        //wyłaczenie selected na ostatniej wybranym żetonie
+                        document.querySelector('.coin.selected.' + this.dataset.group).classList.remove('selected');
+
+                        //usunięcie blokady wybranego typu żetonu
+                        if (document.querySelectorAll('.coin.selected.' + this.dataset.group).length == 0) {
+                            jaipur.selectedCointType = false;
+                            for (var i = 0; i < groups.length; i++) {
+                                groups[i].classList.remove('inactive');
+                            }
+                            jaipur.hideAcceptButton();
+                        }
+                    } else {
+                        //ustawienie selected na elemencie z kliniętej grupy
+                        var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)');
+                        [].slice.call(coinsFromRow).pop().classList.add('selected');
+                        jaipur.showAcceptButton();
+                    }
+                }
+
+
+            };
+
+            this.showScoreBoard = function () {
+
+                document.querySelector('.scoreTable').classList.add('visible');
+
+
+            };
+
+            this.showScore = function () {
+                document.querySelector('.player1_score').innerText = jaipur.player1.calculateScore();
+                document.querySelector('.player2_score').innerText = jaipur.player2.calculateScore();
+                document.querySelector('.score_section').classList.add('show');
+            };
+
+            this.initializeAcceptButton = function () {
+                document.querySelector('.players .accept').addEventListener('click', this.clickAcceptButton)
+            };
+
+
+            this.clickAcceptButton = function () {
+
+                var coins = document.querySelectorAll('.coin.selected');
+
+                for (var i = 0; i < coins.length; i++) {
+                    var group = coins[i].dataset.group;
+                    jaipur.board.goods[group].pop();
+
+//                    jaipur.activePlayer.coins.push({ value:  parseInt(coins[i].innerText), type: 'goods', group: group});
+                    jaipur.activePlayer.coins.push(parseInt(coins[i].innerText));
+                    coins[i].remove();
+                }
+                var bonus = false;
+                if (coins.length == 3) {
+                    var bonusGroup = 'three';
+                    bonus = jaipur.board.bonus.three.pop()
+                } else if (coins.length == 4) {
+                    var bonusGroup = 'four';
+                    bonus = jaipur.board.bonus.four.pop()
+                } else if (coins.length >= 5) {
+                    var bonusGroup = 'five';
+                    bonus = jaipur.board.bonus.five.pop()
+                }
+
+                if (!!bonus) {
+//                    { value:  parseInt(coins[i].innerText), type: 'goods', group: group}
+//                    jaipur.activePlayer.bonus.push({ value:  parseInt(coins[i].innerText), type: 'goods', group: group});
+                    jaipur.activePlayer.bonus.push(bonus);
+                }
+//
+
+                var groups = document.querySelectorAll('.group');
+                jaipur.selectedCointType = false;
+                for (var i = 0; i < groups.length; i++) {
+                    groups[i].classList.remove('inactive');
+                }
+                jaipur.hideAcceptButton();
+                jaipur.setActivePlayer(false);
+                if (jaipur.isRoundOver()) {
+                    jaipur.showScoreBoard();
+                }
+
+            };
+
+
+            this.initializeCamels = function () {
+
+                document.querySelector('.player1_camel').addEventListener('click', function () {
+                    jaipur.camelClick(1);
+                });
+                document.querySelector('.player2_camel').addEventListener('click', function () {
+                    jaipur.camelClick(2);
+                });
+                document.querySelector('.nobody').addEventListener('click', function () {
+                    jaipur.camelClick(0);
+                });
+
+
+            };
+
+            this.initializeCoins = function () {
+                var coins = document.querySelectorAll('.coin');
+                for (var i = 0; i < coins.length; i++) {
+                    coins[i].addEventListener('click', jaipur.coinClick);
+                }
+            }
+
+
+        }
+
+
+        window.onload = function () {
+            board = {'goods': {}, 'bonus': {}};
+            board.goods.leather = [1, 1, 1, 1, 1, 1, 2, 3, 4];
+            board.goods.fabric = [1, 1, 2, 2, 3, 3, 5];
+            board.goods.spice = [1, 1, 2, 2, 3, 3, 5];
+            board.goods.silver = [5, 5, 5, 5, 5];
+            board.goods.gold = [5, 5, 5, 6, 6];
+            board.goods.diamond = [5, 5, 5, 7, 7];
+
+            board.bonus.five = [8, 9, 10, 10];
+            board.bonus.four = [4, 4, 6, 6, 5, 5];
+            board.bonus.three = [1, 1, 2, 2, 2, 3, 3];
+            board.bonus.camel = [5];
+
+            var player1 = new player('Kicia', 1);
+            var player2 = new player('Cysio', 2);
+            jaipur = new game(player1, player2, board);
+
+            jaipur.init();
+
+            console.info(jaipur.isRoundOver());
+        };
+    </script>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="players">
+        <div class="player player1" data-player="1">Kicia</div>
+        <div class="accept">Przydziel</div>
+        <div class="player player2" data-player="2">Cysio</div>
+    </div>
+
+
+    <div class="group leather">
+        <span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">1
+        </span><span class="coin leather" data-group="leather">2
+        </span><span class="coin leather" data-group="leather">3
+        </span><span class="coin leather" data-group="leather">4
+        </span>
+    </div>
+    <div class="group fabric">
+        <span class="coin fabric" data-group="fabric">1
+        </span><span class="coin fabric" data-group="fabric">1
+        </span><span class="coin fabric" data-group="fabric">2
+        </span><span class="coin fabric" data-group="fabric">2
+        </span><span class="coin fabric" data-group="fabric">3
+        </span><span class="coin fabric" data-group="fabric">3
+        </span><span class="coin fabric" data-group="fabric">5
+        </span>
+    </div>
+    <div class="group spice"><span class="coin spice" data-group="spice">1
+        </span><span class="coin spice" data-group="spice">1
+        </span><span class="coin spice" data-group="spice">2
+        </span><span class="coin spice" data-group="spice">2
+        </span><span class="coin spice" data-group="spice">3
+        </span><span class="coin spice" data-group="spice">3
+        </span><span class="coin spice" data-group="spice">5</span>
+    </div>
+    <div class="group silver"><span class="coin silver" data-group="silver">5
+        </span><span class="coin silver" data-group="silver">5
+        </span><span class="coin silver" data-group="silver">5
+        </span><span class="coin silver" data-group="silver">5
+        </span><span class="coin silver" data-group="silver">5</span>
+    </div>
+    <div class="group gold"><span class="coin gold" data-group="gold">5
+        </span><span class="coin gold" data-group="gold">5
+        </span><span class="coin gold" data-group="gold">5
+        </span><span class="coin gold" data-group="gold">6
+        </span><span class="coin gold" data-group="gold">6</span></div>
+    <div class="group diamond"><span class="coin diamond" data-group="diamond">5
+        </span><span class="coin diamond" data-group="diamond">5
+        </span><span class="coin diamond" data-group="diamond">5
+        </span><span class="coin diamond" data-group="diamond">7
+        </span><span class="coin diamond" data-group="diamond">7</span></div>
+
+
+    <div class="scoreTable">
+        <h1>Wynik</h1>
+
+
+        <div class="players_section">
+            <div class="player1_name">Kicia</div>
+            <div></div>
+            <div class="player2_name">Cysio</div>
+        </div>
+        <div class="camel_section">
+            <div class="player1_camel selected"></div>
+            <div class="nobody selected">remis</div>
+            <div class="player2_camel selected"></div>
+        </div>
+        <div class="score_section">
+            <div class="player1_score">0</div>
+            <div class="separator">:</div>
+            <div class="player2_score">0</div>
+
+        </div>
+    </div>
+
+
+</body>
+</html>

maharaja.svg

@@ -26,8 +26,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.98994949"
-     inkscape:cx="-66.800399"
-     inkscape:cy="185.68515"
+     inkscape:cx="-110.29835"
+     inkscape:cy="156.28638"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -39,7 +39,9 @@
      inkscape:window-height="837"
      inkscape:window-x="-8"
      inkscape:window-y="-8"
-     inkscape:window-maximized="1" />
+     inkscape:window-maximized="1"
+     inkscape:measure-start="0,0"
+     inkscape:measure-end="0,0" />
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -191,13 +193,20 @@
        cy="151.29018"
        rx="12.236979"
        ry="8.1264877" />
+    <ellipse
+       style="opacity:1;fill:#f3c9b1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26499999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.96464646"
+       id="path4608"
+       cx="90.520508"
+       cy="150.79645"
+       rx="11.793267"
+       ry="7.182868" />
     <ellipse
        ry="3.5907733"
        rx="8.3154755"
        cy="147.41591"
        cx="90.714272"
        id="ellipse4592"
-       style="opacity:1;fill:#e8c5ad;fill-opacity:1;fill-rule:nonzero;stroke:#e3ad92;stroke-width:0.26499996;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.96464646" />
+       style="opacity:1;fill:#f8dfd0;fill-opacity:1;fill-rule:nonzero;stroke:#f3c9b1;stroke-width:0.26499996;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
     <path
        style="fill:#9b9b9b;fill-opacity:1;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 91.745613,133.74038 c 3.277807,-0.0288 6.283998,-1.0082 10.016367,0.554 0.17577,-1.36002 -0.38245,-2.59772 -0.94494,-3.8347 -3.366721,0.0648 -6.19036,1.75891 -9.071427,3.2807 z"