From 5edc39fcc24d95a7c52e69da49b3853c6d969f4a Mon Sep 17 00:00:00 2001
From: IgrisBRC <Igris4884@gmail.com>
Date: Sat, 13 Jul 2024 11:38:32 +0530
Subject: refactored the project

---
 app.js            | 366 ------------------------------------------------------
 game.js           |  38 ------
 index.css         |  47 -------
 index.html        | 126 -------------------
 package.json      |   7 +-
 public/app.js     | 365 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 public/game.js    |  13 ++
 public/index.css  |  47 +++++++
 public/index.html | 127 +++++++++++++++++++
 server.js         |  17 +++
 10 files changed, 574 insertions(+), 579 deletions(-)
 delete mode 100644 app.js
 delete mode 100644 game.js
 delete mode 100644 index.css
 delete mode 100644 index.html
 create mode 100644 public/app.js
 create mode 100644 public/game.js
 create mode 100644 public/index.css
 create mode 100644 public/index.html
 create mode 100644 server.js

diff --git a/app.js b/app.js
deleted file mode 100644
index 1122bed..0000000
--- a/app.js
+++ /dev/null
@@ -1,366 +0,0 @@
-let board = [
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [-6, -6, -6, -6, -6, -6, -6, -6],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [6, 6, 6, 6, 6, 6, 6, 6],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-]
-
-
-console.log(move(board, 1, 0))
-//move(board, 3, 3)
-
-function move(board, y, x) {
-    let piece = Math.abs(board[y][x])
-    switch (piece) {
-        case 0:
-            return []
-        case 1:
-            return king_move(board, y, x)
-        case 2:
-            return amelia_move(board, y, x)
-        case 3:
-            return rook_move(board, y, x)
-        case 4:
-            return bishop_move(board, y, x)
-        case 5:
-            return knight_move(board, y, x)
-        case 6:
-            return pawn_move(board, y, x)
-    }
-}
-
-function pawn_move(board, y, x) {
-    let moves = []
-    let color = board[y][x] > 0
-
-    if (color) {
-        if (y == 6) {
-            if (board[y - 1][x] == 0) {
-                moves.push([y - 1, x])
-            }
-            if (board[y - 2][x] == 0) {
-                moves.push([y - 2, x])
-            }
-        } else if (color && y != 0) {
-            if (board[y - 1][x] == 0) {
-                moves.push([y - 1, x])
-            }
-        }
-
-        return moves
-    } else {
-        if (y == 1) {
-            if (board[y + 1][x] == 0) {
-                moves.push([y + 1, x])
-            }
-            if (board[y + 2][x] == 0) {
-                moves.push([y + 2, x])
-            }
-        } else if (color && y != 7) {
-            if (board[y + 1][x] == 0) {
-                moves.push([y + 1, x])
-            }
-        }
-        return moves
-    }
-}
-
-function king_move(board, y, x) {
-    let color = board[y][x] > 0
-    let moves = []
-
-    for (let i = y - 1; i <= y + 1; i += 1) {
-        for (let j = x - 1; j <= x + 1; j += 1) {
-            if ((i == y && j == x) || i < 0 || j < 0 || i >= board.length || j >= board[i].length) {
-                continue
-            }
-            if (board[i][j] == 0 || (color ^ board[i][j] > 0)) {
-                moves.push([i, j])
-            }
-        }
-    }
-
-    return moves
-}
-
-function knight_move(board, y, x) {
-    let color = board[y][x] > 0
-    let moves = []
-
-    let cand = [
-        [y + 2, x + 1],
-        [y + 2, x - 1],
-        [y + 1, x - 2],
-        [y + 1, x + 2],
-        [y - 2, x + 1],
-        [y - 2, x - 1],
-        [y - 1, x + 2],
-        [y - 1, x - 2],
-    ]
-
-    for (let k = 0; k < cand.length; k++) {
-        if (cand[k][0] < 0 || cand[k][1] < 0 || cand[k][0] >= board.length || cand[k][1] >= board[cand[k][0]].length) {
-            continue
-        }
-
-        if (board[cand[k][0]][cand[k][1]] == 0 || (color ^ board[cand[k][0]][cand[k][1]] > 0)) {
-            moves.push([cand[k][0], cand[k][1]])
-        }
-    }
-
-    return moves
-}
-
-
-function rook_move(board, y, x) {
-    let color = board[y][x] > 0
-    let moves = []
-
-    for (let i = x + 1; i < board[1].length; i++) {
-        if (board[y][i] != 0) {
-            if (color ^ board[y][i] > 0) {
-                console.log(color ^ board[y][i])
-                moves.push([y, i])
-                break
-            }
-            break
-        }
-        moves.push([y, i])
-    }
-
-    for (let i = x - 1; i >= 0; i--) {
-        if (board[y][i] != 0) {
-            if (color ^ board[y][i] > 0) {
-                moves.push([y, i])
-                break
-            }
-            break
-        }
-        moves.push([y, i])
-    }
-
-
-    for (let i = y + 1; i < board.length; i++) {
-        if (board[i][x] != 0) {
-            if (color ^ board[i][x] > 0) {
-                moves.push([i, x])
-                break
-            }
-            break
-        }
-        moves.push([i, x])
-    }
-
-    for (let i = y - 1; i >= 0; i--) {
-        if (board[i][x] != 0) {
-            if (color ^ board[i][x] > 0) {
-                moves.push([i, x])
-                break
-            }
-            break
-        }
-        moves.push([i, x])
-    }
-
-    return moves
-}
-
-function bishop_move(board, y, x) {
-    let color = board[y][x] > 0
-    let moves = []
-
-    let i = y + 1
-    let j = x + 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i += 1
-        j += 1
-    }
-
-    i = y - 1
-    j = x - 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i -= 1
-        j -= 1
-    }
-
-    i = y - 1
-    j = x + 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i -= 1
-        j += 1
-    }
-
-    i = y + 1
-    j = x - 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i += 1
-        j -= 1
-    }
-
-    return moves
-}
-
-function amelia_move(board, y, x) {
-    let color = board[y][x] > 0
-    let moves = []
-
-    for (let i = x + 1; i < board[1].length; i++) {
-        if (board[y][i] != 0) {
-            if (color ^ board[y][i] > 0) {
-                console.log(color ^ board[y][i])
-                moves.push([y, i])
-                break
-            }
-            break
-        }
-        moves.push([y, i])
-    }
-
-    for (let i = x - 1; i >= 0; i--) {
-        if (board[y][i] != 0) {
-            if (color ^ board[y][i] > 0) {
-                moves.push([y, i])
-                break
-            }
-            break
-        }
-        moves.push([y, i])
-    }
-
-
-    for (let i = y + 1; i < board.length; i++) {
-        if (board[i][x] != 0) {
-            if (color ^ board[i][x] > 0) {
-                moves.push([i, x])
-                break
-            }
-            break
-        }
-        moves.push([i, x])
-    }
-
-    for (let i = y - 1; i >= 0; i--) {
-        if (board[i][x] != 0) {
-            if (color ^ board[i][x] > 0) {
-                moves.push([i, x])
-                break
-            }
-            break
-        }
-        moves.push([i, x])
-    }
-    let i = y + 1
-    let j = x + 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i += 1
-        j += 1
-    }
-
-    i = y - 1
-    j = x - 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i -= 1
-        j -= 1
-    }
-
-    i = y - 1
-    j = x + 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i -= 1
-        j += 1
-    }
-
-    i = y + 1
-    j = x - 1
-
-    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
-        if (board[i][j] != 0) {
-            if (color ^ board[i][j] > 0) {
-                moves.push([i, j])
-                break
-            }
-            break
-        }
-
-        moves.push([i, j])
-        i += 1
-        j -= 1
-    }
-    return moves
-}
-
-export { move }
diff --git a/game.js b/game.js
deleted file mode 100644
index 73519bc..0000000
--- a/game.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { move } from "./app.js"
-
-//const alphabet = 'abcdefgh'
-//let squares = document.getElementsByClassName("square")
-
-let board = [
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [-6, -6, -6, -6, -6, -6, -6, -6],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [6, 6, 6, 6, 6, 6, 6, 6],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-]
-
-console.log(move(board, 1, 0))
-
-//for (let i = 0; i < 8; i++) {
-//    for (let j = 0; j < 8; j++) {
-//        let square = document.getElementById(`${alphabet.charAt(j)}${i + 1}`)
-//        let piece = document.createElement("p")
-//
-//        switch (board[i][j]) {
-//            case 1:
-//                piece.classList.add("wp")
-//                square.append(piece)
-//                piece.append("p")
-//                break
-//            case -1:
-//                piece.classList.add("bp")
-//                square.append(piece)
-//                piece.append("p")
-//                break
-//        }
-//    }
-//}
-
diff --git a/index.css b/index.css
deleted file mode 100644
index 08324aa..0000000
--- a/index.css
+++ /dev/null
@@ -1,47 +0,0 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-.box{
-    height: 76px;
-    width: 76px;  
-    position: relative; 
-}
-.top-corner{
-    padding: 1px;
-    position: absolute;
-}
-.bottom-corner{
-    padding: 1px;
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-}
-
-.white{
-    background-color: #eaead2;
-    color: #4b7299;
-}
-
-.black{    
-    background-color: #4b7299; 
-    color: #eaead2;
-}
-
-body{
-    height: 100vh;
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 1px;
-}
-
-.chess-board{
-    width: 608px;
-    height: 608px;
-    display: grid;
-    grid-template-columns:repeat(8,1fr);
-    grid-template-rows:repeat(8,1fr);
-}
diff --git a/index.html b/index.html
deleted file mode 100644
index 0e30833..0000000
--- a/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chess</title>
-    <link rel="stylesheet" href="index.css">
-</head>
-<body>
-    <div class="chess-board">
-        <div>
-
-            <div id="a1" class="box white">
-                <div class="top-corner">8</div>
-            </div>
-            <div id="a2" class="box black">
-                <div class="top-corner">7</div>
-            </div>
-            <div id="a3" class="box white">
-                <div class="top-corner">6</div>
-            </div>
-            <div id="a4" class="box black">
-                <div class="top-corner">5</div>
-            </div>
-            <div id="a5" class="box white">
-                <div class="top-corner">4</div>
-            </div>
-            <div id="a6" class="box black">
-                <div class="top-corner">3</div>
-            </div>
-            <div id="a7" class="box white">
-                <div class="top-corner">2</div>
-            </div>
-            <div id="a8" class="box black">
-                <div class="top-corner">1</div>
-                <div class="bottom-corner">a</div>
-            </div>
-        </div>
-        <div>
-            <div id="b1" class="box black"></div>
-            <div id="b2" class="box white"></div>
-            <div id="b3" class="box black"></div>
-            <div id="b4" class="box white"></div>
-            <div id="b5" class="box black"></div>
-            <div id="b6" class="box white"></div>
-            <div id="b7" class="box black"></div>
-            <div id="b8" class="box white">
-               <div class="bottom-corner">b</div> 
-            </div>
-        </div>
-        <div>
-            <div id="c1" class="box white"></div>
-            <div id="c2" class="box black"></div>
-            <div id="c3" class="box white"></div>
-            <div id="c4" class="box black"></div>
-            <div id="c5" class="box white"></div>
-            <div id="c6" class="box black"></div>
-            <div id="c7" class="box white"></div>
-            <div id="c8" class="box black">
-               <div class="bottom-corner">c</div> 
-            </div>
-        </div>
-        <div>
-            <div id="d1" class="box black"></div>
-            <div id="d2" class="box white"></div>
-            <div id="d3" class="box black"></div>
-            <div id="d4" class="box white"></div>
-            <div id="d5" class="box black"></div>
-            <div id="d6" class="box white"></div>
-            <div id="d7" class="box black"></div>
-            <div id="d8" class="box white">
-               <div class="bottom-corner">d</div> 
-            </div>
-        </div>
-        <div>
-            <div id="e1" class="box white"></div>
-            <div id="e2" class="box black"></div>
-            <div id="e3" class="box white"></div>
-            <div id="e4" class="box black"></div>
-            <div id="e5" class="box white"></div>
-            <div id="e6" class="box black"></div>
-            <div id="e7" class="box white"></div>
-            <div id="e8" class="box black">
-               <div class="bottom-corner">e</div> 
-            </div>
-        </div>
-        <div>
-            <div id="f1" class="box black"></div>
-            <div id="f2" class="box white"></div>
-            <div id="f3" class="box black"></div>
-            <div id="f4" class="box white"></div>
-            <div id="f5" class="box black"></div>
-            <div id="f6" class="box white"></div>
-            <div id="f7" class="box black"></div>
-            <div id="f8" class="box white">
-               <div class="bottom-corner">f</div> 
-            </div>
-        </div>
-        <div>
-            <div id="g1" class="box white"></div>
-            <div id="g2" class="box black"></div>
-            <div id="g3" class="box white"></div>
-            <div id="g4" class="box black"></div>
-            <div id="g5" class="box white"></div>
-            <div id="g6" class="box black"></div>
-            <div id="g7" class="box white"></div>
-            <div id="g8" class="box black">
-               <div class="bottom-corner">g</div> 
-            </div>
-        </div>
-        <div>
-            <div id="h1" class="box black"></div>
-            <div id="h2" class="box white"></div>
-            <div id="h3" class="box black"></div>
-            <div id="h4" class="box white"></div>
-            <div id="h5" class="box black"></div>
-            <div id="h6" class="box white"></div>
-            <div id="h7" class="box black"></div>
-            <div id="h8" class="box white">
-               <div class="bottom-corner">h</div> 
-            </div>
-        </div>
-        </div>    
-    <script src="./game.js"></script>
-</body>
-</html>
diff --git a/package.json b/package.json
index 15058b1..e2871a9 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,15 @@
   "name": "chess",
   "version": "1.0.0",
   "main": "index.js",
