From 7d1c77fb44923f5d0d43db3f9ea09c25e9345f5b Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Fri, 24 Oct 2025 16:08:06 +0200 Subject: [PATCH 01/13] welcome screen looks nice --- deep-sea-stories/packages/web/src/Layout.tsx | 16 ++-- .../packages/web/src/assets/elevenlabs.svg | 16 +++- .../packages/web/src/components/Footer.tsx | 54 +++++------ .../packages/web/src/components/TitleBar.tsx | 18 ++-- .../packages/web/src/contexts/trpc.tsx | 91 ++++++++++--------- deep-sea-stories/packages/web/src/main.tsx | 64 ++++++------- .../packages/web/src/views/HomeView.tsx | 72 +++++++-------- 7 files changed, 173 insertions(+), 158 deletions(-) diff --git a/deep-sea-stories/packages/web/src/Layout.tsx b/deep-sea-stories/packages/web/src/Layout.tsx index c124bde..4b29689 100644 --- a/deep-sea-stories/packages/web/src/Layout.tsx +++ b/deep-sea-stories/packages/web/src/Layout.tsx @@ -1,13 +1,13 @@ -import type { FC, PropsWithChildren } from 'react'; -import { Toaster } from '@/components/ui/sonner'; +import type { FC, PropsWithChildren } from "react"; +import { Toaster } from "@/components/ui/sonner"; const Layout: FC = (props) => { - return ( -
- {props.children} - -
- ); + return ( +
+ {props.children} + +
+ ); }; export default Layout; diff --git a/deep-sea-stories/packages/web/src/assets/elevenlabs.svg b/deep-sea-stories/packages/web/src/assets/elevenlabs.svg index 5410000..1880710 100644 --- a/deep-sea-stories/packages/web/src/assets/elevenlabs.svg +++ b/deep-sea-stories/packages/web/src/assets/elevenlabs.svg @@ -1,4 +1,14 @@ - - - + + + + + + + + + + + + + diff --git a/deep-sea-stories/packages/web/src/components/Footer.tsx b/deep-sea-stories/packages/web/src/components/Footer.tsx index bd06928..b58cc4e 100644 --- a/deep-sea-stories/packages/web/src/components/Footer.tsx +++ b/deep-sea-stories/packages/web/src/components/Footer.tsx @@ -1,31 +1,33 @@ -import type { FC } from 'react'; -import elevenlabs from '@/assets/elevenlabs.svg'; -import fishjam from '@/assets/fishjam.svg'; -import HowItWorks from './HowItWorks'; -import HowToPlay from './HowToPlay'; -import Icon from './Icon'; -import LinkButton from './LinkButton'; +import type { FC } from "react"; +import elevenlabs from "@/assets/elevenlabs.svg"; +import fishjam from "@/assets/fishjam.svg"; +import HowItWorks from "./HowItWorks"; +import HowToPlay from "./HowToPlay"; +import LinkButton from "./LinkButton"; const Footer: FC = () => { - return ( -
-
-

Created with

- - Fishjam - - - - ElevenLabs - - -
-
- - -
-
- ); + return ( +
+
+ + +
+ +
+

Created with

+
+ + Fishjam + Fishjam logo + + + + Elevenlabs logo + +
+
+
+ ); }; export default Footer; diff --git a/deep-sea-stories/packages/web/src/components/TitleBar.tsx b/deep-sea-stories/packages/web/src/components/TitleBar.tsx index f8468f0..85f5341 100644 --- a/deep-sea-stories/packages/web/src/components/TitleBar.tsx +++ b/deep-sea-stories/packages/web/src/components/TitleBar.tsx @@ -1,14 +1,14 @@ -import type { FC } from 'react'; +import type { FC } from "react"; const TitleBar: FC = () => { - return ( -
-

Deep Sea Stories

-

- Hear the most mysterious stories and try to deduce how they happened. -

-
- ); + return ( +
+

Deep Sea Stories

+

+ Hear the most mysterious stories and try to deduce how they happened. +

+
+ ); }; export default TitleBar; diff --git a/deep-sea-stories/packages/web/src/contexts/trpc.tsx b/deep-sea-stories/packages/web/src/contexts/trpc.tsx index 0722fbb..2cc1a37 100644 --- a/deep-sea-stories/packages/web/src/contexts/trpc.tsx +++ b/deep-sea-stories/packages/web/src/contexts/trpc.tsx @@ -1,58 +1,61 @@ -import { httpToWsUrl } from '@/lib/utils'; -import type { QueryClient } from '@tanstack/react-query'; +import { httpToWsUrl } from "@/lib/utils"; +import type { QueryClient } from "@tanstack/react-query"; import { - createTRPCClient, - createWSClient, - httpBatchLink, - splitLink, - wsLink, -} from '@trpc/client'; -import { createTRPCContext } from '@trpc/tanstack-react-query'; -import type { AppRouter } from 'backend'; -import { type FC, type PropsWithChildren, useState } from 'react'; + createTRPCClient, + createWSClient, + httpBatchLink, + splitLink, + wsLink, +} from "@trpc/client"; +import { createTRPCContext } from "@trpc/tanstack-react-query"; +import type { AppRouter } from "backend"; +import { type FC, type PropsWithChildren, useState } from "react"; export const { TRPCProvider, useTRPC, useTRPCClient } = - createTRPCContext(); + createTRPCContext(); interface TRPCClientProviderProps extends PropsWithChildren { - queryClient: QueryClient; + queryClient: QueryClient; } const wsClient = createWSClient({ - url: httpToWsUrl(import.meta.env.VITE_BACKEND_URL), - onOpen: () => { - console.log('[tRPC] WebSocket connection opened'); - }, - onClose: (cause) => { - console.log('[tRPC] WebSocket connection closed:', cause); - }, + url: httpToWsUrl(import.meta.env.VITE_BACKEND_URL), + onOpen: () => { + console.log("[tRPC] WebSocket connection opened"); + }, + onClose: (cause) => { + console.log("[tRPC] WebSocket connection closed:", cause); + }, }); export const TRPCClientProvider: FC = ({ - queryClient, - children, + queryClient, + children, }) => { - const [trpcClient] = useState(() => - createTRPCClient({ - links: [ - splitLink({ - condition(op) { - return op.type === 'subscription'; - }, - true: wsLink({ - client: wsClient, - }), - false: httpBatchLink({ - url: import.meta.env.VITE_BACKEND_URL, - }), - }), - ], - }), - ); + if (!import.meta.env.VITE_BACKEND_URL) { + throw new Error("VITE_BACKEND_URL is not set"); + } + const [trpcClient] = useState(() => + createTRPCClient({ + links: [ + splitLink({ + condition(op) { + return op.type === "subscription"; + }, + true: wsLink({ + client: wsClient, + }), + false: httpBatchLink({ + url: import.meta.env.VITE_BACKEND_URL, + }), + }), + ], + }), + ); - return ( - - {children} - - ); + return ( + + {children} + + ); }; diff --git a/deep-sea-stories/packages/web/src/main.tsx b/deep-sea-stories/packages/web/src/main.tsx index 1cebfbd..640e752 100644 --- a/deep-sea-stories/packages/web/src/main.tsx +++ b/deep-sea-stories/packages/web/src/main.tsx @@ -1,38 +1,38 @@ -import { FishjamProvider } from '@fishjam-cloud/react-client'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import { TRPCClientProvider } from './contexts/trpc.tsx'; -import './index.css'; -import { BrowserRouter, Route, Routes } from 'react-router'; -import Layout from './Layout.tsx'; -import HomeView from './views/HomeView.tsx'; -import RoomView from './views/RoomView.tsx'; +import { FishjamProvider } from "@fishjam-cloud/react-client"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { TRPCClientProvider } from "./contexts/trpc.tsx"; +import "./index.css"; +import { BrowserRouter, Route, Routes } from "react-router"; +import Layout from "./Layout.tsx"; +import HomeView from "./views/HomeView.tsx"; +import RoomView from "./views/RoomView.tsx"; const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retryDelay: 2000, - }, - }, + defaultOptions: { + queries: { + retryDelay: 2000, + }, + }, }); // biome-ignore lint/style/noNonNullAssertion: root always exists -createRoot(document.getElementById('root')!).render( - - - - - - - - } /> - } /> - - - - - - - , +createRoot(document.getElementById("root")!).render( + + + + + + + + } /> + } /> + + + + + + + , ); diff --git a/deep-sea-stories/packages/web/src/views/HomeView.tsx b/deep-sea-stories/packages/web/src/views/HomeView.tsx index afbe202..0ff59a0 100644 --- a/deep-sea-stories/packages/web/src/views/HomeView.tsx +++ b/deep-sea-stories/packages/web/src/views/HomeView.tsx @@ -1,41 +1,41 @@ -import Footer from '@/components/Footer'; -import TitleBar from '@/components/TitleBar'; -import { useTRPCClient } from '@/contexts/trpc'; -import { useNavigate } from 'react-router'; -import { Button } from '@/components/ui/button'; -import { useState } from 'react'; +import Footer from "@/components/Footer"; +import TitleBar from "@/components/TitleBar"; +import { useTRPCClient } from "@/contexts/trpc"; +import { useNavigate } from "react-router"; +import { Button } from "@/components/ui/button"; +import { useState } from "react"; export default function HomeView() { - const navigate = useNavigate(); - const trpcClient = useTRPCClient(); - const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate(); + const trpcClient = useTRPCClient(); + const [isLoading, setIsLoading] = useState(false); - const handleCreateRoom = async () => { - setIsLoading(true); - try { - const room = await trpcClient.createRoom.mutate(); - navigate(`/${room.id}`); - } catch (error) { - console.error('Failed to create room:', error); - } finally { - setIsLoading(false); - } - }; + const handleCreateRoom = async () => { + setIsLoading(true); + try { + const room = await trpcClient.createRoom.mutate(); + navigate(`/${room.id}`); + } catch (error) { + console.error("Failed to create room:", error); + } finally { + setIsLoading(false); + } + }; - return ( - <> - -
- -
-