dddd

client/css/game.css

@@ -41,6 +41,18 @@
   font-size: 30px;
   text-align: center;
 }
+#menu .box p {
+  padding: 15px;
+  width: 220px;
+  max-height: 100px;
+  margin-left: auto;
+  margin-right: auto;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.1);
+  color: rgb(255, 255, 255);
+  border-radius: 10px;
+  border: 2px solid rgba(0, 0, 0, 0.7);
+}
 
 #pieces-area {
   width: 100%;

client/css/game.css.map

@@ -1 +1 @@
-{"version":3,"sources":["game.scss","game.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACCJ;ADAI;EACI,kBAAA;EACA,eAAA;EACA,YAAA;EACA,qBAAA;ACER;ADAI;EACI,6BAAA;EACA,uCAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;EACA,YAAA;ACER;ADDQ;EACI,cAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,uBAAA;EACA,iBAAA;EACA,kBAAA;ACGZ;ADDQ;EACI,cAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACGZ;ADDQ;EACI,YAAA;EACA,eAAA;EACA,kBAAA;ACGZ;;ADGA;EAGI,WAAA;EACA,YAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;EACA,qBAAA;EACA,4BAAA;EACA,yBAAA;EACA,8BAAA;EACA,kEAAA;EACA,UAAA;EACA,kBAAA;EAEA,eAAA;ACHR;ADIQ;EACI,qCAAA;EACA,0CAAA;ACFZ;ADKY;EACI,4DAAA;ACHhB;ADKY;EACI,4DAAA;ACHhB;ADQY;EACI,4DAAA;ACNhB;ADQY;EACI,4DAAA;ACNhB;;ADaI;EACI,6BAAA;EACA,aAAA;EACA,wCAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,kBAAA;ACVR;ADWQ;EACI,qBAAA;ACTZ;ADUY;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACRhB;ADUgB;EACI,iBAAA;EACA,qDAAA;ACRpB;ADYgB;EACI,iBAAA;EACA,qDAAA;ACVpB;ADYgB;EACI,iBAAA;ACVpB;;ADmBA;EACI;IAAK,wBAAA;ECfP;EDgBE;IAAM,0BAAA;ECbR;EDcE;IAAM,2BAAA;ECXR;EDYE;IAAM,0BAAA;ECTR;EDUE;IAAO,wBAAA;ECPT;AACF","file":"game.css"}
+{"version":3,"sources":["game.scss","game.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACCJ;ADAI;EACI,kBAAA;EACA,eAAA;EACA,YAAA;EACA,qBAAA;ACER;ADAI;EAEI,6BAAA;EACA,uCAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;EACA,YAAA;ACCR;ADAQ;EACI,cAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,uBAAA;EACA,iBAAA;EACA,kBAAA;ACEZ;ADAQ;EACI,cAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACEZ;ADAQ;EACI,YAAA;EACA,eAAA;EACA,kBAAA;ACEZ;ADAQ;EACI,aAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,8BAAA;EACA,yBAAA;EACA,mBAAA;EACA,oCAAA;ACEZ;;ADIA;EAGI,WAAA;EACA,YAAA;EACA,kBAAA;ACHJ;ADKI;EACI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;EACA,qBAAA;EACA,4BAAA;EACA,yBAAA;EACA,8BAAA;EACA,kEAAA;EACA,UAAA;EACA,kBAAA;EAEA,eAAA;ACJR;ADKQ;EACI,qCAAA;EACA,0CAAA;ACHZ;ADMY;EACI,4DAAA;ACJhB;ADMY;EACI,4DAAA;ACJhB;ADSY;EACI,4DAAA;ACPhB;ADSY;EACI,4DAAA;ACPhB;;ADcI;EACI,6BAAA;EACA,aAAA;EACA,wCAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,kBAAA;ACXR;ADYQ;EACI,qBAAA;ACVZ;ADWY;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACThB;ADWgB;EACI,iBAAA;EACA,qDAAA;ACTpB;ADagB;EACI,iBAAA;EACA,qDAAA;ACXpB;ADagB;EACI,iBAAA;ACXpB;;ADoBA;EACI;IAAK,wBAAA;EChBP;EDiBE;IAAM,0BAAA;ECdR;EDeE;IAAM,2BAAA;ECZR;EDaE;IAAM,0BAAA;ECVR;EDWE;IAAO,wBAAA;ECRT;AACF","file":"game.css"}

client/css/game.scss

@@ -10,6 +10,7 @@
         color: rgb(97, 47, 0);
     }
     .box{
+    
         background: rgb(180, 124, 52);
         box-shadow: 0 0 70px rgba(0,0,0,0.7);
         padding: 10px 25px;
@@ -39,6 +40,18 @@
             font-size: 30px;
             text-align: center;
         }
+        p{
+            padding: 15px;
+            width: 220px;
+            max-height: 100px;
+            margin-left: auto;
+            margin-right: auto;
+            overflow-y: auto;
+            background: rgba(0,0,0,0.1);
+            color: rgb(255, 255, 255);
+            border-radius: 10px;
+            border: 2px solid rgba(0,0,0,0.7);
+        }
 
     }
 }

