diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/README.md b/README.md index 27f26d2..cec0ca5 100644 --- a/README.md +++ b/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 \ No newline at end of file +- [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 \ No newline at end of file diff --git a/camel.svg b/camel.svg new file mode 100644 index 0000000..cd57c29 --- /dev/null +++ b/camel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..dafa867 --- /dev/null +++ b/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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e7a188 --- /dev/null +++ b/index.html @@ -0,0 +1,415 @@ + + +
+