added multi queue

src/js/tribe/matchmaking.js

@@ -1,5 +1,7 @@
 let banner = $("#tribeMatchmakingStatus");
 
+export let queues = [true, true, true, true];
+
 export function showBanner() {
   banner.removeClass("hidden");
 }
@@ -45,3 +47,47 @@ export function hideLeaveQueueButton() {
     "hidden"
   );
 }
+
+export function showStartQueueButton() {
+  $(".pageTribe .prelobby .matchmaking .startMatchmakingButton").removeClass(
+    "hidden"
+  );
+}
+
+export function hideStartQueueButton() {
+  $(".pageTribe .prelobby .matchmaking .startMatchmakingButton").addClass(
+    "hidden"
+  );
+}
+
+function toggleQueue(queue) {
+  queues[queue] = !queues[queue];
+}
+
+function refreshQueueButtons() {
+  let buttons = $(".pageTribe .prelobby .matchmaking .buttons .button");
+
+  buttons.removeClass("active");
+
+  queues.forEach((queue, id) => {
+    if (queue) {
+      $(buttons[id]).addClass("active");
+    }
+  });
+}
+
+export function getQ() {
+  let ret = [];
+  queues.forEach((queue, id) => {
+    if (queue) {
+      ret.push(id);
+    }
+  });
+  return ret;
+}
+
+$(".pageTribe .prelobby .matchmaking .buttons .button").click((e) => {
+  let queue = $(e.currentTarget).attr("queue");
+  toggleQueue(queue);
+  refreshQueueButtons();
+});

src/js/tribe/tribe-default-configs.js

