first commit

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 */

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"}

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;
+
+                } 
+                }
+            }
+        }
+    }
+}

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 */

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"}

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%;
+    }
+}

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dáma Online</title>
+    <link rel="stylesheet" href="./css/game.css">
+    <link rel="stylesheet" href="./css/main.css">
+</head>
+<body>
+    
+    <section id="game">
+        <div id="pieces-area">
+            
+        </div>
+        <div id="playfield"></div>
+           
+    
+    </section>
+    <script src="./javascript/game-logic.js"></script>
+    <script src="./javascript/client-only-logic.js">
+    </script>
+</body>
+</html>

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();
+
+

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();

resources/pieces/black-basic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com" width="500px" height="500px"><defs><radialGradient gradientUnits="userSpaceOnUse" cx="254.059" cy="250.812" r="206.897" id="gradient-0" spreadMethod="pad"><stop offset="0" style="stop-color: rgb(57, 57, 57);"/><stop offset="1" style="stop-color: rgb(43, 43, 43);"/></radialGradient><linearGradient id="gradient-1" bx:pinned="true"><stop offset="0.122" style="stop-color: rgb(245, 0, 0);"/></linearGradient><bx:export><bx:file format="svg" path="black-simple.svg"/></bx:export></defs><ellipse style="fill: url(&quot;#gradient-0&quot;); vector-effect: non-scaling-stroke; paint-order: fill markers; stroke-width: 1px; stroke: rgb(255, 255, 255);" cx="250" cy="250" rx="248.112" ry="248.112"/><ellipse style="stroke-width: 7px; transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: rgb(255, 255, 255);" cx="250" cy="250" rx="192.193" ry="192.193" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.0001, 0.000081)"/><ellipse style="stroke-width: 7px; fill: none; transform-origin: 250px 250px; stroke: rgb(255, 255, 255);" cx="250" cy="250" rx="100.866" ry="100.866" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.000298, 0.00029)"/></svg>

resources/pieces/black-queen.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com" width="500px" height="500px"><defs><radialGradient gradientUnits="userSpaceOnUse" cx="254.059" cy="250.812" r="206.897" id="gradient-0" spreadMethod="pad"><stop offset="0" style="stop-color: rgb(57, 57, 57);"/><stop offset="1" style="stop-color: rgb(43, 43, 43);"/></radialGradient><linearGradient id="gradient-1" bx:pinned="true"><stop offset="0.122" style="stop-color: rgb(245, 0, 0);"/></linearGradient><bx:export><bx:file format="svg" path="black-queen.svg"/></bx:export></defs><ellipse style="fill: url(&quot;#gradient-0&quot;); vector-effect: non-scaling-stroke; paint-order: fill markers; stroke-width: 1px; stroke: rgb(255, 255, 255);" cx="250" cy="250" rx="248.112" ry="248.112"/><ellipse style="stroke-width: 7px; transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: rgb(239, 191, 4);" cx="250" cy="250" rx="192.193" ry="192.193" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.0001, 0.000081)"/><path d="M 250 149.735 L 336.832 199.868 L 336.832 300.133 L 250 350.265 L 163.168 300.133 L 163.168 199.867 Z" bx:shape="n-gon 250 250 100.265 100.265 6 0 1@644afc82" style="fill: none; stroke-width: 7px; stroke: rgb(239, 191, 4);"/></svg>

resources/pieces/white-basic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com" width="500px" height="500px"><defs><radialGradient gradientUnits="userSpaceOnUse" cx="254.059" cy="250.812" r="206.897" id="gradient-0" spreadMethod="pad"><stop offset="0" style="stop-color: rgb(255, 255, 255);"/><stop offset="1" style="stop-color: rgb(179, 179, 179);"/></radialGradient><linearGradient id="gradient-1" bx:pinned="true"><stop offset="0.122" style="stop-color: rgb(245, 0, 0);"/></linearGradient><bx:export><bx:file format="svg" path="white-simple.svg"/></bx:export></defs><ellipse style="fill: url(&quot;#gradient-0&quot;);" cx="250" cy="250" rx="250" ry="250"/><ellipse style="stroke-width: 7px; transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: rgba(0, 0, 0, 0.443);" cx="250" cy="250" rx="192.193" ry="192.193" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.0001, 0.000081)"/><ellipse style="stroke-width: 7px; fill: none; transform-origin: 250px 250px; stroke: rgba(0, 0, 0, 0.443);" cx="250" cy="250" rx="100.711" ry="100.711" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.000081, 0.000077)"/></svg>

resources/pieces/white-queen.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com" width="500px" height="500px"><defs><radialGradient gradientUnits="userSpaceOnUse" cx="254.059" cy="250.812" r="206.897" id="gradient-0" spreadMethod="pad"><stop offset="0" style="stop-color: rgb(255, 255, 255);"/><stop offset="1" style="stop-color: rgb(179, 179, 179);"/></radialGradient><linearGradient id="gradient-1" bx:pinned="true"><stop offset="0.122" style="stop-color: rgb(245, 0, 0);"/></linearGradient><bx:export><bx:file format="svg" path="white-queen.svg"/></bx:export></defs><ellipse style="fill: url(&quot;#gradient-0&quot;);" cx="250" cy="250" rx="250" ry="250"/><ellipse style="stroke-width: 7px; transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: rgb(239, 191, 4);" cx="250" cy="250" rx="192.193" ry="192.193" transform="matrix(0.999975, 0.007136, -0.007136, 0.999975, 0.0001, 0.000081)"/><path d="M 250 149.735 L 336.832 199.868 L 336.832 300.133 L 250 350.265 L 163.168 300.133 L 163.168 199.867 Z" bx:shape="n-gon 250 250 100.265 100.265 6 0 1@644afc82" style="fill: none; stroke-width: 7px; stroke: rgb(239, 191, 4);"/></svg>