Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Oct 10, 2024
1 parent 98bb161 commit 7fa5384
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 20 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
"swiper": "^10.3.1",
"swr": "^2.2.4",
"tonweb": "^0.0.66",
"usehooks-ts": "^3.1.0",
"viem": "^2.8.12",
"wagmi": "^2.9.2"
},
Expand Down
8 changes: 4 additions & 4 deletions src/components/pages/event/ava-2024/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function Modal({
leave='ease-in duration-200'
leaveFrom='opacity-70'
leaveTo='opacity-0'>
<div className='fixed inset-0 bg-neutral-500/70 transition-opacity' />
<div className='fixed inset-0 bg-black/80 transition-opacity' />
</Transition.Child>

<div className='fixed inset-0 z-10 overflow-y-auto'>
Expand Down Expand Up @@ -59,7 +59,7 @@ export default function Modal({
fillOpacity='0.1'
/>
</svg>
<div className='flex justify-end relative'>
<div className='flex justify-end absolute top-4 right-4 z-20'>
<svg
width='24'
height='24'
Expand All @@ -71,8 +71,8 @@ export default function Modal({
<path d='M16 8L8 16M16 16L8 8' stroke='white' stroke-width='1.5' stroke-linecap='round' />
</svg>
</div>
<div className='text-lg font-semibold w-full text-center relative'>{title}</div>
<div className='mt-4 relative'>{children}</div>
{title && <div className='text-lg font-semibold w-full text-center relative my-4'>{title}</div>}
<div className='relative'>{children}</div>
</Dialog.Panel>
</Transition.Child>
</div>
Expand Down
161 changes: 145 additions & 16 deletions src/pages/events/ava-2024/map/character/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Frame from 'components/pages/event/ava-2024/assets/frame.svg'
import Mock from 'components/pages/event/ava-2024/assets/Mock.png'
import Mock2 from 'components/pages/event/ava-2024/assets/Mock-2.png'
import Frame2 from 'components/pages/event/ava-2024/assets/frame-2.svg'
import { useWindowSize } from 'usehooks-ts'

import Artkeeper from 'components/pages/event/ava-2024/assets/mascot-head.svg'
import GuideBox from 'components/pages/event/ava-2024/assets/guide-box.svg'
Expand All @@ -34,11 +35,14 @@ export default function Event() {
const [likeCount, setLikeCount] = useState(0)
const [loading, setLoading] = useState(false)
const [isLiked, setIsLiked] = useState(false)
const [showModal, setShowModal] = useState(false)
const [isCollected, setIsCollected] = useState(false)
const [collectedCount, setCollectedCount] = useState(0)
const [page, setPage] = useState(1)
const [selectedCharacter, setSelectedCharacter] = useState<any>()
const [sort, setSort] = useState('Created_At_Desc')
const [characters, setCharacters] = useState([])
const { width } = useWindowSize()
const { data, mutate } = useSWR(
{ ket: 'get-characters', userId: account?.id, page, sort },
({ userId, page, sort }) => eventService.story.getCharacters(userId, page, sort),
Expand All @@ -50,8 +54,12 @@ export default function Event() {
revalidateOnFocus: false,
})
const collectedCharacter = collectedCharacters?.data?.data?.data?.user_collect_character
const characters = data?.data?.data?.story_character
const characterData = selectedCharacter || characters?.[0]
const characterData = width < 1024 ? selectedCharacter : selectedCharacter || characters?.[0]
useEffect(() => {
if (data?.data?.data?.story_character) {
setCharacters(data?.data?.data?.story_character)
}
}, [data?.data?.data?.story_character?.length])
useEffect(() => {
setLikeCount(characterData?.likes_aggregate?.aggregate?.count)
setCollectedCount(characterData?.user_collect_characters_aggregate?.aggregate?.count)
Expand Down Expand Up @@ -103,10 +111,28 @@ export default function Event() {
</div>
<Image src={Decor} alt='' className='absolute -top-[4%] inset-x-0 w-full' />
<div className='relative pk-container mx-auto pt-24 text-white'>
<div className='py-10'>
<div className='lg:py-10'>
{!!characters?.length && (
<div className='grid grid-cols-[22fr_11fr] mt-4 gap-8 min-h-[1000px] relative'>
<div className='grid grid-cols-1 lg:grid-cols-[22fr_11fr] mt-4 gap-8 min-h-[1000px] relative'>
<div className='shrink-0 w-full'>
<div className='flex justify-between relative z-10 items-center gap-10 h-10 lg:hidden mb-5 flex-row-reverse'>
<div>
<Link href={!collectedCharacter?.length ? '#' : '/events/ava-2024/map/character/collected'}>
<Button color='neautral' size='sm' className='h-10' disabled={!collectedCharacter?.length}>
Your collected
</Button>
</Link>
</div>
<div className='w-[10.5%]'>
<RuleAndAward />
</div>
<Link
href={`/events/ava-2024/map`}
className='flex items-center text-sm font-semibold gap-2 whitespace-nowrap '>
<Image src={Map} alt='' className='w-[50px]' />
Back to map
</Link>
</div>
<div className='flex justify-between items-center h-10'>
<div className='text-3xl font-medium'>Character</div>
<div className='flex gap-2.5'>
Expand Down Expand Up @@ -162,12 +188,16 @@ export default function Event() {
Oldest
</div>
<div
className={`cursor-pointer px-2 ${sort == 'User_Collect_Desc' ? 'text-brand-default' : ''}`}
className={`cursor-pointer px-2 ${
sort == 'User_Collect_Desc' ? 'text-brand-default' : ''
}`}
onClick={() => setSort('User_Collect_Desc')}>
Most to least
</div>
<div
className={`cursor-pointer px-2 ${sort == 'User_Collect_Asc' ? 'text-brand-default' : ''}`}
className={`cursor-pointer px-2 ${
sort == 'User_Collect_Asc' ? 'text-brand-default' : ''
}`}
onClick={() => setSort('User_Collect_Asc')}>
Least to most
</div>
Expand All @@ -176,15 +206,18 @@ export default function Event() {
</Dropdown>
</div>
</div>
<div className='grid grid-cols-4 gap-5 mt-6'>
<div className='grid grid-cols-2 md:grid-cols-4 gap-5 mt-6'>
{characters?.map((character, index) => (
<div
className={`relative rounded-xl border-[3px] ${
selectedCharacter?.id == character.id || (!selectedCharacter && index == 0)
? 'border-brand-default'
: 'border-black'
characterData?.id == character.id ? 'border-brand-default' : 'border-black'
} overflow-hidden cursor-pointer`}
onClick={() => setSelectedCharacter(character)}
onClick={() => {
setSelectedCharacter(character)
if (width < 1024) {
setShowModal(true)
}
}}
key={character.id}>
<div className='absolute bottom-0 inset-x-0 w-full'>
<Image
Expand All @@ -205,11 +238,11 @@ export default function Event() {
className='[&_.Mui-selected]:!bg-white [&_.Mui-selected]:!text-text-primary [&_.MuiPaginationItem-root:not(.Mui-selected)]:!text-text-quatenary'
page={page}
onChange={(e, p) => setPage(p)}
count={Math.ceil((data?.data?.data?.story_character_aggregate?.aggregate?.count || 0)/10)}
count={Math.ceil((data?.data?.data?.story_character_aggregate?.aggregate?.count || 0) / 10)}
/>
</div>
</div>
<div className='sticky top-[12vh] h-fit'>
<div className='sticky top-[12vh] h-fit hidden lg:block'>
<div className='flex justify-between relative z-10 items-center gap-10 h-10'>
<div>
<Link href={!collectedCharacter?.length ? '#' : '/events/ava-2024/map/character/collected'}>
Expand All @@ -228,7 +261,7 @@ export default function Event() {
Back to map
</Link>
</div>
<div className='mt-6 rounded-mlg border-[3px] relative border-black p-5 bg-[#191919] h-fit min-w-[350px] w-full relative'>
<div className='mt-6 rounded-mlg border-[3px] relative border-black p-5 bg-[#191919] h-fit min-w-[350px] w-full'>
<Skew className='absolute top-1.5 right-1.5' />
<Skew className='absolute top-1.5 left-1.5' />
<div className='relative'>
Expand All @@ -250,9 +283,9 @@ export default function Event() {
</div>
<div className='flex items-center gap-3 w-full overflow-hidden'>
<div className='space-y-1.5 flex-1 min-w-0'>
<div className='font-jaro text-2xl line-clamp-2'>{characterData.name}</div>
<div className='font-jaro text-2xl line-clamp-2'>{characterData?.name}</div>
<div className='text-sm font-medium'>
by <span className='text-brand-default'>{characterData.authorizer_user.nickname}</span>
by <span className='text-brand-default'>{characterData?.authorizer_user.nickname}</span>
</div>
</div>
<div className='text-sm font-medium flex gap-1.5 shrink-0'>
Expand Down Expand Up @@ -331,6 +364,102 @@ export default function Event() {
</div>
</div>
</div>
{width < 1024 && (
<Modal open={showModal} setOpen={setShowModal} className='[&_.static]:p-0'>
{characterData && (
<div className='rounded-mlg border-[3px] relative border-black p-5 bg-[#191919] h-fit min-w-[350px] w-full'>
<Skew className='absolute top-1.5 right-1.5' />
<Skew className='absolute top-1.5 left-1.5' />
<div className='relative'>
<Ruler className='w-full mb-2' />
<div className='relative'>
<Image src={Frame2} alt='' className='w-full relative' />
<div className='absolute inset-x-4 bottom-4 w-[calc(100%-32px)] aspect-[384/543] rounded overflow-hidden'>
<Image
src={characterData?.descripton_url}
alt=''
width={400}
height={800}
className='w-full h-full object-cover relative'
/>
</div>
<div className='absolute top-1 h-full -left-3'>
<Ruler1 className='h-full' />
</div>
</div>
<div className='flex items-center gap-3 w-full overflow-hidden'>
<div className='space-y-1.5 flex-1 min-w-0'>
<div className='font-jaro text-2xl line-clamp-2'>{characterData?.name}</div>
<div className='text-sm font-medium'>
by <span className='text-brand-default'>{characterData?.authorizer_user.nickname}</span>
</div>
</div>
<div className='text-sm font-medium flex gap-1.5 shrink-0'>
{collectedCount}{' '}
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M4.5 1.5C4.91421 1.5 5.25 1.83579 5.25 2.25V11.25C5.25 11.6642 4.91421 12 4.5 12C4.08579 12 3.75 11.6642 3.75 11.25V2.25C3.75 1.83579 4.08579 1.5 4.5 1.5Z'
fill='white'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M13.5 3C12.6716 3 12 3.67157 12 4.5C12 5.32843 12.6716 6 13.5 6C14.3284 6 15 5.32843 15 4.5C15 3.67157 14.3284 3 13.5 3ZM10.5 4.5C10.5 2.84315 11.8431 1.5 13.5 1.5C15.1569 1.5 16.5 2.84315 16.5 4.5C16.5 6.15685 15.1569 7.5 13.5 7.5C11.8431 7.5 10.5 6.15685 10.5 4.5Z'
fill='white'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M4.5 12C3.67157 12 3 12.6716 3 13.5C3 14.3284 3.67157 15 4.5 15C5.32843 15 6 14.3284 6 13.5C6 12.6716 5.32843 12 4.5 12ZM1.5 13.5C1.5 11.8431 2.84315 10.5 4.5 10.5C6.15685 10.5 7.5 11.8431 7.5 13.5C7.5 15.1569 6.15685 16.5 4.5 16.5C2.84315 16.5 1.5 15.1569 1.5 13.5Z'
fill='white'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M13.5 6C13.9142 6 14.25 6.33579 14.25 6.75C14.25 8.73912 13.4598 10.6468 12.0533 12.0533C10.6468 13.4598 8.73912 14.25 6.75 14.25C6.33579 14.25 6 13.9142 6 13.5C6 13.0858 6.33579 12.75 6.75 12.75C8.3413 12.75 9.86742 12.1179 10.9926 10.9926C12.1179 9.86742 12.75 8.3413 12.75 6.75C12.75 6.33579 13.0858 6 13.5 6Z'
fill='white'
/>
</svg>
</div>
<div className='text-sm font-medium flex gap-1.5 shrink-0'>
{likeCount}{' '}
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>
<path
d='M17.257 4.40883C16.9878 3.78533 16.5995 3.22033 16.114 2.74544C15.6281 2.26913 15.0552 1.89062 14.4265 1.63048C13.7745 1.35967 13.0753 1.22105 12.3693 1.22267C11.3789 1.22267 10.4126 1.49388 9.57289 2.00615C9.372 2.1287 9.18115 2.2633 9.00035 2.40995C8.81955 2.2633 8.6287 2.1287 8.4278 2.00615C7.58807 1.49388 6.62178 1.22267 5.63138 1.22267C4.91821 1.22267 4.22713 1.35928 3.57423 1.63048C2.94343 1.89164 2.3749 2.26731 1.88673 2.74544C1.40057 3.21979 1.0122 3.78493 0.743652 4.40883C0.464411 5.05772 0.321777 5.74678 0.321777 6.45593C0.321777 7.1249 0.458385 7.822 0.72959 8.53115C0.956599 9.12379 1.28205 9.73852 1.69789 10.3593C2.35682 11.3416 3.26285 12.3662 4.38785 13.4048C6.25213 15.1265 8.09834 16.3158 8.17669 16.364L8.65281 16.6693C8.86374 16.8039 9.13495 16.8039 9.34589 16.6693L9.822 16.364C9.90035 16.3137 11.7445 15.1265 13.6108 13.4048C14.7358 12.3662 15.6419 11.3416 16.3008 10.3593C16.7166 9.73852 17.0441 9.12379 17.2691 8.53115C17.5403 7.822 17.6769 7.1249 17.6769 6.45593C17.6789 5.74678 17.5363 5.05772 17.257 4.40883ZM9.00035 15.0803C9.00035 15.0803 1.84856 10.4979 1.84856 6.45593C1.84856 4.40883 3.54209 2.74946 5.63138 2.74946C7.0999 2.74946 8.37356 3.5691 9.00035 4.76642C9.62714 3.5691 10.9008 2.74946 12.3693 2.74946C14.4586 2.74946 16.1521 4.40883 16.1521 6.45593C16.1521 10.4979 9.00035 15.0803 9.00035 15.0803Z'
fill='white'
/>
</svg>
</div>
</div>
<div className='flex gap-1.5 mt-4'>
<Button
color='neautral'
size='sm'
variant='outlined'
className='!w-2/3 shrink-0 [&>*]:w-full'
disabled={isCollected || (collectedCharacter?.length || 0) >= 3}
onClick={() => {
setShowModal(false)
setOpen(true)
}}>
<div className='flex gap-1 w-full justify-between items-center'>
<div>Collect IP License</div>
<div className='flex items-center gap-1'>
-1 <Image src={Point} alt='' className='h-5 w-auto ml-1' />
</div>
</div>
</Button>
<Button size='sm' color='neautral' className='!w-full' onClick={likeHandler}>
{isLiked ? 'Unlike' : 'Like'}
</Button>
</div>
</div>
</div>
)}
</Modal>
)}
<Modal open={open} setOpen={setOpen} title='Collect IP License'>
{characterData && (
<div>
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9711,6 +9711,13 @@ use-sync-external-store@^1.2.0:
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==

usehooks-ts@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-3.1.0.tgz#156119f36efc85f1b1952616c02580f140950eca"
integrity sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==
dependencies:
lodash.debounce "^4.0.8"

utf-8-validate@^5.0.5:
version "5.0.10"
resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
Expand Down

0 comments on commit 7fa5384

Please sign in to comment.