217 lines
5.7 KiB
HTML
217 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html ng-app="myApp">
|
||
|
|
<head>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
|
|
<!-- CSS only -->
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #222;
|
||
|
|
color: white;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chessboard {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||
|
|
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||
|
|
width: 80vmin;
|
||
|
|
height: 80vmin;
|
||
|
|
border: 10px solid gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chess-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.white {
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.black {
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.black, .white {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.black > img, .white > img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>sussy amogus chess edition</h1>
|
||
|
|
<nav>
|
||
|
|
<a href="#!chess">A</a>
|
||
|
|
<a href="#!two">B</a>
|
||
|
|
<a href="#!three">C</a>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<section>
|
||
|
|
<div ng-controller="GreetingController" class="chess-container">
|
||
|
|
<div id="chessboard">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<footer>
|
||
|
|
chess end. yay
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
let board = document.getElementById("chessboard");
|
||
|
|
let PAWN = "pawn";
|
||
|
|
let KING = "king";
|
||
|
|
let TEXTURES = {
|
||
|
|
pawn: {w: "amoguspawnw.png", b: "amoguspawnb.png"},
|
||
|
|
king: {w: "amoguskingw.png", b: "amoguskingb.png"}
|
||
|
|
}
|
||
|
|
|
||
|
|
let chessfields = [];
|
||
|
|
|
||
|
|
function getPiece(element) {
|
||
|
|
let field = parseInt(element.getAttribute("data-field"));
|
||
|
|
let x = field % 8;
|
||
|
|
let y = Math.floor(field / 8);
|
||
|
|
let pieceBlack = element.getAttribute("data-pieceBlack") == "true";
|
||
|
|
let type = element.getAttribute("data-pieceType");
|
||
|
|
return {
|
||
|
|
type: type,
|
||
|
|
field: field,
|
||
|
|
x: x,
|
||
|
|
y: y,
|
||
|
|
black: pieceBlack
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPieceAt(x, y) {
|
||
|
|
let field = y * 8 + x;
|
||
|
|
if(field < 0 || field > 63) return null;
|
||
|
|
let fieldEl = chessfields[field];
|
||
|
|
return fieldEl.children.length == 0 ? null : getPiece(fieldEl.children[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
for(let i = 0; i < 64; i++) {
|
||
|
|
let field = document.createElement("div");
|
||
|
|
let x = i % 8;
|
||
|
|
let y = Math.floor(i / 8);
|
||
|
|
if(x % 2 == 0 ^ y % 2 == 0) {
|
||
|
|
field.classList.add("black");
|
||
|
|
}else {
|
||
|
|
field.classList.add("white");
|
||
|
|
}
|
||
|
|
|
||
|
|
field.ondragover = function(e) {
|
||
|
|
let piece = e.dataTransfer.getData("piece");
|
||
|
|
if(piece == null) return;
|
||
|
|
let thePiece = document.getElementById(piece);
|
||
|
|
let pieceObj = getPiece(thePiece);
|
||
|
|
|
||
|
|
let pieceOnField = field.children.length != 0;
|
||
|
|
|
||
|
|
switch(pieceObj.type) {
|
||
|
|
case KING:
|
||
|
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||
|
|
if(Math.abs(y - pieceObj.y) > 1) return;
|
||
|
|
|
||
|
|
for(let dx = -1; dx <= 1; dx++) {
|
||
|
|
for(let dy = -1; dy <= 1; dy++) {
|
||
|
|
let p = getPieceAt(x + dx, y + dy);
|
||
|
|
if(p != null && p.type == KING && p.black != pieceObj.black) return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case PAWN:
|
||
|
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||
|
|
if((x - pieceObj.x == 0) == pieceOnField) return;
|
||
|
|
if(y - pieceObj.y != (pieceObj.black ? 1 : -1)) return;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(pieceOnField){
|
||
|
|
let otherPieceObj = getPiece(field.children[0]);
|
||
|
|
if(pieceObj.black != otherPieceObj.black) {
|
||
|
|
field.style.backgroundColor = "red";
|
||
|
|
e.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
field.style.backgroundColor = "green";
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
field.ondragleave = function(e) {
|
||
|
|
field.style.backgroundColor = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
field.ondrop = function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
let piece = e.dataTransfer.getData("piece");
|
||
|
|
if(piece == null) return;
|
||
|
|
field.style.backgroundColor = null;
|
||
|
|
let thePiece = document.getElementById(piece);
|
||
|
|
thePiece.setAttribute("data-field", i);
|
||
|
|
if(field.children.length != 0) field.children[0].remove();
|
||
|
|
field.appendChild(thePiece);
|
||
|
|
}
|
||
|
|
|
||
|
|
board.appendChild(field);
|
||
|
|
chessfields.push(field);
|
||
|
|
}
|
||
|
|
|
||
|
|
let pieces = [
|
||
|
|
{type: PAWN, black: true},
|
||
|
|
{type: PAWN, black: false},
|
||
|
|
{type: KING, black: true},
|
||
|
|
{type: KING, black: false}
|
||
|
|
];
|
||
|
|
|
||
|
|
for(let p of pieces) {
|
||
|
|
let field;
|
||
|
|
|
||
|
|
outer: while(true) {
|
||
|
|
field = Math.floor(Math.random() * 64);
|
||
|
|
let x = field % 8;
|
||
|
|
let y = Math.floor(field / 8);
|
||
|
|
|
||
|
|
if(chessfields[field].children.length != 0) continue;
|
||
|
|
|
||
|
|
for(let dx = -1; dx <= 1; dx++) {
|
||
|
|
for(let dy = -1; dy <= 1; dy++) {
|
||
|
|
let pc = getPieceAt(x + dx, y + dy);
|
||
|
|
if(pc != null && pc.type == KING && pc.black != p.black) continue outer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
let thePiece = document.createElement("img");
|
||
|
|
thePiece.id = "cringe" + Math.random();
|
||
|
|
thePiece.setAttribute("draggable", true);
|
||
|
|
thePiece.src = TEXTURES[p.type][p.black ? "b" : "w"];
|
||
|
|
thePiece.setAttribute("data-pieceType", p.type);
|
||
|
|
thePiece.setAttribute("data-pieceBlack", p.black);
|
||
|
|
thePiece.setAttribute("data-field", field);
|
||
|
|
chessfields[field].appendChild(thePiece);
|
||
|
|
thePiece.ondragstart = function(e) {
|
||
|
|
e.dataTransfer.setData("piece", thePiece.id);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var myApp = angular.module('myApp',[]);
|
||
|
|
|
||
|
|
myApp.controller('GreetingController', ['$scope', function($scope) {
|
||
|
|
$scope.greeting = 'Cringe';
|
||
|
|
}]);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|