mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-13 01:05:37 +02:00
⭐ feat(www): Add logic to the homepage and Steam integration (#258)
## Description <!-- Briefly describe the purpose and scope of your changes --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Upgraded API and authentication services with dynamic scaling, enhanced load balancing, and real-time interaction endpoints. - Introduced new commands to streamline local development and container builds. - Added new endpoints for retrieving Steam account information and managing connections. - Implemented a QR code authentication interface for Steam, enhancing user login experiences. - **Database Updates** - Rolled out comprehensive schema migrations that improve data integrity and indexing. - Introduced new tables for managing Steam user credentials and machine information. - **UI Enhancements** - Added refreshed animated assets and an improved QR code login flow for a more engaging experience. - Introduced new styled components for displaying friends and games. - **Maintenance** - Completed extensive refactoring and configuration updates to optimize performance and development workflows. - Updated logging configurations and improved error handling mechanisms. - Streamlined resource definitions in the configuration files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Wanjohi
GitHub
@@ -8,7 +8,7 @@ import { useNavigate } from "@solidjs/router";
|
||||
import { useOpenAuth } from "@openauthjs/solid";
|
||||
import { utility } from "@nestri/www/ui/utility";
|
||||
import { useAccount } from "../providers/account";
|
||||
import { Container, FullScreen } from "@nestri/www/ui/layout";
|
||||
import { Container, Screen as FullScreen } from "@nestri/www/ui/layout";
|
||||
import { FormField, Input, Select } from "@nestri/www/ui/form";
|
||||
import { createForm, getValue, setError, valiForm } from "@modular-forms/solid";
|
||||
|
||||
@@ -191,7 +191,6 @@ export function CreateTeamComponent() {
|
||||
</UrlTitle>
|
||||
<Input
|
||||
{...props}
|
||||
autofocus
|
||||
placeholder={
|
||||
getValue(form, "name")?.toString()
|
||||
.split(" ").join("-")
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Text } from "@nestri/www/ui/text";
|
||||
import { styled } from "@macaron-css/solid";
|
||||
import { theme } from "@nestri/www/ui/theme";
|
||||
import { Header } from "@nestri/www/pages/team/header";
|
||||
import { FullScreen, Container } from "@nestri/www/ui/layout";
|
||||
import { Screen as FullScreen, Container } from "@nestri/www/ui/layout";
|
||||
|
||||
const NotAllowedDesc = styled("div", {
|
||||
base: {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { animate, scroll } from "motion"
|
||||
import { A } from "@solidjs/router";
|
||||
import { Container } from "@nestri/www/ui";
|
||||
import Avatar from "@nestri/www/ui/avatar";
|
||||
@@ -5,12 +6,11 @@ import { styled } from "@macaron-css/solid";
|
||||
import { theme } from "@nestri/www/ui/theme";
|
||||
import { useAccount } from "@nestri/www/providers/account";
|
||||
import { TeamContext } from "@nestri/www/providers/context";
|
||||
import { Match, ParentProps, Show, Switch, useContext } from "solid-js";
|
||||
import { createEffect, createSignal, Match, onCleanup, ParentProps, Show, Switch, useContext } from "solid-js";
|
||||
|
||||
const PageWrapper = styled("div", {
|
||||
base: {
|
||||
minHeight: "100dvh",
|
||||
// paddingBottom: "4rem",
|
||||
backgroundColor: theme.color.background.d200
|
||||
}
|
||||
})
|
||||
@@ -139,7 +139,7 @@ const NavRoot = styled("div", {
|
||||
|
||||
const NavLink = styled(A, {
|
||||
base: {
|
||||
color: "#FFF",
|
||||
color: theme.color.d1000.gray,
|
||||
textDecoration: "none",
|
||||
height: 32,
|
||||
padding: "0 8px",
|
||||
@@ -160,14 +160,19 @@ const NavLink = styled(A, {
|
||||
|
||||
const NavWrapper = styled("div", {
|
||||
base: {
|
||||
// borderBottom: "1px solid white",
|
||||
zIndex: 10,
|
||||
zIndex: 100,
|
||||
position: "fixed",
|
||||
// backdropFilter: "saturate(60%) blur(3px)",
|
||||
height: theme.headerHeight.root,
|
||||
transition: "all 0.3s cubic-bezier(0.4,0,0.2,1)",
|
||||
width: "100%",
|
||||
backgroundColor: "transparent"
|
||||
},
|
||||
variants: {
|
||||
scrolled: {
|
||||
true: {
|
||||
backgroundColor: theme.color.background.d200,
|
||||
boxShadow: `0 2px 20px 1px ${theme.color.gray.d300}`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -195,16 +200,45 @@ const Nav = styled("nav", {
|
||||
}
|
||||
})
|
||||
|
||||
export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
const team = useContext(TeamContext)
|
||||
const account = useAccount()
|
||||
/**
|
||||
* Renders the application's header, featuring navigation, branding, and team details.
|
||||
*
|
||||
* This component displays a navigation bar that includes the logo, team avatar, team name, a badge
|
||||
* reflecting the team's plan type, and navigation links. It adjusts its styling based on the scroll
|
||||
* position by toggling visual effects on the navigation wrapper. A scroll event listener is added
|
||||
* on mount to update the header's appearance when the user scrolls and is removed on unmount.
|
||||
*
|
||||
* @param props.children - Optional child elements rendered below the header component.
|
||||
* @returns The header component element.
|
||||
*/
|
||||
export function Header(props: ParentProps) {
|
||||
// const team = useContext(TeamContext)
|
||||
const [hasScrolled, setHasScrolled] = createSignal(false)
|
||||
const [team,] = createSignal({
|
||||
id: "tea_01JPACSPYWTTJ66F32X3AWWFWE",
|
||||
slug: "wanjohiryan",
|
||||
name: "Wanjohi",
|
||||
planType: "BYOG"
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const handleScroll = () => { setHasScrolled(window.scrollY > 0); }
|
||||
|
||||
document.addEventListener("scroll", handleScroll);
|
||||
|
||||
onCleanup(() => {
|
||||
document.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// const account = useAccount()
|
||||
return (
|
||||
<PageWrapper>
|
||||
<NavWrapper style={{ color: props.whiteColor ? "#FFF" : theme.color.d1000.gray }} >
|
||||
{/* <Background /> */}
|
||||
<NavWrapper scrolled={hasScrolled()}>
|
||||
<Nav>
|
||||
<Container space="4" vertical="center">
|
||||
<Show when={team}
|
||||
{/* <Show when={team}
|
||||
fallback={
|
||||
<Link href="/">
|
||||
<NestriLogoBig
|
||||
@@ -228,70 +262,67 @@ export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
</LogoName>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<LogoRoot>
|
||||
<A href={`/${team!().slug}`} >
|
||||
<NestriLogo
|
||||
width={32}
|
||||
height={32}
|
||||
viewBox="0 0 12.8778 9.7377253"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
|
||||
style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</NestriLogo>
|
||||
</A>
|
||||
<LineSvg
|
||||
height="16"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width="16">
|
||||
> */}
|
||||
<LogoRoot>
|
||||
<A href={`/${team!().slug}`} >
|
||||
<NestriLogo
|
||||
width={32}
|
||||
height={32}
|
||||
viewBox="0 0 12.8778 9.7377253"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z" fill="currentColor"></path>
|
||||
</LineSvg>
|
||||
<TeamRoot>
|
||||
<Avatar size={21} name={team!().slug} />
|
||||
<TeamLabel style={{ color: props.whiteColor ? "#FFF" : theme.color.d1000.gray }}>{team!().name}</TeamLabel>
|
||||
<Switch>
|
||||
<Match when={team!().planType === "BYOG"}>
|
||||
<Badge style={{ "background-color": theme.color.purple.d700 }}>
|
||||
<span style={{ "line-height": 0 }} >BYOG</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
<Match when={team!().planType === "Hosted"}>
|
||||
<Badge style={{ "background-color": theme.color.blue.d700 }}>
|
||||
<span style={{ "line-height": 0 }}>Hosted</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
</Switch>
|
||||
<DropIcon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M72.61 83.06a8 8 0 0 1 1.73-8.72l48-48a8 8 0 0 1 11.32 0l48 48A8 8 0 0 1 176 88H80a8 8 0 0 1-7.39-4.94M176 168H80a8 8 0 0 0-5.66 13.66l48 48a8 8 0 0 0 11.32 0l48-48A8 8 0 0 0 176 168" />
|
||||
</DropIcon>
|
||||
</TeamRoot>
|
||||
</LogoRoot>
|
||||
</Show>
|
||||
d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
|
||||
style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</NestriLogo>
|
||||
</A>
|
||||
<LineSvg
|
||||
height="16"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z" fill="currentColor"></path>
|
||||
</LineSvg>
|
||||
<TeamRoot>
|
||||
<Avatar
|
||||
size={21}
|
||||
name={team!().slug}
|
||||
/>
|
||||
<TeamLabel style={{ color: theme.color.d1000.gray }}>{team!().name}</TeamLabel>
|
||||
<Switch>
|
||||
<Match when={team!().planType === "BYOG"}>
|
||||
<Badge style={{ "background-color": theme.color.purple.d700 }}>
|
||||
<span style={{ "line-height": 0 }} >BYOG</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
<Match when={team!().planType === "Hosted"}>
|
||||
<Badge style={{ "background-color": theme.color.blue.d700 }}>
|
||||
<span style={{ "line-height": 0 }}>Hosted</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
</Switch>
|
||||
<DropIcon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M72.61 83.06a8 8 0 0 1 1.73-8.72l48-48a8 8 0 0 1 11.32 0l48 48A8 8 0 0 1 176 88H80a8 8 0 0 1-7.39-4.94M176 168H80a8 8 0 0 0-5.66 13.66l48 48a8 8 0 0 0 11.32 0l48-48A8 8 0 0 0 176 168" />
|
||||
</DropIcon>
|
||||
</TeamRoot>
|
||||
</LogoRoot>
|
||||
{/* </Show> */}
|
||||
</Container>
|
||||
<RightRoot>
|
||||
<Show when={team}>
|
||||
<NavRoot>
|
||||
<NavLink href={`/${team!().slug}/machines`}>
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.5 17.5L22 22m-2-11a9 9 0 1 0-18 0a9 9 0 0 0 18 0" color="currentColor" />
|
||||
</svg> */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3.441 9.956a4.926 4.926 0 0 0 6.233 7.571l4.256 4.257a.773.773 0 0 0 1.169-1.007l-.075-.087l-4.217-4.218A4.927 4.927 0 0 0 3.44 9.956m13.213 6.545c-.225 1.287-.548 2.456-.952 3.454l.03.028l.124.14c.22.295.344.624.378.952a10.03 10.03 0 0 0 4.726-4.574zM12.25 16.5l2.284 2.287c.202-.6.381-1.268.53-1.992l.057-.294zm-2.936-5.45a3.38 3.38 0 1 1-4.78 4.779a3.38 3.38 0 0 1 4.78-4.78M15.45 10h-3.7a5.94 5.94 0 0 1 .892 5h2.71a26 26 0 0 0 .132-4.512zm1.507 0a28 28 0 0 1-.033 4.42l-.057.58h4.703a10.05 10.05 0 0 0 .258-5zm-2.095-7.593c.881 1.35 1.536 3.329 1.883 5.654l.062.44h4.59a10.03 10.03 0 0 0-6.109-5.958l-.304-.1zm-2.836-.405c-1.277 0-2.561 2.382-3.158 5.839c.465.16.912.38 1.331.658l5.088.001c-.54-3.809-1.905-6.498-3.261-6.498m-2.837.405A10.03 10.03 0 0 0 2.654 8.5h.995a5.92 5.92 0 0 1 3.743-.968c.322-1.858.846-3.47 1.527-4.68l.162-.275z" />
|
||||
</svg>
|
||||
{/* Machines */}
|
||||
<NavLink style={{ "margin-right": "-8px" }} href={`/${team!().slug}/machines`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314" /></svg>
|
||||
</NavLink>
|
||||
<NavLink href={`/${team!().slug}/machines`}>
|
||||
<svg style={{ "margin-bottom": "1px" }} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
|
||||
@@ -304,14 +335,15 @@ export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
</NavRoot>
|
||||
</Show>
|
||||
<div style={{ "margin-bottom": "2px" }} >
|
||||
<Switch>
|
||||
<AvatarImg src={"https://avatars.githubusercontent.com/u/71614375?v=4"} alt={`Wanjohi's avatar`} />
|
||||
{/* <Switch>
|
||||
<Match when={account.current.avatarUrl} >
|
||||
<AvatarImg src={account.current.avatarUrl} alt={`${account.current.name}'s avatar`} />
|
||||
<AvatarImg src={account.current.avatarUrl} alt={`${account.current.name}'s avatar`} />
|
||||
</Match>
|
||||
<Match when={!account.current.avatarUrl}>
|
||||
<Avatar size={32} name={`${account.current.name}#${account.current.discriminator}`} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</Switch> */}
|
||||
</div>
|
||||
</RightRoot>
|
||||
</Nav>
|
||||
|
||||
@@ -3,111 +3,14 @@ import { styled } from "@macaron-css/solid";
|
||||
import { Header } from "@nestri/www/pages/team/header";
|
||||
import { useSteam } from "@nestri/www/providers/steam";
|
||||
import { Modal } from "@nestri/www/ui/modal";
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
import { createEffect, createSignal, Match, onCleanup, Switch } from "solid-js";
|
||||
import { Text } from "@nestri/www/ui/text"
|
||||
import { QRCode } from "@nestri/www/ui/custom-qr";
|
||||
import { globalStyle, keyframes } from "@macaron-css/core";
|
||||
import { A } from "@solidjs/router";
|
||||
import Avatar from "@nestri/www/ui/avatar";
|
||||
import { Portal } from "@nestri/www/common/portal";
|
||||
import { QrCodeComponent } from "@nestri/www/components"
|
||||
|
||||
const EmptyState = styled("div", {
|
||||
base: {
|
||||
padding: "0 40px",
|
||||
display: "flex",
|
||||
gap: 10,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
margin: "auto"
|
||||
}
|
||||
})
|
||||
|
||||
const EmptyStateHeader = styled("h2", {
|
||||
base: {
|
||||
textAlign: "center",
|
||||
fontSize: theme.font.size["2xl"],
|
||||
fontFamily: theme.font.family.heading,
|
||||
fontWeight: theme.font.weight.semibold,
|
||||
letterSpacing: -0.5,
|
||||
}
|
||||
})
|
||||
|
||||
const EmptyStateSubHeader = styled("p", {
|
||||
base: {
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["lg"],
|
||||
textAlign: "center",
|
||||
maxWidth: 380,
|
||||
letterSpacing: -0.4,
|
||||
lineHeight: 1.1,
|
||||
}
|
||||
})
|
||||
|
||||
const QRWrapper = styled("div", {
|
||||
base: {
|
||||
backgroundColor: theme.color.background.d100,
|
||||
position: "relative",
|
||||
marginBottom: 20,
|
||||
textWrap: "balance",
|
||||
border: `1px solid ${theme.color.gray.d400}`,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
borderRadius: 22,
|
||||
padding: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamMobileLink = styled(A, {
|
||||
base: {
|
||||
textUnderlineOffset: 2,
|
||||
textDecoration: "none",
|
||||
color: theme.color.blue.d900,
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
width: "max-content",
|
||||
textTransform: "capitalize",
|
||||
":hover": {
|
||||
textDecoration: "underline"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const LogoContainer = styled("div", {
|
||||
base: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}
|
||||
})
|
||||
|
||||
const LogoIcon = styled("svg", {
|
||||
base: {
|
||||
zIndex: 6,
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform: "translate(-50%,-50%)",
|
||||
overflow: "hidden",
|
||||
// width: "21%",
|
||||
// height: "21%",
|
||||
borderRadius: 17,
|
||||
// ":before": {
|
||||
// pointerEvents: "none",
|
||||
// zIndex: 2,
|
||||
// content: '',
|
||||
// position: "absolute",
|
||||
// inset: 0,
|
||||
// borderRadius: "inherit",
|
||||
// boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.02)",
|
||||
// }
|
||||
}
|
||||
})
|
||||
|
||||
const LastPlayedWrapper = styled("div", {
|
||||
base: {
|
||||
@@ -230,7 +133,8 @@ const GamesContainer = styled("div", {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
zIndex: 3,
|
||||
zIndex: 10,
|
||||
isolation: "isolate",
|
||||
backgroundColor: theme.color.background.d200,
|
||||
}
|
||||
})
|
||||
@@ -293,13 +197,13 @@ const SteamLibrary = styled("div", {
|
||||
display: "grid",
|
||||
// backgroundColor: "red",
|
||||
maxWidth: "70vw",
|
||||
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
|
||||
columnGap: 12,
|
||||
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
||||
columnGap: 20,
|
||||
rowGap: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamLibraryTitle = styled("h3", {
|
||||
const Title = styled("h3", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontFamily: theme.font.family.heading,
|
||||
@@ -311,104 +215,311 @@ const SteamLibraryTitle = styled("h3", {
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameTitle = styled("h3", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontFamily: theme.font.family.heading,
|
||||
fontWeight: theme.font.weight.medium,
|
||||
fontSize: theme.font.size["xl"],
|
||||
letterSpacing: -0.7,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameSubTitle = styled("span", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["base"],
|
||||
letterSpacing: -0.4,
|
||||
}
|
||||
})
|
||||
|
||||
const SubTitle = styled("span", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["base"],
|
||||
letterSpacing: -0.4,
|
||||
gridColumn: "1/-1",
|
||||
marginTop: -20,
|
||||
marginBottom: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsList = styled("div", {
|
||||
base: {
|
||||
borderTop: `1px solid ${theme.color.gray.d400}`,
|
||||
padding: "20px 0",
|
||||
margin: "20px auto",
|
||||
width: "100%",
|
||||
display: "grid",
|
||||
maxWidth: "70vw",
|
||||
gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
|
||||
columnGap: 12,
|
||||
rowGap: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendContainer = styled("div", {
|
||||
base: {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
minHeight: "calc(100% + 20px)",
|
||||
aspectRatio: "300/380",
|
||||
borderRadius: 15,
|
||||
position: "relative",
|
||||
padding: "35px 17px",
|
||||
border: `1px solid ${theme.color.gray.d500}`,
|
||||
backgroundColor: theme.color.background.d100,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsSubText = styled("span", {
|
||||
base: {
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size.sm,
|
||||
marginTop: 10,
|
||||
}
|
||||
})
|
||||
const FriendsText = styled("h3", {
|
||||
base: {
|
||||
fontSize: theme.font.size["lg"],
|
||||
fontFamily: theme.font.family.heading,
|
||||
marginTop: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsInviteButton = styled("button", {
|
||||
base: {
|
||||
minWidth: 48,
|
||||
borderRadius: 9999,
|
||||
textAlign: "center",
|
||||
padding: "0px 24px",
|
||||
fontSize: theme.font.size["base"],
|
||||
lineHeight: "1.75",
|
||||
marginTop: 20,
|
||||
cursor: "pointer",
|
||||
fontWeight: theme.font.weight.bold,
|
||||
fontFamily: theme.font.family.heading,
|
||||
border: `1px solid ${theme.color.gray.d100}`,
|
||||
backgroundColor: theme.color.blue.d700,
|
||||
transition: "all 0.2s cubic-bezier(0.4,0,0.2,1)",
|
||||
":hover": {
|
||||
transform: "scale(1.05)"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameContainer = styled("div", {
|
||||
base: {
|
||||
padding: "20px 0",
|
||||
width: "100%",
|
||||
minHeight: 72,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
selectors: {
|
||||
"&:not(:last-of-type)": {
|
||||
borderBottom: `1px solid ${theme.color.gray.d400}`
|
||||
},
|
||||
"&:not(:first-of-type)": {
|
||||
borderTop: `1px solid ${theme.color.gray.d400}`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameImg = styled("img", {
|
||||
base: {
|
||||
border: "none",
|
||||
outline: "none",
|
||||
aspectRatio: "1/1",
|
||||
height: 80,
|
||||
borderRadius: 8
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameText = styled("div", {
|
||||
base: {
|
||||
paddingRight: "3em",
|
||||
marginLeft: 30,
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
flexDirection: "column",
|
||||
alignSelf: "center",
|
||||
}
|
||||
})
|
||||
const SteamGameBtn = styled("button", {
|
||||
base: {
|
||||
minWidth: 48,
|
||||
borderRadius: 9999,
|
||||
textAlign: "center",
|
||||
padding: "0px 24px",
|
||||
fontSize: theme.font.size["base"],
|
||||
lineHeight: "1.75",
|
||||
// marginTop: 20,
|
||||
// marginRight: 1,
|
||||
margin: "0 1px 0 auto",
|
||||
cursor: "pointer",
|
||||
alignSelf: "center",
|
||||
fontWeight: theme.font.weight.bold,
|
||||
fontFamily: theme.font.family.heading,
|
||||
color: theme.color.blue.d900,
|
||||
border: `1px solid ${theme.color.gray.d100}`,
|
||||
backgroundColor: theme.color.blue.d300,
|
||||
transition: "all 0.2s cubic-bezier(0.4,0,0.2,1)",
|
||||
":hover": {
|
||||
transform: "scale(1.05)"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const PortalContainer = styled("div", {
|
||||
base: {
|
||||
zIndex: 4,
|
||||
isolation: "isolate",
|
||||
position: "fixed",
|
||||
bottom: "20vh",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Renders the home page layout for the gaming platform.
|
||||
*
|
||||
* This component wraps its content within a header and a full-screen container,
|
||||
* currently displaying a QR code component. Commented sections indicate planned
|
||||
* enhancements such as game previews, team mate suggestions, and a Steam library.
|
||||
*/
|
||||
export function HomeRoute() {
|
||||
|
||||
// const steam = useSteam();
|
||||
// const [loginUrl, setLoginUrl] = createSignal<string | null>(null);
|
||||
// const [loginStatus, setLoginStatus] = createSignal<string | null>("Not connected");
|
||||
// const [userData, setUserData] = createSignal<{ username?: string, steamId?: string } | null>(null);
|
||||
|
||||
// createEffect(async () => {
|
||||
// // Connect to the Steam login stream
|
||||
// const steamConnection = await steam.client.login.connect();
|
||||
|
||||
// // Set up event listeners for different event types
|
||||
// const urlUnsubscribe = steamConnection.addEventListener('url', (url) => {
|
||||
// setLoginUrl(url);
|
||||
// setLoginStatus('Scan QR code with Steam mobile app');
|
||||
// });
|
||||
|
||||
// const loginAttemptUnsubscribe = steamConnection.addEventListener('login-attempt', (data) => {
|
||||
// setLoginStatus(`Logging in as ${data.username}...`);
|
||||
// });
|
||||
|
||||
// const loginSuccessUnsubscribe = steamConnection.addEventListener('login-success', (data) => {
|
||||
// setUserData(data);
|
||||
// setLoginStatus(`Successfully logged in as ${data.username}`);
|
||||
// });
|
||||
|
||||
// const loginUnsuccessfulUnsubscribe = steamConnection.addEventListener('login-unsuccessful', (data) => {
|
||||
// setLoginStatus(`Login failed: ${data.error}`);
|
||||
// });
|
||||
|
||||
// const loggedOffUnsubscribe = steamConnection.addEventListener('logged-off', (data) => {
|
||||
// setLoginStatus(`Logged out of Steam: ${data.reason}`);
|
||||
// setUserData(null);
|
||||
// });
|
||||
|
||||
// onCleanup(() => {
|
||||
// urlUnsubscribe();
|
||||
// loginAttemptUnsubscribe();
|
||||
// loginSuccessUnsubscribe();
|
||||
// loginUnsuccessfulUnsubscribe();
|
||||
// loggedOffUnsubscribe();
|
||||
// steamConnection.disconnect();
|
||||
// });
|
||||
// })
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header whiteColor>
|
||||
<Header>
|
||||
<FullScreen >
|
||||
<EmptyState
|
||||
style={{
|
||||
"--nestri-qr-dot-color": theme.color.d1000.gray,
|
||||
"--nestri-body-background": theme.color.gray.d100
|
||||
}}
|
||||
>
|
||||
<QRWrapper>
|
||||
<LogoContainer>
|
||||
<LogoIcon
|
||||
xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
|
||||
<g fill="currentColor">
|
||||
<path d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006l4.304 1.769A2.2 2.2 0 0 1 5.62 8.88l1.96-2.844l-.001-.04a3.046 3.046 0 0 1 3.042-3.043a3.046 3.046 0 0 1 3.042 3.043a3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11a2.22 2.22 0 0 1-1.312-1.568L.33 10.333Z" /><path d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165a1.7 1.7 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029a2.03 2.03 0 0 0 2.027-2.029a2.03 2.03 0 0 0-2.027-2.027a2.03 2.03 0 0 0-2.027 2.027m2.03-1.527a1.524 1.524 0 1 1-.002 3.048a1.524 1.524 0 0 1 .002-3.048" />
|
||||
</g>
|
||||
</LogoIcon>
|
||||
</LogoContainer>
|
||||
<QRCode
|
||||
uri={"https://github.com/family/connectkit/blob/9a3c16c781d8a60853eff0c4988e22926a3f91ce"}
|
||||
size={180}
|
||||
ecl="M"
|
||||
clearArea={true}
|
||||
/>
|
||||
</QRWrapper>
|
||||
<EmptyStateHeader>Sign in to your Steam account</EmptyStateHeader>
|
||||
<EmptyStateSubHeader>Use your Steam Mobile App to sign in via QR code. <SteamMobileLink href="https://store.steampowered.com/mobile" target="_blank">Learn More<svg data-testid="geist-icon" height="20" stroke-linejoin="round" viewBox="0 0 16 16" width="20" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z" fill="currentColor"></path></svg></SteamMobileLink></EmptyStateSubHeader>
|
||||
</EmptyState>
|
||||
<QrCodeComponent />
|
||||
{/* <LastPlayedWrapper>
|
||||
<LastPlayedFader />
|
||||
<LogoBackgroundImage />
|
||||
<BackgroundImage />
|
||||
<Material />
|
||||
<JoeColor />
|
||||
</LastPlayedWrapper> */}
|
||||
{/* <GamesContainer>
|
||||
<PortalContainer>
|
||||
<Portal />
|
||||
</PortalContainer>
|
||||
</LastPlayedWrapper>
|
||||
<GamesContainer>
|
||||
<GamesWrapper>
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/05/15/acshadows-1715789601294.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2023/05/19/cataclismo-button-1684532710313.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/03/27/marvelrivals-1711557092104.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/05/15/acshadows-1715789601294.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2023/05/19/cataclismo-button-1684532710313.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/03/27/marvelrivals-1711557092104.jpg" />
|
||||
</GamesWrapper>
|
||||
<FriendsList>
|
||||
<Title>Team Mate Suggestions</Title>
|
||||
<SubTitle>Invite people to join your team and play together</SubTitle>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Wanjohi Ryan" />
|
||||
<FriendsText>Wanjohi Ryan</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Tracy Jones" />
|
||||
<FriendsText>Tracy Jones</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="The65th" />
|
||||
<FriendsText>The65th</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Menstral" />
|
||||
<FriendsText>Menstral</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="AstroHot" />
|
||||
<FriendsText>AstroHot</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
</FriendsList>
|
||||
<SteamLibrary>
|
||||
<SteamLibraryTitle>Games we think you will like</SteamLibraryTitle>
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2625420/hero_capsule.jpg?t=1742853642" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2486740/hero_capsule.jpg?t=1742596243" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/870780/hero_capsule.jpg?t=1737800535" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2050650/hero_capsule.jpg?t=1737800535" />
|
||||
<Title>Your Steam library</Title>
|
||||
<SubTitle>These titles from your Steam Library are fully functional on Nestri</SubTitle>
|
||||
<div>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/05/27/alanwake2-1685200534966.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Alan Wake II</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure, Horror</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Slime Rancher 2</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure, Casual, Indie</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets1.ignimgs.com/2019/07/17/doom-eternal---button-fin-1563400339680.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Doom Eternal</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
</div>
|
||||
<div>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2022/10/12/dead-space-2023-button-3-1665603079064.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Dead Space</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Update</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/01/25/hifirush-1674680068070.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Hi-Fi Rush</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/08/24/baldursg3-1692894717196.jpeg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Baldur's Gate 3</SteamGameTitle>
|
||||
<SteamGameSubTitle>Adventure, RPG, Strategy</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
</div>
|
||||
</SteamLibrary>
|
||||
</GamesContainer> */}
|
||||
</GamesContainer>*/}
|
||||
</FullScreen>
|
||||
</Header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2625420/hero_capsule.jpg?t=1742853642" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2486740/hero_capsule.jpg?t=1742596243" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/870780/hero_capsule.jpg?t=1737800535" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2050650/hero_capsule.jpg?t=1737800535" />
|
||||
*/
|
||||
|
||||
|
||||
Reference in New Issue
Block a user