Skip to content

Commit

Permalink
️🚄🥧 ↝ [SGV2-7]: Looking at optimising the control panel for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Apr 18, 2024
1 parent 0681a6c commit 7499012
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 88 deletions.
10 changes: 0 additions & 10 deletions components/Content/Visuals/Bento.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,16 +326,6 @@ const mobileItems = [
className: "md:col-span-2",
icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
},

{
title: "",
description: (
null
),
header: <SkeletonFive />,
className: "md:col-span-1",
// icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
},
];


Expand Down
77 changes: 31 additions & 46 deletions components/Gameplay/mission-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,44 @@ 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 (
<>
<>
<CardHeader>
<CardTitle>To-Do List</CardTitle>
<CardDescription>Manage your daily tasks</CardDescription>
</CardHeader>
<CardContent className="space-y-4 overflow-y-auto max-h-[480px] pr-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p className="line-through text-gray-500 dark:text-gray-400">Finish the design mockups</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Attend the team meeting</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Buy groceries</p>
{missions.map((mission, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon
className={`w-5 h-5 text-gray-500 ${
mission.completed ? "line-through" : ""
} hover:text-gray-900 dark:hover:text-gray-50`}
/>
</Link>
<p
className={`${
mission.completed ? "line-through text-gray-500 dark:text-gray-400" : ""
}`}
>
{mission.name}
</p>
</div>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Call mom</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Clean the house</p>
</div>
</div>
</CardContent>
{/* <CardFooter className="flex justify-end">
<Button size="sm">Add Task</Button>
</CardFooter> */}
</>
)
))}
</CardContent>
</>
);
}

function LinkIcon(props) {
Expand Down
116 changes: 116 additions & 0 deletions components/Modals/rover-interface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,122 @@ export function RoverInterfaceDark() {
);
};

