Skip to content

Commit 5254b12

Browse files
GizmotronnGizmotronn
committed
🟣🚥 ↝ few little bux fixes. [ SGV2-8 SGV2-2 ]
1 parent 4c03a17 commit 5254b12

File tree

6 files changed

+325
-5
lines changed

6 files changed

+325
-5
lines changed

‎components/Content/Archive/ArchivedInventory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
33
import Layout from "../../_Core/Section/Layout";
44
import OwnedPlanetsList from "./UserOwnedPlanets"; // Potentially this should be in a lists component dir
55
import OwnedItemsList from "../Inventory/UserOwnedItems";
6-
import MySpaceships from "./Vehicles/MySpaceships";
6+
import MySpaceships from "../../Gameplay/Vehicles/MySpaceships";
77

88
export default function V1Inventory() { // Inventory items for v1 of public schema, see notes below
99
const supabase = useSupabaseClient();

‎components/Content/[id]/BasePlanetSector.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import { useRouter } from "next/router";
33
import React, { useEffect, useState } from "react";
44
import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../Planets/PlanetData/RandomRoverImage";
5-
import StructureComponent, { PlacedStructures } from "../Planets/Sectors/StructureCreate";
5+
import StructureComponent, { PlacedStructures } from "../Populate/StructureCreate";
66
import { SectorStructureOwned } from "../Inventory/UserOwnedItems";
77
// import { CreateMenuBar, SectorCircularMenu } from "../../../Core/BottomBar";
88

‎components/Core/Section/BottomBar.tsx

+320
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
import Link from "next/link";
2+
import { useRouter } from "next/router";
3+
import React from "react";
4+
5+
import { BuildingIcon, CarIcon, RocketIcon, CpuIcon, MessageSquareDashedIcon } from "lucide-react";
6+
import { CircleMenu, CircleMenuItem, TooltipPlacement} from 'react-circular-menu';
7+
import { useState } from "react";
8+
9+
import { ClassificationFeedForIndividualPlanet } from "../../Content/Classify/ClassificationFeed";
10+
import ContentPlaceholder from "../../Content/Planets/PlanetData/ContentPlaceholder";
11+
12+
const bottombarLinks = [
13+
{
14+
imgURL: "/home.svg",
15+
route: "/feed",
16+
label: "Feed",
17+
},
18+
{
19+
imgURL: "/planet.svg",
20+
route: "/garden",
21+
label: "Garden",
22+
},
23+
{
24+
imgURL: "/eagle.svg",
25+
route: "/explore",
26+
label: "Explore",
27+
},
28+
{
29+
imgURL: "/rover.svg",
30+
route: "/create-post",
31+
label: "Gather",
32+
},
33+
{
34+
imgURL: "/satellite.svg",
35+
route: "/create-post",
36+
label: "Missions",
37+
},
38+
];
39+
40+
const Bottombar = () => {
41+
const { pathname } = useRouter();
42+
43+
return (
44+
<section className="bottom-bar flex justify-between items-center p-4 bg-white fixed bottom-0 left-0 w-full border-t">
45+
{bottombarLinks.map((link) => {
46+
const isActive = pathname === link.route;
47+
return (
48+
<Link legacyBehavior key={`bottombar-${link.label}`} href={link.route} passHref>
49+
<a className={`${
50+
isActive && "rounded-[10px] bg-primary-500 "
51+
} flex flex-col items-center justify-center p-2 transition`}>
52+
<img
53+
src={link.imgURL}
54+
alt={link.label}
55+
width={24}
56+
height={24}
57+
className={`mb-1 ${isActive ? "invert-white" : "text-light-2"}`}
58+
/>
59+
<p className={`tiny-medium ${isActive ? "text-light-3" : "text-light-2"}`}>
60+
{link.label}
61+
</p>
62+
</a>
63+
</Link>
64+
);
65+
})}
66+
</section>
67+
);
68+
};
69+
70+
export default Bottombar;
71+
72+
export const CreateBar = ({ onTabClick }) => {
73+
return (
74+
<div className="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
75+
<div className="grid h-full max-w-lg grid-cols-5 mx-auto">
76+
<button
77+
data-tooltip-target="tooltip-home"
78+
type="button"
79+
className="inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
80+
onClick={() => onTabClick('home')}
81+
>
82+
<svg
83+
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
84+
aria-hidden="true"
85+
xmlns="http://www.w3.org/2000/svg"
86+
fill="currentColor"
87+
viewBox="0 0 20 20"
88+
>
89+
<path
90+
d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
91+
/>
92+
</svg>
93+
<span className="sr-only">Home</span>
94+
</button>
95+
<div
96+
id="tooltip-home"
97+
role="tooltip"
98+
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
99+
>
100+
Home
101+
<div className="tooltip-arrow" data-popper-arrow></div>
102+
</div>
103+
<button
104+
data-tooltip-target="tooltip-wallet"
105+
type="button"
106+
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
107+
onClick={() => onTabClick('wallet')}
108+
>
109+
<svg
110+
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
111+
aria-hidden="true"
112+
xmlns="http://www.w3.org/2000/svg"
113+
fill="currentColor"
114+
viewBox="0 0 20 20"
115+
>
116+
<path
117+
d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z"
118+
/>
119+
<path
120+
d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z"
121+
/>
122+
</svg>
123+
<span className="sr-only">Wallet</span>
124+
</button>
125+
<div
126+
id="tooltip-wallet"
127+
role="tooltip"
128+
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
129+
>
130+
Wallet
131+
<div className="tooltip-arrow" data-popper-arrow></div>
132+
</div>
133+
<div className="flex items-center justify-center">
134+
<button
135+
data-tooltip-target="tooltip-new"
136+
type="button"
137+
className="inline-flex items-center justify-center w-10 h-10 font-medium bg-blue-600 rounded-full hover:bg-blue-700 group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800"
138+
>
139+
<svg
140+
className="w-4 h-4 text-white"
141+
aria-hidden="true"
142+
xmlns="http://www.w3.org/2000/svg"
143+
fill="none"
144+
viewBox="0 0 18 18"
145+
>
146+
<path
147+
stroke="currentColor"
148+
strokeLinecap="round"
149+
strokeLinejoin="round"
150+
strokeWidth="2"
151+
d="M9 1v16M1 9h16"
152+
/>
153+
</svg>
154+
<span className="sr-only">New item</span>
155+
</button>
156+
</div>
157+
<div
158+
id="tooltip-new"
159+
role="tooltip"
160+
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
161+
>
162+
Create new item
163+
<div className="tooltip-arrow" data-popper-arrow></div>
164+
</div>
165+
<button
166+
data-tooltip-target="tooltip-settings"
167+
type="button"
168+
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
169+
>
170+
<svg
171+
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
172+
aria-hidden="true"
173+
xmlns="http://www.w3.org/2000/svg"
174+
fill="none"
175+
viewBox="0 0 20 20"
176+
>
177+
<path
178+
stroke="currentColor"
179+
strokeLinecap="round"
180+
strokeLinejoin="round"
181+
strokeWidth="2"
182+
d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"
183+
/>
184+
</svg>
185+
<span className="sr-only">Settings</span>
186+
</button>
187+
<div
188+
id="tooltip-settings"
189+
role="tooltip"
190+
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
191+
>
192+
Settings
193+
<div className="tooltip-arrow" data-popper-arrow></div>
194+
</div>
195+
<button
196+
data-tooltip-target="tooltip-profile"
197+
type="button"
198+
className="inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
199+
>
200+
<svg
201+
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
202+
aria-hidden="true"
203+
xmlns="http://www.w3.org/2000/svg"
204+
fill="currentColor"
205+
viewBox="0 0 20 20"
206+
>
207+
<path
208+
d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM0 10a10 10 0 1 1 20 0 10 10 0 0 1-20 0Z"
209+
/>
210+
</svg>
211+
<span className="sr-only">Profile</span>
212+
</button>
213+
<div
214+
id="tooltip-profile"
215+
role="tooltip"
216+
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
217+
>
218+
Profile
219+
<div className="tooltip-arrow" data-popper-arrow></div>
220+
</div>
221+
</div>
222+
</div>
223+
);
224+
};
225+
226+
export const CreateMenuBar = ({ onUpdatesClick, onSecondButtonClick }) => {
227+
return (
228+
<ul className="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center space-x-4 bg-gray-200 rounded-full p-2 shadow-lg">
229+
<li className="flex flex-col items-center justify-center">
230+
<a onClick={onUpdatesClick} className="flex flex-col items-center justify-center p-1 cursor-pointer">
231+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
232+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
233+
</svg>
234+
<span className="bg-gray-500 text-white text-xs px-1 rounded">99+</span>
235+
<span>Inbox</span>
236+
</a>
237+
</li>
238+
<li className="flex flex-col items-center justify-center">
239+
<a onClick={onSecondButtonClick} className="flex flex-col items-center justify-center p-1">
240+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
241+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
242+
</svg>
243+
<span className="bg-yellow-500 text-white text-xs px-1 rounded">NEW</span>
244+
<span>Feed</span>
245+
</a>
246+
</li>
247+
<li className="flex flex-col items-center justify-center">
248+
<a onClick={onUpdatesClick} className="flex flex-col items-center justify-center p-1 cursor-pointer">
249+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
250+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
251+
</svg>
252+
<span className="bg-gray-500 text-white text-xs px-1 rounded">99+</span>
253+
<span>Inbox</span>
254+
</a>
255+
</li>
256+
<li className="flex flex-col items-center justify-center">
257+
<a onClick={onUpdatesClick} className="flex flex-col items-center justify-center p-1 cursor-pointer">
258+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
259+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
260+
</svg>
261+
<span className="bg-gray-500 text-white text-xs px-1 rounded">99+</span>
262+
<span>Inbox</span>
263+
</a>
264+
</li>
265+
</ul>
266+
);
267+
};
268+
269+
export const SectorCircularMenu = (props) => {
270+
const [activeComponent, setActiveComponent] = useState(null);
271+
272+
const handleItemClick = (itemName) => {
273+
// Set the active component based on the clicked item
274+
switch (itemName) {
275+
case 'Email':
276+
setActiveComponent('ClassificationFeedForIndividualPlanet');
277+
break;
278+
case 'Help':
279+
setActiveComponent('ContentPlaceholder');
280+
break;
281+
case 'Location':
282+
// Set active component for other items if needed
283+
break;
284+
case 'Info':
285+
// Set active component for other items if needed
286+
break;
287+
default:
288+
setActiveComponent(null);
289+
}
290+
};
291+
292+
return (<>
293+
<CircleMenu
294+
startAngle={-90}
295+
rotationAngle={360}
296+
itemSize={2}
297+
radius={5}
298+
rotationAngleInclusive={false}
299+
>
300+
<CircleMenuItem
301+
onClick={() => alert("Clicked the item")}
302+
tooltip="Email"
303+
tooltipPlacement={TooltipPlacement.Right}
304+
>
305+
<BuildingIcon />
306+
</CircleMenuItem>
307+
<CircleMenuItem tooltip="Help">
308+
<MessageSquareDashedIcon />
309+
</CircleMenuItem>
310+
<CircleMenuItem tooltip="Location">
311+
<CarIcon />
312+
</CircleMenuItem>
313+
<CircleMenuItem tooltip="Info">
314+
<RocketIcon />
315+
</CircleMenuItem>
316+
</CircleMenu>
317+
318+
{activeComponent === 'ContentPlaceholder' && <ContentPlaceholder />}</>
319+
);;
320+
};

‎pages/explore/[id].tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import { useRouter } from "next/router";
33
import React from "react";
44
import Navigation from "../../components/_Core/Section/Navbar";
5-
import RoverExploreDesktop from "../../components/Content/RoverData/RoverExplore";
5+
import RoverExploreDesktop from "../../components/Gameplay/Explore/RoverExplore";
66

77
export default function ExplorePlanet () {
88
const supabase = useSupabaseClient();

‎pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
footerNavigation,
1515
modules,
1616
navigation,
17-
} from "../components/Info/LandingContent";
17+
} from "../components/_Core/Section/Info/LandingContent";
1818
import Navigation, {
1919
UserDropdownMenu,
2020
UserMenuItems,

‎pages/onboarding/select.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import React, { useState } from "react";
33
import Layout from "../../components/_Core/Section/Layout";
4-
import SelectYourBasePlanet from "../../components/Content/Planets/Base/SelectYourPlanet";
4+
import SelectYourBasePlanet from "../../components/Gameplay/SelectYourPlanet";
55

66
export default function Home() {
77
const session = useSession();

0 commit comments

Comments
 (0)