From bae85b7508769cb65fffa49485760e8fc0e66c5c Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto.xamin@taktile.com>
Date: Sat, 15 Jun 2024 18:58:06 +0300
Subject: [PATCH] add better info screen

---
 backend/bang/expansions/__init__.py        | 121 ++++++++++++++++++++-
 backend/server.py                          |   6 +
 frontend/src/components/ExpansionPopup.vue | 117 ++++++++++++++++++++
 frontend/src/components/Lobby.vue          |  67 ++++++++++--
 4 files changed, 297 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/ExpansionPopup.vue

diff --git a/backend/bang/expansions/__init__.py b/backend/bang/expansions/__init__.py
index 220866ed..f38fe359 100644
--- a/backend/bang/expansions/__init__.py
+++ b/backend/bang/expansions/__init__.py
@@ -8,11 +8,61 @@ def get_characters():
     def get_cards():
         from bang.expansions.dodge_city import cards
         return cards.get_starting_deck()
-
+    
+    def get_expansion_info(self):
+        return {
+            "id": "dodge_city", 
+            "name": "Dodge City", 
+            "cards": [
+                {"type": "characters", "cards": DodgeCity.get_characters()},
+                {"type": "cards", "cards": DodgeCity.get_cards()}
+            ]
+        }
+    
+class HighNoon():
+    def get_events():
+        from bang.expansions.high_noon import card_events
+        return card_events.get_all_events() + [card_events.get_endgame_card()]
+    
+    def get_expansion_info(self):
+        return {
+            "id": "high_noon", 
+            "name": "High Noon", 
+            "cards": [
+                {"type": "events", "cards": HighNoon.get_events()}
+            ]
+        }
+class FistfulOfCards():
+    def get_events():
+        from bang.expansions.fistful_of_cards import card_events
+        return card_events.get_all_events() + [card_events.get_endgame_card()]
+    
+    def get_expansion_info(self):
+        return {
+            "id": "fistful_of_cards", 
+            "name": "Fistful of Cards", 
+            "cards": [
+                {"type": "events", "cards": FistfulOfCards.get_events()}
+            ]
+        }
 class GoldRush():
     def get_characters():
         from bang.expansions.gold_rush import characters
         return characters.all_characters()
+    
+    def get_shop_cards():
+        from bang.expansions.gold_rush import shop_cards
+        return shop_cards.get_cards()
+    
+    def get_expansion_info(self):
+        return {
+            "id": "gold_rush", 
+            "name": "Gold Rush", 
+            "cards": [
+                {"type": "characters", "cards": GoldRush.get_characters()},
+                {"type": "cards", "cards": GoldRush.get_shop_cards()}
+            ]
+        }
 
 class TheValleyOfShadows():
     def get_characters():
@@ -23,7 +73,74 @@ def get_cards():
         from bang.expansions.the_valley_of_shadows import cards
         return cards.get_starting_deck()
 
+    def get_expansion_info(self):
+        return {
+            "id": "the_valley_of_shadows", 
+            "name": "The Valley of Shadows", 
+            "cards": [
+                {"type": "characters", "cards": TheValleyOfShadows.get_characters()},
+                {"type": "cards", "cards": TheValleyOfShadows.get_cards()}
+            ]
+        }
+
 class WildWestShow():
     def get_characters():
         from bang.expansions.wild_west_show import characters
-        return characters.all_characters()
\ No newline at end of file
+        return characters.all_characters()
+    
+    def get_events():
+        from bang.expansions.wild_west_show import card_events
+        return card_events.get_all_events() + [card_events.get_endgame_card()]
+    
+    def get_expansion_info(self):
+        return {
+            "id": "wild_west_show", 
+            "name": "Wild West Show", 
+            "cards": [
+                {"type": "characters", "cards": WildWestShow.get_characters()},
+                {"type": "events", "cards": WildWestShow.get_events()}
+            ]
+        }
+
+class TrainRobbery():
+    def get_stations():
+        from bang.expansions.train_robbery import stations
+        return stations.get_all_stations()
+    
+    def get_trains():
+        from bang.expansions.train_robbery import trains
+        return trains.get_all_cards() + trains.get_locomotives()
+    
+    def get_expansion_info(self):
+        return {
+            "id": "train_robbery", 
+            "name": "Train Robbery", 
+            "cards": [
+                {"type": "stations", "cards": TrainRobbery.get_stations()},
+                {"type": "trains", "cards": TrainRobbery.get_trains()}
+            ]
+        }
+
+def get_expansion_info(expansion_id):
+    expansion_map = {
+        "dodge_city": DodgeCity(),
+        "high_noon": HighNoon(),
+        "fistful_of_cards": FistfulOfCards(),
+        "gold_rush": GoldRush(),
+        "the_valley_of_shadows": TheValleyOfShadows(),
+        "wild_west_show": WildWestShow(),
+        "train_robbery": TrainRobbery()
+    }
+
+    expansion_info = expansion_map[expansion_id].get_expansion_info()
+
+    for section in expansion_info["cards"]:
+        unique_cards = []
+        seen_card = set()
+        for card in section["cards"]:
+            if card.name not in seen_card:
+                unique_cards.append(card)
+                seen_card.add(card.name)
+        section["cards"] = unique_cards
+
+    return expansion_info
\ No newline at end of file
diff --git a/backend/server.py b/backend/server.py
index 12bfabbb..e987b0f2 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -1326,6 +1326,12 @@ def get_trainrobberycards(sid):
         }, default=lambda o: o.__dict__)
     )
 
+@sio.event
+@bang_handler
+def get_expansion_info(sid, id):
+    from bang.expansions import get_expansion_info
+    sio.emit("expansion_info", room=sid, data=json.dumps(get_expansion_info(id), default=lambda o: o.__dict__))
+
 @sio.event
 @bang_handler
 def discord_auth(sid, data):
