From fa7719141bc614b3a3f85f469d019e9250a1a44a Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Sat, 19 Oct 2024 15:32:46 +0200
Subject: [PATCH] feat: Add first draft of board view

---
 html/index.php               | 13 +++++++++
 html/static/pieces/README.md |  3 ++
 html/static/pieces/b.svg     |  1 +
 html/static/pieces/bB.svg    |  1 +
 html/static/pieces/bK.svg    |  1 +
 html/static/pieces/bN.svg    |  1 +
 html/static/pieces/bQ.svg    |  1 +
 html/static/pieces/bR.svg    |  1 +
 html/static/pieces/w.svg     |  1 +
 html/static/pieces/wB.svg    |  1 +
 html/static/pieces/wK.svg    |  1 +
 html/static/pieces/wN.svg    |  1 +
 html/static/pieces/wQ.svg    |  1 +
 html/static/pieces/wR.svg    |  1 +
 html/static/styles.css       | 44 +++++++++++++++++++++++++++++
 src/Game/Game.php            | 10 ++++++-
 src/Game/Move.php            |  4 +++
 src/View/base.php            | 12 ++++++++
 src/View/fragments/board.php | 55 ++++++++++++++++++++++++++++++++++++
 src/core.php                 |  5 ++++
 20 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 html/index.php
 create mode 100644 html/static/pieces/README.md
 create mode 100644 html/static/pieces/b.svg
 create mode 100644 html/static/pieces/bB.svg
 create mode 100644 html/static/pieces/bK.svg
 create mode 100644 html/static/pieces/bN.svg
 create mode 100644 html/static/pieces/bQ.svg
 create mode 100644 html/static/pieces/bR.svg
 create mode 100644 html/static/pieces/w.svg
 create mode 100644 html/static/pieces/wB.svg
 create mode 100644 html/static/pieces/wK.svg
 create mode 100644 html/static/pieces/wN.svg
 create mode 100644 html/static/pieces/wQ.svg
 create mode 100644 html/static/pieces/wR.svg
 create mode 100644 html/static/styles.css
 create mode 100644 src/View/base.php
 create mode 100644 src/View/fragments/board.php
 create mode 100644 src/core.php

