From 4390269ed1d535ab44cfd799058d9370b4bab6e0 Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 8 Sep 2023 10:17:45 +0200 Subject: [PATCH] Use of client-side instead of navigator --- leaky-ships/src/components/Logo.tsx | 27 +++-- leaky-ships/src/components/OptionButton.tsx | 80 ++++++++----- leaky-ships/src/routes/index.tsx | 14 +-- leaky-ships/src/routes/signin.tsx | 8 +- leaky-ships/src/routes/start.tsx | 123 +++++++++----------- 5 files changed, 129 insertions(+), 123 deletions(-) diff --git a/leaky-ships/src/components/Logo.tsx b/leaky-ships/src/components/Logo.tsx index 2eb6f19..dacd13a 100644 --- a/leaky-ships/src/components/Logo.tsx +++ b/leaky-ships/src/components/Logo.tsx @@ -1,19 +1,22 @@ import classNames from "classnames" +import { A } from "solid-start" function Logo(props: { small?: boolean }) { return ( -
-

- Leaky - Ships -

- -
+ +
+

+ Leaky + Ships +

+ +
+ ) } diff --git a/leaky-ships/src/components/OptionButton.tsx b/leaky-ships/src/components/OptionButton.tsx index 0b0b301..eba7634 100644 --- a/leaky-ships/src/components/OptionButton.tsx +++ b/leaky-ships/src/components/OptionButton.tsx @@ -1,49 +1,69 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core" import classNames from "classnames" -import { JSX, Show } from "solid-js" +import { JSX } from "solid-js" +import { A } from "solid-start" import { FontAwesomeIcon } from "./FontAwesomeIcon" const styles = { wrapper: - "flex w-full flex-row items-center justify-between rounded-xl py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8", - disabled: + "flex w-full flex-row items-center justify-between rounded-lg py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 sm:rounded-xl sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8", + enabled: "border-b-4 border-shield-gray bg-voidDark active:border-b-0 active:border-t-4", - enabled: "border-4 border-dashed border-slate-600 bg-red-950", + disabled: "border-4 border-dashed border-slate-600 bg-red-950", icon: "ml-2 w-10 text-xl sm:ml-12 sm:text-4xl", } -function OptionButton(props: { +export function OptionAnchor(props: { text: string icon: IconDefinition - callback?: () => void - children?: JSX.Element - nodeWhen?: boolean + href: string disabled?: boolean }) { return ( - - {props.children} - - - } + - - + {props.text} + + ) } -export default OptionButton +export function OptionButton(props: { + text: string + icon: IconDefinition + callback: () => void + disabled?: boolean +}) { + return ( + + ) +} + +export function OptionDiv(props: { + icon: IconDefinition + children: JSX.Element +}) { + return ( +
+ {props.children} + +
+ ) +} diff --git a/leaky-ships/src/routes/index.tsx b/leaky-ships/src/routes/index.tsx index b2a6c2b..e151842 100644 --- a/leaky-ships/src/routes/index.tsx +++ b/leaky-ships/src/routes/index.tsx @@ -1,10 +1,8 @@ -import { useNavigate } from "solid-start" +import { A } from "solid-start" import BurgerMenu from "~/components/BurgerMenu" import Logo from "~/components/Logo" export default function Home() { - const navigator = useNavigate() - return (
@@ -13,17 +11,13 @@ export default function Home() {
- +
) diff --git a/leaky-ships/src/routes/signin.tsx b/leaky-ships/src/routes/signin.tsx index 9a07dea..a50f1d0 100644 --- a/leaky-ships/src/routes/signin.tsx +++ b/leaky-ships/src/routes/signin.tsx @@ -2,7 +2,7 @@ import { signIn } from "@auth/solid-start/client" import { faLeftLong } from "@fortawesome/pro-solid-svg-icons" import classNames from "classnames" import { Show, createEffect, createSignal } from "solid-js" -import { useNavigate, useSearchParams } from "solid-start" +import { A, useNavigate, useSearchParams } from "solid-start" import { FontAwesomeIcon } from "~/components/FontAwesomeIcon" import { useSession } from "~/hooks/useSession" @@ -147,14 +147,14 @@ function Login() {
- +
diff --git a/leaky-ships/src/routes/start.tsx b/leaky-ships/src/routes/start.tsx index 1e6afaa..b1d666e 100644 --- a/leaky-ships/src/routes/start.tsx +++ b/leaky-ships/src/routes/start.tsx @@ -4,12 +4,16 @@ import { GamePropsSchema } from "~/lib/zodSchemas" // import OtpInput from "react-otp-input" // import { Icons, toast } from "react-toastify" import status from "http-status" -import { createEffect, createSignal } from "solid-js" -import { useLocation, useNavigate, useSearchParams } from "solid-start" +import { Show, createEffect, createSignal } from "solid-js" +import { A, useNavigate, useSearchParams } from "solid-start" import BurgerMenu from "~/components/BurgerMenu" import { FontAwesomeIcon } from "~/components/FontAwesomeIcon" import Logo from "~/components/Logo" -import OptionButton from "~/components/OptionButton" +import { + OptionAnchor, + OptionButton, + OptionDiv, +} from "~/components/OptionButton" import { full } from "~/hooks/useGameProps" import { useSession } from "~/hooks/useSession" @@ -45,7 +49,6 @@ export function isAuthenticated(res: Response) { export default function Start() { const [otp, setOtp] = createSignal("") - const location = useLocation() const navigator = useNavigate() const { session } = useSession() @@ -139,32 +142,24 @@ export default function Start() {
-
+
- - {!session()?.user?.id && ( - - )} + +
- - navigator( - location.pathname.concat( - "?", - new URLSearchParams({ q: "join" }).toString(), - ), - ) + } - icon={faUserPlus} - disabled={!session()} - nodeWhen={query().join && !!session()} > - - setOtp((otp) => { - const value = e.target.value - return /^\d{0,4}$/.test(value) ? value : otp - }) - } - /> - - - navigator( - location.pathname + - "?" + - new URLSearchParams({ - q: "watch", - }).toString(), - ) + + + setOtp((otp) => { + const value = e.target.value + return /^\d{0,4}$/.test(value) ? value : otp + }) + } + /> + + + } - nodeWhen={query().watch} > - - setOtp((otp) => { - const value = e.target.value - return /^\d{0,4}$/.test(value) ? value : otp - }) - } - /> - + + + setOtp((otp) => { + const value = e.target.value + return /^\d{0,4}$/.test(value) ? value : otp + }) + } + /> + +