feat: Lobby popup

src/routes/home/components/announcementDialog/AnnouncementDialog.vue

@@ -55,7 +55,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import dayjs from 'dayjs';
-import { getLocalStorage, setLocalStorage } from '_/utils/local-storage-utils.js';
+import { getLocalStorage, setLocalStorage, LS_ANNOUNCEMENT } from '_/utils/local-storage-utils.js';
 import { announcementData } from './data/announcementData';
 import { useAuthStore } from '@/stores/auth';
 import BaseDialog from '@/components/BaseDialog.vue';
@@ -77,13 +77,13 @@ const announcementIsActive = computed(() => {
 
 const close = () => {
   if (!preferenceSaved.value) {
-    setLocalStorage('announcement', announcementData.id);
+    setLocalStorage(LS_ANNOUNCEMENT, announcementData.id);
   }
   show.value = false;
   preferenceSaved.value = true;
 };
 
-if (getLocalStorage('announcement') !== announcementData.id) {
+if (getLocalStorage(LS_ANNOUNCEMENT) !== announcementData.id) {
   show.value = true;
 }
 </script>

src/routes/lobby/LobbyView.vue

@@ -86,6 +86,8 @@
         <v-spacer />
       </v-row>
     </v-container>
+
+    <PlayTimeDialog @leave="leave" />
   </div>
 </template>
 
@@ -100,6 +102,7 @@ import { playAudio } from '@/util/audio.js';
 import PlayerReadyIndicator from '@/components/PlayerReadyIndicator.vue';
 import TheLanguageSelector from '@/components/TheLanguageSelector.vue';
 import { ROUTE_NAME_GAME } from '_/src/router';
+import PlayTimeDialog from '@/routes/lobby/components/PlayTimeDialog.vue';
 
 // Deps
 const { t } = useI18n();

src/routes/lobby/components/PlayTimeDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <BaseDialog
+    id="play-time-dialog"
+    v-model="show"
+    variant="dark"
+    :persistent="false"
+    :max-width="500"
+    :title="t('lobby.playTimeDialog.title')"
+  >
+    <template #body>
+      <p data-cy="play-time-dialog-sessions">
+        {{ t('lobby.playTimeDialog.openPlaySessions') }}
+      </p>
+      <p class="mt-4" data-cy="play-time-dialog-discord">
+        <span>
+          {{ t('lobby.playTimeDialog.discord') }}
+          <a
+            class="discord-link"
+            data-cy="play-time-dialog-discord-link"
+            href="https://discord.com/invite/dS5BRjaHrm"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ t('lobby.playTimeDialog.discordLink') }}
+          </a>
+          <strong>{{ t('lobby.playTimeDialog.findAGame') }}</strong>
+        </span>
+      </p>
+      <p class="mt-4" data-cy="play-time-dialog-bot">
+        {{ t('lobby.playTimeDialog.botPlay') }}
+      </p>
+    </template>
+    <template #actions>
+      <v-btn
+        variant="text"
+        color="base-dark"
+        data-cy="play-time-dialog-go-home"
+        @click="goHome"
+      >
+        {{ t('lobby.playTimeDialog.goHome') }}
+      </v-btn>
+      <v-btn
+        color="primary"
+        variant="flat"
+        data-cy="play-time-dialog-stay"
+        @click="dismiss"
+      >
+        {{ t('lobby.playTimeDialog.stay') }}
+      </v-btn>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getLocalStorage, setLocalStorage, LS_PLAY_TIME_DIALOG_DISMISSED } from '_/utils/local-storage-utils.js';
+import BaseDialog from '@/components/BaseDialog.vue';
+
+const emit = defineEmits([ 'leave' ]);
+const { t } = useI18n();
+
+const show = ref(false);
+let timer = null;
+
+function dismiss() {
+  show.value = false;
+  setLocalStorage(LS_PLAY_TIME_DIALOG_DISMISSED, 'true');
+}
+
+function goHome() {
+  dismiss();
+  emit('leave');
+}
+
+onMounted(() => {
+  if (!getLocalStorage(LS_PLAY_TIME_DIALOG_DISMISSED)) {
+    timer = setTimeout(() => {
+      show.value = true;
+    }, 60000);
+  }
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+});
+</script>
+
+<style scoped>
+.discord-link {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: underline;
+}
+</style>

