Feat/hearts 2024 announcement

src/components/BaseParagraph.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h2 v-if="heading">
+      {{ t(heading) }}
+    </h2>
+    <p>
+      <template v-for="(chunk, index) in paragraph" :key="`text-chunk-${index}`">
+        <!-- Remote Link -->
+        <a
+          v-if="chunk.url"
+          :href="chunk.url"
+          target="_blank"
+          class="text-cyan-lighten-2 font-weight-bold text-decoration-none"
+        >
+          {{ t(chunk.text) }}
+        </a>
+        <!-- Plain text -->
+        <template v-else>
+          {{ t(chunk.text) }}
+        </template>
+      </template>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  heading: {
+    type: String,
+    default: '',
+  },
+  paragraph: {
+    type: Array,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+</script>

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

@@ -1,8 +1,9 @@
 <template>
   <BaseDialog
+    v-if="announcementIsActive"
     id="announcement-dialog"
     v-model="show"
-    variant="light"
+    variant="dark"
     :opacity="1"
     data-cy="announcement-dialog"
     scrollable
@@ -33,11 +34,8 @@
       <div v-if="announcementData.imgSrc" class="d-flex justify-center">
         <img class="w-75 mb-4" :src="announcementData.imgSrc">
       </div>
-      <div v-for="(text,i) in announcementData.announcementText" :key="i" class="mb-4">
-        <h2 v-if="text.heading">
-          {{ t(text.heading) }}
-        </h2>  
-        <p> {{ t(text.paragraph) }} </p>  
+      <div v-for="(text, i) in announcementData.announcementText" :key="i" class="mb-4">
+        <BaseParagraph :heading="text.heading" :paragraph="text.paragraph" />
       </div>  
     </template>
     <template #actions>
@@ -54,17 +52,26 @@
 </template>
 
 <script setup>
-import BaseDialog from '@/components/BaseDialog.vue';
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import GameCard from '@/routes/game/components/GameCard.vue';
+import dayjs from 'dayjs';
 import { getLocalStorage, setLocalStorage } from '_/utils/local-storage-utils.js';
 import { announcementData } from './data/announcementData';
+import BaseDialog from '@/components/BaseDialog.vue';
+import BaseParagraph from '@/components/BaseParagraph.vue';
+import GameCard from '@/routes/game/components/GameCard.vue';
 
 const { t } = useI18n();
 const show = ref(false);
 const preferenceSaved= ref(false);
 
+const announcementIsActive = computed(() => {
+  const isAfterStartTime = announcementData.startTime ? dayjs().isAfter(dayjs(announcementData.startTime)) : true;
+  const isBeforeEndTime = announcementData.endTime ? dayjs().isBefore(dayjs(announcementData.endTime)) : true;
+
+  return isAfterStartTime && isBeforeEndTime;
+});
+
 const close = () => {
   if (!preferenceSaved.value) {
     setLocalStorage('announcement', announcementData.id);
@@ -73,11 +80,10 @@ const close = () => {
   preferenceSaved.value = true;
 };
 
-onMounted(() => {
+onMounted(() => { 
   if (getLocalStorage('announcement') !== announcementData.id) {
     show.value = true;
   }
-
 });
 </script>
 

src/routes/home/components/announcementDialog/data/announcementData.js

@@ -1,13 +1,19 @@
+import { Card } from '../../../../../../tests/e2e/fixtures/cards';
+
 export const announcementData = {
-  id: 'opponentHandRevealed',
+  id: 'hearts2024Announcement',
   activatorText: 'announcement.activatorText',
   title: 'announcement.title',
-  imgSrc: './img/announcement/deck-exhausted.gif',
-  displayCards: [],
+  displayCards: [ Card.JACK_OF_HEARTS, Card.QUEEN_OF_HEARTS, Card.KING_OF_HEARTS, Card.ACE_OF_HEARTS ],
+  startTime: '2025-01-04',
+  endTime: '2025-01-15',
   announcementText: [
     {
       heading: 'announcement.heading',
-      paragraph: 'announcement.paragraph',
+      paragraph: [ 
+        { text: 'announcement.paragraph' },
+        { text: 'announcement.twitchLink', url: 'https://twitch.tv/cuttle_cards' }
+      ],
     },
   ],
 };

src/translations/en.json

@@ -517,9 +517,10 @@
     }
   },
   "announcement": {
-    "activatorText": "New Feature: Hands Revealed in the Endgame!",
-    "title": "Endgame Reveal",
-    "heading": "Streamlining Endgame",
-    "paragraph": "When the deck is completely exhausted (runs out of cards), you will now be able to see your opponent's hand! Becuase the scrap is publically visible, players have always been able to deduce which cards are in their opponent's hands once the deck is exhausted. In order to make gameplay more efficient, players will now be able to see their opponents' hands once the deck is empty. This lets players focus on the strategy, rather than sifting through the scrap. Good luck and have fun!"
+    "activatorText": "Spades 2024 Season Championship!",
+    "title": "Spades 2024",
+    "heading": "Season Championship",
+    "paragraph": "The Spades 2024 Cuttle Season Championship will be this Saturday January 11th at 12pm EST! Watch the top 8 players from the past season of competitive play battle it out for the title of Spades Season Champion! Watch it live at ",
+    "twitchLink": "twitch.tv/cuttle_cards"
   }
 }