pp

client/css/game.css

@@ -14,6 +14,7 @@
   background: rgb(180, 124, 52);
   box-shadow: 0 0 70px rgba(0, 0, 0, 0.7);
   padding: 10px 25px;
+  padding-bottom: 25px;
   border-radius: 8px;
   display: box;
 }
@@ -35,6 +36,11 @@
   margin-left: auto;
   margin-right: auto;
 }
+#menu .box h2 {
+  color: wheat;
+  font-size: 30px;
+  text-align: center;
+}
 
 #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,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;;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;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"}

client/css/game.scss

@@ -13,6 +13,7 @@
         background: rgb(180, 124, 52);
         box-shadow: 0 0 70px rgba(0,0,0,0.7);
         padding: 10px 25px;
+        padding-bottom: 25px;
         border-radius: 8px;
         display: box;
         input{
@@ -33,6 +34,11 @@
             margin-left: auto;
             margin-right:  auto;
         }
+        h2{
+            color: wheat;
+            font-size: 30px;
+            text-align: center;
+        }
 
     }
 }

client/css/main.css

@@ -54,4 +54,46 @@ body #game {
   top: 50%;
   left: 50%;
   translate: -50% -50%;
+}
+@keyframes loader {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 3;
+  }
+  100% {
+    scale: 1;
+  }
+}
+body .loader > div:nth-child(1n) {
+  animation-delay: 0.22s;
+}
+body .loader > div:nth-child(2n) {
+  animation-delay: 0.44s;
+}
+body .loader > div:nth-child(3n) {
+  animation-delay: 0.66s;
+}
+body .loader > div:nth-child(4n) {
+  animation-delay: 0.88s;
+}
+body .loader > div:nth-child(5n) {
+  animation-delay: 1.1s;
+}
+body .loader {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+body .loader > div {
+  animation: loader 2s linear infinite;
+  background: rgba(97, 47, 0, 0.5);
+  margin-left: 5px;
+  margin-right: 5px;
+  height: 15px;
+  width: 15px;
+  display: inline-block;
+  border-radius: 20px;
 }/*# sourceMappingURL=main.css.map */

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","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,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"}

client/css/main.scss

@@ -54,4 +54,38 @@ body{
         left: 50%;
         translate: -50% -50%;
     }
+
+    @keyframes loader {
+        0%{
+            scale: 1;
+        }
+        50%{
+            scale: 3;
+        }
+        100%{
+            scale: 1;
+        }
+        
+    }
+    @for $i from 1 through 5 {
+        .loader >div:nth-child(#{$i}n) {
+            animation-delay: #{$i * 0.22}s;
+        }
+    }
+    .loader{
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+        
+        >div{
+            animation: loader 2s linear infinite;
+            background: rgb(97, 47, 0, 0.5);
+            margin-left: 5px;
+            margin-right: 5px;
+            height: 15px;
+            width: 15px;
+            display: inline-block;
+            border-radius: 20px;
+        }
+    }
 }

client/game.html

@@ -15,13 +15,29 @@
     </section>
     <section id="menu">
         <h1>Dáma online</h1>
-        <div class="box">
+        <div class="box" id="main-menu">
             <input type="text" name="nickname" id="nickname" placeholder="Zvoj si jméno">
             <button>Začít Hrát</button>
             <button>Seznam Místností</button>
             <button>Založit místnost</button>
             <button>Připojit se s kódem</button>
         </div>
+        <div class="box" id="loader">
+            <h2>Hledám hru</h2>
+            <div class="loader">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <div class="box" id="code-entry">
+            <h2>Zadej kód hry:</h2>
+            <input type="text" name="code" id="code">
+            <button>potvrdit</button>
+            <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/communication.js

@@ -1,3 +1,3 @@
 //const socket = io("ws://localhost:3000");
 document.getElementById("game").style.display = "none";
-document.getElementById("form").style.display = "block";
+document.getElementById("main-menu").style.display = "none";