Merge pull request #68 from shampsdev/dev

v0.1.3
shampsdev · Nov 25, 2024 · 399a409 · 399a409
2 parents f74a5af + 15bb310
commit 399a409
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 52 deletions.
diff --git a/src/modules/game/card.tsx b/src/modules/game/card.tsx
@@ -50,7 +50,7 @@ export const CardComponent = ({ data, deltaY }: Props) => {
 
     return (
         <div className="relative h-full overflow-hidden rounded-3xl">
-            <div className="h-[420px] w-full xs:h-[420px]">
+            <div className="w-full aspect-square">
                 <div
                     className="bg-slate-100 h-full w-full rounded-t-3xl pb-4 overflow-hidden">
                     <img

diff --git a/src/modules/game/match.card.tsx b/src/modules/game/match.card.tsx
@@ -60,60 +60,66 @@ const MatchCard = () => {
       isDragging"
         >
             <div className="absolute mx-auto bottom-2 text-xs">Все в лобби должны придти к единому решению!</div>
-            <div className="w-full z-50 absolute opacity-50 px-5 gap-4 flex p-2 top-0 justify-between">
-                {card !== null && card.images.length > 1 && card.images.map((_, index) => {
-                    return (
-                        <div
-                            key={`image_${index}`}
-                            className={`${index == imageIndex ? 'bg-muted' : 'bg-muted-foreground'} h-[2px] w-full rounded-full`}
-                        />
-                    )
-                })}
-            </div>
-            <motion.div
-                onTap={(e: MouseEvent) => {
-                    const boundingBox = (e.target as HTMLElement).getBoundingClientRect();
-                    const tapX = e.clientX - boundingBox.left;
-                    const elementWidth = boundingBox.width;
-
-                    if (card == null) return;
-
-                    setImageIndex((prevIndex) => {
-                        if ((tapX + elementWidth / 4) < elementWidth / 2) {
-                            return (prevIndex - 1 + card.images.length) % card.images.length;
-                        } else if ((tapX - elementWidth / 4) > elementWidth / 2) {
-                            return (prevIndex + 1) % card.images.length;
-                        }
-                        return prevIndex;
-                    });
-                }}
-                className="relative h-full rounded-3xl overflow-hidden">
-                <div className="h-[380px] w-full">
-                    <div className="bg-slate-100 h-full w-full rounded-3xl pb-4 overflow-hidden">
-                        <img
-                            draggable="false"
-                            className="h-full w-auto min-w-full object-cover"
-                            src={card?.images[imageIndex]}
-                        />
-                    </div>
+            <div className="text-3xl py-5">Это мэтч!</div>
+            <div
+                id="cardsWrapper"
+                className="w-full aspect-[30/35] max-w-[90vw] relative z-10"
+            >
+                <div className="w-full z-50 absolute opacity-50 px-5 gap-4 flex p-2 top-0 justify-between">
+                    {card !== null && card.images.length > 1 && card.images.map((_, index) => {
+                        return (
+                            <div
+                                key={`image_${index}`}
+                                className={`${index == imageIndex ? 'bg-muted' : 'bg-muted-foreground'} h-[2px] w-full rounded-full`}
+                            />
+                        )
+                    })}
                 </div>
-                <div className="absolute top-0 w-full h-full">
-                    <div
-                        className="absolute pt-4 bottom-0 w-full rounded-3xl bg-secondary shadow-md overflow-hidden"
-                    >
-                        <h1 className="text-foreground text-lg font-medium mx-4">{card?.title}</h1>
-                        <div className="h-full">
-                            <p onClick={() => {
-                                const url = `https://yandex.ru/maps/?rtext=${card?.location.lat}%2C${card?.location.lon}`
-                                openLink(url);
-                            }} className="p-4 pt-0 cursor-pointer underline flex flex-col justify-between overflow-hidden text-foreground">
-                                {card?.address}
-                            </p>
+                <motion.div
+                    onTap={(e: MouseEvent) => {
+                        const boundingBox = (e.target as HTMLElement).getBoundingClientRect();
+                        const tapX = e.clientX - boundingBox.left;
+                        const elementWidth = boundingBox.width;
+
+                        if (card == null) return;
+
+                        setImageIndex((prevIndex) => {
+                            if ((tapX + elementWidth / 4) < elementWidth / 2) {
+                                return (prevIndex - 1 + card.images.length) % card.images.length;
+                            } else if ((tapX - elementWidth / 4) > elementWidth / 2) {
+                                return (prevIndex + 1) % card.images.length;
+                            }
+                            return prevIndex;
+                        });
+                    }}
+                    className="relative h-full rounded-3xl overflow-hidden">
+                    <div className="h-[380px] w-full">
+                        <div className="bg-slate-100 h-full w-full rounded-3xl pb-4 overflow-hidden">
+                            <img
+                                draggable="false"
+                                className="h-full w-auto min-w-full object-cover"
+                                src={card?.images[imageIndex]}
+                            />
                         </div>
                     </div>
-                </div>
-            </motion.div >
-        </div>
+                    <div className="absolute top-0 w-full h-full">
+                        <div
+                            className="absolute pt-4 bottom-0 w-full rounded-3xl bg-secondary shadow-md overflow-hidden"
+                        >
+                            <h1 className="text-foreground text-lg font-medium mx-4">{card?.title}</h1>
+                            <div className="h-full">
+                                <p onClick={() => {
+                                    const url = `https://yandex.ru/maps/?rtext=${card?.location.lat}%2C${card?.location.lon}`
+                                    openLink(url);
+                                }} className="p-4 pt-0 cursor-pointer underline flex flex-col justify-between overflow-hidden text-foreground">
+                                    {card?.address}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div >
+            </div>
+        </div >
     );
 };