-  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": ""
+  "description": "",
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2"
+  }
 }
diff --git a/public/app.js b/public/app.js
new file mode 100644
index 0000000..bbb8d4b
--- /dev/null
+++ b/public/app.js
@@ -0,0 +1,365 @@
+let board = [
+    [-3, -5, -4, -2, -1, -4, -5, -3],
+    [-6, -6, -6, -6, -6, -6, -6, -6],
+    [0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0],
+    [6, 6, 6, 6, 6, 6, 6, 6],
+    [3, 5, 4, 2, 1, 4, 5, 3],
+]
+
+
+//console.log(move(board, 1, 0))
+//move(board, 3, 3)
+
+function move(board, y, x) {
+    let piece = Math.abs(board[y][x])
+    switch (piece) {
+        case 0:
+            return []
+        case 1:
+            return king_move(board, y, x)
+        case 2:
+            return amelia_move(board, y, x)
+        case 3:
+            return rook_move(board, y, x)
+        case 4:
+            return bishop_move(board, y, x)
+        case 5:
+            return knight_move(board, y, x)
+        case 6:
+            return pawn_move(board, y, x)
+    }
+}
+
+function pawn_move(board, y, x) {
+    let moves = []
+    let color = board[y][x] > 0
+
+    if (color) {
+        if (y == 6) {
+            if (board[y - 1][x] == 0) {
+                moves.push([y - 1, x])
+            }
+            if (board[y - 2][x] == 0) {
+                moves.push([y - 2, x])
+            }
+        } else if (color && y != 0) {
+            if (board[y - 1][x] == 0) {
+                moves.push([y - 1, x])
+            }
+        }
+
+        return moves
+    } else {
+        if (y == 1) {
+            if (board[y + 1][x] == 0) {
+                moves.push([y + 1, x])
+            }
+            if (board[y + 2][x] == 0) {
+                moves.push([y + 2, x])
+            }
+        } else if (color && y != 7) {
+            if (board[y + 1][x] == 0) {
+                moves.push([y + 1, x])
+            }
+        }
+        return moves
+    }
+}
+
+function king_move(board, y, x) {
+    let color = board[y][x] > 0
+    let moves = []
+
+    for (let i = y - 1; i <= y + 1; i += 1) {
+        for (let j = x - 1; j <= x + 1; j += 1) {
+            if ((i == y && j == x) || i < 0 || j < 0 || i >= board.length || j >= board[i].length) {
+                continue
+            }
+            if (board[i][j] == 0 || (color ^ board[i][j] > 0)) {
+                moves.push([i, j])
+            }
+        }
+    }
+
+    return moves
+}
+
+function knight_move(board, y, x) {
+    let color = board[y][x] > 0
+    let moves = []
+
+    let cand = [
+        [y + 2, x + 1],
+        [y + 2, x - 1],
+        [y + 1, x - 2],
+        [y + 1, x + 2],
+        [y - 2, x + 1],
+        [y - 2, x - 1],
+        [y - 1, x + 2],
+        [y - 1, x - 2],
+    ]
+
+    for (let k = 0; k < cand.length; k++) {
+        if (cand[k][0] < 0 || cand[k][1] < 0 || cand[k][0] >= board.length || cand[k][1] >= board[cand[k][0]].length) {
+            continue
+        }
+
+        if (board[cand[k][0]][cand[k][1]] == 0 || (color ^ board[cand[k][0]][cand[k][1]] > 0)) {
+            moves.push([cand[k][0], cand[k][1]])
+        }
+    }
+
+    return moves
+}
+
+
+function rook_move(board, y, x) {
+    let color = board[y][x] > 0
+    let moves = []
+
+    for (let i = x + 1; i < board[1].length; i++) {
+        if (board[y][i] != 0) {
+            if (color ^ board[y][i] > 0) {
+                console.log(color ^ board[y][i])
+                moves.push([y, i])
+                break
+            }
+            break
+        }
+        moves.push([y, i])
+    }
+
+    for (let i = x - 1; i >= 0; i--) {
+        if (board[y][i] != 0) {
+            if (color ^ board[y][i] > 0) {
+                moves.push([y, i])
+                break
+            }
+            break
+        }
+        moves.push([y, i])
+    }
+
+
+    for (let i = y + 1; i < board.length; i++) {
+        if (board[i][x] != 0) {
+            if (color ^ board[i][x] > 0) {
+                moves.push([i, x])
+                break
+            }
+            break
+        }
+        moves.push([i, x])
+    }
+
+    for (let i = y - 1; i >= 0; i--) {
+        if (board[i][x] != 0) {
+            if (color ^ board[i][x] > 0) {
+                moves.push([i, x])
+                break
+            }
+            break
+        }
+        moves.push([i, x])
+    }
+
+    return moves
+}
+
+function bishop_move(board, y, x) {
+    let color = board[y][x] > 0
+    let moves = []
+
+    let i = y + 1
+    let j = x + 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i += 1
+        j += 1
+    }
+
+    i = y - 1
+    j = x - 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i -= 1
+        j -= 1
+    }
+
+    i = y - 1
+    j = x + 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i -= 1
+        j += 1
+    }
+
+    i = y + 1
+    j = x - 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i += 1
+        j -= 1
+    }
+
+    return moves
+}
+
+function amelia_move(board, y, x) {
+    let color = board[y][x] > 0
+    let moves = []
+
+    for (let i = x + 1; i < board[1].length; i++) {
+        if (board[y][i] != 0) {
+            if (color ^ board[y][i] > 0) {
+                console.log(color ^ board[y][i])
+                moves.push([y, i])
+                break
+            }
+            break
+        }
+        moves.push([y, i])
+    }
+
+    for (let i = x - 1; i >= 0; i--) {
+        if (board[y][i] != 0) {
+            if (color ^ board[y][i] > 0) {
+                moves.push([y, i])
+                break
+            }
+            break
+        }
+        moves.push([y, i])
+    }
+
+
+    for (let i = y + 1; i < board.length; i++) {
+        if (board[i][x] != 0) {
+            if (color ^ board[i][x] > 0) {
+                moves.push([i, x])
+                break
+            }
+            break
+        }
+        moves.push([i, x])
+    }
+
+    for (let i = y - 1; i >= 0; i--) {
+        if (board[i][x] != 0) {
+            if (color ^ board[i][x] > 0) {
+                moves.push([i, x])
+                break
+            }
+            break
+        }
+        moves.push([i, x])
+    }
+    let i = y + 1
+    let j = x + 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i += 1
+        j += 1
+    }
+
+    i = y - 1
+    j = x - 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i -= 1
+        j -= 1
+    }
+
+    i = y - 1
+    j = x + 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i -= 1
+        j += 1
+    }
+
+    i = y + 1
+    j = x - 1
+
+    while (!(i < 0 || j < 0 || i >= board.length || j >= board[i].length)) {
+        if (board[i][j] != 0) {
+            if (color ^ board[i][j] > 0) {
+                moves.push([i, j])
+                break
+            }
+            break
+        }
+
+        moves.push([i, j])
+        i += 1
+        j -= 1
+    }
+    return moves
+}
+
diff --git a/public/game.js b/public/game.js
new file mode 100644
index 0000000..e720df9
--- /dev/null
+++ b/public/game.js
@@ -0,0 +1,13 @@
+const alphabet = 'abcdefgh'
+//let squares = document.getElementsByClassName("square")
+
+
+for (let i = 0; i < 8; i++) {
+    for (let j = 0; j < 8; j++) {
+        let square = document.getElementById(`${alphabet.charAt(j)}${i + 1}`)
+        //console.log(square)
+
+        square.append("p")
+    }
+}
+
diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000..08324aa
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.box{
+    height: 76px;
+    width: 76px;  
+    position: relative; 
+}
+.top-corner{
+    padding: 1px;
+    position: absolute;
+}
+.bottom-corner{
+    padding: 1px;
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+}
+
+.white{
+    background-color: #eaead2;
+    color: #4b7299;
+}
+
+.black{    
+    background-color: #4b7299; 
+    color: #eaead2;
+}
+
+body{
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1px;
+}
+
+.chess-board{
+    width: 608px;
+    height: 608px;
+    display: grid;
+    grid-template-columns:repeat(8,1fr);
+    grid-template-rows:repeat(8,1fr);
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..4f20d70
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chess</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div class="chess-board">
+        <div>
+
+            <div id="a1" class="box white">
+                <div class="top-corner">8</div>
+            </div>
+            <div id="a2" class="box black">
+                <div class="top-corner">7</div>
+            </div>
+            <div id="a3" class="box white">
+                <div class="top-corner">6</div>
+            </div>
+            <div id="a4" class="box black">
+                <div class="top-corner">5</div>
+            </div>
+            <div id="a5" class="box white">
+                <div class="top-corner">4</div>
+            </div>
+            <div id="a6" class="box black">
+                <div class="top-corner">3</div>
+            </div>
+            <div id="a7" class="box white">
+                <div class="top-corner">2</div>
+            </div>
+            <div id="a8" class="box black">
+                <div class="top-corner">1</div>
+                <div class="bottom-corner">a</div>
+            </div>
+        </div>
+        <div>
+            <div id="b1" class="box black"></div>
+            <div id="b2" class="box white"></div>
+            <div id="b3" class="box black"></div>
+            <div id="b4" class="box white"></div>
+            <div id="b5" class="box black"></div>
+            <div id="b6" class="box white"></div>
+            <div id="b7" class="box black"></div>
+            <div id="b8" class="box white">
+               <div class="bottom-corner">b</div> 
+            </div>
+        </div>
+        <div>
+            <div id="c1" class="box white"></div>
+            <div id="c2" class="box black"></div>
+            <div id="c3" class="box white"></div>
+            <div id="c4" class="box black"></div>
+            <div id="c5" class="box white"></div>
+            <div id="c6" class="box black"></div>
+            <div id="c7" class="box white"></div>
+            <div id="c8" class="box black">
+               <div class="bottom-corner">c</div> 
+            </div>
+        </div>
+        <div>
+            <div id="d1" class="box black"></div>
+            <div id="d2" class="box white"></div>
+            <div id="d3" class="box black"></div>
+            <div id="d4" class="box white"></div>
+            <div id="d5" class="box black"></div>
+            <div id="d6" class="box white"></div>
+            <div id="d7" class="box black"></div>
+            <div id="d8" class="box white">
+               <div class="bottom-corner">d</div> 
+            </div>
+        </div>
+        <div>
+            <div id="e1" class="box white"></div>
+            <div id="e2" class="box black"></div>
+            <div id="e3" class="box white"></div>
+            <div id="e4" class="box black"></div>
+            <div id="e5" class="box white"></div>
+            <div id="e6" class="box black"></div>
+            <div id="e7" class="box white"></div>
+            <div id="e8" class="box black">
+               <div class="bottom-corner">e</div> 
+            </div>
+        </div>
+        <div>
+            <div id="f1" class="box black"></div>
+            <div id="f2" class="box white"></div>
+            <div id="f3" class="box black"></div>
+            <div id="f4" class="box white"></div>
+            <div id="f5" class="box black"></div>
+            <div id="f6" class="box white"></div>
+            <div id="f7" class="box black"></div>
+            <div id="f8" class="box white">
+               <div class="bottom-corner">f</div> 
+            </div>
+        </div>
+        <div>
+            <div id="g1" class="box white"></div>
+            <div id="g2" class="box black"></div>
+            <div id="g3" class="box white"></div>
+            <div id="g4" class="box black"></div>
+            <div id="g5" class="box white"></div>
+            <div id="g6" class="box black"></div>
+            <div id="g7" class="box white"></div>
+            <div id="g8" class="box black">
+               <div class="bottom-corner">g</div> 
+            </div>
+        </div>
+        <div>
+            <div id="h1" class="box black"></div>
+            <div id="h2" class="box white"></div>
+            <div id="h3" class="box black"></div>
+            <div id="h4" class="box white"></div>
+            <div id="h5" class="box black"></div>
+            <div id="h6" class="box white"></div>
+            <div id="h7" class="box black"></div>
+            <div id="h8" class="box white">
+               <div class="bottom-corner">h</div> 
+            </div>
+        </div>
+        </div>    
+    <script rel="preconnect" src="app.js" crossorigin></script>
+    <script rel="preconnect" src="game.js" crossorigin></script>
+</body>
+</html>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..7edf325
--- /dev/null
+++ b/server.js
@@ -0,0 +1,17 @@
+require('dotenv').config()
+
+const PORT = process.env.PORT
+
+const express = require('express')
+const app = express()
+
+app.use(express.static('public'))
+
+app.get('/', (req, res) => {
+    res.sendFile('index.html', { 'root': './' })
+})
+
+app.listen(PORT, () => {
+    console.log(`listen at port ${PORT}`)
+})
+
-- 
cgit v1.2.3