diff --git a/frontend/src/components/ExpansionPopup.vue b/frontend/src/components/ExpansionPopup.vue
new file mode 100644
index 00000000..6c073205
--- /dev/null
+++ b/frontend/src/components/ExpansionPopup.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="popup-overlay" v-if="show" @click="handleOverlayClick">
+    <div class="popup-content" @click.stop>
+      <button class="close-button" @click="close">×</button>
+      <h2>{{ expansion.name }}</h2>
+      <div  v-for="section in expansion.cards" :key="section.type" class="section">
+        <h3>{{ section.type }}</h3>
+        <div class="cards-container flexy-cards-wrapper">
+          <div v-for="card in section.cards" :key="card.name"  class="flexy-cards">
+            <Card :card="card" v-if="section.type !== 'stations'" :class="getClass(expansion, section)"/>
+            <StationCard :card="card" :price="card.price" v-else-if="section.type === 'stations'"/>
+            <div style="margin-left:6pt;">
+              <p>{{$t(`cards.${card.name}.desc`)}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue';
+import StationCard from './StationCard.vue';
+
+export default {
+  props: {
+    show: Boolean,
+    expansion: Object, // Expecting an object with id, name, and cards
+  },
+  components: {
+    Card,
+    StationCard,
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    handleOverlayClick() {
+      this.close();
+    },
+    getClass(expansion, section) {
+      let classes = ''
+      if (section.type == 'events') {
+        classes += 'last-event';
+      }
+      if (expansion.id == 'fistful_of_cards') {
+        classes += ' fistful-of-cards';
+      } else if (expansion.id == 'high_noon') {
+        classes += ' high-noon';
+      } else if (expansion.id == 'gold_rush') {
+        classes += ' gold-rush';
+      } else if (expansion.id == 'train_robbery') {
+        classes += ' train-robbery';
+      } else if (expansion.id == 'the_valley_of_shadows') {
+        classes += ' valley-of-shadows';
+      } else if (expansion.id == 'wild_west_show') {
+        classes += ' wild-west-show';
+      }
+      console.log(classes);
+      return classes;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.popup-content {
+  position: relative;
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  max-width: 80%;
+  max-height: 80%;
+  overflow-y: auto;
+}
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+}
+.section {
+  margin-bottom: 20px;
+}
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.card {
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}
+.flexy-cards-wrapper {
+	display: flex;
+	flex-flow: wrap;
+}
+.flexy-cards {
+	flex: 30%;
+	display:flex;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 3d3689bc..a720fa87 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -195,18 +195,19 @@
         <p v-else style="min-height: 19px"></p>
         <h3>{{ $t("expansions") }}</h3>
         <div class="players-table" style="justify-content: flex-start">
-          <card
-            v-for="ex in expansionsStatus"
-            v-bind:key="ex.id"
-            :id="ex.id"
-            :card="ex.card"
-            :class="{
-              'cant-play': !ex.enabled,
-              ...ex.card.classes,
-            }"
-            :donotlocalize="true"
-            @click.native="toggleExpansions(ex.id)"
-          />
+          <div v-for="ex in expansionsStatus" :key="ex.id" class="expansion-card" style="position: relative">
+            <card
+              :id="ex.id"
+              :card="ex.card"
+              :class="{
+                'cant-play': !ex.enabled,
+                ...ex.card.classes,
+              }"
+              :donotlocalize="true"
+              @click.native="toggleExpansions(ex.id)"
+            />
+            <button class="info-button" @click="showExpansionInfo(ex.id)">?</button>
+          </div>
         </div>
         <p v-if="isRoomOwner">{{ $t("click_to_toggle") }}</p>
         <h3>{{ $t("mods") }}</h3>
@@ -391,6 +392,13 @@
         :playerRole="deadRoleData.role"
       />
     </transition>
+    <transition name="bounce">
+      <ExpansionPopup
+        :show="showPopup"
+        :expansion="selectedExpansionInfo"
+        @close="closePopup"
+      />
+    </transition>
   </div>
 </template>
 
@@ -410,6 +418,7 @@ import AnimatedCard from "./AnimatedCard.vue";
 import { emojiMap } from "@/utils/emoji-map.js";
 import { expansionsMap } from "@/utils/expansions-map.js";
 import AnimatedEffect from './AnimatedEffect.vue';
+import ExpansionPopup from '@/components/ExpansionPopup.vue';
 
 const cumulativeOffset = function (element) {
   var top = 0,
@@ -440,6 +449,7 @@ export default {
     DeadRoleNotification,
     AnimatedCard,
     AnimatedEffect,
+    ExpansionPopup,
   },
   data: () => ({
     username: "",
@@ -470,8 +480,13 @@ export default {
     cardsToAnimate: [],
     characters_to_distribute: 2,
     fullScreenEffects: [],
+    showPopup: false,
+    selectedExpansionInfo: {},
   }),
   sockets: {
+    expansion_info(data) {
+      this.selectedExpansionInfo = JSON.parse(data);
+    },
     room(data) {
       this.lobbyName = data.name;
       if (!data.started) {
@@ -755,6 +770,14 @@ export default {
     },
   },
   methods: {
+    showExpansionInfo(id) {
+      this.showPopup = true;
+      this.$socket.emit("get_expansion_info", id);
+    },
+    closePopup() {
+      this.showPopup = false;
+      this.selectedExpansionCards = [];
+    },
     getExpansionCard(id) {
       let ex = expansionsMap[id];
       ex.classes = {
@@ -1050,4 +1073,24 @@ export default {
     border-bottom: dashed #ccc2;
   }
 }
+.info-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.info-button:hover {
+  background-color: #0056b3;
+}
 </style>