jakub
10 months ago
commit
640a3f0086
13 changed files with 378 additions and 0 deletions
@ -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 */ |
||||
@ -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"} |
||||
@ -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; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -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 */ |
||||
@ -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"} |
||||
@ -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%; |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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(); |
||||
|
||||
|
||||
@ -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(); |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue