diff --git a/apps/www/package.json b/apps/www/package.json index b34c47b1..6d5c76e4 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -39,6 +39,7 @@ "@nestri/libmoq": "*", "@nestri/ui": "*", "@openauthjs/openauth": "^0.2.6", + "@qwik-ui/headless": "^0.6.4", "@types/eslint": "8.56.10", "@types/howler": "^2.2.12", "@types/node": "^22.5.1", diff --git a/apps/www/src/routes/home/index.tsx b/apps/www/src/routes/home/index.tsx index f9f7b8c1..431c243c 100644 --- a/apps/www/src/routes/home/index.tsx +++ b/apps/www/src/routes/home/index.tsx @@ -1,112 +1,198 @@ import { component$ } from "@builder.io/qwik"; -import { HomeNavBar } from "@nestri/ui"; +import { HomeNavBar, SimpleFooter } from "@nestri/ui"; +import Avatar from "../../../../../packages/ui/src/avatar"; + +const games = [ + { + id: 2507950, + name: "Delta Force", + image: "https://assets-prd.ignimgs.com/2024/08/28/delta-force-button-replacement-1724855313566.jpg" + }, + { + id: 870780, + name: "Control Ultimate Edition", + image: "https://assets-prd.ignimgs.com/2023/04/08/sq-nswitchds-controlultimateeditioncloudversion-image500w-1680973421643.jpg" + }, + { + id: 1172470, + name: "Apex Legends", + image: "https://assets-prd.ignimgs.com/2023/02/16/apexrevelry-1676588335122.jpg" + }, + { + id: 914800, + name: "Coffee Talk", + image: "https://assets-prd.ignimgs.com/2022/11/09/coffee-talk-episode-1-button-fin-1668033710468.jpg" + }, { + id: 1085220, + name: "Figment 2: Creed Valley", + image: "https://assets-prd.ignimgs.com/2021/12/15/figment-2-button-1639602944843.jpg" + }, { + id: 1568400, + name: "Sheepy: A Short Adventure", + image: "https://assets-prd.ignimgs.com/2024/04/08/sheepy-1712557253260.jpg" + }, { + id: 271590, + name: "Grand Theft Auto V", + image: "https://assets-prd.ignimgs.com/2021/12/17/gta-5-button-2021-1639777058682.jpg" + }, { + id: 1086940, + name: "Baldur's Gate 3", + image: "https://assets-prd.ignimgs.com/2023/08/24/baldursg3-1692894717196.jpeg" + }, { + id: 1091500, + name: "Cyberpunk 2077", + image: "https://assets-prd.ignimgs.com/2020/07/16/cyberpunk-2077-button-fin-1594877291453.jpg" + }, { + id: 221100, + name: "DayZ", + image: "https://assets-prd.ignimgs.com/2021/12/20/dayz-1640044421966.jpg" + }, + +] export default component$(() => { return ( - <> +
- {/*
*/} - {/*
- -
*/} - -
-
- - -
-
-
- {/* */} -

Red Dead Redemption 2

+
+
+
+ + + +
-
- {/*
- -
- -
- -
- -
*/} - {/*
-
-

{getGreeting()}, Wanjohi

-

What will you play today?

+
+
+
+
+ + + Find people to play with + + +
+
    + {games.slice(5, 8).sort().map((game, key) => ( + + ))} +
    +
+
-
*/} - {/*
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
*/} - +
+
+
+ + + Your Games + + +
+
    + {games.map((game, key) => ( + + ))} +
+
+
+ +
) }) \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 25e22184..03b35cce 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/ui/package.json b/packages/ui/package.json index c8550fb4..bf7a9848 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -24,18 +24,20 @@ "@builder.io/qwik": "^1.8.0", "@builder.io/qwik-city": "^1.8.0", "@builder.io/qwik-react": "0.5.0", + "@fluejs/noscroll": "^1.0.0", "@fontsource/bricolage-grotesque": "^5.0.7", "@fontsource/geist-mono": "^5.1.0", "@fontsource/geist-sans": "^5.1.0", "@modular-forms/qwik": "0.26.1", "@nestri/core": "*", + "@qwik-ui/headless": "^0.6.4", "@types/eslint": "^8.56.5", - "@typescript-eslint/eslint-plugin": "latest", - "@typescript-eslint/parser": "latest", "@types/node": "^20.11.24", "@types/nprogress": "^0.2.3", "@types/react": "^18.2.28", "@types/react-dom": "^18.2.13", + "@typescript-eslint/eslint-plugin": "latest", + "@typescript-eslint/parser": "latest", "autoprefixer": "^10.4.20", "body-scroll-lock-upgrade": "^1.1.0", "clsx": "^2.1.1", diff --git a/packages/ui/src/avatar.tsx b/packages/ui/src/avatar.tsx new file mode 100644 index 00000000..055dcc9d --- /dev/null +++ b/packages/ui/src/avatar.tsx @@ -0,0 +1,98 @@ +import { component$ } from "@builder.io/qwik"; + +const DEFAULT_COLORS = ['#6A5ACD', '#E63525','#20B2AA', '#E87D58']; + +const getModulo = (value: number, divisor: number, useEvenCheck?: number) => { + const remainder = value % divisor; + if (useEvenCheck && Math.floor(value / Math.pow(10, useEvenCheck) % 10) % 2 === 0) { + return -remainder; + } + return remainder; +}; + +const generateColors = (name: string, colors = DEFAULT_COLORS) => { + const hashCode = name.split('').reduce((acc, char) => { + acc = ((acc << 5) - acc) + char.charCodeAt(0); + return acc & acc; + }, 0); + + const hash = Math.abs(hashCode); + const numColors = colors.length; + + return Array.from({ length: 3 }, (_, index) => ({ + color: colors[(hash + index) % numColors], + translateX: getModulo(hash * (index + 1), 4, 1), + translateY: getModulo(hash * (index + 1), 4, 2), + scale: 1.2 + getModulo(hash * (index + 1), 2) / 10, + rotate: getModulo(hash * (index + 1), 360, 1) + })); +}; +type Props = { + name: string; + size?: number; + class?:string; + colors?: string[] +} + +export default component$(({ class:className, name, size = 80, colors = DEFAULT_COLORS }: Props) => { + const colorData = generateColors(name, colors); + + return ( + + {`Fallback avatar for ${name}`} + + + + + + + + + + + + + + + + + ) +}) \ No newline at end of file diff --git a/packages/ui/src/home-nav-bar.tsx b/packages/ui/src/home-nav-bar.tsx index 11c68cf4..dee53b37 100644 --- a/packages/ui/src/home-nav-bar.tsx +++ b/packages/ui/src/home-nav-bar.tsx @@ -1,19 +1,39 @@ -import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik"; import { cn } from "./design"; +import Avatar from "./avatar" +import { Dropdown } from '@qwik-ui/headless'; +import { disablePageScroll, enablePageScroll } from '@fluejs/noscroll'; +import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik"; + export const HomeNavBar = component$(() => { const hasScrolled = useSignal(false); + const actions = [ + { label: "Hell Diver's Europe", disabled: false }, + { label: "WanjohiRyan's Games", disabled: false }, + { label: "CyberPunk Marathon", disabled: false }, + { label: "Emulation Hackers", disabled: true }, + { label: "testing-123", disabled: false }, + ]; + + const onDialogOpen = $((open: boolean) => { + if (open) { + disablePageScroll() + } else { + enablePageScroll() + } + }) + useOnDocument( 'scroll', $(() => { hasScrolled.value = window.scrollY > 0; }) ); -// + // return ( -