diff --git a/html/index.php b/html/index.php
new file mode 100644
index 0000000..654c4a6
--- /dev/null
+++ b/html/index.php
@@ -0,0 +1,13 @@
+<?php
+
+require_once '../src/core.php';
+
+use Game\Game;
+
+$game = Game::fromStartPosition();
+
+$content = function() use ($game) {
+    require '../src/View/fragments/board.php';
+};
+
+require '../src/View/base.php';
diff --git a/html/static/pieces/README.md b/html/static/pieces/README.md
new file mode 100644
index 0000000..c969e99
--- /dev/null
+++ b/html/static/pieces/README.md
@@ -0,0 +1,3 @@
+Piece set by [Colin M.L. Burnett](https://en.wikipedia.org/wiki/User:Cburnett)
+
+Licensed under GPLv2+
\ No newline at end of file
diff --git a/html/static/pieces/b.svg b/html/static/pieces/b.svg
new file mode 100644
index 0000000..23b2bc2
--- /dev/null
+++ b/html/static/pieces/b.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M22.5 9a4 4 0 0 0-3.22 6.38 6.48 6.48 0 0 0-.87 10.65c-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47a6.46 6.46 0 0 0-.87-10.65A4.01 4.01 0 0 0 22.5 9z"/></svg>
\ No newline at end of file
diff --git a/html/static/pieces/bB.svg b/html/static/pieces/bB.svg
new file mode 100644
index 0000000..fd71645
--- /dev/null
+++ b/html/static/pieces/bB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="#000" stroke-linecap="butt"><path d="M9 36c3.4-1 10.1.4 13.5-2 3.4 2.4 10.1 1 13.5 2 0 0 1.6.5 3 2-.7 1-1.6 1-3 .5-3.4-1-10.1.5-13.5-1-3.4 1.5-10.1 0-13.5 1-1.4.5-2.3.5-3-.5 1.4-2 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path stroke="#ececec" stroke-linejoin="miter" d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/bK.svg b/html/static/pieces/bK.svg
new file mode 100644
index 0000000..8114d17
--- /dev/null
+++ b/html/static/pieces/bK.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linejoin="miter" d="M22.5 11.6V6"/><path fill="#000" stroke-linecap="butt" stroke-linejoin="miter" d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5"/><path fill="#000" d="M11.5 37a22.3 22.3 0 0 0 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10V37z"/><path stroke-linejoin="miter" d="M20 8h5"/><path stroke="#ececec" d="M32 29.5s8.5-4 6-9.7C34.1 14 25 18 22.5 24.6v2.1-2.1C20 18 9.9 14 7 19.9c-2.5 5.6 4.8 9 4.8 9"/><path stroke="#ececec" d="M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/bN.svg b/html/static/pieces/bN.svg
new file mode 100644
index 0000000..2c2c534
--- /dev/null
+++ b/html/static/pieces/bN.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="#000" d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21"/><path fill="#000" d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.04-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-1-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-2 2.5-3c1 0 1 3 1 3"/><path fill="#ececec" stroke="#ececec" d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0zm5.43-9.75a.5 1.5 30 1 1-.86-.5.5 1.5 30 1 1 .86.5z"/><path fill="#ececec" stroke="none" d="m24.55 10.4-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1z"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/bQ.svg b/html/static/pieces/bQ.svg
new file mode 100644
index 0000000..005c223
--- /dev/null
+++ b/html/static/pieces/bQ.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g stroke="none"><circle cx="6" cy="12" r="2.75"/><circle cx="14" cy="9" r="2.75"/><circle cx="22.5" cy="8" r="2.75"/><circle cx="31" cy="9" r="2.75"/><circle cx="39" cy="12" r="2.75"/></g><path stroke-linecap="butt" d="M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5 9 26z"/><path stroke-linecap="butt" d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z"/><path fill="none" stroke-linecap="butt" d="M11 38.5a35 35 1 0 0 23 0"/><path fill="none" stroke="#ececec" d="M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0m-23 3a35 35 1 0 0 24 0"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/bR.svg b/html/static/pieces/bR.svg
new file mode 100644
index 0000000..c9339b0
--- /dev/null
+++ b/html/static/pieces/bR.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="butt" d="M9 39h27v-3H9v3zm3.5-7 1.5-2.5h17l1.5 2.5h-20zm-.5 4v-4h21v4H12z"/><path stroke-linecap="butt" stroke-linejoin="miter" d="M14 29.5v-13h17v13H14z"/><path stroke-linecap="butt" d="M14 16.5 11 14h23l-3 2.5H14zM11 14V9h4v2h5V9h5v2h5V9h4v5H11z"/><path fill="none" stroke="#ececec" stroke-linejoin="miter" stroke-width="1" d="M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/w.svg b/html/static/pieces/w.svg
new file mode 100644
index 0000000..9949318
--- /dev/null
+++ b/html/static/pieces/w.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><path fill="#fff" stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z"/></svg>
\ No newline at end of file
diff --git a/html/static/pieces/wB.svg b/html/static/pieces/wB.svg
new file mode 100644
index 0000000..3d7deb0
--- /dev/null
+++ b/html/static/pieces/wB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="#fff" stroke-linecap="butt"><path d="M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.35.49-2.32.47-3-.5 1.35-1.94 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path stroke-linejoin="miter" d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/wK.svg b/html/static/pieces/wK.svg
new file mode 100644
index 0000000..08189e8
--- /dev/null
+++ b/html/static/pieces/wK.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linejoin="miter" d="M22.5 11.63V6M20 8h5"/><path fill="#fff" stroke-linecap="butt" stroke-linejoin="miter" d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5"/><path fill="#fff" d="M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10V37z"/><path d="M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/wN.svg b/html/static/pieces/wN.svg
new file mode 100644
index 0000000..005c337
--- /dev/null
+++ b/html/static/pieces/wN.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="#fff" d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21"/><path fill="#fff" d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3"/><path fill="#000" d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0zm5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5z"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/wQ.svg b/html/static/pieces/wQ.svg
new file mode 100644
index 0000000..d5c5ee4
--- /dev/null
+++ b/html/static/pieces/wQ.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M8 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0zm16.5-4.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM41 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM16 8.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0zM33 9a2 2 0 1 1-4 0 2 2 0 1 1 4 0z"/><path stroke-linecap="butt" d="M9 26c8.5-1.5 21-1.5 27 0l2-12-7 11V11l-5.5 13.5-3-15-3 15-5.5-14V25L7 14l2 12z"/><path stroke-linecap="butt" d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z"/><path fill="none" d="M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0"/></g></svg>
\ No newline at end of file
diff --git a/html/static/pieces/wR.svg b/html/static/pieces/wR.svg
new file mode 100644
index 0000000..c149104
--- /dev/null
+++ b/html/static/pieces/wR.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="butt" d="M9 39h27v-3H9v3zm3-3v-4h21v4H12zm-1-22V9h4v2h5V9h5v2h5V9h4v5"/><path d="m34 14-3 3H14l-3-3"/><path stroke-linecap="butt" stroke-linejoin="miter" d="M31 17v12.5H14V17"/><path d="m31 29.5 1.5 2.5h-20l1.5-2.5"/><path fill="none" stroke-linejoin="miter" d="M11 14h23"/></g></svg>
\ No newline at end of file
diff --git a/html/static/styles.css b/html/static/styles.css
new file mode 100644
index 0000000..df00f08
--- /dev/null
+++ b/html/static/styles.css
@@ -0,0 +1,44 @@
+* {
+    box-sizing: border-box;
+}
+
+.board {
+    width: 400px;
+    height: 400px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
+.square {
+    width: 12.5%;
+    height: 12.5%;
+}
+
+.square.black {
+    background-color: brown;
+}
+
+.square.white {
+    background-color: lightgoldenrodyellow;
+}
+
+.square.black.hasMoves {
+    background-color: green;
+}
+
+.square.white.hasMoves {
+    background-color: greenyellow;
+}
+
+.piece {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.piece img {
+    width: 100%;
+    z-index: 10;
+}
\ No newline at end of file
diff --git a/src/Game/Game.php b/src/Game/Game.php
index bb52522..285c0e7 100644
--- a/src/Game/Game.php
+++ b/src/Game/Game.php
@@ -412,6 +412,14 @@ class Game {
         return GameState::DEFAULT;
     }
 
+    public function getPiece(Position $position): Piece|false {
+        return current(array_filter($this->pieces, fn($p) => $p->getPosition()->equals($position)));
+    }
+
+    public function getMovesForPiece(Piece $piece): array {
+        return array_values(array_filter($this->getLegalMoves(), fn($m) => $piece->equals($m->getPiece())));
+    }
+
     public function visualize(): string {
         $result = "  ";
 
@@ -428,7 +436,7 @@ class Game {
                 $position = new Position($file, $rank);
                 $result .= "\033[" . ($position->getSquareColor() == Side::WHITE ? 47 : 100) . "m";
 
-                $piece = current(array_filter($this->pieces, fn($p) => $p->getPosition()->equals($position)));
+                $piece = $this->getPiece($position);
                 if ($piece) {
                     if ($piece->getSide() == Side::WHITE) {
                         $result .= "\033[97m";
diff --git a/src/Game/Move.php b/src/Game/Move.php
index 40960a3..2de89ae 100644
--- a/src/Game/Move.php
+++ b/src/Game/Move.php
@@ -126,6 +126,10 @@ class Move {
         return $result;
     }
 
+    public function getPiece(): Piece {
+        return $this->piece;
+    }
+
     public function getLong(?Game $game = null): string {
         if ($this->isCastles()) {
             $result = $this->getCastlesMarker();
diff --git a/src/View/base.php b/src/View/base.php
new file mode 100644
index 0000000..0832937
--- /dev/null
+++ b/src/View/base.php
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>test</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <?php
+        if($content ?? null) $content();
+    ?>
+</body>
+</html>
diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php
new file mode 100644
index 0000000..ccc7c31
--- /dev/null
+++ b/src/View/fragments/board.php
@@ -0,0 +1,55 @@
+<?php
+
+use Game\Game;
+use Game\Piece;
+use Game\Position;use Game\Side;
+
+$game ??= new Game([], \Game\Side::WHITE);
+
+$current = Side::WHITE;
+
+if (($current ?? Side::WHITE) == Side::WHITE) {
+    $start = 7;
+    $end = -1;
+    $dir = -1;
+} else {
+    $start = 0;
+    $end = 8;
+    $dir = 1;
+}
+
+function getImageForPice(Piece $piece): string {
+    return "/static/pieces/" .
+        ($piece->getSide() == Side::WHITE ? "w" : "b") .
+        $piece->getType()->getShort() .
+        ".svg";
+}
+
+?>
+<div class="board">
+    <?php
+        for($rank = $start; $rank != $end; $rank += $dir) {
+            for($file = $start; $file != $end; $file += $dir) {
+                $position = new Position($file, $rank);
+                $piece = $game->getPiece($position);
+                $moves = $piece ? $game->getMovesForPiece($piece) : [];
+    ?>
+            <div class="square <?= strtolower($position->getSquareColor()->name) ?> <?= count($moves) > 0 ? "hasMoves" : "" ?>">
+                <?php
+                    if ($piece) {
+                ?>
+                    <div class="piece <?= strtolower($piece->getSide()->name) ?>">
+                        <img
+                                alt="<?= strtolower($piece->getSide()->name) ?> <?= strtolower($piece->getType()->name) ?>"
+                                src="<?= getImageForPice($piece) ?>"
+                        />
+                    </div>
+                <?php
+                    }
+                ?>
+            </div>
+    <?php
+            }
+        }
+    ?>
+</div>
diff --git a/src/core.php b/src/core.php
new file mode 100644
index 0000000..5e1901c
--- /dev/null
+++ b/src/core.php
@@ -0,0 +1,5 @@
+<?php
+
+spl_autoload_register(function($className) {
+    require (__DIR__ . "/" . str_replace("\\", "/", $className) . ".php");
+});
\ No newline at end of file