debut

2025-12-06 04:21:03 +00:00 · 2020-12-17 22:06:49 +06:00
commit c7532746d3
17 changed files with 139 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,17 @@
+# Power Six: E-Ink Friendly Chess App
+
+Power Six is a web app I am currently working on in order to play chess with my friends on my Kindle Paperwhite 4. 😎
+
+# Usage
+
+### Online
+
+[is.gd/powersix](https://is.gd/powersix)
+
+### Offline
+
+# TODO:
+
+- Online Multi-player
+- Spectators
+
--- a/assets/black_bishop.png
+++ b/assets/black_bishop.png
--- a/assets/black_king.png
+++ b/assets/black_king.png
--- a/assets/black_knight.png
+++ b/assets/black_knight.png
--- a/assets/black_pawn.png
+++ b/assets/black_pawn.png
--- a/assets/black_queen.png
+++ b/assets/black_queen.png
--- a/assets/black_rook.png
+++ b/assets/black_rook.png
--- a/assets/jquery-2.2.4.min.js
+++ b/assets/jquery-2.2.4.min.js
--- a/assets/white_bishop.png
+++ b/assets/white_bishop.png
--- a/assets/white_king.png
+++ b/assets/white_king.png
--- a/assets/white_knight.png
+++ b/assets/white_knight.png
--- a/assets/white_pawn.png
+++ b/assets/white_pawn.png
--- a/assets/white_queen.png
+++ b/assets/white_queen.png
--- a/assets/white_rook.png
+++ b/assets/white_rook.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <meta charset="UTF-8" />
+      <title>Power Six: E-ink Friendly Chess App</title>
+      <link rel="stylesheet" href="styles.css">
+      <script src="assets/jquery-2.2.4.min.js"></script>
+   </head>
+   <body>
+      <script src='script.js'></script>
+   </body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,75 @@
+var row, square, i, j, img, selected;
+var whites_turn = true;
+
+const pieces = {
+   11: 'black_rook',
+   12: 'black_knight',
+   13: 'black_bishop',
+   14: 'black_queen',
+   15: 'black_king',
+   18: 'black_rook',
+   17: 'black_knight',
+   16: 'black_bishop',
+   20: 'black_pawn',
+
+   81: 'white_rook',
+   82: 'white_knight',
+   83: 'white_bishop',
+   84: 'white_queen',
+   85: 'white_king',
+   88: 'white_rook',
+   87: 'white_knight',
+   86: 'white_bishop',
+   70: 'white_pawn',
+};
+
+function _img_piece(name) {
+   return '<img src=assets/' + name + '.png>';
+}
+
+function img_tag(i, j) {
+   if (i === 2) tag = _img_piece(pieces[20]);
+   else if (i === 7) tag = _img_piece(pieces[70]);
+   else if (i === 1 || i === 8) tag = _img_piece(pieces[i * 10 + j]);
+   else tag = '';
+   return tag;
+}
+
+function handle_click() {
+   if (selected) {
+      if ($(this).html() === selected.html()) {
+         selected.css('border', '');
+         selected = null;
+         return;
+      }
+      $(this).html(selected.html());
+      $(this).css('border', '5px solid black');
+
+      selected.empty();
+      selected.css('border', '');
+      selected = null;
+
+      whites_turn ^= true;
+
+      $('.square').css({
+         transform: whites_turn ? 'rotate(0deg)' : 'rotate(180deg)',
+      });
+   } else {
+      selected = $(this);
+      $('.square').css('border', '');
+      selected.css('border', '5px solid black');
+   }
+}
+
+for (i = 1; i <= 8; ++i) {
+   row = $('<div class="row">');
+   for (j = 1; j <= 8; ++j) {
+      square = $('<div class="square">');
+      if ((j % 2 === 0 && i % 2 !== 0) || (j % 2 !== 0 && i % 2 === 0))
+         square.css('background-color', '#666');
+      square.append(img_tag(i, j));
+      square.click(handle_click);
+      row.append(square);
+   }
+   $('body').append(row);
+}
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,31 @@
+* {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+}
+
+html, body{
+   height: 100%;
+}
+
+body .row {
+   height: 12.5%;
+}
+
+body .row .square {
+   height: 100%;
+   width: 12.5%;
+   float: left;
+}
+
+body .row .square {
+   height: 100%;
+   width: 12.5%;
+   float: left;
+}
+
+body .row .square img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}