updated encounter card values

.vscode/settings.json

@@ -46,6 +46,7 @@
         "Roboto",
         "Salac",
         "SAPP",
+        "Shinies",
         "Silph",
         "𝗦𝗽",
         "𝗦𝗽𝗲𝗲𝗱",

nuxt.config.ts

@@ -71,7 +71,7 @@ export default defineNuxtConfig({
 		"nuxt-viewport",
 	],
 	ui: {
-		icons: ["tabler", "material-symbols"],
+		icons: ["tabler", "material-symbols", "fluent"],
 	},
 	colorMode: {
 		classSuffix: "",

src/components/presets/badge/EncounterBadge.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+// utility functions
+import { pkmnRef } from "~/utility";
+
+// get state
+import useStore from "~/stores";
+const store = useStore();
+
+const props = defineProps<{
+	data: IPokemon;
+}>();
+
+// get viewport
+const viewport = useViewport();
+
+// extra info toggled
+const showExtraInfo: Ref<boolean> = ref(false);
+defineExpose({
+	showExtraInfo,
+});
+
+// is sprite visible?
+const showSprite = computed(() => {
+	// always show if in mobile mode
+	if (viewport.isLessThan("full") || !showExtraInfo.value) return true;
+
+	return false;
+});
+
+
+// const showExtraInfo = true;
+
+// get pokemon sprite
+const spriteSrc = ref("");
+store
+	.getPokemonSprite(props.data.natID, props.data.shiny)
+	.then((result) => (spriteSrc.value = result));
+</script>
+
+<template>
+	<div
+		:class="[
+			'grid gap-1 w-full',
+			viewport.isLessThan('full') || showExtraInfo
+				? 'grid-cols-1'
+				: 'grid-cols-1',
+		]"
+	>
+
+
+
+		<!-- Pokemon Info -->
+		<div
+			class="bg-light-primary dark:bg-dark-primary rounded-lg full:flex full:flex-col hidden justify-start items-center py-1 px-1 w-full h-full"
+		>
+			<!-- Pokemon Sprite -->
+			<div
+				v-if="showSprite"
+				class="bg-light-primary dark:bg-dark-primary rounded-lg flex justify-center items-center w-full h-full"
+			>
+				<Spinner v-if="!spriteSrc" />
+				<img
+					v-else
+					class="rendering-pixelated"
+					:src="spriteSrc"
+					:title="data.name + (data.shiny ? ' (Shiny)' : '')"
+				/>
+				<!-- Name / Shiny -->
+				<div
+					class="text-base flex justify-center items-center text-s content-center"
+				>
+					<!-- Name -->
+					<span class="mr-1 ">{{ data.name }} </span>
+
+					<!-- Shiny -->
+					<div
+						class="bg-light-secondary dark:bg-dark-secondary rounded-md flex justify-center items-center p-1"
+						v-if="data.shiny"
+					>
+						<Icon
+							name="heroicons:sparkles-solid"
+							class="h-4 text-light-tertiary dark:text-dark-tertiary"
+						/>
+					</div>
+					<!-- Level -->
+					<div class="text-base flex justify-center items-center text-center w-full my-1">
+						<span class="text-xs"> - Lvl: {{ data.level }}</span>
+						<!-- Ability -->
+						<span class="text-base flex items-center mb-1">
+							<Icon
+								name="icon-park-solid:fire"
+								class="h-4 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span class="text-xs ml-1">
+								 {{ data.ability }}  </span>
+						</span>
+						<!-- Held Item -->
+						<span
+							v-if="data.item.name != 'None'"
+							class="text-base flex items-center mb-1"
+						>
+							<Icon
+								name="mdi:sack"
+								class="h-4 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span class="text-xs ml-1"> {{ data.item.name }}</span>
+						</span>
+					</div>
+				</div>
+			</div>
+			<!-- IV Sum -->
+			<div class="flex flex-col items-center justify-center text-center text-xs h-1 w-full my-1">
+
+				<span class="mb-1">IV Sum: {{ data.IVSum }}</span>
+				<div class="bg-light-tertiary dark:bg-dark-tertiary rounded-full justify-center items-center w-[75%] h-1">
+					<div
+						class="bg-light-accent dark:bg-dark-accent rounded-full h-1"
+						:style="'width: '+ Math.ceil((data.IVSum/186)*100) + '%'"
+					></div>
+				</div>
+			</div>
+
+			<!-- Show More Button -->
+			<button
+				@click="showExtraInfo = !showExtraInfo"
+				class="cursor-pointer"
+			>
+				<Icon
+					v-if="showExtraInfo"
+					name="material-symbols:arrow-circle-up-outline"
+					class="h-6 text-light-tertiary dark:text-dark-tertiary hover:text-light-accent hover:dark:text-dark-accent"
+				/>
+				<Icon
+					v-else
+					name="material-symbols:arrow-circle-down"
+					class="h-6 text-light-tertiary dark:text-dark-tertiary hover:text-light-accent hover:dark:text-dark-accent"
+				/>
+			</button>
+
+			<!-- Show More Content -->
+			<div
+				v-if="showExtraInfo"
+				class="bg-light-secondary dark:bg-dark-secondary rounded-md py-2 px-3 mb-2"
+			>
+
+
+				<!-- Moves List -->
+				<ul class="mb-1">
+					<li
+						v-for="move in data.moves"
+						:key="move.id"
+						class="flex flex-row items-center justify-between text-xs"
+					>
+						<span>
+							{{ move.name }}
+						</span>
+						<span class="mx-2"></span>
+						<span class="flex items-center">
+							<Icon
+								name="ph:hand-fist-fill"
+								class="h-3 text-light-tertiary dark:text-dark-tertiary"
+							/>
+							<span> {{ move.power }}</span>
+							<Icon
+								name="iconamoon:lightning-1-fill"
+								class="h-3 text-light-tertiary dark:text-dark-tertiary ml-1"
+							/>
+							<span>
+								{{ move.remaining_pp }}/{{ move.pp }}</span
+							></span
+						>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>

src/components/presets/card/EncountersCard.vue

@@ -170,48 +170,63 @@ watch(pokemonSelected, () => {
 					>
 						<div class="grid grid-flow-row text-xs gap-1">
 							<!-- Total Encounters -->
-							<div class="grid grid-flow-row text-left">
-								<span>Total Encounters</span>
+							<div class="grid grid-flow-row text-left text-s font-bold">
+								<span>Phase / Total Encounters</span>
 								<span
-									class="font-bold text-sm text-light-text-placeholder dark:text-dark-text-placeholder"
+									class=" text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
+
+										pokemonSelectedData &&
+										pokemonSelectedData.phase_encounters
+											? pokemonSelectedData.phase_encounters
+											: "0" 
+									}} / {{
 										pokemonSelectedData &&
 										pokemonSelectedData.encounters
 											? pokemonSelectedData.encounters
 											: "None"
-									}}</span
+									}}
+									</span
 								>
 							</div>
 
 							<!-- Last Encounter Time -->
 							<div
