From 9900754feb3c207fc04dd695825810e3f64134d8 Mon Sep 17 00:00:00 2001 From: glmdgrielson Date: Mon, 4 Nov 2024 16:29:20 -0500 Subject: [PATCH 1/8] Revamp numeric text field This SHOULD fix bug #414, in a way that doesn't look too bad. --- .../CharacterDialog/components/CircleTextField.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 921b2877..97c193ca 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -112,12 +112,11 @@ export function CircleTextField( "cursor": cursor, "width": "3rem", "height": "3rem", - "borderRadius": "50%", - "border": `2px solid ${ - props.borderColor ?? miniTheme.textPrimary - }`, + // Fixes issue #414 + "font-family": "monospace", "outline": "none", "background": props.highlight ? miniTheme.textPrimary : "inherit", + "background": theme.palette.action.hover, "&&": { color: "inherit", }, From d0f1afca3d84af6898d2502ce5a32b5bd5a4cae2 Mon Sep 17 00:00:00 2001 From: glmdgrielson Date: Mon, 4 Nov 2024 16:49:14 -0500 Subject: [PATCH 2/8] Remove value check The whole point was to stop doing that, after all. --- .../CharacterDialog/components/CircleTextField.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 97c193ca..45c907ed 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -100,11 +100,7 @@ export function CircleTextField( setValue(""); } else { const parsed = parseInt(e.target.value); - if (parsed > 999) { - setValue("999"); - } else { - setValue(parsed.toString()); - } + setValue(parsed.toString()); } }} InputProps={{ From cbf4d40eb4f05a8596cd451a88d2511cbcd78eda Mon Sep 17 00:00:00 2001 From: glmdgrielson Date: Mon, 4 Nov 2024 16:50:26 -0500 Subject: [PATCH 3/8] Remove width style from CircleTextField Now to hope that this actually looks decent. --- .../components/CharacterDialog/components/CircleTextField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 45c907ed..326733ee 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -106,7 +106,7 @@ export function CircleTextField( InputProps={{ sx: { "cursor": cursor, - "width": "3rem", + // Removing width so that we can put in arbitrary values here "height": "3rem", // Fixes issue #414 "font-family": "monospace", From ee8a602276874db80ae6714cbc7d56f65151607f Mon Sep 17 00:00:00 2001 From: glmdgrielson Date: Tue, 5 Nov 2024 12:14:59 -0500 Subject: [PATCH 4/8] Fix oversight in background property I could have sworn that read "background-color". Apparently it didn't. WHOOPS! Well, that's fixed now. --- .../components/CharacterDialog/components/CircleTextField.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 326733ee..0295916e 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -111,8 +111,7 @@ export function CircleTextField( // Fixes issue #414 "font-family": "monospace", "outline": "none", - "background": props.highlight ? miniTheme.textPrimary : "inherit", - "background": theme.palette.action.hover, + "background": miniTheme.boxBackgroundColor, "&&": { color: "inherit", }, From 3f2f9e4f95d637209511216ca930935c5f6e041a Mon Sep 17 00:00:00 2001 From: rpdeshaies Date: Tue, 5 Nov 2024 13:00:07 -0500 Subject: [PATCH 5/8] fix: remove comments, change background, upgrade button style --- .../CharacterDialog/components/CircleTextField.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 0295916e..71edbf8a 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -106,12 +106,10 @@ export function CircleTextField( InputProps={{ sx: { "cursor": cursor, - // Removing width so that we can put in arbitrary values here "height": "3rem", - // Fixes issue #414 "font-family": "monospace", "outline": "none", - "background": miniTheme.boxBackgroundColor, + "background": (theme) => theme.palette.action.hover, "&&": { color: "inherit", }, @@ -158,7 +156,6 @@ export function CircleTextField( {!props.readonly && props.onDecrement && ( @@ -179,7 +176,6 @@ export function CircleTextField( {!props.readonly && props.onIncrement && ( From a309d3bacaff2496d7189e1439da8d63c8a65798 Mon Sep 17 00:00:00 2001 From: rpdeshaies Date: Tue, 5 Nov 2024 13:01:57 -0500 Subject: [PATCH 6/8] fix: eslint issues --- lib/components/Page/NavLink.tsx | 1 - .../components/CircleTextField.tsx | 5 +- lib/routes/Home/HomeRoute.tsx | 759 +++++++++--------- 3 files changed, 371 insertions(+), 394 deletions(-) diff --git a/lib/components/Page/NavLink.tsx b/lib/components/Page/NavLink.tsx index 28a81a3f..a57c3114 100644 --- a/lib/components/Page/NavLink.tsx +++ b/lib/components/Page/NavLink.tsx @@ -23,7 +23,6 @@ export function NavLink(props: { endIcon?: React.ReactNode; children: React.ReactNode; }) { - const theme = useTheme(); if (props.to) { return ( diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 71edbf8a..8e72f7f8 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -6,12 +6,11 @@ import Fade from "@mui/material/Fade"; import IconButton from "@mui/material/IconButton"; import { useTheme } from "@mui/material/styles"; import TextField from "@mui/material/TextField"; -import React, { useContext, useState } from "react"; +import React, { useState } from "react"; import { ConditionalWrapper } from "../../../../../components/ConditionalWrapper/ConditionalWrapper"; import { Delays } from "../../../../../constants/Delays"; import { IDataCyProps } from "../../../../../domains/cypress/types/IDataCyProps"; import { useLazyState } from "../../../../../hooks/useLazyState/useLazyState"; -import { MiniThemeContext } from "../MiniThemeContext"; export function CircleTextField( props: { @@ -27,8 +26,6 @@ export function CircleTextField( onContextMenu?(event: React.MouseEvent): void; } & IDataCyProps ) { - const miniTheme = useContext(MiniThemeContext); - const theme = useTheme(); const [hover, setHover] = useState(false); const [focus, setFocus] = useState(false); diff --git a/lib/routes/Home/HomeRoute.tsx b/lib/routes/Home/HomeRoute.tsx index afcd68b4..0a7a5a86 100644 --- a/lib/routes/Home/HomeRoute.tsx +++ b/lib/routes/Home/HomeRoute.tsx @@ -1,41 +1,21 @@ -import GitHubIcon from "@mui/icons-material/GitHub"; import { Link } from "@mui/material"; import Box, { BoxProps } from "@mui/material/Box"; import Button from "@mui/material/Button"; import Container, { ContainerProps } from "@mui/material/Container"; -import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import { ThemeProvider, useTheme } from "@mui/material/styles"; -import useMediaQuery from "@mui/material/useMediaQuery"; -import React, { useContext, useEffect } from "react"; +import React, { useEffect } from "react"; import { useNavigate } from "react-router"; -import discord from "../../../images/services/discord.png"; import lokalise from "../../../images/services/lokalise.png"; -import { AppButtonLink } from "../../components/AppLink/AppLink"; import { ConditionalWrapper } from "../../components/ConditionalWrapper/ConditionalWrapper"; -import { FateLabel } from "../../components/FateLabel/FateLabel"; -import { Kofi } from "../../components/Kofi/Kofi"; import { FariToolbarMaxWidth, Page } from "../../components/Page/Page"; import { PageMeta } from "../../components/PageMeta/PageMeta"; -import { Patreon } from "../../components/Patreon/Patreon"; import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger"; -import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext"; import { useHighlight } from "../../hooks/useHighlight/useHighlight"; import { useLightBackground } from "../../hooks/useLightBackground/useLightBackground"; import { useTranslate } from "../../hooks/useTranslate/useTranslate"; -const Patrons = [ - "James Micu", - "Randy Oest", - "Ryan Singer", - "Aeife O'Brien", - "David Haslem", - "Fluffydumplin", - "Lynn Jones", - "Krister Svanlund", -]; - const Sponsors: Array<{ image: string; name: string; link: string }> = [ { name: "Netlify", @@ -71,7 +51,7 @@ export const HomeRoute: React.FC<{}> = () => { const logger = useLogger(); const lightBackground = useLightBackground(); const theme = useTheme(); - const myBinderManager = useContext(MyBinderContext); + // const myBinderManager = useContext(MyBinderContext); useEffect(() => { logger.track("view_home"); @@ -176,68 +156,68 @@ export const HomeRoute: React.FC<{}> = () => { ); - function renderSupport() { - return ( - - - - {t("home-route.support-fari.description")} - - - - - - - - - - - - - - ); - } + // function renderSupport() { + // return ( + // + // + // + // {t("home-route.support-fari.description")} + // + // + // + // + // + // + // + // + // + // + // + // + // + // ); + // } - function renderPatrons() { - return ( - - - - {Patrons.map((patron, i) => { - const isLast = i === Patrons.length - 1; + // function renderPatrons() { + // return ( + // + // + // + // {Patrons.map((patron, i) => { + // const isLast = i === Patrons.length - 1; - return ( - - - {patron} - - {!isLast && ( - - {"•"} - - )} - - ); - })} - - - - - - - - - ); - } + // return ( + // + // + // {patron} + // + // {!isLast && ( + // + // {"•"} + // + // )} + // + // ); + // })} + // + // + // + // + // + // + // + // + // ); + // } function renderSponsors() { return ( @@ -273,230 +253,231 @@ export const HomeRoute: React.FC<{}> = () => { ); } - function renderFirstActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.scenes.title"), - description: t("home-route.cards.scenes.description"), - ctaLabel: t("home-route.cards.scenes.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - onClick: () => { - myBinderManager.actions.open({ folder: "scenes" }); - }, - }, - { - label: t("home-route.cards.characters.title"), - description: t("home-route.cards.characters.description"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - ctaLabel: t("home-route.cards.characters.cta"), - onClick: () => { - myBinderManager.actions.open({ folder: "characters" }); - }, - }, - { - label: t("home-route.cards.dice-roller.title"), - description: t("home-route.cards.dice-roller.description"), - ctaLabel: t("home-route.cards.dice-roller.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/dice", - }, - ]; - return ( - - - - ); - } - function renderSecondActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.data.title"), - description: t("home-route.cards.data.description"), - ctaLabel: t("home-route.cards.data.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/data", - }, + // function renderFirstActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.scenes.title"), + // description: t("home-route.cards.scenes.description"), + // ctaLabel: t("home-route.cards.scenes.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // onClick: () => { + // myBinderManager.actions.open({ folder: "scenes" }); + // }, + // }, + // { + // label: t("home-route.cards.characters.title"), + // description: t("home-route.cards.characters.description"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // ctaLabel: t("home-route.cards.characters.cta"), + // onClick: () => { + // myBinderManager.actions.open({ folder: "characters" }); + // }, + // }, + // { + // label: t("home-route.cards.dice-roller.title"), + // description: t("home-route.cards.dice-roller.description"), + // ctaLabel: t("home-route.cards.dice-roller.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/dice", + // }, + // ]; + // return ( + // + // + // + // ); + // } - { - label: t("home-route.cards.play-solo.title"), - description: t("home-route.cards.play-solo.description"), - ctaLabel: t("home-route.cards.play-solo.cta"), + // function renderSecondActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.data.title"), + // description: t("home-route.cards.data.description"), + // ctaLabel: t("home-route.cards.data.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/data", + // }, - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/oracle", - }, - ]; - return ( - - - - ); - } + // { + // label: t("home-route.cards.play-solo.title"), + // description: t("home-route.cards.play-solo.description"), + // ctaLabel: t("home-route.cards.play-solo.cta"), - function renderThirdActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.changelog.title"), - description: t("home-route.cards.changelog.description"), - ctaLabel: t("home-route.cards.changelog.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.canny.io/changelog", - }, - { - label: t("home-route.cards.wiki.title"), - description: t("home-route.cards.wiki.description"), - ctaLabel: t("home-route.cards.wiki.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki", - }, - { - label: t("home-route.cards.fari-games.title"), - description: t("home-route.cards.fari-games.description"), - ctaLabel: t("home-route.cards.fari-games.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.games", - }, - ]; - return ( - - - - ); - } + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/oracle", + // }, + // ]; + // return ( + // + // + // + // ); + // } - function renderCommunity() { - return ( - - {/* - - - - - - - */} - - - - - - - - - - ); - } + // function renderThirdActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.changelog.title"), + // description: t("home-route.cards.changelog.description"), + // ctaLabel: t("home-route.cards.changelog.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.canny.io/changelog", + // }, + // { + // label: t("home-route.cards.wiki.title"), + // description: t("home-route.cards.wiki.description"), + // ctaLabel: t("home-route.cards.wiki.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki", + // }, + // { + // label: t("home-route.cards.fari-games.title"), + // description: t("home-route.cards.fari-games.description"), + // ctaLabel: t("home-route.cards.fari-games.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.games", + // }, + // ]; + // return ( + // + // + // + // ); + // } - function renderOpenSource() { - return ( - - - - {t("home-route.sections.open-source.description")} - - - - - - - - - - - - ); - } + // function renderCommunity() { + // return ( + // + // {/* + // + // + // + // + // + // + // */} + // + // + // + // + // + // + // + // + // + // ); + // } + + // function renderOpenSource() { + // return ( + // + // + // + // {t("home-route.sections.open-source.description")} + // + // + // + // + // + // + // + // + // + // + // + // ); + // } function renderHeading() { return ( @@ -759,92 +740,92 @@ function DarkBox(props: ILightBoxProps & { linear?: boolean }) { ); } -function HomeRouteCards(props: { cards: Array }) { - const theme = useTheme(); - const lightBackground = useLightBackground(); - const isSmall = useMediaQuery(theme.breakpoints.down("md")); +// function HomeRouteCards(props: { cards: Array }) { +// const theme = useTheme(); +// const lightBackground = useLightBackground(); +// const isSmall = useMediaQuery(theme.breakpoints.down("md")); - return ( - <> - - {props.cards.map((card, index) => { - return ( - - - - - - - - {card.label} - - - - - {card.description} - - - - - - - {card.onClick && ( - - )} - {card.to && ( - - )} - - - - ); - })} - - - ); -} +// return ( +// <> +// +// {props.cards.map((card, index) => { +// return ( +// +// +// +// +// +// +// +// {card.label} +// +// +// +// +// {card.description} +// +// +// +// +// +// +// {card.onClick && ( +// +// )} +// {card.to && ( +// +// )} +// +// +// +// ); +// })} +// +// +// ); +// } From 9c5e5a7e7aa65760295e7a201148511d80e05d41 Mon Sep 17 00:00:00 2001 From: rpdeshaies Date: Tue, 5 Nov 2024 13:04:55 -0500 Subject: [PATCH 7/8] fix styling --- .../components/CharacterDialog/components/CircleTextField.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 8e72f7f8..02741ab9 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -103,7 +103,9 @@ export function CircleTextField( InputProps={{ sx: { "cursor": cursor, + "width": "5rem", "height": "3rem", + "px": "0.5rem", "font-family": "monospace", "outline": "none", "background": (theme) => theme.palette.action.hover, From d95318ab3c43edab739818fe1655222103fbe85f Mon Sep 17 00:00:00 2001 From: rpdeshaies Date: Tue, 5 Nov 2024 13:15:59 -0500 Subject: [PATCH 8/8] fix: int test --- cypress/e2e/route/Oracle.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/route/Oracle.cy.ts b/cypress/e2e/route/Oracle.cy.ts index e4a0d3bc..f7953f14 100644 --- a/cypress/e2e/route/Oracle.cy.ts +++ b/cypress/e2e/route/Oracle.cy.ts @@ -4,7 +4,7 @@ describe("/oracle", () => { describe("Given I want to ask a question to the oracle", () => { it("should ask questions to the oracle ", () => { Fari.start(); - Fari.getByText("Consult the Oracle").click(); + Fari.visit("/oracle"); askOracle();