client/css/main.css

@@ -9,6 +9,9 @@
 body {
   font-family: PoetsenOne;
   background-color: rgb(223, 201, 172);
+  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 0);
+  background-size: 20px 20px;
+  background-position: center;
   margin: 0;
   padding: 0;
 }

client/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qDAAA;ACCJ;ADCA;EACI,uBAAA;EACA,uDAAA;ACCJ;ADEA;EACI,uBAAA;EACA,oCAAA;EACA,SAAA;EACA,UAAA;ACAJ;ADCI;EACI,qBAAA;ACCR;ADCI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,iDAAA;EACA,oCAAA;EACA,YAAA;ACCR;ADAQ;EACI,oCAAA;EACA,aAAA;ACEZ;ADCI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;EACA,yEAAA;EACA,2CAAA;EACA,gBAAA;ACCR;ADAQ;EACI,4CAAA;ACEZ;ADAQ;EACI,UAAA;ACEZ;ADCI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACCR;ADEI;EACI;IACI,QAAA;ECAV;EDEM;IACI,QAAA;ECAV;EDEM;IACI,QAAA;ECAV;AACF;ADIQ;EACI,sBAAA;ACFZ;ADCQ;EACI,sBAAA;ACCZ;ADFQ;EACI,sBAAA;ACIZ;ADLQ;EACI,sBAAA;ACOZ;ADRQ;EACI,qBAAA;ACUZ;ADPI;EACI,uBAAA;EAAA,kBAAA;EACA,iBAAA;EACA,kBAAA;ACSR;ADPQ;EACI,oCAAA;EACA,gCAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,qBAAA;EACA,mBAAA;ACSZ","file":"main.css"}
+{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qDAAA;ACCJ;ADCA;EACI,uBAAA;EACA,uDAAA;ACCJ;ADEA;EACI,uBAAA;EACA,oCAAA;EACA,wEAAA;EACA,0BAAA;EACA,2BAAA;EAEA,SAAA;EACA,UAAA;ACDJ;ADEI;EACI,qBAAA;ACAR;ADEI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,iDAAA;EACA,oCAAA;EACA,YAAA;ACAR;ADCQ;EACI,oCAAA;EACA,aAAA;ACCZ;ADEI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;EACA,yEAAA;EACA,2CAAA;EACA,gBAAA;ACAR;ADCQ;EACI,4CAAA;ACCZ;ADCQ;EACI,UAAA;ACCZ;ADEI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACAR;ADGI;EACI;IACI,QAAA;ECDV;EDGM;IACI,QAAA;ECDV;EDGM;IACI,QAAA;ECDV;AACF;ADKQ;EACI,sBAAA;ACHZ;ADEQ;EACI,sBAAA;ACAZ;ADDQ;EACI,sBAAA;ACGZ;ADJQ;EACI,sBAAA;ACMZ;ADPQ;EACI,qBAAA;ACSZ;ADNI;EACI,uBAAA;EAAA,kBAAA;EACA,iBAAA;EACA,kBAAA;ACQR;ADNQ;EACI,oCAAA;EACA,gCAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,qBAAA;EACA,mBAAA;ACQZ","file":"main.css"}

client/css/main.scss

@@ -10,6 +10,10 @@
 body{
     font-family: PoetsenOne;
     background-color: rgb(223, 201, 172);
+    background-image: radial-gradient(rgb(0,0,0,0.1) 2px, transparent 0);
+    background-size: 20px 20px;
+    background-position: center;
+    
     margin: 0;
     padding: 0;
     h1{

client/game.html

@@ -22,7 +22,7 @@
             <button>Založit místnost</button>
             <button>Připojit se s kódem</button>
         </div>
-        <div class="box" id="loader">
+        <div class="box" id="loader" style="display: none;">
             <h2>Hledám hru</h2>
             <div class="loader">
                 <div></div>
@@ -32,12 +32,26 @@
                 <div></div>
             </div>
         </div>
-        <div class="box" id="code-entry">
+        <div class="box" id="code-entry" style="display: none;">
-            <h2>Zadej kód hry:</h2>
+            <h2>Připojit se</h2>
-            <input type="text" name="code" id="code">
+            <input type="text" name="code" id="code" placeholder="kód hry">
             <button>potvrdit</button>
             <button>zpět</button>
         </div>
+        <div class="box error" id="alert">
+            <h2>Chyba!</h2>
+            <p>Server neodpovídá: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eligendi, quaerat dolorem, odio cum quidem aliquam fugit tempora nesciunt tempore, accusantium ex officiis eum quo mollitia vel maxime iure dolores?
+            Officiis sit maiores architecto recusandae esse animi voluptatum omnis labore. Reiciendis doloremque consequatur praesentium ipsum ab deleniti a sit numquam soluta illo perferendis repellat rem, autem saepe ad beatae quibusdam.
+            Maxime, voluptas similique magnam dolorum optio nobis eligendi. Voluptatum iure delectus, alias aut, facilis repudiandae molestiae, accusantium dolorem cumque voluptates suscipit dignissimos temporibus sequi! Voluptatum autem quas doloribus quisquam iure.
+            Reiciendis molestias est at earum, blanditiis unde repudiandae. Saepe atque dolore, labore nihil debitis itaque commodi veritatis perferendis sunt. Quas atque praesentium dicta soluta ratione exercitationem animi labore neque? Facilis.
+            Sapiente consequatur, eveniet earum debitis accusantium exercitationem. Id quod perspiciatis nesciunt optio fugit accusantium sequi qui ea excepturi quae veritatis quos, ullam animi libero aut aspernatur asperiores consequuntur labore quam!
+            Totam a accusantium fugit animi minus minima consectetur libero velit modi in molestiae temporibus id illo ab reprehenderit assumenda voluptas, soluta quis dolorem veniam enim eaque dolores facilis quaerat! Architecto.
+            Ab quas dolores nulla quos architecto voluptas deleniti nobis voluptate quaerat maxime. Nihil dolor adipisci accusantium enim. Possimus vero, harum ab adipisci eligendi deserunt nisi ad dolor praesentium cupiditate! Quo.
+            Praesentium aliquam quae culpa nisi delectus magni deleniti tempora corporis atque quos, eius reiciendis quas, commodi nostrum dicta temporibus minima quasi fugiat. Consequuntur labore aliquam rem quae voluptatibus quam mollitia.
+            Odio blanditiis sit, culpa voluptates aut labore! Incidunt, earum necessitatibus libero assumenda magnam est odit rem ex minus. Commodi nobis autem veritatis aperiam rerum nulla dignissimos quaerat tempora dolor obcaecati!
+            Eveniet, molestias rerum officiis aliquid necessitatibus eaque veniam, commodi dolor nemo sint voluptas explicabo voluptatum, temporibus quasi quis illum architecto. Ea beatae odio facere? Ipsum eos sequi officia natus nam!</p>
+            <button>zpět</button>
+        </div>
     </section>
     <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
     <script src="./javascript/game-logic.js"></script>

client/javascript/client.js

@@ -1,6 +1,6 @@
 const playField = document.getElementById("playfield");
 const piecesArea = document.getElementById("pieces-area");
-player = "black";
+player = "white";
 selectedPiece = null;
 moveContinuation = false;
 

client/javascript/game-logic.js

@@ -10,7 +10,7 @@ function generateDefaultPositions(){
     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:"queen"};
+                pieceRecord = {id:id, x:i, y:j, player:"white", type:"basic"};
                 pieceList.push(pieceRecord);
                 id++;
             }
@@ -21,7 +21,7 @@ function generateDefaultPositions(){
     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:"queen"};
+                pieceRecord = {id:id, x:i, y:j, player:"black", type:"basic"};
                 pieceList.push(pieceRecord);
                 id++;
             }
@@ -54,69 +54,7 @@ function updatePieceRecordPosition(pieceRecord, x, y) {
     return pieceRecord;
 }
 
-function isMoveValid(pieceRecord, x, y){
-    
-    
-    if(0 > y > 7 || 0 > x > 7){
-        return false;
-    }
-
-    if (getPieceRecord(x,y)) {
-        return false;
-    }
-
-    const currentX = pieceRecord.x;
-    const currentY = pieceRecord.y;
-
-    if (Math.abs(y - currentY) != Math.abs(x - currentX)) {
-        return false;
-    }
-
-    const player = pieceRecord.player;
-    const type = pieceRecord.type;
-
-    //Check correct Y direction if piece is basic
-    if (currentY > y && player == "white" && type == "basic") {
-        return false;
-    }
-
-
-    const directionY = (y > currentY) ? 1 : -1;
-    const directionX = (x > currentX) ? 1 : -1;
 
-    space = 0;
-    piecesInWay = 0;
-
-    for (let i = 1; i < (Math.abs(y-currentY)+1); i++) {
-        
-        const nowX = currentX + (i*directionX);
-        const nowY = currentY + (i*directionY);
-
-        if (inWayPieceRecord = getPieceRecord(nowX, nowY)) {
-
-            if(inWayPieceRecord.player == player){
-                return false;
-            }
-
-            space = 0;
-            piecesInWay++;
-        }else{
-            space++;
-            piecesInWay = 0;
-        }
-
-        if(piecesInWay > 1){
-            return false;
-        }
-
-        if (space > 1 && type == "basic") {
-            return false;
-        }
-    }
-
-    return true;
-    
-}
 
 function getCasualties(oldX, oldY, newX, newY) {
     const directionX = (newX > oldX) ? 1 : -1;
@@ -222,6 +160,70 @@ function getOportunities(pieceRecord){
     return opportunities;
 }
 
+function isMoveValid(pieceRecord, x, y){
+    
+    
+    if(0 > y > 7 || 0 > x > 7){
+        return false;
+    }
+
+    if (getPieceRecord(x,y)) {
+        return false;
+    }
+
+    const currentX = pieceRecord.x;
+    const currentY = pieceRecord.y;
+
+    if (Math.abs(y - currentY) != Math.abs(x - currentX)) {
+        return false;
+    }
+
+    const player = pieceRecord.player;
+    const type = pieceRecord.type;
+
+    //Check correct Y direction if piece is basic
+    if (currentY > y && player == "white" && type == "basic") {
+        return false;
+    }
+
+
+    const directionY = (y > currentY) ? 1 : -1;
+    const directionX = (x > currentX) ? 1 : -1;
+
+    space = 0;
+    piecesInWay = 0;
+
+    for (let i = 1; i < (Math.abs(y-currentY)+1); i++) {
+        
+        const nowX = currentX + (i*directionX);
+        const nowY = currentY + (i*directionY);
+
+        if (inWayPieceRecord = getPieceRecord(nowX, nowY)) {
+
+            if(inWayPieceRecord.player == player){
+                return false;
+            }
+
+            space = 0;
+            piecesInWay++;
+        }else{
+            space++;
+            piecesInWay = 0;
+        }
+
+        if(piecesInWay > 1){
+            return false;
+        }
+
+        if (space > 1 && type == "basic") {
+            return false;
+        }
+        
+    }
+
+    return true;
+    
+}
 function swapPlayers() {   
     currentPlayer = (currentPlayer == "white") ? "black" : "white";
 }
@@ -246,6 +248,7 @@ function makeMove(pieceRecord, x, y){
     /*if (casualties.length == 0 && getOportunities(pieceRecord).length != 0) {
             //POTŘREBA DODĚLAT SBÍRÁNÍ DÍLKŮ ZA NESKÁKÁNÍ
     }*/
+    const original_type = pieceRecord.type;
 
     if ((player == "white" && y == 7) || (player == "black"  && y == 0) && pieceRecord.type == "basic") {
         
@@ -255,7 +258,7 @@ function makeMove(pieceRecord, x, y){
 
     const updatedPieceRecord = updatePieceRecordPosition(pieceRecord, x, y);
     
-    if (continuable(updatedPieceRecord) && casualties.length > 0) {
+    if (continuable(updatedPieceRecord) && casualties.length > 0 && pieceRecord.type == original_type) {
         return 2;
     }