Skip to content

Commit

Permalink
Merge pull request #327 from DecentralCardGame/326-gallery-fixes
Browse files Browse the repository at this point in the history 
326 gallery fixes
  • Loading branch information
@patrickwieth
patrickwieth authored Nov 15, 2024
2 parents f9c7057 + e631326 commit 7e78217
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 94 deletions.
42 changes: 40 additions & 2 deletions src/components/elements/GalleryComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,35 @@
<div
v-for="card in state.cards"
:key="card.id"
class="hover:scale-110 drop-shadow-glowCCYellow"
class="transition duration-500 hover:scale-110 hover:duration-300"
:class="shadowClass(card)"
@click="emit('cardClicked', card.id)"
>
<div>
<CardComponent :model="card" />
</div>
</div>
</div>

<div class="mt-12 flex flex-row justify-center items-center">
<BaseCCButton
:type="Color.RED"
@click="load()"
:class="{ invisible: !loadButtonVisible }"
>
Reckless Card Loading
</BaseCCButton>
</div>
</template>

<script setup lang="ts">
import * as R from "ramda";
import { computed, onBeforeUnmount, onMounted, reactive, watch } from "vue";
import { useCards } from "@/def-composables/useCards";
import { Card } from "@/model/Card";
import CardComponent from "@/components/elements/CardComponent.vue";
import { Color } from "@/components/utils/color";
import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
const { getCard } = useCards();
const emit = defineEmits(["cardClicked"]);
Expand Down Expand Up @@ -54,11 +68,35 @@ const cardIdsOnPage = computed(() => {
return props.allCardIds.slice(0, state.cardsOnPage);
});
const shadowClass = (card) => {
let classes = 0
R.forEachObjIndexed(entry => {
if (entry) classes++;
}, card.Class)
if (classes > 1) return {
'drop-shadow-glowCCYellow': true,
}
else return {
'drop-shadow-glowCCRed': card.Class.Culture,
'drop-shadow-glowCCBlue': card.Class.Technology,
'drop-shadow-glowCCGreen': card.Class.Nature,
'drop-shadow-glowCCPurple': card.Class.Mysticism
}
};
onMounted(() => {
state.cardsOnPage = props.cardsPerPage;
window.addEventListener("scroll", onScroll);
});
let loadButtonVisible = true;
const load = () => {
state.cardsOnPage += 10;
loadButtonVisible = false;
window.addEventListener("scroll", onScroll);
};
onBeforeUnmount(() => {
window.removeEventListener("scroll", onScroll);
});
Expand Down
210 changes: 118 additions & 92 deletions src/views/GalleryPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,141 @@
<template>
<div class="flex text-white">
<div class="flex text-white max-lg:flex-col justify-center">

<div
class="self-start sticky top-0 min-w-[25rem] flex justify-center p-16 h-[100vh] mt-0 bg-[#552026] max-lg:hidden"
class="self-start lg:sticky top-0 min-w-[25rem] flex justify-center lg:p-16 h-[100vh] mt-0 bg-[#552026]
max-lg:w-full max-lg:h-full max-lg:p-4 "
>
<div class="space-y-6">
<GalleryFilterImageChooser :options="classOptions" />
<Checkbox v-model="galleryFilters.multiClass">
Show multi-class only
</Checkbox>
<GalleryFilterImageChooser :options="typeOptions" />
<div class="">
<p>Search for</p>

<div class="">

<div class="flex flex-row justify-center items-center lg:invisible max-lg:pt-2 max-lg:pb-6">
<BaseCCButton
:type="Color.RED"
@click="filtersVisible = !filtersVisible"
>
Gallery Filters
</BaseCCButton>
</div>

<div
v-if="filtersVisible"
class="space-y-6 justify-self-center"
>

<GalleryFilterImageChooser :options="classOptions" />
<Checkbox v-model="galleryFilters.multiClass">
Show multi-class only
</Checkbox>
<GalleryFilterImageChooser :options="typeOptions" />
<div class="">
<p>Search for</p>
<div class="space-y-4">
<CCInput
v-model="galleryFilters.nameContains"
placeholder="name"
/>
<br>
<CCInput
v-model="galleryFilters.notesContains"
placeholder="notes"
/>
<br>
<CCInput
v-model="galleryFilters.keywordsContains"
placeholder="keywords"
/>
</div>
</div>
<CCInput
v-model="galleryFilters.owner"
placeholder="owner"
:max-length="41"
/>
<Checkbox
v-if="loggedIn"
:model-value="galleryFilters.owner === address"
@update:model-value="
(v: boolean) => (galleryFilters.owner = v ? address : '')
"
>
My Cards
</Checkbox>
<div class="space-y-4">
<CCInput
v-model="galleryFilters.nameContains"
placeholder="name"
/>
<br>
<CCInput
v-model="galleryFilters.notesContains"
placeholder="notes"
Rarity:
<Dropdown
v-model="galleryFilters.rarity"
:display-fn="
(v?) => (typeof v === 'undefined' ? '?' : CardRarity[v])
"
:options="[
undefined,
CardRarity.common,
CardRarity.uncommon,
CardRarity.rare,
CardRarity.exceptional,
CardRarity.unique,
]"
/>
<br>
<CCInput
v-model="galleryFilters.keywordsContains"
placeholder="keywords"
Status:
<Dropdown
v-model="galleryFilters.status"
:display-fn="(v) => (v == 'playable' ? 'playable' : Status[v])"
:options="
new Array<GalleryStatus>(
'playable',
Status.prototype,
Status.trial,
Status.permanent,
Status.bannedSoon,
Status.bannedVerySoon,
Status.banned,
)
"
/>
</div>