@@ -35,7 +35,22 @@ export default [
   },
   {
     mode: "quote",
-    mode2: [0],
+    mode2: [1],
+    difficulty: "normal",
+    blindMode: false,
+    language: "english",
+    funbox: "none",
+    stopOnError: "word",
+    confidenceMode: false,
+    customText: null,
+    punctuation: false,
+    numbers: false,
+    minWpm: null,
+    minAcc: null,
+  },
+  {
+    mode: "quote",
+    mode2: [2],
     difficulty: "normal",
     blindMode: false,
     language: "english",

src/js/tribe/tribe.js

@@ -29,12 +29,11 @@ export let socket = io(
 );
 export let activePage = "preloader";
 export let pageTransition = false;
-export let expectedVersion = "0.9.4";
+export let expectedVersion = "0.9.6";
 
 export let room = undefined;
 let name = undefined;
 let autoJoin = undefined;
-let lastQueue = undefined;
 
 export function setAutoJoin(code) {
   autoJoin = code;
@@ -1130,6 +1129,7 @@ socket.on("mp_room_leave", () => {
   resetRace();
   Matchmaking.enableLobbyButtons();
   Matchmaking.hideLeaveQueueButton();
+  Matchmaking.showStartQueueButton();
   Matchmaking.hideBanner();
   // swapElements($(".pageTribe .lobby"), $(".pageTribe .prelobby"), 250);
 });
@@ -1183,17 +1183,19 @@ socket.on("mp_room_new_leader", (data) => {
 
 socket.on("mp_room_config_update", (data) => {
   room.config = data.newConfig;
-  refreshConfig();
-  if (!room.isLeader) {
-    Notifications.add("Config changed", 0, 2);
-    applyRoomConfig(room.config);
+  if (room.private) {
+    refreshConfig();
+    if (!room.isLeader) {
+      Notifications.add("Config changed", 0, 2);
+      applyRoomConfig(room.config);
+    }
+    Object.keys(room.users).forEach((sid) => {
+      room.users[sid].isReady = false;
+    });
+    room.isReady = false;
+    resetReadyButtons();
+    refreshUserList();
   }
-  Object.keys(room.users).forEach((sid) => {
-    room.users[sid].isReady = false;
-  });
-  room.isReady = false;
-  resetReadyButtons();
-  refreshUserList();
 });
 
 socket.on("mp_chat_message", async (data) => {
@@ -1466,6 +1468,10 @@ socket.on("mp_room_test_init", (data) => {
     //test already visible, delay some stuff
     delay = 125;
   }
+  if (!room.private) {
+    room.config = data.newConfig;
+    applyRoomConfig(room.config);
+  }
 
   playSound("start");
   room.userSpeeds = {};
@@ -1968,16 +1974,17 @@ $(".pageTribe .prelobby #joinByCode input").focusout((e) => {
   );
 });
 
-$(".pageTribe .prelobby .matchmaking .button").click((e) => {
+$(".pageTribe .prelobby .matchmaking .startMatchmakingButton").click((e) => {
   if (state >= 6 && state <= 8) return;
   if ($(e.currentTarget).hasClass("disabled")) return;
-  let queue = $(e.currentTarget).attr("queue");
+  let queue = Matchmaking.getQ();
   Matchmaking.setBannerText("Searching for a room...");
   Matchmaking.showBanner();
   state = 6;
-  lastQueue = queue;
-  applyRoomConfig(TribeDefaultConfigs[queue]);
+  // lastQueue = queue;
+  // applyRoomConfig(TribeDefaultConfigs[queue]);
   Matchmaking.disableLobbyButtons();
+  Matchmaking.hideStartQueueButton();
   setTimeout(() => {
     Matchmaking.showLeaveQueueButton();
     socket.emit("mp_room_join", { queue: queue });
@@ -1991,11 +1998,12 @@ $(".pageTest #result #queueAgainButton").click((e) => {
   Matchmaking.showBanner();
   showHideTribeDiff(false);
   state = 6;
-  applyRoomConfig(TribeDefaultConfigs[lastQueue]);
+  // applyRoomConfig(TribeDefaultConfigs[lastQueue]);
   TestLogic.restart();
   Matchmaking.disableLobbyButtons();
+  Matchmaking.hideStartQueueButton();
   setTimeout(() => {
-    socket.emit("mp_room_join", { queue: lastQueue });
+    socket.emit("mp_room_join", { queue: Matchmaking.getQ() });
     Matchmaking.showLeaveQueueButton();
     resetResult();
   }, 1000);

src/sass/style.scss

@@ -3629,17 +3629,21 @@ key {
       grid-area: mm;
       display: grid;
       gap: 1rem;
-      grid-template-rows: auto 1fr;
-      .title {
+      grid-template-rows: auto auto 1fr;
+      .title,
+      .subtitle {
         color: var(--sub-color);
       }
       .buttons {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
         gap: 1rem;
-        .button {
-          padding: 2rem 0;
-        }
+        // .button {
+        //   padding: 2rem 0;
+        // }
+      }
+      .button {
+        padding: 0.7rem 0.5rem;
       }
       .leaveMatchmakingButton {
         padding: 0.7rem;
@@ -3649,11 +3653,12 @@ key {
       grid-area: priv;
       display: grid;
       gap: 1rem;
+      grid-template-rows: auto auto auto 1fr;
       .title {
         color: var(--sub-color);
       }
       #createPrivateRoom {
-        padding: 2rem 0;
+        padding: 2.4rem 0;
       }
     }
     #joinByCode {

static/index.html

@@ -3912,18 +3912,26 @@
                 <!-- <div id="joinRandomRoom" class="button">Join random room</div> -->
                 <div class="title">matchmaking</div>
                 <div class="buttons">
-                  <div class="button" queue="0">
+                  <div class="button active" queue="0">
                     <i class="fas fa-clock"></i>
                     Time 15
                   </div>
-                  <div class="button" queue="1">
+                  <div class="button active" queue="1">
                     <i class="fas fa-clock"></i>
                     Time 60
                   </div>
-                  <div class="button" queue="2">
+                  <div class="button active" queue="2">
                     <i class="fas fa-quote-right"></i>
-                    Quotes
+                    Medium Quotes
                   </div>
+                  <div class="button active" queue="3">
+                    <i class="fas fa-quote-right"></i>
+                    Long Quotes
+                  </div>
+                </div>
+                <div class="button startMatchmakingButton">
+                  <i class="fas fa-search"></i>
+                  Search
                 </div>
                 <div class="button leaveMatchmakingButton hidden">
                   <i class="fas fa-times"></i>