export function RoverInterfaceDarkMobile() {
return (
<div className="bg-black bg-opacity-70 text-white min-h-screen p-4 md:p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-6 border border-white p-4">
<div className="text-4xl font-bold">Planet Name</div>
<div>
<div className="font-semibold">ROVER #1 (Allow user to customise name)</div>
<div className="grid grid-cols-2 gap-4">
<div>
<div>MISSION DAY</div>
<div>SOL #3039</div>
<div>Time: 2:36 pm</div>
</div>
<div>
<div>SUNRISE</div>
<div>6:37 am</div>
<div>SUNSET</div>
<div>6:35 pm</div>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<div>PRESSURE</div>
<div className="flex items-center">
<GaugeIcon className="text-green-500" />
<span>827 Pa</span>
</div>
</div>
<div>
<div>OXYGEN</div>
<div className="flex items-center">
<FuelIcon className="text-green-500" />
<span>0.24%</span>
</div>
</div>
</div>
<div>
<div>TEMPERATURE</div>
<div className="flex items-center">
<ThermometerIcon className="text-red-500" />
<span>-29.16 °C</span>
</div>
</div>
<div>
<div>ATMOSPHERE</div>
<div>Moderate sunny</div>
</div>
<div>
<div>ROVER STATUS</div>
<div className="grid grid-cols-2 gap-4">
<div>
<div>CELL</div>
<div>65.25</div>
</div>
<div>
<div>GAS PRESS</div>
<div>12.48</div>
</div>
</div>
<div>
<div>MODE</div>
<div>DRV</div>
</div>
</div>
<div>
<div>SPEED</div>
<div>118 km/hour</div>
</div>
</div>
<div className="col-span-1 space-y-6 border border-white p-4">
<div className="text-xl font-semibold">CAMERA CONTROL PANEL</div>
<div>
<video
className="w-full h-auto"
height="300"
src="/assets/Surface.mp4"
style={{
aspectRatio: "350/300",
objectFit: "cover",
}}
width="350"
autoPlay
loop
muted
/>
</div>
<div className="flex justify-between items-center">
<div className="flex space-x-2">
<Button variant="ghost">Coordinates</Button>
<Button variant="ghost">Angle</Button>
<Button variant="ghost">Information</Button>
</div>
<div className="flex space-x-2">
<ZoomInIcon className="text-white" />
<ZoomOutIcon className="text-white" />
<CameraIcon className="text-white" />
</div>
</div>
<div>
<Textarea placeholder="Write a command" />
<div className="flex justify-between items-center">
<Button>SEND COMMAND</Button>
<div className="flex space-x-2">
<Button variant="ghost">DIAGNOSTICS</Button>
<Button variant="ghost">SELF-REPAIR</Button>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

function AntennaIcon(props) {
return (
<svg
Expand Down
2 changes: 1 addition & 1 deletion components/_Core/Section/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
<style jsx global>
{`
body {
background: url('https://cdn.cloud.scenario.com/assets-transform/KO7W80GhRPab0kOWPFsFIw?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vS083VzgwR2hSUGFiMGtPV1BGc0ZJdz9wPTEwMCoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3MTQ1MjE1OTl9fX1dfQ__&Key-Pair-Id=K36FIAB9LE2OLR&Signature=fUmRKK~sb9XaklxuXfXmzRd4YUzATcKtCcXSpu7glOyLJkhX1p9HIVts7hys4DJiDaj1YYK42r5S0mWVRCvUuT29hoDESp0NTHf6pYBAqXwXSt-bHk1nwsqlGObpB5H-EbSwhKAIDwyR1a4WgA9PpHky-h2lcH9pdu6Ec3twrpQKebDwHUgTwtlltUrRSaH1O6lRdm312oEvQmTWE7815HgKgknfZwGny5OiBnVhr7od~rOhwDbbdAhZnwD5GRjNgZUjeDQQQ5IIsRuqm2Lmoq2LjCkfQIQAi8skSrwq67PQsDnuxwbfmvbtiK0wFVyFrWIxIJOgYXB1SJonxNPcNA__') center/cover;
background: url('https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE0NTIxNTk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=ERw02sLK6d6yXD0YC6USsU8GckSYAn61zS8Wkn4v7zi9bQuF303LROIwETSCGLu8cL8ICi9sL6urbsKBCgy7R75pzGSYWGlz5sK9kIlrjEVBEk--1IOb6RckcuYGF8hDFzxziZubJ828j3CMAuYD3EV7PdNb0NmtTIlVBDVQUQyyY5t3IJ2hMJhkixjBIpTPFnnBzZbiNVK-BWaNlskb4d-~E9W8AOH8nN1hz7JGvJzKBun96cLGL-jq-fr1esT7ehdDuO0aYqad6mLXHrSHoPb1ZTXg4VjB5zRiAvQ2w6O8s1w8azsMBD4aTe0QmRepBopiHjS8-dYZp~olGkGd7Q__&format=jpeg') center/cover;
}
@media only screen and (max-width: 767px) {
Expand Down
38 changes: 7 additions & 31 deletions pages/explore/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
// import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
import React, { useState } from "react";
import { RoverMobileTest } from "../../components/Modals/rover-mobile-test";
import { RoverInterface, RoverInterfaceDark } from "../../components/Modals/rover-interface";
import { RoverInterface, RoverInterfaceDark, RoverInterfaceDarkMobile } from "../../components/Modals/rover-interface";
import Layout from "../../components/_Core/Section/Layout";
import Navigation from "../../components/_Core/Section/Navbar";
import FeedOverlay from "../../components/Overlays/1-Feed";
import { useMediaQuery } from "react-responsive";

export default function Explore() {
// const supabase = useSupabaseClient();
Expand All @@ -15,6 +16,9 @@ export default function Explore() {
setShowFeedOverlay(true);
};

const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });

return (
// <RoverMobileTest />
// <RoverInterface />
Expand All @@ -37,7 +41,8 @@ export default function Explore() {
</style>
<Navigation />
<div className="">
<RoverInterfaceDark />
{isDesktopOrLaptop && ( <RoverInterfaceDark /> )};
{isTabletOrMobile && (<RoverInterfaceDarkMobile /> )};
<div className="mt-20">
{showFeedOverlay && (
<>
Expand All @@ -47,35 +52,6 @@ export default function Explore() {
</>
)}
</div>
{!showFeedOverlay && (
<button
onClick={handleOpenFeedOverlay}
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
>
<a
href="#_"
className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
>
<span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
></path>
</svg>
</span>
<span className="pl-4 pr-5 py-2.5">Menu</span>
</a>
</button>
)}
</div>
</>
);
Expand Down
5 changes: 5 additions & 0 deletions pages/tests/planetRing.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default function PlanetRingTestPage() {
return (
<>p</>
)
}

0 comments on commit 7499012

Please sign in to comment.