Skip to content

Commit

Permalink
implemented chartjs w example (#21)
Browse files Browse the repository at this point in the history
* implemented chartjs w example

* IV chart

* Static card height, better scrolling for encounter/stats card

* Revert "Merge pull request #18 from Dan-Mizu/update"

This reverts commit 8a7ea41, reversing
changes made to e4564a9.

* Make Extra Pokemon Data into a Modal

* Fix IV Sum bar color

* Cleanup

* Revert "Revert "Merge pull request #18 from Dan-Mizu/update""

This reverts commit d5822a1.
  • Loading branch information
Dan-Mizu authored Nov 18, 2023
1 parent f430cc6 commit 8dd7417
Show file tree
Hide file tree
Showing 15 changed files with 979 additions and 815 deletions.
10 changes: 10 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,26 @@
"Acro",
"Apicot",
"Aspear",
"𝗔𝘁𝗸",
"𝗔𝘁𝘁𝗮𝗰𝗸",
"Auroraticket",
"Belue",
"bottombar",
"Carbos",
"chartjs",
"Chesto",
"datalabels",
"𝗗𝗲𝗳",
"defence",
"𝗗𝗲𝗳𝗲𝗻𝘀𝗲",
"Durin",
"EMER",
"Everstone",
"favicons",
"frlg",
"Ganlon",
"heroicons",
"𝗛𝗣",
"iconamoon",
"iconify",
"Itemfinder",
Expand All @@ -36,9 +43,12 @@
"pokedash",
"pokerus",
"Rawst",
"Roboto",
"Salac",
"SAPP",
"Silph",
"𝗦𝗽",
"𝗦𝗽𝗲𝗲𝗱",
"Spelon",
"Starf",
"tabler",
Expand Down
1,179 changes: 535 additions & 644 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
"@nuxt/ui": "^2.9.0",
"@pinia/nuxt": "^0.5.1",
"@vueuse/nuxt": "^10.5.0",
"pinia": "^2.1.7"
"chart.js": "^4.4.0",
"pinia": "^2.1.7",
"vue-chartjs": "^5.2.0"
}
}
24 changes: 16 additions & 8 deletions src/components/elements/modals/Modal.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
<script setup lang="ts">
const props = defineProps<{
open: boolean;
}>();
const props = withDefaults(
defineProps<{
open: boolean;
showFooter?: boolean;
}>(),
{
showFooter: true,
}
);
// sync local open state to parent
const isOpen = ref(props.open);
Expand All @@ -17,7 +23,6 @@ watch(
v-model="isOpen"
@close="$emit('closeModal')"
:ui="{
background: '',
container: 'flex items-center justify-center',
base: '',
overlay: {
Expand All @@ -34,18 +39,21 @@ watch(
body: { base: 'text-center' },
header: {
base: 'text-center',
padding: 'px-4 pb-6 sm:px-6',
padding: '',
},
footer: {
base: 'text-center',
padding: 'px-4 pt-6 pb-8 sm:px-6',
padding: '',
},
}"
>
<!-- Modal Header -->
<template #header>
<div class="flex items-center relative justify-center">
<div class="flex items-center justify-center relative">
<!-- Header Content -->
<slot class="flex float-none" name="header" />

<!-- Close Button -->
<div class="-my-1 ml-5 absolute right-0">
<IconButton
icon="i-heroicons-x-mark-20-solid"
Expand All @@ -59,7 +67,7 @@ watch(
<slot />

<!-- Modal Footer -->
<template #footer>
<template #footer v-if="showFooter">
<slot name="footer" />
</template>
</UCard>
Expand Down
135 changes: 29 additions & 106 deletions src/components/presets/badge/PokemonBadge.vue
Original file line number Diff line number Diff line change
@@ -1,51 +1,42 @@
<script setup lang="ts">
// utility functions
import { pkmnRef } from "~/utility";
// get state
import useStore from "~/stores";
const store = useStore();
// props
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;
});
// get pokemon sprite
const spriteSrc = ref("");
store
.getPokemonSprite(props.data.natID, props.data.shiny)
.then((result) => (spriteSrc.value = result));
// extra pokemon stats modal handling
const modalPokemonStatsOpen = ref(false);
</script>

<template>
<div
<button
:class="[
'grid gap-1 w-full',
viewport.isLessThan('full') || showExtraInfo
viewport.isLessThan('full')
? 'grid-cols-1'
: 'grid-cols-2',
]"
@click="modalPokemonStatsOpen = true"
>

