From 640a3f0086a7db0fd0525e0ff89b1b27b8d3c605 Mon Sep 17 00:00:00 2001 From: jakub Date: Tue, 25 Feb 2025 09:55:41 +0100 Subject: [PATCH] first commit --- css/game.css | 69 +++++++++++++++++ css/game.css.map | 1 + css/game.scss | 83 +++++++++++++++++++++ css/main.css | 11 +++ css/main.css.map | 1 + css/main.scss | 11 +++ index.html | 24 ++++++ javascript/client-only-logic.js | 123 +++++++++++++++++++++++++++++++ javascript/game-logic.js | 47 ++++++++++++ resources/pieces/black-basic.svg | 2 + resources/pieces/black-queen.svg | 2 + resources/pieces/white-basic.svg | 2 + resources/pieces/white-queen.svg | 2 + 13 files changed, 378 insertions(+) create mode 100644 css/game.css create mode 100644 css/game.css.map create mode 100644 css/game.scss create mode 100644 css/main.css create mode 100644 css/main.css.map create mode 100644 css/main.scss create mode 100644 index.html create mode 100644 javascript/client-only-logic.js create mode 100644 javascript/game-logic.js create mode 100644 resources/pieces/black-basic.svg create mode 100644 resources/pieces/black-queen.svg create mode 100644 resources/pieces/white-basic.svg create mode 100644 resources/pieces/white-queen.svg diff --git a/css/game.css b/css/game.css new file mode 100644 index 0000000..6d4b2c3 --- /dev/null +++ b/css/game.css @@ -0,0 +1,69 @@ +#pieces-area { + width: 100%; + height: 100%; + position: absolute; +} +#pieces-area > div { + width: 80px; + position: absolute; + aspect-ratio: 1; + background-position: center; + background-size: 70px; + background-repeat: no-repeat; + transition-duration: 0.5s; + transition-property: top, left; + transition-timing-function: cubic-bezier(0.62, 0.055, 0.28, 0.965); + z-index: 1; + border-radius: 6px; + cursor: pointer; +} +#pieces-area > div.selected { + box-shadow: 0 0 15px rgb(0, 255, 242); + transition-property: top, left, box-shadow; +} +#pieces-area > div.white.basic { + background-image: url("../resources/pieces/white-basic.svg"); +} +#pieces-area > div.white.queen { + background-image: url("../resources/pieces/white-queen.svg"); +} +#pieces-area > div.black.basic { + background-image: url("../resources/pieces/black-basic.svg"); +} +#pieces-area > div.black.queen { + background-image: url("../resources/pieces/black-queen.svg"); +} + +#game #playfield { + background: rgb(180, 124, 52); + display: flex; + box-shadow: 0 0 100px rgba(0, 0, 0, 0.7); + padding: 5px; + border-radius: 8px; + width: -moz-fit-content; + width: fit-content; + position: relative; +} +#game #playfield .row { + display: inline-block; +} +#game #playfield .row .tile { + border-radius: 6px; + margin: 2px; + margin-bottom: 2px; + margin-top: 4px; + width: 80px; + aspect-ratio: 1; + background: black; +} +#game #playfield .row .tile:nth-child(odd) { + background: white; + box-shadow: -10px -10px 25px inset rgba(0, 0, 0, 0.4); +} +#game #playfield .row:nth-child(odd) .tile { + background: white; + box-shadow: -10px -10px 25px inset rgba(0, 0, 0, 0.4); +} +#game #playfield .row:nth-child(odd) .tile:nth-child(odd) { + background: black; +}/*# sourceMappingURL=game.css.map */ \ No newline at end of file diff --git a/css/game.css.map b/css/game.css.map new file mode 100644 index 0000000..ecff297 --- /dev/null +++ b/css/game.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["game.scss","game.css"],"names":[],"mappings":"AAAA;EAGI,WAAA;EACA,YAAA;EACA,kBAAA;ACDJ;ADGI;EACI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;EACA,qBAAA;EACA,4BAAA;EACA,yBAAA;EACA,8BAAA;EACA,kEAAA;EACA,UAAA;EACA,kBAAA;EAEA,eAAA;ACFR;ADGQ;EACI,qCAAA;EACA,0CAAA;ACDZ;ADIY;EACI,4DAAA;ACFhB;ADIY;EACI,4DAAA;ACFhB;ADOY;EACI,4DAAA;ACLhB;ADOY;EACI,4DAAA;ACLhB;;ADWI;EACI,6BAAA;EACA,aAAA;EACA,wCAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,kBAAA;ACRR;ADSQ;EACI,qBAAA;ACPZ;ADQY;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACNhB;ADQgB;EACI,iBAAA;EACA,qDAAA;ACNpB;ADUgB;EACI,iBAAA;EACA,qDAAA;ACRpB;ADUgB;EACI,iBAAA;ACRpB","file":"game.css"} \ No newline at end of file diff --git a/css/game.scss b/css/game.scss new file mode 100644 index 0000000..a870119 --- /dev/null +++ b/css/game.scss @@ -0,0 +1,83 @@ +#pieces-area{ + + + width: 100%; + height: 100%; + position: absolute; + + >div{ + width: 80px; + position: absolute; + aspect-ratio: 1; + background-position: center; + background-size: 70px; + background-repeat: no-repeat; + transition-duration: 0.5s; + transition-property: top, left; + transition-timing-function: cubic-bezier(0.620, 0.055, 0.280, 0.965); + z-index: 1; + border-radius: 6px; + + cursor: pointer; + &.selected{ + box-shadow: 0 0 15px rgb(0, 255, 242, 1); + transition-property: top, left, box-shadow; + } + &.white{ + &.basic{ + background-image: url("../resources/pieces/white-basic.svg"); + } + &.queen{ + background-image: url("../resources/pieces/white-queen.svg"); + } + } + + &.black{ + &.basic{ + background-image: url("../resources/pieces/black-basic.svg"); + } + &.queen{ + background-image: url("../resources/pieces/black-queen.svg"); + } + } + } +} +#game{ + #playfield{ + background: rgb(180, 124, 52); + display: flex; + box-shadow: 0 0 100px rgba(0,0,0,0.7); + padding: 5px; + border-radius: 8px; + width: fit-content; + position: relative; + .row{ + display: inline-block ; + .tile{ + border-radius: 6px; + margin: 2px; + margin-bottom: 2px; + margin-top: 4px; + width: 80px; + aspect-ratio: 1; + background: black; + + &:nth-child(odd){ + background: white; + box-shadow: -10px -10px 25px inset rgba(0,0,0,0.4); + } + } + &:nth-child(odd){ + .tile{ + background: white; + box-shadow: -10px -10px 25px inset rgba(0,0,0,0.4); + + &:nth-child(odd){ + background: black; + + } + } + } + } + } +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c2ded7a --- /dev/null +++ b/css/main.css @@ -0,0 +1,11 @@ +body { + background-color: rgb(223, 201, 172); + margin: 0; + padding: 0; +} +body #game { + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..816487a --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,oCAAA;EACA,SAAA;EACA,UAAA;ACCJ;ADAI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACER","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..2ffec6f --- /dev/null +++ b/css/main.scss @@ -0,0 +1,11 @@ +body{ + background-color: rgb(223, 201, 172); + margin: 0; + padding: 0; + #game{ + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f44a89f --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + Dáma Online + + + + + +
+
+ +
+
+ + +
+ + + + \ No newline at end of file diff --git a/javascript/client-only-logic.js b/javascript/client-only-logic.js new file mode 100644 index 0000000..0cadfbf --- /dev/null +++ b/javascript/client-only-logic.js @@ -0,0 +1,123 @@ +const playField = document.getElementById("playfield"); +const piecesArea = document.getElementById("pieces-area"); +const player = "black"; +var selectedPiece = null; + + +function movePiece(piece, x, y){ + + const tile = document.getElementById("tile" + x + y); + + const offsetPosition = piecesArea.getBoundingClientRect(); + const position = tile.getBoundingClientRect(); + + const top = position.top - offsetPosition.top; + const left = position.left - offsetPosition.left; + + piece.style.top = top + "px"; + piece.style.left = left + "px"; + + piece.setAttribute("x", x); + piece.setAttribute("y", y); +} + +function generatePlayField(){ + + + + for (let i = 0; i < 8; i++) { + + row = document.createElement("div"); + + row.classList.add("row"); + + row.id = "row" + i; + + for (let j = 0; j < 8; j++) { + tile = document.createElement("div"); + + tile.classList.add("tile"); + tile.id = "tile" + i + j; + tile.setAttribute("x", i); + tile.setAttribute("y", j); + + row.appendChild(tile); + + tile.addEventListener("click", tileClickEvent.bind(null,i,j)); + + + + } + + playField.appendChild(row); + + } + + +} + +function generatePieces(){ + pieceList.forEach(pieceRecord => { + piece = document.createElement("div"); + + piece.classList.add(pieceRecord.player); + piece.classList.add(pieceRecord.type); + + piece.setAttribute("x", pieceRecord.x); + piece.setAttribute("y", pieceRecord.y); + + piecesArea.appendChild(piece); + + movePiece(piece, pieceRecord.x, pieceRecord.y) + + if(pieceRecord.player == player){ + piece.addEventListener("click", pieceClickEvent.bind("null", piece)) + } + }); +} + +function findValidMoves(piece){ + + const x = piece.getAttribute("x"); + const y = piece.getAttribute("y"); + + const pieceRecord = getPieceRecord(x,y); + + const directionMultiplier = (pieceRecord.player == "white") ? 1 : -1; + + var validMoves = new Array(); + + //DODĚLAT ZDE! + + return validMoves; + + +} + +function resetPieceSelection() { + if(selectedPiece != null){ + selectedPiece.classList.remove("selected"); + selectedPiece = null; + } +} + +function pieceClickEvent(piece){ + resetPieceSelection(); + selectedPiece = piece; + selectedPiece.classList.add("selected"); + + +} + +function tileClickEvent(x, y){ + + if(selectedPiece != null){ + movePiece(selectedPiece, x, y) + resetPieceSelection(); + } +} + +generatePlayField(); +generatePieces(); + + diff --git a/javascript/game-logic.js b/javascript/game-logic.js new file mode 100644 index 0000000..1d5c55b --- /dev/null +++ b/javascript/game-logic.js @@ -0,0 +1,47 @@ +/* +W = Player one basic piece +V = Player one queen piece + +B = Player two basic piece +P = Player two queen piece +*/ + +var pieceList = new Array(); + +function generateDefaultPositions(){ + + var id = 0; + + for (let i = 0; i < 8; i++) { + for (let j = 0; j < 3; j++) { + if((i+j) % 2 == 0){ + pieceRecord = {id:id, x:i, y:j, player:"white", type:"basic"}; + pieceList.push(pieceRecord); + id++; + } + + } + } + + for (let i = 0; i < 8; i++) { + for (let j = 5; j < 8; j++) { + if((i+j) % 2 == 0){ + pieceRecord = {id:id, x:i, y:j, player:"black", type:"basic"}; + pieceList.push(pieceRecord); + id++; + } + + } + } +} + +function getPieceRecord(x,y){ + return pieceList.find(pieceRecord => pieceRecord.x == x && pieceRecord.y == y); +} + +function updatePieceRecord(pieceRecord) { + const index = pieceList.findIndex(record => record.id == pieceRecord.id); + pieceList[index] = pieceRecord; +} + +generateDefaultPositions(); \ No newline at end of file diff --git a/resources/pieces/black-basic.svg b/resources/pieces/black-basic.svg new file mode 100644 index 0000000..25ec132 --- /dev/null +++ b/resources/pieces/black-basic.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/resources/pieces/black-queen.svg b/resources/pieces/black-queen.svg new file mode 100644 index 0000000..922f0fc --- /dev/null +++ b/resources/pieces/black-queen.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/resources/pieces/white-basic.svg b/resources/pieces/white-basic.svg new file mode 100644 index 0000000..3fa36fc --- /dev/null +++ b/resources/pieces/white-basic.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/resources/pieces/white-queen.svg b/resources/pieces/white-queen.svg new file mode 100644 index 0000000..1f31fae --- /dev/null +++ b/resources/pieces/white-queen.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file