</div>
<CCInput
v-model="galleryFilters.owner"
placeholder="owner"
:max-length="41"
/>
<Checkbox
v-if="loggedIn"
:model-value="galleryFilters.owner === address"
@update:model-value="
(v: boolean) => (galleryFilters.owner = v ? address : '')
"
>
My Cards
</Checkbox>
<div class="space-y-4">
Rarity:
<Dropdown
v-model="galleryFilters.rarity"
:display-fn="
(v?) => (typeof v === 'undefined' ? '?' : CardRarity[v])
"
:options="[
undefined,
CardRarity.common,
CardRarity.uncommon,
CardRarity.rare,
CardRarity.exceptional,
CardRarity.unique,
]"
/>
<br>
Status:
<Dropdown
v-model="galleryFilters.status"
:display-fn="(v) => (v == 'playable' ? 'playable' : Status[v])"
:options="
new Array<GalleryStatus>(
'playable',
Status.prototype,
Status.trial,
Status.permanent,
Status.bannedSoon,
Status.bannedVerySoon,
Status.banned,
)
"
/>
</div>

</div>
</div>

<div class="bg-black w-[75%] py-8 md:p-8 lg:p-16 text-white grow">
<div class="bg-black lg:w-[75%] py-8 md:p-8 lg:p-16 text-white grow">
<div class="mx-16">
<div class="relative h-8">
<p class="absolute text-5xl mx-auto left-0 right-0 text-center">
Gallery
</p>
<div class="relative h-8 flex flex-row justify-between">
<div class="flex justify-center max-md:hidden md:justify-between">
<p class="text-xl my-auto">
<p class="md:text-xl lg:text-lg xl:text-xl my-auto">
{{ cardList.length }} Results
</p>
<div class="flex space-x-4">
<p class="text-xl my-auto max-md:hidden">
Sort by
</p>
<Dropdown
v-model="galleryFilters.sortBy"
class="my-auto"
:type="Color.RED"
:options="['Name', 'CastingCost', 'Id']"
:display-fn="(v) => (v == 'CastingCost' ? 'Casting cost' : v)"
/>
<SortDirectionButton
v-model="revertSort"
class="my-auto"
/>
</div>
</div>
<div>
<p class="md:text-4xl lg:text-2xl xl:text-4xl text-center">
Gallery
</p>
</div>
<div class="flex space-x-2">
<p class="md:text-xl xl:text-xl lg:text-lg my-auto max-md:hidden">
Sort by
</p>
<Dropdown
v-model="galleryFilters.sortBy"
class="my-auto"
:type="Color.RED"
:options="['Name', 'CastingCost', 'Id']"
:display-fn="(v) => (v == 'CastingCost' ? 'Casting cost' : v)"
/>
<SortDirectionButton
v-model="revertSort"
class="my-auto"
/>
</div>
</div>
<div class="mt-8 h-1 rounded w-full bg-white" />
</div>

<GalleryComponent
class="p-16"
:cards-per-page="galleryFilters.cardsPerPage"
:cards-2per-page="galleryFilters.cardsPerPage"
:all-card-ids="revertSort ? cardList.toReversed() : cardList"
@card-clicked="openCardviewModel"
/>
Expand All @@ -129,6 +152,7 @@
import * as R from "ramda";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
import GalleryComponent from "@/components/elements/GalleryComponent.vue";
import techActive from "@/assets/figma/ClassesButtons/tech.png";
import techInactive from "@/assets/figma/ClassesButtons/tech_unselected.png";
Expand Down Expand Up @@ -178,6 +202,8 @@ const {
galleryFiltersFromPageQuery,
} = useGallery();
let filtersVisible = ref(true);
const revertSort = ref(false);
const classOptions: GalleryFilterImageChooserOptions<GalleryFilters> = [
Expand Down
4 changes: 4 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ module.exports = {
header: ["8px 8px 3px rgba(0, 0, 0, 0.25)"],
glowTeal: ["0px 0px 24px #40C1C7"],
glowCCYellow: ["0px 0px 24px #FEC560"],
glowCCRed: ["0px 0px 24px rgba(216, 32, 39, 0.90)"],
glowCCBlue: ["0px 0px 24px rgba(39, 32, 216, 0.90)"],
glowCCGreen: ["0px 0px 24px rgba(32, 216, 39, 0.90)"],
glowCCPurple: ["0px 0px 24px rgba(216, 32, 216, 0.90)"],
},
},
},
Expand Down

0 comments on commit 7e78217

Please sign in to comment.