<!-- Pokemon Sprite -->
<!-- TODO: Why the hell does removing "v-if=true" cause the pokemon sprites to bug out ?? -->
<div
v-if="showSprite"

v-if="true"
class="bg-light-primary dark:bg-dark-primary rounded-lg flex justify-center items-center w-full h-full"
>
<Spinner v-if="!spriteSrc" />
Expand All @@ -59,7 +50,8 @@ store

<!-- Pokemon Info -->
<div
class="bg-light-primary dark:bg-dark-primary rounded-lg full:flex full:flex-col hidden justify-start items-center py-2 px-2 w-full h-full"
v-if="viewport.isGreaterOrEquals('full')"
class="bg-light-primary dark:bg-dark-primary rounded-lg flex flex-col justify-start items-center py-2 px-2 w-full h-full"
>
<!-- Name / Shiny -->
<div
Expand All @@ -81,96 +73,27 @@ store
</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>
<div
class="bg-light-secondary dark:bg-dark-secondary rounded-md flex justify-center items-center px-2 py-1"
>
<span class="text-xs"> LVL {{ data.level }} </span>
</div>

<!-- IV Sum -->
<div class="flex flex-col items-center justify-center text-center text-xs 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-2">
<div
class="bg-light-accent dark:bg-dark-accent rounded-full h-2"
: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"
class="flex flex-col items-center justify-center text-center text-xs w-full my-1"
>
<div class="mb-2">
<!-- 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"
>
<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>

<!-- 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>
<IvSumProgressBar :IVSum="data.IVSum" />
</div>
</div>
</div>
</button>

<!-- Add Instance Modal -->
<PokemonStatsModal
v-if="data"
:open="modalPokemonStatsOpen"
@closeModal="modalPokemonStatsOpen = false"
:pokemon="data"
:spriteSrc="spriteSrc"
/>
</template>
70 changes: 70 additions & 0 deletions src/components/presets/bar/IVSumProgressBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<script setup lang="ts">
import { computed } from "@vue/reactivity";
const props = defineProps<{
IVSum: number;
}>();
// max IV sum
const IVSumMax = 186;
// calculate progress of IV sum
const progress = Math.ceil((props.IVSum / IVSumMax) * 100);
// get color of bar
const progressDetails = computed(() => {
switch (true) {
// Perfect
case progress == 100:
return {
color: "blue",
text: "Perfect IVs!",
};
// Bad
case progress < 50:
return {
color: "red",
};
// Average
case progress < 70:
return {
color: "yellow",
};
// Great
case progress < 100:
return {
color: "green",
};
default:
return {
color: "red",
};
}
});
</script>

<template>
<!-- Bar -->
<UProgress
:ui="{
strategy: 'override',
progress: {
track: 'bg-light-tertiary dark:bg-dark-tertiary',
},
}"
:value="IVSum"
:max="IVSumMax"
:color="progressDetails.color"
>
<!-- Indicator -->
<template #indicator>
<div class="text-xs font-bold">
<span class="text-light-text dark:text-dark-text">{{
progressDetails?.text
? progressDetails.text
: "IV Sum: " + IVSum
}}</span>
</div>
</template>
</UProgress>
</template>
2 changes: 1 addition & 1 deletion src/components/presets/card/EncountersCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const encounterType = ref(0);

<template>
<div :class="panelStyle">
<div class="flex flex-col h-[44vh] w-full self-start">
<div class="flex flex-col h-full w-full self-start">
<!-- Encounter Stats -->
<div class="flex flex-1 flex-grow w-full"></div>

Expand Down
Loading

0 comments on commit 8dd7417

Please sign in to comment.