|
1 | 1 | <script setup lang="ts"> |
2 | | -import { ref, computed } from "vue"; |
| 2 | +import { ref, computed, onMounted, onUnmounted } from "vue"; |
3 | 3 |
|
4 | 4 | interface Trait { |
5 | 5 | name: string; |
@@ -108,6 +108,17 @@ function handlePointerDown(e: PointerEvent) { |
108 | 108 | isTouch.value = true; |
109 | 109 | } |
110 | 110 | } |
| 111 | +
|
| 112 | +function handleDocumentClick(e: MouseEvent) { |
| 113 | + if (!isTouch.value || !tooltip.value) return; |
| 114 | + const target = e.target as Element; |
| 115 | + if (!target.closest(".trait-btn")) { |
| 116 | + tooltip.value = null; |
| 117 | + } |
| 118 | +} |
| 119 | +
|
| 120 | +onMounted(() => document.addEventListener("click", handleDocumentClick, true)); |
| 121 | +onUnmounted(() => document.removeEventListener("click", handleDocumentClick, true)); |
111 | 122 | </script> |
112 | 123 |
|
113 | 124 | <template> |
@@ -218,33 +229,18 @@ function handlePointerDown(e: PointerEvent) { |
218 | 229 | </div> |
219 | 230 |
|
220 | 231 | <PanelSection label="DISEASE INFORMATION"> |
221 | | - <div class="flex flex-wrap justify-between gap-2 mb-3"> |
222 | | - <div class="flex items-baseline gap-2"> |
223 | | - <span |
224 | | - class="text-[11px] font-bold tracking-widest text-[#bbb] uppercase" |
225 | | - >EVOLUTION POINTS</span |
226 | | - > |
227 | | - <span class="text-lg text-[#888] font-bold">{{ |
228 | | - disease.evolutionPoints |
229 | | - }}</span> |
230 | | - </div> |
231 | | - <div class="flex items-baseline gap-2"> |
232 | | - <span |
233 | | - class="text-[11px] font-bold tracking-widest text-[#bbb] uppercase" |
234 | | - >AVERAGE INFECTIONS A DAY</span |
235 | | - > |
236 | | - <span class="text-lg text-[#888] font-bold">{{ |
237 | | - disease.avgInfectionsPerDay |
238 | | - }}</span> |
239 | | - </div> |
240 | | - <div class="flex items-baseline gap-2"> |
241 | | - <span |
242 | | - class="text-[11px] font-bold tracking-widest text-[#bbb] uppercase" |
243 | | - >AVERAGE DEATHS A DAY</span |
244 | | - > |
245 | | - <span class="text-lg text-[#888] font-bold">{{ |
246 | | - disease.avgDeathsPerDay |
247 | | - }}</span> |
| 232 | + <div class="grid grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-3 mb-3"> |
| 233 | + <div |
| 234 | + v-for="[label, val] in [ |
| 235 | + ['EVOLUTION POINTS', disease.evolutionPoints], |
| 236 | + ['AVERAGE INFECTIONS A DAY', disease.avgInfectionsPerDay], |
| 237 | + ['AVERAGE DEATHS A DAY', disease.avgDeathsPerDay], |
| 238 | + ]" |
| 239 | + :key="label" |
| 240 | + class="flex items-baseline gap-2 flex-wrap" |
| 241 | + > |
| 242 | + <span class="font-bold tracking-wide text-[#ddd] uppercase">{{ label }}</span> |
| 243 | + <span class="text-[#888] font-bold">{{ val }}</span> |
248 | 244 | </div> |
249 | 245 | </div> |
250 | 246 | <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
|
0 commit comments