From e27d1682505aa794458a5c62f519940cf67f7f34 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Mon, 1 Apr 2024 12:02:17 +0800 Subject: [PATCH] =?UTF-8?q?=EF=B8=8F=F0=9F=91=95=F0=9F=A5=9B=20=E2=86=9D?= =?UTF-8?q?=20[SGV2-13=20#104]:=20Gone=20back=20to=20nextjs=2013=20tempora?= =?UTF-8?q?rily?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Content/Inventory/UserOwnedItems.tsx | 71 +- components/Content/Visuals/Bento.tsx | 357 ++++++ components/Gameplay/mission-list.tsx | 64 + components/Modals/rover-interface.tsx | 116 ++ components/_Core/Section/BentoBox.tsx | 149 +++ components/_Core/Section/Layout.tsx | 222 +--- components/_Core/ui/bento-grid.tsx | 73 ++ components/_Skeleton/ClassificationBlocks.tsx | 16 + components/_Skeleton/InventoryBlocks.tsx | 100 ++ components/ui/card.tsx | 76 ++ yarn.lock | 1047 +++++++---------- 11 files changed, 1475 insertions(+), 816 deletions(-) create mode 100644 components/Content/Visuals/Bento.tsx create mode 100644 components/Gameplay/mission-list.tsx create mode 100644 components/_Core/Section/BentoBox.tsx create mode 100644 components/_Core/ui/bento-grid.tsx create mode 100644 components/_Skeleton/ClassificationBlocks.tsx create mode 100644 components/_Skeleton/InventoryBlocks.tsx create mode 100644 components/ui/card.tsx diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx index 97603429..03f06da7 100644 --- a/components/Content/Inventory/UserOwnedItems.tsx +++ b/components/Content/Inventory/UserOwnedItems.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react"; import Link from "next/link"; -const OwnedItemsList: React.FC = () => { +const OwnedItemsList: React.FC = () => { const supabase = useSupabaseClient(); const session = useSession(); @@ -94,53 +94,80 @@ interface InventoryItem { export const ItemsVerticalList: React.FC = () => { const session = useSession(); - const [itemDetails, setItemDetails] = useState([]); const supabase = useSupabaseClient(); + const [ownedItems, setOwnedItems] = useState([]); + const [itemDetails, setItemDetails] = useState([]); + const [isLoading, setIsLoading] = useState(true); // Loading state useEffect(() => { - const fetchOwnedItems = async () => { + if (!session || !supabase) { + return; + } + + const fetchOwnedItemsAndDetails = async () => { try { - if (!session) return; + setIsLoading(true); + const userId = session.user.id; - const user = session.user.id; // Fetch owned items from the database const { data: ownedItemsData, error: ownedItemsError } = await supabase - .from('inventoryUSERS') - .select('*') - .eq('owner', user) - .gt('id', 20); + .from("inventoryUSERS") + .select("*") + .eq("owner", userId) + .gt("id", 20) + .limit(6) + .order("id", { ascending: false }); if (ownedItemsError) { throw ownedItemsError; } if (ownedItemsData) { + setOwnedItems(ownedItemsData); + + // Extract item IDs from owned items const itemIds = ownedItemsData.map(item => item.item); - // Fetch details of owned items + + // Fetch details of owned items based on item IDs const { data: itemDetailsData, error: itemDetailsError } = await supabase - .from('inventoryITEMS') - .select('*') - .in('id', itemIds); + .from("inventoryITEMS") + .select("*") + .in("id", itemIds); if (itemDetailsError) { throw itemDetailsError; } - if (itemDetailsData) { - setItemDetails(itemDetailsData); - } + setItemDetails(itemDetailsData); } } catch (error) { - console.error('Error fetching owned items:', error.message); + console.error("Error fetching owned items and details:", error); + } finally { + setIsLoading(false); } }; - fetchOwnedItems(); - }, [session]); + fetchOwnedItemsAndDetails(); + }, [session, supabase]); + + // Combine owned items with their details + const combinedItems = ownedItems.map(ownedItem => { + const itemDetail = itemDetails.find(detail => detail.id === ownedItem.item); + return { + ...ownedItem, + ...itemDetail, + }; + }); + + // If the component is loading, you can display a loading indicator or message + if (isLoading) { + return
Loading...
; + } + // Render the list of items return (
- {itemDetails.map(item => ( + {combinedItems.map(item => (
@@ -148,7 +175,7 @@ export const ItemsVerticalList: React.FC = () => {

{item.name}

-

x{item.quantity}

+

{item.quantity}

))}
@@ -224,7 +251,7 @@ export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid {item.name}

Quantity: {ownedItem?.quantity}

-

On planet: {ownedItem?.sector}

+

On sector (id): {ownedItem?.sector}

); })} diff --git a/components/Content/Visuals/Bento.tsx b/components/Content/Visuals/Bento.tsx new file mode 100644 index 00000000..94cfc2ff --- /dev/null +++ b/components/Content/Visuals/Bento.tsx @@ -0,0 +1,357 @@ +"use client"; +import { cn } from "../../../lib/uitls"; +import React from "react"; +// import { BentoGrid, BentoGridItem } from "../../_Core/ui/bento-grid"; +// import { +// IconBoxAlignRightFilled, +// IconClipboardCopy, +// IconFileBroken, +// IconSignature, +// IconTableColumn, +// } from "@tabler/icons-react"; +import { motion } from "framer-motion"; +import Image from "next/image"; +import { ItemsVerticalList } from "../Inventory/UserOwnedItems"; +// import { MissionList } from "../../Gameplay/mission-list"; + +export function BentoGridThirdDemo() { + return (<> + // + // {items.map((item, i) => ( + // p:text-lg]", item.className)} + // icon={item.icon} + // /> + // ))} + // + ); +} + +export function BentoGridMobileDemo() { + return ( <> + // + // {mobileItems.map((item, i) => ( + // p:text-lg]", item.className)} + // icon={item.icon} + // /> + // ))} + // + ); +} + +const Skeleton = () => ( +
+); + +const SkeletonOne = () => { + const variants = { + initial: { + x: 0, + }, + animate: { + x: 10, + rotate: 5, + transition: { + duration: 0.2, + }, + }, + }; + const variantsSecond = { + initial: { + x: 0, + }, + animate: { + x: -10, + rotate: -5, + transition: { + duration: 0.2, + }, + }, + }; + + return ( + + +
+
+ + +
+
+ + +
+
+ + + ); +}; +const SkeletonTwo = () => { + const variants = { + initial: { + width: 0, + }, + animate: { + width: "100%", + transition: { + duration: 0.2, + }, + }, + hover: { + width: ["0%", "100%"], + transition: { + duration: 2, + }, + }, + }; + const arr = new Array(6).fill(0); + return ( + + {arr.map((_, i) => ( + + ))} + + ); +}; +const SkeletonThree = () => { + const variants = { + initial: { + backgroundPosition: "0 50%", + }, + animate: { + backgroundPosition: ["0, 50%", "100% 50%", "0 50%"], + }, + }; + return ( + + + + ); +}; +const SkeletonFour = () => { + const first = { + initial: { + x: 20, + rotate: -5, + }, + hover: { + x: 0, + rotate: 0, + }, + }; + const second = { + initial: { + x: -20, + rotate: 5, + }, + hover: { + x: 0, + rotate: 0, + }, + }; + return ( + + {/* */} + + ); +}; +const SkeletonFive = () => { + const variants = { + initial: { + x: 0, + }, + animate: { + x: 2, + rotate: 1.3, + transition: { + duration: 0.2, + }, + }, + }; + const variantsSecond = { + initial: { + x: 0, + }, + animate: { + x: -10, + rotate: -5, + transition: { + duration: 0.2, + }, + }, + }; + + return ( + + + + + + ); +}; +const items = [ + { + title: "AI Content Generation", + description: ( + + Experience the power of AI in generating unique content. + + ), + header: , + className: "md:col-span-1", + // icon: , + }, + { + title: "Automated Proofreading", + description: ( + + Let AI handle the proofreading of your documents. + + ), + header: , + className: "md:col-span-1", + // icon: , + }, + { + title: "Contextual Suggestions", + description: ( + + Get AI-powered suggestions based on your writing context. + + ), + header: , + className: "md:col-span-1", + // icon: , + }, + { + title: "", + description: ( + null + ), + header: , + className: "md:col-span-2", + // icon: , + }, + + { + title: "", + description: ( + null + ), + header: , + className: "md:col-span-1", + // icon: , + }, +]; + +const mobileItems = [ + { + title: "AI Content Generation", + description: ( + + Experience the power of AI in generating unique content. + + ), + header: , + className: "md:col-span-1", + // icon: , + }, + { + title: "", + description: ( + null + ), + header: , + className: "md:col-span-2", + // icon: , + }, + ]; + + +/* +
+
+ {/*
+ {isDesktopOrLaptop && ( + <> + Planet 1 + Planet 2 + + )} + {isTabletOrMobile && ( + <> + Planet 1 + Planet 2 + + )} +
+
+ {isDesktopOrLaptop && ()} +
+
+
+ + +
+
*/ \ No newline at end of file diff --git a/components/Gameplay/mission-list.tsx b/components/Gameplay/mission-list.tsx new file mode 100644 index 00000000..37a77401 --- /dev/null +++ b/components/Gameplay/mission-list.tsx @@ -0,0 +1,64 @@ +import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "../ui/card"; +import Link from "next/link"; +import { Button } from "../ui/button"; + +export function MissionList() { + const missions = [ + { name: "Pick your home planet", completed: true }, + { name: "Build your first rover", completed: false }, + { name: "Collect your first resources", completed: false }, + { name: "Build your first structure", completed: false }, + { name: "Make your first classification", completed: false }, + ]; + + return ( + <> + + To-Do List + Manage your daily tasks + + + {missions.map((mission, index) => ( +
+
+ + + +

+ {mission.name} +

+
+
+ ))} + + + ); +} + +function LinkIcon(props) { + return ( + + + + + ) +} \ No newline at end of file diff --git a/components/Modals/rover-interface.tsx b/components/Modals/rover-interface.tsx index 5e84dfa5..d38a2a68 100644 --- a/components/Modals/rover-interface.tsx +++ b/components/Modals/rover-interface.tsx @@ -466,6 +466,122 @@ export function RoverInterfaceDark() { ); }; +export function RoverInterfaceDarkMobile() { + return ( +
+
+
+
Planet Name
+
+
ROVER #1 (Allow user to customise name)
+
+
+
MISSION DAY
+
SOL #3039
+
Time: 2:36 pm
+
+
+
SUNRISE
+
6:37 am
+
SUNSET
+
6:35 pm
+
+
+
+
+
+
PRESSURE
+
+ + 827 Pa +
+
+
+
OXYGEN
+
+ + 0.24% +
+
+
+
+
TEMPERATURE
+
+ + -29.16 °C +
+
+
+
ATMOSPHERE
+
Moderate sunny
+
+
+
ROVER STATUS
+
+
+
CELL
+
65.25
+
+
+
GAS PRESS
+
12.48
+
+
+
+
MODE
+
DRV
+
+
+
+
SPEED
+
118 km/hour
+
+
+
+
CAMERA CONTROL PANEL
+
+
+
+
+ + + +
+
+ + + +
+
+
+