-								class="grid grid-flow-row text-left"
+								class="grid grid-flow-row text-left text-s font-bold"
 								v-if="
 									pokemonSelectedData &&
 									pokemonSelectedData.encounters
 								"
 							>
-								<span>Last Encounter</span>
+								<span>Phase/Total Highest IVSums</span>
 								<span
-									class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+									class="text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
-										new Date(
-											pokemonSelectedData.last_encounter_time_unix
-										).toLocaleTimeString("en-US")
-									}}</span
+
+										pokemonSelectedData &&
+										pokemonSelectedData.total_lowest_iv_sum
+											? pokemonSelectedData.phase_highest_iv_sum
+											: "0" 
+									}} / {{
+										pokemonSelectedData &&
+										pokemonSelectedData.total_highest_iv_sum
+											? pokemonSelectedData.total_highest_iv_sum
+											: "None"
+									}}
+									</span
 								>
 							</div>
 
 							<!-- Shiny Encounters -->
-							<div class="grid grid-flow-row text-left">
-								<span>Shiny Encounters</span>
+							<div class="grid grid-flow-row text-left text-s font-bold">
+								<span>Shiny Average</span>
 								<span
-									class="font-bold text-sm self-end text-light-text-placeholder dark:text-dark-text-placeholder"
+									class="text-xs self-end text-light-text-placeholder dark:text-dark-text-placeholder"
 									>{{
 										pokemonSelectedData &&
-										pokemonSelectedData.shiny_encounters
-											? pokemonSelectedData.shiny_encounters
-											: "None"
+										pokemonSelectedData.shiny_average
+											? pokemonSelectedData.shiny_average
+											: "0 / " + pokemonSelectedData.encounters
 									}}</span
 								>
 							</div>
@@ -277,4 +292,4 @@ watch(pokemonSelected, () => {
 			</div>
 		</div>
 	</div>
-</template>
+</template>

src/components/presets/card/Sidebar.vue

@@ -1,9 +1,69 @@
 <script setup lang="ts">
+// props
 const props = defineProps<{
 	panelStyle: string;
+	statsData: IStats | undefined;
+	emulatorData: IEmulator | undefined;
+	shinyData: TShinyLog | undefined;
+	encounterLogData: TEncounterLog | undefined;
 }>();
+
+// modal visibility
+const modalDetailedStatsOpen = ref(false);
+const modalShinyDexOpen = ref(false);
 </script>
 
 <template>
-	<div :class="panelStyle"></div>
+	<div :class="panelStyle">
+		<div
+			class="flex flex-col justify-center items-center w-full h-full py-2"
+		>
+			<!-- Top Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-start items-center gap-2 w-full"
+			>
+				<!-- detailed stats modal button  -->
+				<IconButton
+					v-if="statsData"
+					@clickEvent="() => (modalDetailedStatsOpen = true)"
+					icon="i-material-symbols-query-stats-rounded"
+				/>
+
+				<!-- shiny dex modal button  -->
+				<IconButton
+					v-if="shinyData"
+					@clickEvent="() => (modalShinyDexOpen = true)"
+					icon="i-fluent-arrow-trending-sparkle-24-filled"
+				/>
+			</div>
+
+			<!-- Middle Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-center items-center gap-2 w-full"
+			></div>
+
+			<!-- Bottom Buttons -->
+			<div
+				class="flex flex-col flex-1 justify-end items-center gap-2 w-full"
+			></div>
+		</div>
+	</div>
+
+	<!-- Detailed Stats Modal -->
+	<DetailedStatsModal
+		v-if="statsData && emulatorData"
+		:open="modalDetailedStatsOpen"
+		@closeModal="modalDetailedStatsOpen = false"
+		:stats-data="statsData"
+		:emulator-data="emulatorData"
+	/>
+
+	<!-- Shiny Dex Modal -->
+	<ShinyDexModal
+		v-if="shinyData && encounterLogData"
+		:open="modalShinyDexOpen"
+		@closeModal="modalShinyDexOpen = false"
+		:shiny-data="shinyData"
+		:encounter-log-data="encounterLogData"
+	/>
 </template>