From c5b30434363746dce7c7c4ef466aaac9cf08452e Mon Sep 17 00:00:00 2001 From: Wanjohi Date: Wed, 18 Jun 2025 13:40:55 +0300 Subject: [PATCH] dont remember --- infra/cdn.ts | 6 +- packages/www/src/App.tsx | 34 +- packages/www/src/assets/service-worker.js | 4 +- packages/www/src/pages/steam/home-old.tsx | 524 ---------------------- packages/www/src/pages/steam/home.tsx | 13 + packages/www/src/pages/steam/index.tsx | 82 ++-- packages/www/src/pages/steam/library.tsx | 2 +- 7 files changed, 76 insertions(+), 589 deletions(-) delete mode 100644 packages/www/src/pages/steam/home-old.tsx create mode 100644 packages/www/src/pages/steam/home.tsx diff --git a/infra/cdn.ts b/infra/cdn.ts index 8d510d8c..7b90516f 100644 --- a/infra/cdn.ts +++ b/infra/cdn.ts @@ -15,8 +15,4 @@ export const cdn = new sst.aws.Router("CDNRouter", { name: "cdn." + domain, dns: sst.cloudflare.dns() } -}); - -export const outputs = { - cdn: cdn.url -} \ No newline at end of file +}); \ No newline at end of file diff --git a/packages/www/src/App.tsx b/packages/www/src/App.tsx index 3da3d4e7..82802a4a 100644 --- a/packages/www/src/App.tsx +++ b/packages/www/src/App.tsx @@ -82,7 +82,7 @@ export const App: Component = () => { : "light", ); - const darkMode = window.matchMedia("(prefers-color-scheme: dark)"); + const darkMode = window.matchMedia("(prefers-color-scheme: dark)"); const setColorScheme = (e: MediaQueryListEvent) => { setTheme(e.matches ? "dark" : "light"); }; @@ -94,26 +94,26 @@ export const App: Component = () => { const storage = useStorage(); return ( - + // ( - - Confirming your identity… - - }> - - {/* props.children */} - {props.children} - - + // + // Confirming your identity… + // + // }> + // + props.children + // {props.children} + // + // )} > {SteamRoute} @@ -145,6 +145,6 @@ export const App: Component = () => { - + // ) } \ No newline at end of file diff --git a/packages/www/src/assets/service-worker.js b/packages/www/src/assets/service-worker.js index 275e8142..6bd70b1b 100644 --- a/packages/www/src/assets/service-worker.js +++ b/packages/www/src/assets/service-worker.js @@ -17,8 +17,8 @@ self.addEventListener('fetch', (event) => { // Only intercept our image requests const url = new URL(req.url); - if (import.meta.env.VITE_CDN_URL !== url.origin) return; - + if (import.meta.env.VITE_CDN_URL !== url.origin || url.pathname.includes("/public")) return; + event.respondWith(handleImageRequest(req)); }); diff --git a/packages/www/src/pages/steam/home-old.tsx b/packages/www/src/pages/steam/home-old.tsx deleted file mode 100644 index f92d5ce3..00000000 --- a/packages/www/src/pages/steam/home-old.tsx +++ /dev/null @@ -1,524 +0,0 @@ -import { FullScreen, theme } from "@nestri/www/ui"; -import { styled } from "@macaron-css/solid"; -import { Header } from "@nestri/www/pages/steam/header"; -import { Modal } from "@nestri/www/ui/modal"; -import { createEffect, createSignal, Match, onCleanup, Switch } from "solid-js"; -import { Text } from "@nestri/www/ui/text" -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 LastPlayedWrapper = styled("div", { - base: { - position: "relative", - width: "100%", - justifyContent: "center", - minHeight: 700, - height: "50vw", - maxHeight: 800, - WebkitBoxPack: "center", - display: "flex", - flexDirection: "column", - ":after": { - content: "", - pointerEvents: "none", - userSelect: "none", - background: `linear-gradient(to bottom,transparent,${theme.color.background.d200})`, - width: "100%", - left: 0, - position: "absolute", - bottom: -1, - zIndex: 3, - height: 320, - backdropFilter: "blur(2px)", - WebkitBackdropFilter: "blur(1px)", - WebkitMaskImage: `linear-gradient(to top,${theme.color.background.d200} 25%,transparent)`, - maskImage: `linear-gradient(to top,${theme.color.background.d200} 25%,transparent)` - } - } -}) - -const LastPlayedFader = styled("div", { - base: { - position: "absolute", - width: "100%", - height: "3rem", - backgroundColor: "rgba(0,0,0,.08)", - mixBlendMode: "multiply", - backdropFilter: "saturate(160%) blur(60px)", - WebkitBackdropFilter: "saturate(160%) blur(60px)", - maskImage: "linear-gradient(to top,rgba(0,0,0,.15) 0%,rgba(0,0,0,.65) 57.14%,rgba(0,0,0,.9) 67.86%,#000 79.08%)", - // background: "linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(10, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.035) 82.85%, rgba(0, 0, 0, 0.02) 88%, rgba(0, 0, 0, 0) 100%)", - opacity: 0.6, - // backdropFilter: "blur(16px)", - pointerEvents: "none", - zIndex: 1, - top: 0, - left: 0, - } -}) - -const BackgroundImage = styled("div", { - base: { - position: "fixed", - inset: 0, - backgroundColor: theme.color.background.d200, - backgroundSize: "cover", - zIndex: 0, - transitionDuration: "0.2s", - transitionTimingFunction: "cubic-bezier(0.4,0,0.2,1)", - transitionProperty: "opacity", - backgroundImage: "url(https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/1203190/ss_97ea9b0b5a6adf3436b31d389cd18d3a647ee4bf.jpg)" - // backgroundImage: "url(https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/3373660/c4993923f605b608939536b5f2521913850b028a/ss_c4993923f605b608939536b5f2521913850b028a.jpg)" - } -}) - -const LogoBackgroundImage = styled("div", { - base: { - position: "fixed", - top: "2rem", - height: 240, - // width: 320, - aspectRatio: "16 / 9", - left: "50%", - transform: "translate(-50%,0%)", - backgroundSize: "cover", - zIndex: 1, - transitionDuration: "0.2s", - transitionTimingFunction: "cubic-bezier(0.4,0,0.2,1)", - transitionProperty: "opacity", - backgroundImage: "url(https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/1203190/logo_2x.png)" - } -}) - -const Material = styled("div", { - base: { - backdropFilter: "saturate(160%) blur(60px)", - WebkitBackdropFilter: "saturate(160%) blur(60px)", - backgroundSize: "cover", - backgroundRepeat: "no-repeat", - position: "absolute", - borderRadius: 6, - left: 0, - top: 0, - height: "100%", - width: "100%", - maskImage: "linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40.82%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.65) 57.14%,rgba(0,0,0,.9) 67.86%,#000 79.08%)", - WebkitMaskImage: "linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40.82%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.65) 57.14%,rgba(0,0,0,.9) 67.86%,#000 79.08%)" - } -}) - -const JoeColor = styled("div", { - base: { - backgroundColor: "rgba(0,0,0,.08)", - mixBlendMode: "multiply", - position: "absolute", - borderRadius: 6, - left: 0, - top: 0, - height: "100%", - width: "100%", - maskImage: "linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40.82%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.65) 57.14%,rgba(0,0,0,.9) 67.86%,#000 79.08%)", - WebkitMaskImage: "linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40.82%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.65) 57.14%,rgba(0,0,0,.9) 67.86%,#000 79.08%)" - } -}) - -const GamesContainer = styled("div", { - base: { - width: "100%", - display: "flex", - alignItems: "center", - flexDirection: "column", - zIndex: 10, - isolation: "isolate", - backgroundColor: theme.color.background.d200, - } -}) - -const GamesWrapper = styled("div", { - base: { - maxWidth: "70vw", - width: "100%", - gridTemplateColumns: "repeat(4, minmax(0, 1fr))", - margin: "0 auto", - display: "grid", - marginTop: -80, - columnGap: 12, - rowGap: 10 - } -}) - -const GameImage = styled("img", { - base: { - width: "100%", - height: "100%", - aspectRatio: "460/215", - borderRadius: 10, - } -}) - -const GameSquareImage = styled("img", { - base: { - width: "100%", - height: "100%", - aspectRatio: "1/1", - borderRadius: 10, - transitionDuration: "0.2s", - transitionTimingFunction: "cubic-bezier(0.4,0,0.2,1)", - transitionProperty: "all", - cursor: "pointer", - border: `2px solid transparent`, - ":hover": { - transform: "scale(1.05)", - outline: `2px solid ${theme.color.brand}` - } - } -}) - -const GameImageCapsule = styled("img", { - base: { - width: "100%", - height: "100%", - aspectRatio: "374/448", - borderRadius: 10, - } -}) - -const SteamLibrary = styled("div", { - base: { - borderTop: `1px solid ${theme.color.gray.d400}`, - padding: "20px 0", - margin: "20px auto", - width: "100%", - display: "grid", - // backgroundColor: "red", - maxWidth: "70vw", - gridTemplateColumns: "repeat(2, minmax(0, 1fr))", - columnGap: 20, - rowGap: 10, - } -}) - -const Title = styled("h3", { - base: { - textAlign: "left", - fontFamily: theme.font.family.heading, - fontWeight: theme.font.weight.medium, - fontSize: theme.font.size["2xl"], - letterSpacing: -0.7, - gridColumn: "1/-1", - marginBottom: 20, - } -}) - -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() { - - return ( - <> -
- - {/* - - - - - - - - - - */} - - - - - - - - - Team Mate Suggestions - Invite people to join your team and play together - - - Wanjohi Ryan - From your Steam Friends - Invite - - - - Tracy Jones - From your Steam Friends - Invite - - - - The65th - From your Steam Friends - Invite - - - - Menstral - From your Steam Friends - Invite - - - - AstroHot - From your Steam Friends - Invite - - - - Your Steam library - These titles from your Steam Library are fully functional on Nestri -
- - - - Alan Wake II - Action, Adventure, Horror - - Install - - - - - Slime Rancher 2 - Action, Adventure, Casual, Indie - - Install - - - - - Doom Eternal - Action - - Install - -
-
- - - - Dead Space - Action, Adventure - - Update - - - - - Hi-Fi Rush - Action - - Install - - - - - Baldur's Gate 3 - Adventure, RPG, Strategy - - Install - -
- - - -
- - ) -} - -/* - - - - -*/ - diff --git a/packages/www/src/pages/steam/home.tsx b/packages/www/src/pages/steam/home.tsx new file mode 100644 index 00000000..73473602 --- /dev/null +++ b/packages/www/src/pages/steam/home.tsx @@ -0,0 +1,13 @@ +import { FullScreen } from "@nestri/www/ui" +import { Header } from "@nestri/www/pages/steam/header"; + + +export const HomeRoute = () => { + return ( +
+ + HOEM + +
+ ) +} \ No newline at end of file diff --git a/packages/www/src/pages/steam/index.tsx b/packages/www/src/pages/steam/index.tsx index 9626d911..559af6b3 100644 --- a/packages/www/src/pages/steam/index.tsx +++ b/packages/www/src/pages/steam/index.tsx @@ -6,55 +6,57 @@ import { SteamContext } from "@nestri/www/providers/context"; import { createEffect, createMemo, Match, Switch } from "solid-js"; import { NotAllowed, NotFound } from "@nestri/www/pages/not-found"; import { useAccount, useStorage } from "@nestri/www/providers/account"; +import { HomeRoute } from "./home"; export const SteamRoute = ( { - const params = useParams(); - const account = useAccount(); - const storage = useStorage(); - const openauth = useOpenAuth(); + // component={(props) => { + // const params = useParams(); + // const account = useAccount(); + // const storage = useStorage(); + // const openauth = useOpenAuth(); - const steam = createMemo(() => - account.current.profiles.find( - (item) => item.id === params.steamID, - ), - ); + // const steam = createMemo(() => + // account.current.profiles.find( + // (item) => item.id === params.steamID, + // ), + // ); - createEffect(() => { - const t = steam(); - if (!t) return; - storage.set("steam", t.id); - }); + // createEffect(() => { + // const t = steam(); + // if (!t) return; + // storage.set("steam", t.id); + // }); - createEffect(() => { - const steamID = params.steamID; - for (const item of Object.values(account.all)) { - for (const profile of item.profiles) { - if (profile.id === steamID && item.id !== openauth.subject!.id) { - openauth.switch(item.id); - } - } - } - }) + // createEffect(() => { + // const steamID = params.steamID; + // for (const item of Object.values(account.all)) { + // for (const profile of item.profiles) { + // if (profile.id === steamID && item.id !== openauth.subject!.id) { + // openauth.switch(item.id); + // } + // } + // } + // }) - return ( - - - - - - steam()!}> - - {props.children} - - - - - ) - }} + // return ( + // + // + // + // + // + // steam()!}> + // + // {props.children} + // + // + // + // + // ) + // }} > + } /> ) \ No newline at end of file diff --git a/packages/www/src/pages/steam/library.tsx b/packages/www/src/pages/steam/library.tsx index 589abe51..5d6025d5 100644 --- a/packages/www/src/pages/steam/library.tsx +++ b/packages/www/src/pages/steam/library.tsx @@ -126,7 +126,7 @@ const Logo = styled("svg", { opacity: "70%", } }) -//MaRt@6563 + export function LibraryRoute() { return (