src/translations/de.json

@@ -68,6 +68,16 @@
       "casual": "Spielmodus geändert zu Freizeit",
       "ranked": "Spielmodus geändert zu Rangliste"
     },
+    "playTimeDialog": {
+      "title": "Finde ein Spiel",
+      "openPlaySessions": "Wir haben offene Spielsitzungen jeden Mittwoch um 20:30 Uhr ET und jeden Donnerstag um 12:00 Uhr ET. Wenn du zu diesen Zeiten auf die Seite kommst, findest du immer jemanden zum Spielen!",
+      "discord": "Wir haben einen {0} und du kannst den {1}-Kanal nutzen, um Mitspieler zu finden.",
+      "discordLink": "Discord-Kanal",
+      "findAGame": "#find-a-game",
+      "botPlay": "Du kannst von der Startseite aus gegen den Bot spielen.",
+      "goHome": "Zur Startseite",
+      "stay": "Im Lobby bleiben"
+    },
     "error": {
       "fallback": "Ein unbekannter Fehler ist aufgetreten.",
       "forbidden": "Du bist kein Spieler in diesem Spiel!",

src/translations/en.json

@@ -68,6 +68,16 @@
       "casual": "Game Mode changed to Casual",
       "ranked": "Game Mode changed to Ranked"
     },
+    "playTimeDialog": {
+      "title": "Find a Game",
+      "openPlaySessions": "We have open play sessions every Wednesday at 8:30pm ET and every Thursday at 12pm ET. If you hop on the site at those times, you'll always have someone to play!",
+      "discord": "We have a {0} and you can use its {1} channel to find matches.",
+      "discordLink": "Discord channel",
+      "findAGame": "#find-a-game",
+      "botPlay": "You can play against the bot from the home page.",
+      "goHome": "Go Home",
+      "stay": "Stay in Lobby"
+    },
     "error": {
       "fallback": "An unknown error has occurred.",
       "forbidden": "You are not a player in this game!",

src/translations/es.json

@@ -68,6 +68,16 @@
       "casual": "El modo de juego cambió a Amistoso",
       "ranked": "El modo de juego cambió a Competitivo"
     },
+    "playTimeDialog": {
+      "title": "Encuentra una partida",
+      "openPlaySessions": "Tenemos sesiones de juego abiertas todos los miércoles a las 8:30pm ET y todos los jueves a las 12pm ET. Si entras al sitio en esos horarios, ¡siempre habrá alguien con quien jugar!",
+      "discord": "Tenemos un {0} y puedes usar su canal {1} para encontrar partidas.",
+      "discordLink": "canal de Discord",
+      "findAGame": "#find-a-game",
+      "botPlay": "Puedes jugar contra el bot desde la página de inicio.",
+      "goHome": "Ir al inicio",
+      "stay": "Quedarme en el lobby"
+    },
     "error": {
       "fallback": "Se ha producido un error desconocido.",
       "forbidden": "¡No eres un jugador en este juego!",

src/translations/fr.json

@@ -68,6 +68,16 @@
       "casual": "Mode de jeu modifié à Classique",
       "ranked": "Mode de jeu modifié à Classée"
     },
