feat(version): v1.0.1 - add room public

Author: sebastianjnuwu

server/src/main.ts

@@ -73,14 +73,15 @@ io.on("connection", (socket: Socket) => {
    * Handles player joining or creating a room.
    * @param data - The data for creating or joining a room.
    */
-  socket.on("room", ({ room_code, room_time, room_player }: RoomData) => {
+  socket.on("room", ({ room_public, room_code, room_time, room_player }: RoomData) => {
     if (!room_code) {
       room_code = generateCode();
       ROOMS[room_code] = {
         code: room_code,
         date: new Date(),
         players: [],
         owner: room_player,
+        public: room_public,
         time: room_time || 11,
         state: "waiting",
       };

www/index.html

@@ -19,26 +19,26 @@
   <meta property="og:site_name" content="Cookie Clicker Brasil">
   <meta property="og:title" content="Cookie Clicker Brasil">
   <meta property="og:description" content="Cookie Clicker Brasil - Não confie em ímpar ou par, ou cara ou coroa!">
-  <meta property="og:image" content="https://i.imgur.com/EOzKknx.webp"> 
+  <meta property="og:image" content="favicon.ico"> 
   <meta property="og:url" content="https://cookie-clicker-brasil.vercel.app">
   <meta property="og:locale" content="pt_BR">
   <meta property="og:type" content="website">
   <meta property="og:title" lang="en" content="Cookie Clicker Brazil - Addictive Game of Clicking to Earn Cookies">
   <meta property="og:description" lang="en" content="Cookie Clicker Brazil - Don’t rely on ODD or EVEN, or HEADS or TAILS!">
-  <meta property="og:image" lang="en" content="https://i.imgur.com/EOzKknx.webp">
+  <meta property="og:image" lang="en" content="favicon.ico">
   <meta property="og:url" lang="en" content="https://cookie-clicker-brasil.vercel.app/en">
   <meta property="og:locale" lang="en" content="en_US">
   <meta property="og:type" lang="en" content="website">
   <meta property="og:title" lang="es" content="Cookie Clicker Brasil - Juego Adictivo de Hacer Clic para Ganar Galletas">
   <meta property="og:description" lang="es" content="Cookie Clicker Brasil - ¡No confíes en IMPAR o PAR, ni en CARA o CRUZ!">
-  <meta property="og:image" lang="es" content="https://i.imgur.com/EOzKknx.webp">
+  <meta property="og:image" lang="es" content="favicon.ico">
   <meta property="og:url" lang="es" content="https://cookie-clicker-brasil.vercel.app">
   <meta property="og:locale" lang="es" content="es_ES">
   <meta property="og:type" lang="es" content="website">
   <meta name="google-adsense-account" content="ca-pub-6690516270288705">
   <link rel="canonical" href="https://cookie-clicker-brasil.vercel.app">
-  <link rel="apple-touch-icon" href="https://i.imgur.com/EOzKknx.webp" />
-  <link rel="shortcut icon" href="https://i.imgur.com/EOzKknx.webp" type="image/webp">
+  <link rel="apple-touch-icon" href="favicon.ico" />
+  <link rel="shortcut icon" href="favicon.ico" type="image/webp">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/3.4.1/eruda.min.js" integrity="sha512-3RVqOZtMevFOLeXCp0/Wl7np/l3J3MMysaFDUhNh+hdKx+Wb0lMXuHwA6CZ/+4DfYZM01Om1as8g+mnTaQH9vA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script type="text/javascript" charset="utf-8">
  if (new URLSearchParams(window.location.search).get('debug') === 'true') {
@@ -55,7 +55,7 @@
   </div>
 
   <div id="splash-screen">
-    <img src="https://i.imgur.com/EOzKknx.webp" alt="splash-screen" class="icon mb-5">
+    <img src="favicon.ico" alt="splash-screen" class="icon mb-5">
     <h1><i18next i18next-id="splashScreen.splashClick">Click...</i18next></h1>
   </div> 
 
@@ -181,7 +181,7 @@ <h5 class="modal-title" id="room_modalLabel">
           <i18next i18next-id="game.gameOptionLabel">Choose an option:</i18next>
         </label>
         <div>
-<div class="form-check">
+         <div class="form-check">
   <input class="form-check-input" type="radio" name="option_game" id="randomRoom" value="random" disabled>
   <label class="form-check-label" for="randomRoom">
   <i class="fas fa-random"></i> 
@@ -196,6 +196,9 @@ <h5 class="modal-title" id="room_modalLabel">
             <i18next i18next-id="game.createRoom">Create a room</i18next>
           </label>
           </div>
+          
+
+          
           <div class="form-check">
           <input class="form-check-input" type="radio" name="option_game" id="room_join" value="join">
           <label class="form-check-label" for="room_join">
@@ -214,21 +217,37 @@ <h5 class="modal-title" id="room_modalLabel">
         <input type="text" class="form-control" id="room_code" name="room_code" placeholder="XN4ZXP">
         </div>
 
-        <div class="mb-3" id="game_container">
-        <label for="gameTime" class="form-label">
-          <i class="fas fa-clock"></i> 
-          <i18next i18next-id="game.gameTimeLabel">Game Time (in seconds)</i18next>
-        </label>
-        <input type="number" class="form-control" id="room_time" name="gameTime" placeholder="e.g. 11">
-        </div>
+
+<div id="game_container">
+ 
+ <div class="mb-3">
+  <label for="gameTime" class="form-label">
+    <i class="fas fa-clock"></i>
+    <i18next i18next-id="game.gameTimeLabel">Game Time</i18next>
+  </label>
+  <input type="number" class="form-control" id="room_time" name="gameTime" placeholder="e.g. 11">
+ </div>
+ 
+<div class="mb-3">
+  <label for="publicRoom" class="form-label">
+    <i class="fas fa-users"></i>
+    <i18next i18next-id="game.publicRoomLabel">Public Room</i18next>
+ </label>
+  <input type="checkbox" class="form-check-input me-2" id="room_public" name="room_public">
+</div>
+
+  
+</div>
+
+
       </form>
       </div>
       <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+      <button type="button" class="close" data-bs-dismiss="modal">
         <i class="fas fa-times"></i> 
         <i18next i18next-id="modal.cancel">Cancel</i18next>
       </button>
-      <button id="form_button" class="btn btn-primary">
+      <button id="form_button" class="confirm">
         <i class="fas fa-check"></i> 
         <i18next i18next-id="modal.confirm">Confirm</i18next>
       </button>

www/main.ts

@@ -1,6 +1,7 @@
 import "@language/main.ts";
-import "@scss/ui.scss";
 import "@plugin/admob.ts";
+import "@scss/ui.scss";
+import "@scss/modal.scss";
 import "@ts/main.ts";
 import "@ts/game.ts"; 
 import "bootstrap/dist/css/bootstrap.min.css";

www/public/favicon.ico

@@ -26,6 +26,7 @@ const translation = {
     nicknameLabel: "Nickname",
     gameOptionLabel: "Choose an option:",
     randomRoom: "Join a random room",
+    publicRoomLabel: "Public room:",
     createRoom: "Create a room",
     joinRoom: "Join a room",
     roomCodeLabel: "Room Code",

www/src/locales/lang/en-US.ts

@@ -23,13 +23,14 @@ const translation = {
     leaveButton: "Sair",
   },
   game: {
-    nicknameLabel: "Apelido",
+    nicknameLabel: "Nome do Jogador",
     gameOptionLabel: "Escolha uma opção:",
     randomRoom: "Entre em uma sala aleatória",
+    publicRoomLabel: "Sala pública:",
     createRoom: "Criar uma sala",
     joinRoom: "Entrar em uma sala",
     roomCodeLabel: "Código da Sala",
-    gameTimeLabel: "Tempo de Jogo (em segundos)",
+    gameTimeLabel: "Tempo de Jogo",
   },
   room: {
     no_room_player: "Parece que você não definiu seu nickname!",

www/src/locales/lang/es-ES.ts

@@ -3,7 +3,6 @@ import $ from "jquery";
 
 import pt from "@lang/pt-BR.ts";
 import en from "@lang/en-US.ts";
-import es from "@lang/es-ES.ts";
 
 i18next.init({
   lng: "pt-BR",
@@ -16,9 +15,6 @@ i18next.init({
     "pt-BR": {
       translation: pt,
     },
-    "es-ES": {
-      translation: es,
-    },
   },
   interpolation: {
     escapeValue: false,
@@ -36,9 +32,6 @@ switch (window.navigator.language) {
   case "en-US":
     lang = i18next.getFixedT("en-US");
     break;
-  case "es-ES":
-    lang = i18next.getFixedT("en-US");
-    break;
   default:
     lang = i18next.getFixedT("en-US");
 }

www/src/locales/lang/pt-BR.ts

@@ -290,7 +290,7 @@ ui .statistic td .value {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   animation: pulse 2s infinite;
   gap: 0.5rem;
-  z-index: 999999999999999999999999999999;
+  z-index: 1;
 }
 
 .game-time h3 {
@@ -323,138 +323,14 @@ ui .statistic td .value {
   }
 }
 
-.modal {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.modal-dialog {
-  max-width: 500px;
-  margin: 2rem auto;
-}
-
-.modal-content {
-  font-family: "minecraftia", cursive;
-  border-radius: 12px;
-  border: none;
-  background: linear-gradient(to bottom, var(--layout), var(--layout-dark));
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-.modal-header {
-  background-color: var(--layout-dark);
-  color: var(--text-color-dark);
-  padding: 16px;
-  border-radius: 12px 12px 0 0;
-}
-
-.modal-header .modal-title {
-  font-size: 18px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.modal-body {
-  padding: 20px;
-}
-
-.modal-body .form-check-input {
-  width: 20px;
-  height: 20px;
-  border: 1.5px solid var(--text-color-dark);
-  border-radius: 50%;
-  border: none;
-  background-color: var(--layout);
-  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
-  cursor: pointer;
-}
-
-.modal-body .form-check-input:checked {
-  background-color: var(--btn-primary-bg);
-  border-color: var(--btn-primary-bg);
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-}
-
-.modal-body .form-label {
-  font-size: 0.85rem;
-  font-weight: bold;
-  color: var(--text-color-dark);
-  margin-bottom: 8px;
-  display: inline-block;
-}
-
-.modal-body .form-check-label {
-  font-size: 0.8rem;
-  color: var(--text-color-dark);
-  margin-bottom: 0;
-  line-height: 1.4;
-  cursor: pointer;
-  transition: color 0.3s ease;
-}
-
-.modal-body .form-control {
-  font-size: 0.8rem;
-  border-radius: 8px;
-  border: 1px solid var(--text-color);
-  padding: 8px 12px;
-  background-color: var(--layout);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.modal-body .form-control:focus {
-  border-color: var(--layout-dark);
-  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
-}
-
-.modal-footer {
-  padding: 16px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.modal-footer .btn {
-  border-radius: 8px;
-  padding: 8px 16px;
-  font-size: 14px;
-}
-
-.modal-footer .btn-secondary {
-  background-color: var(--btn-secondary-bg);
-  color: #fff;
-  font-weight: 500;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 20px;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.modal-footer .btn-secondary:hover {
-  background-color: var(--btn-secondary-hover-bg);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.modal-footer .btn-primary {
-  background-color: var(--btn-primary-bg);
-  color: #fff;
-  font-weight: 600;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 20px;
-  transition: background-color 0.3s ease, transform 0.2s, box-shadow 0.3s ease;
-}
-
-.modal-footer .btn-primary:hover {
-  background-color: var(--btn-primary-hover-bg);
-  transform: scale(1.05);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
 
+ /* END - MODAL FOOTER BUTTON STYLE */ 
+ 
 .toast,
 .toast .toast-header,
 .toast .btn-close {
   background-color: var(--layout);
   color: var(--text-color-dark) !important;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
+}