+    "playTimeDialog": {
+      "title": "Trouver une partie",
+      "openPlaySessions": "Nous avons des sessions de jeu ouvertes tous les mercredis à 20h30 ET et tous les jeudis à 12h ET. Si vous vous connectez à ces horaires, vous trouverez toujours quelqu'un avec qui jouer !",
+      "discord": "Nous avons un {0} et vous pouvez utiliser son canal {1} pour trouver des adversaires.",
+      "discordLink": "canal Discord",
+      "findAGame": "#find-a-game",
+      "botPlay": "Vous pouvez jouer contre le bot depuis la page d'accueil.",
+      "goHome": "Retour à l'accueil",
+      "stay": "Rester dans le lobby"
+    },
     "error": {
       "fallback": "Une erreur inconnue s'est produite.",
       "forbidden": "Vous n'êtes pas un joueur dans ce jeu !",

src/translations/ukr.json

@@ -68,6 +68,16 @@
       "casual": "Режим гри змінено на Неофіційний",
       "ranked": "Режим гри змінено на Рейтинговий"
     },
+    "playTimeDialog": {
+      "title": "Знайти гру",
+      "openPlaySessions": "У нас є відкриті ігрові сесії щосереди о 20:30 ET та щочетверга о 12:00 ET. Якщо ви зайдете на сайт у ці години, завжди знайдете з ким пограти!",
+      "discord": "У нас є {0}, і ви можете використовувати канал {1}, щоб знайти суперників.",
+      "discordLink": "канал Discord",
+      "findAGame": "#find-a-game",
+      "botPlay": "Ви можете грати проти бота з головної сторінки.",
+      "goHome": "На головну",
+      "stay": "Залишитися в лобі"
+    },
     "error": {
       "fallback": "Сталася невідома помилка.",
       "forbidden": "Ви не гравець у цій грі!",

tests/e2e/specs/in-game/game-over/rematch.spec.js

@@ -9,7 +9,6 @@ import {
 import { seasonFixtures } from '../../../fixtures/statsFixtures';
 import { playerOne, playerTwo, playerThree } from '../../../fixtures/userFixtures';
 import { Card } from '../../../fixtures/cards';
-import { announcementData } from '../../../../../src/routes/home/components/announcementDialog/data/announcementData';
 
 const dayjs = require('dayjs');
 
@@ -48,7 +47,7 @@ describe('Creating And Updating Ranked Matches With Rematch', () => {
   beforeEach(function () {
     cy.wipeDatabase();
     cy.visit('/');
-    window.localStorage.setItem('announcement', announcementData.id);
+    cy.dismissIntroPopups();
 
     // Set up season
     const [ , diamondsSeason ] = seasonFixtures;
@@ -256,7 +255,7 @@ describe('Creating And Updating Casual Games With Rematch', () => {
   beforeEach(function () {
     cy.wipeDatabase();
     cy.visit('/');
-    window.localStorage.setItem('announcement', announcementData.id);
+    cy.dismissIntroPopups();
 
     // Sign up players
     cy.signupOpponent(playerOne).as('playerOneId');
@@ -408,7 +407,7 @@ describe('Spectating Rematches', () => {
   describe('Spectating Casual Rematches', () => {
     beforeEach(() => {
       cy.setupGameAsSpectator();
-      window.localStorage.setItem('announcement', announcementData.id);
+      cy.dismissIntroPopups();
     });
 
     it('Spectates a casual match using rematch', () => {
@@ -467,7 +466,7 @@ describe('Spectating Rematches', () => {
   describe('Spectating Ranked Matches', () => {
     beforeEach(() => {
       cy.setupGameAsSpectator(true);
-      window.localStorage.setItem('announcement', announcementData.id);
+      cy.dismissIntroPopups();
       const [ , , currentSeason ] = seasonFixtures;
       cy.loadSeasonFixture([ currentSeason ]);
     });

tests/e2e/specs/in-game/spectating/live-spectating.spec.js

@@ -15,14 +15,13 @@ import {
 } from '../../../support/helpers';
 import { Card } from '../../../fixtures/cards';
 import { SnackBarError } from '../../../fixtures/snackbarError';
-import { announcementData } from '../../../../../src/routes/home/components/announcementDialog/data/announcementData';
 
 function setup() {
   cy.wipeDatabase();
   cy.visit('/');
   cy.signupPlayer(myUser);
   cy.vueRoute('/');
-  window.localStorage.setItem('announcement', announcementData.id);
+  cy.dismissIntroPopups();
 }
 
 describe('Spectating Games', () => {
@@ -440,7 +439,7 @@ describe('Creating And Updating Unranked Matches With Rematch - Spectating', ()
     // Log in as playerOne
     cy.loginPlayer(playerOne);
     cy.setupGameAsSpectator();
-    window.localStorage.setItem('announcement', announcementData.id);
+    cy.dismissIntroPopups();
   });
 
   it('Spectate unranked games with rematch', function () {

tests/e2e/specs/in-game/vsAI.spec.js

@@ -1,14 +1,13 @@
 import { myUser } from '../../fixtures/userFixtures';
 import { Card } from '../../fixtures/cards';
 import { assertGameState, assertVictory, assertLoss } from '../../support/helpers';
-import { announcementData } from '../../../../src/routes/home/components/announcementDialog/data/announcementData';
 
 function setup() {
   cy.wipeDatabase();
   cy.visit('/');
   cy.signupPlayer(myUser);
   cy.vueRoute('/');
-  window.localStorage.setItem('announcement', announcementData.id);
+  cy.dismissIntroPopups();
   cy.get('[data-cy=create-ai-game]').click();
   cy.get('[data-player-hand-card]').should('have.length', 5);
   cy.get('[data-cy=opponent-username]').should('contain', 'CuttleBot');

tests/e2e/specs/out-of-game/authentication.spec.js

@@ -1,6 +1,5 @@
 import { assertSnackbar } from '../../support/helpers';
 import { myUser } from '../../fixtures/userFixtures';
-import { announcementData } from '../../../../src/routes/home/components/announcementDialog/data/announcementData';
 
 function assertSuccessfulAuth(username) {
   // Confirm we have navigated to home
@@ -38,7 +37,7 @@ describe('Auth - Page Content', () => {
     cy.wipeDatabase();
     cy.visit('/signup');
     cy.signupOpponent(myUser);
-    window.localStorage.setItem('announcement', announcementData.id);
+    cy.dismissIntroPopups();
   });
 
   it('Displays logo and navigates to rules page', () => {
@@ -111,7 +110,7 @@ describe('Signing Up', () => {
   beforeEach(() => {
     cy.wipeDatabase();
     cy.visit('/signup');
-    window.localStorage.setItem('announcement', announcementData.id);
+    cy.dismissIntroPopups();
   });
 
   /**

tests/e2e/specs/out-of-game/home.spec.js

@@ -3,7 +3,6 @@ import { Card } from '../../fixtures/cards';
 import { myUser, opponentOne, opponentTwo, playerOne, playerTwo } from '../../fixtures/userFixtures';
 import { SnackBarError } from '../../fixtures/snackbarError';
 import GameStatus from '../../../../utils/GameStatus.json';
-import { announcementData } from '../../../../src/routes/home/components/announcementDialog/data/announcementData';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 dayjs.extend(utc);
@@ -13,7 +12,7 @@ function setup() {
   cy.visit('/');
   cy.signupPlayer(myUser);
   cy.vueRoute('/');
-  window.localStorage.setItem('announcement', announcementData.id);
+  cy.dismissIntroPopups();
 }
 
 function assertSuccessfulJoin(gameState) {
@@ -439,9 +438,7 @@ describe('Home - Create Game', () => {
 
   it('Saves ranked setting between sessions', () => {
     cy.clearLocalStorage();
-    cy.window().then((win) => {
-      win.localStorage.setItem('announcement', announcementData.id);
-    });
+    cy.dismissIntroPopups();
     cy.get('[data-cy=create-game-btn]').click();
     cy.get('[data-cy=create-game-dialog]').should('be.visible');