From f09fb643143e7b900a00fffa6ddc3a1531bcec5e Mon Sep 17 00:00:00 2001 From: saintnoodle <14948290+saintnoodle@users.noreply.github.com> Date: Mon, 31 Jul 2023 13:32:34 +0100 Subject: [PATCH] fix: landing page ghost button (#919) --- .../src/app/pages/dashboard/DashboardPage.tsx | 63 +++++----- .../pages/dashboard/import/BarbatosPage.tsx | 24 +++- .../dashboard/import/BeatorajaIRPage.tsx | 30 +++-- .../pages/dashboard/import/ChunitachiPage.tsx | 25 +++- .../pages/dashboard/import/FervidexPage.tsx | 30 +++-- .../pages/dashboard/import/ITGHookPage.tsx | 13 +- .../app/pages/dashboard/import/KsHookPage.tsx | 18 ++- .../pages/dashboard/import/SilentHookPage.tsx | 20 ++- .../app/pages/dashboard/import/USCDBPage.tsx | 13 +- .../app/pages/dashboard/import/USCIRPage.tsx | 9 +- .../import/WACCAMyPageScraperPage.tsx | 5 +- .../dashboard/users/UserSettingsPage.tsx | 101 +++++++++++----- client/src/components/activity/Activity.tsx | 12 +- client/src/components/imports/TISInfo.tsx | 5 +- .../components/layout/header/HeaderMenu.tsx | 16 +-- .../src/components/layout/header/UserArea.tsx | 5 +- .../layout/header/UserProfileDropdown.tsx | 9 +- .../layout/screens/SplashScreen.tsx | 7 +- client/src/components/user/ProfilePicture.tsx | 114 +++++------------- .../customised-bootstrap/variables.scss | 16 +-- 20 files changed, 320 insertions(+), 215 deletions(-) diff --git a/client/src/app/pages/dashboard/DashboardPage.tsx b/client/src/app/pages/dashboard/DashboardPage.tsx index 3b9fdaac8..0135fb552 100644 --- a/client/src/app/pages/dashboard/DashboardPage.tsx +++ b/client/src/app/pages/dashboard/DashboardPage.tsx @@ -20,11 +20,12 @@ import { UserContext } from "context/UserContext"; import { UserSettingsContext } from "context/UserSettingsContext"; import { ColourConfig, TachiConfig } from "lib/config"; import React, { useContext, useMemo } from "react"; -import { Alert } from "react-bootstrap"; +import { Alert, Stack } from "react-bootstrap"; import { Link, Route, Switch } from "react-router-dom"; import { COLOUR_SET, GetGameConfig, UserDocument } from "tachi-common"; import { UGSWithRankingData, UserRecentSummary } from "types/api-returns"; import SessionCalendar from "components/sessions/SessionCalendar"; +import { WindowContext } from "context/WindowContext"; import { GameStatContainer } from "./users/UserGamesPage"; import SupportBanner from "./misc/SupportBanner"; @@ -234,19 +235,28 @@ function UserGameStatsInfo({ user }: { user: UserDocument }) { } function DashboardNotLoggedIn() { + const { + breakpoint: { isMd }, + } = useContext(WindowContext); return ( -
-

Welcome to {TachiConfig.name}!

-

- Looks like you're not logged in. If you've got an account,{" "} - Login! -

- -

I'm New Around Here, What is this?

- - {TachiConfig.name} is a Rhythm Game Score Tracker. That means we... - + +
+

Welcome to {TachiConfig.name}!

+

+ Looks like you're not logged in. If you've got an account,{" "} + + Login! + +

+
+
+

I'm New Around Here, What is this?

+

+ {TachiConfig.name} is a Rhythm Game Score Tracker. That means we... +

+
+ -
- Interested? You can register right now for free! -
- - Register! + + +

Interested?

+
+
+ + Create an account for free! -
+ -
+
Nosey? Here's what our users are up to. -
-
+
-
+ ); } function FeatureContainer({ tagline, description }: { tagline: string; description: string }) { return ( -
-
-

{tagline}

- {description} -
+
+

{tagline}

+

{description}

); } diff --git a/client/src/app/pages/dashboard/import/BarbatosPage.tsx b/client/src/app/pages/dashboard/import/BarbatosPage.tsx index 35bfda3bd..c3a6486fc 100644 --- a/client/src/app/pages/dashboard/import/BarbatosPage.tsx +++ b/client/src/app/pages/dashboard/import/BarbatosPage.tsx @@ -3,7 +3,7 @@ import Divider from "components/util/Divider"; import ExternalLink from "components/util/ExternalLink"; import { TachiConfig } from "lib/config"; import React from "react"; -import { Alert } from "react-bootstrap"; +import Alert from "react-bootstrap/Alert"; export default function BarbatosPage() { useSetSubheader(["Import Scores", "Barbatos"]); @@ -23,12 +23,18 @@ export default function BarbatosPage() { Download barbatos.dll.{" "}
  • - + VIVID WAVE
  • - + EXCEED GEAR . @@ -37,8 +43,16 @@ export default function BarbatosPage() {
  • Download your config file{" "} - here.
    - This file contains an API Key, which is meant to be kept secret! + + here + + .
    + + This file contains an API Key, which is meant to be kept secret! +
  • Place barbatos.dll and the above config file inside your SDVX diff --git a/client/src/app/pages/dashboard/import/BeatorajaIRPage.tsx b/client/src/app/pages/dashboard/import/BeatorajaIRPage.tsx index 6382da7f0..5a7fbfcab 100644 --- a/client/src/app/pages/dashboard/import/BeatorajaIRPage.tsx +++ b/client/src/app/pages/dashboard/import/BeatorajaIRPage.tsx @@ -4,6 +4,7 @@ import ExternalLink from "components/util/ExternalLink"; import Muted from "components/util/Muted"; import { TachiConfig } from "lib/config"; import React from "react"; +import Alert from "react-bootstrap/Alert"; const WIN_BAT = ` REM *** Set system-wide "_JAVA_OPTIONS" environment variable to use OpenGL pipeline (improved performance of > 30% potentially. Also use anti-aliasing for non-LR2 fonts, and finally allow Swing framework to utilize AA and GTKLookAndFeel for config window. *** @@ -32,7 +33,10 @@ export default function BeatorajaIRPage({ game }: { game: "bms" | "pms" }) {
    1. Download the latest version of the {name} IR{" "} - + here . @@ -44,7 +48,10 @@ export default function BeatorajaIRPage({ game }: { game: "bms" | "pms" }) { NOT support BMS scores achieved on beatoraja, and will not accept scores from the client.
      - + LR2oraja {" "} is a one-file change for beatoraja that changes the settings to match @@ -68,7 +75,7 @@ export default function BeatorajaIRPage({ game }: { game: "bms" | "pms" }) {
    2. Select {TachiConfig.name} IR.
      - + If the IR isn't showing up, make sure you're launching the game with the{" "} beatoraja-config.bat file. Otherwise, IRs will never load.
      @@ -80,6 +87,7 @@ export default function BeatorajaIRPage({ game }: { game: "bms" | "pms" }) { Windows @@ -88,26 +96,32 @@ export default function BeatorajaIRPage({ game }: { game: "bms" | "pms" }) { Linux
- +
  • Get an API token for the IR by clicking{" "} - this link. + + this link + + .
  • Place the API token in the password field. Put your username in as well! The IR wont load if you don't have a username set. -
    - + DO NOT PUT YOUR PASSWORD IN THE PASSWORD FIELD!
    For security reasons, you must put the API Key in that field, instead. -     +
  • That's it! Launch the game and start playing, your scores will automatically diff --git a/client/src/app/pages/dashboard/import/ChunitachiPage.tsx b/client/src/app/pages/dashboard/import/ChunitachiPage.tsx index b4d3c846c..2b3588908 100644 --- a/client/src/app/pages/dashboard/import/ChunitachiPage.tsx +++ b/client/src/app/pages/dashboard/import/ChunitachiPage.tsx @@ -3,6 +3,7 @@ import Divider from "components/util/Divider"; import ExternalLink from "components/util/ExternalLink"; import { TachiConfig } from "lib/config"; import React from "react"; +import Alert from "react-bootstrap/Alert"; export default function ChunitachiPage() { useSetSubheader(["Import Scores", "Chunitachi"]); @@ -20,19 +21,33 @@ export default function ChunitachiPage() {
    1. Download chunitachi.dll from{" "} - - Here + + here .
    2. Download your ChunItachi.ini config file{" "} - here.
      - This config file contains an API Key, which should be kept secret!. + + here + + .
      + + This config file contains an API Key, which should be kept secret! +
    3. Follow the remaining install instructions on{" "} - + GitHub . diff --git a/client/src/app/pages/dashboard/import/FervidexPage.tsx b/client/src/app/pages/dashboard/import/FervidexPage.tsx index 02b83fe3a..cd7b9e4fe 100644 --- a/client/src/app/pages/dashboard/import/FervidexPage.tsx +++ b/client/src/app/pages/dashboard/import/FervidexPage.tsx @@ -3,7 +3,7 @@ import Divider from "components/util/Divider"; import ExternalLink from "components/util/ExternalLink"; import { TachiConfig } from "lib/config"; import React from "react"; -import { Alert } from "react-bootstrap"; +import Alert from "react-bootstrap/Alert"; import { Link } from "react-router-dom"; export default function FervidexPage() { @@ -22,12 +22,26 @@ export default function FervidexPage() {
      1. Download fervidex.dll from{" "} - Here. + + here + + .
      2. Download your fervidex.json config file{" "} - here.
        - This config file contains an API Key, which should be kept secret!. + + here + + .
        + + This config file contains an API Key, which should be kept secret! +
      3. Drop both files into the same folder as your bm2dx.dll. @@ -36,7 +50,10 @@ export default function FervidexPage() {
        • You'll also need to download{" "} - + this , and extract it to the same folder. @@ -58,9 +75,8 @@ export default function FervidexPage() { Looking to import existing scores? Import from your network first. If that's not possible, enable "Sync Existing Scores" in{" "} your settings. diff --git a/client/src/app/pages/dashboard/import/ITGHookPage.tsx b/client/src/app/pages/dashboard/import/ITGHookPage.tsx index 0b29f919c..cfc485d93 100644 --- a/client/src/app/pages/dashboard/import/ITGHookPage.tsx +++ b/client/src/app/pages/dashboard/import/ITGHookPage.tsx @@ -29,7 +29,10 @@ export default function ITGHookPage() {
          1. Download the latest version of Tachi.lua{" "} - + here . @@ -39,7 +42,13 @@ export default function ITGHookPage() {
          2. Get your Tachi.json file by clicking{" "} - this link. + + this link + + .
          3. Place this file inside your user profile. It should go next to diff --git a/client/src/app/pages/dashboard/import/KsHookPage.tsx b/client/src/app/pages/dashboard/import/KsHookPage.tsx index 9a327a6c5..29e640f00 100644 --- a/client/src/app/pages/dashboard/import/KsHookPage.tsx +++ b/client/src/app/pages/dashboard/import/KsHookPage.tsx @@ -3,6 +3,7 @@ import Divider from "components/util/Divider"; import ExternalLink from "components/util/ExternalLink"; import { TachiConfig } from "lib/config"; import React from "react"; +import Alert from "react-bootstrap/Alert"; export default function KsHookPage() { useSetSubheader(["Import Scores", "Konaste Hook"]); @@ -20,15 +21,26 @@ export default function KsHookPage() {
            1. Download the latest version of kshook.dll from{" "} - + here .
            2. Download your config file{" "} - here.
              - This file contains an API Key, which is meant to be kept secret! + + here + + .
              + + This file contains an API Key, which is meant to be kept secret! +
            3. Place all of these files inside your SDVX6 (EAC) folder.
            4. diff --git a/client/src/app/pages/dashboard/import/SilentHookPage.tsx b/client/src/app/pages/dashboard/import/SilentHookPage.tsx index 9ce73d4b1..8f2438838 100644 --- a/client/src/app/pages/dashboard/import/SilentHookPage.tsx +++ b/client/src/app/pages/dashboard/import/SilentHookPage.tsx @@ -4,6 +4,7 @@ import ExternalLink from "components/util/ExternalLink"; import Muted from "components/util/Muted"; import { TachiConfig } from "lib/config"; import React from "react"; +import Alert from "react-bootstrap/Alert"; export default function SilentHookPage() { useSetSubheader(["Import Scores", "Silent Hook"]); @@ -21,8 +22,11 @@ export default function SilentHookPage() {
              1. Download silent from{" "} - - Here + + here {" "} and place all the .dll files in the same folder as{" "} popn22.dll. @@ -31,8 +35,16 @@ export default function SilentHookPage() {
              2. Download your config file to the same folder{" "} - here.
                - This file contains an API Key, which is meant to be kept secret! + + here + + .
                + + This file contains an API Key, which is meant to be kept secret! +
              3. Add silent to your startup script as a hook. diff --git a/client/src/app/pages/dashboard/import/USCDBPage.tsx b/client/src/app/pages/dashboard/import/USCDBPage.tsx index eccb0d64f..41df959be 100644 --- a/client/src/app/pages/dashboard/import/USCDBPage.tsx +++ b/client/src/app/pages/dashboard/import/USCDBPage.tsx @@ -4,6 +4,7 @@ import Divider from "components/util/Divider"; import Muted from "components/util/Muted"; import { TachiConfig } from "lib/config"; import React from "react"; +import Alert from "react-bootstrap/Alert"; import { Link } from "react-router-dom"; export default function USCDBPage() { @@ -12,12 +13,14 @@ export default function USCDBPage() { <> - + This method is intended for syncing up with existing scores. For new scores, you - should set up the USC IR, for automatic score - uploading. - -
                + should set up the{" "} + + USC IR + + , for automatic score uploading. + Note: If you submit a score on a chart that {TachiConfig.name} doesn't recognise, you'll need to wait until atleast 2 other players submit scores for that chart diff --git a/client/src/app/pages/dashboard/import/USCIRPage.tsx b/client/src/app/pages/dashboard/import/USCIRPage.tsx index fda678b07..fbf0e9391 100644 --- a/client/src/app/pages/dashboard/import/USCIRPage.tsx +++ b/client/src/app/pages/dashboard/import/USCIRPage.tsx @@ -38,8 +38,13 @@ export default function USCIRPage() {
              4. Grab an API Token from{" "} - here, and place it - in the API Token field. + + here + + , and place it in the API Token field.
              5. That's it! Your scores will now automatically upload to the server.
              diff --git a/client/src/app/pages/dashboard/import/WACCAMyPageScraperPage.tsx b/client/src/app/pages/dashboard/import/WACCAMyPageScraperPage.tsx index 1e935a884..1a7c2b998 100644 --- a/client/src/app/pages/dashboard/import/WACCAMyPageScraperPage.tsx +++ b/client/src/app/pages/dashboard/import/WACCAMyPageScraperPage.tsx @@ -50,7 +50,10 @@ export default function WACCASiteImportPage() {

              What Is WaccaMyPageScraper?

              - + WaccaMyPageScraper {" "} is a scraper for the official WACCA MyPage service site. Since the site is offline diff --git a/client/src/app/pages/dashboard/users/UserSettingsPage.tsx b/client/src/app/pages/dashboard/users/UserSettingsPage.tsx index 9b65d614c..3e8bfe1f1 100644 --- a/client/src/app/pages/dashboard/users/UserSettingsPage.tsx +++ b/client/src/app/pages/dashboard/users/UserSettingsPage.tsx @@ -9,9 +9,10 @@ import Muted from "components/util/Muted"; import SelectButton from "components/util/SelectButton"; import { UserSettingsContext } from "context/UserSettingsContext"; import { useFormik } from "formik"; -import React, { useContext, useState } from "react"; -import { Alert, Button, Form } from "react-bootstrap"; +import React, { useContext, useRef, useState } from "react"; +import { Alert, Button, Form, Stack } from "react-bootstrap"; import { UserDocument, UserSettingsDocument } from "tachi-common"; +import { SetState } from "types/react"; interface Props { reqUser: UserDocument; @@ -269,10 +270,18 @@ function PreferencesForm({ reqUser }: { reqUser: UserDocument }) { function ImageForm({ reqUser }: { reqUser: UserDocument }) { const [pfp, setPfp] = useState(); + const pfpInput = useRef(null); const [banner, setBanner] = useState(); + const bannerInput = useRef(null); + + const handleReset = (ref: React.MutableRefObject) => { + if (ref.current) { + ref.current.value = ""; + } + }; return ( -
              + Do not set inappropriate stuff as your avatar/banner. If you have to ask, the answer is probably no. @@ -282,11 +291,11 @@ function ImageForm({ reqUser }: { reqUser: UserDocument }) { setPfp(e.target.files![0])} + ref={pfpInput} />
              - + handleReset(pfpInput)} + file={pfp} + reqUser={reqUser} + type="pfp" + /> Profile Banner setBanner(e.target.files![0])} + ref={bannerInput} />
              - + handleReset(bannerInput)} + file={banner} + reqUser={reqUser} + type="banner" + /> -
              +               ); } function SocialMediaForm({ reqUser }: { reqUser: UserDocument }) { const placeholders = { - discord: "Example#0000", + discord: "Discord Username", twitter: "Twitter Handle", twitch: "Twitch Username", github: "Github Username", @@ -429,32 +450,57 @@ function FileUploadController({ file, type, reqUser, + setFile, + reset, }: { file?: File; type: "pfp" | "banner"; reqUser: UserDocument; + setFile: SetState; + reset: () => void; }) { return ( -
              - + ) : ( + + variant="danger" + > + Clear {type === "pfp" ? "Profile Picture" : "Profile Banner"} + + )} {file && (
              @@ -480,7 +526,6 @@ function FileUploadController({ window.location.reload(); } }} - className="ms-auto" variant="success" disabled={file.size > 1024 * 1000} > diff --git a/client/src/components/activity/Activity.tsx b/client/src/components/activity/Activity.tsx index 5066d2379..7b6086c21 100644 --- a/client/src/components/activity/Activity.tsx +++ b/client/src/components/activity/Activity.tsx @@ -37,7 +37,7 @@ import { ClumpedActivitySession, } from "types/tachi"; import { InnerQuestSectionGoal } from "components/targets/quests/Quest"; -import ProfilePicture, { ProfilePictureSmall } from "components/user/ProfilePicture"; +import ProfilePicture from "components/user/ProfilePicture"; import SupporterIcon from "components/util/SupporterIcon"; // Records activity for a group of users on a GPT. Also used for single users. @@ -292,7 +292,7 @@ function ScoresActivity({
              setShow(!show)}>
              - + setShow(!show)}>
              - + - + completed the{" "} @@ -495,7 +495,7 @@ function SessionActivity({
              setShow(!show)}>
              - +
              - diff --git a/client/src/components/imports/TISInfo.tsx b/client/src/components/imports/TISInfo.tsx index 8c5914b79..ea4a38daf 100644 --- a/client/src/components/imports/TISInfo.tsx +++ b/client/src/components/imports/TISInfo.tsx @@ -9,7 +9,10 @@ export default function TISInfo({ name }: { name: string }) {
              1. Download the latest version of the {TachiConfig.name} Import Scripts{" "} - + here . diff --git a/client/src/components/layout/header/HeaderMenu.tsx b/client/src/components/layout/header/HeaderMenu.tsx index d43818471..45f9bc1fb 100644 --- a/client/src/components/layout/header/HeaderMenu.tsx +++ b/client/src/components/layout/header/HeaderMenu.tsx @@ -1,6 +1,6 @@ import { AllLUGPTStatsContext } from "context/AllLUGPTStatsContext"; import { UserSettingsContext } from "context/UserSettingsContext"; -import React, { useContext } from "react"; +import React, { useContext, useEffect } from "react"; import { UserDocument, UserGameStats } from "tachi-common"; import useApiQuery from "components/util/query/useApiQuery"; import Nav from "react-bootstrap/Nav"; @@ -30,13 +30,15 @@ export function HeaderMenu({ "game_stats", ]); - if (error) { - console.error(error); - } + useEffect(() => { + if (error) { + console.error(error); + } - if (data) { - setUGS(data); - } + if (data) { + setUGS(data); + } + }, [error, data]); return (
              - {user.username} + ); } diff --git a/client/src/components/layout/screens/SplashScreen.tsx b/client/src/components/layout/screens/SplashScreen.tsx index 534aedf21..6fe1e1f3b 100644 --- a/client/src/components/layout/screens/SplashScreen.tsx +++ b/client/src/components/layout/screens/SplashScreen.tsx @@ -4,9 +4,12 @@ import SplashImage from "../misc/SplashImage"; export function SplashScreen({ broke }: { broke: string }) { return ( -
              +
              - {!broke && } + {!broke && } {broke &&

              {broke}

              }
              ); diff --git a/client/src/components/user/ProfilePicture.tsx b/client/src/components/user/ProfilePicture.tsx index 80e21f996..ee03444d9 100644 --- a/client/src/components/user/ProfilePicture.tsx +++ b/client/src/components/user/ProfilePicture.tsx @@ -5,101 +5,47 @@ import { Link } from "react-router-dom"; export default function ProfilePicture({ user, - src, + src: imgUrl, toGPT = "", + link = true, + size = "lg", }: { - user: UserDocument | string; + user: UserDocument; + + /** + * Specify an image src instead of infering one from the user's info + */ src?: string; + /** + * Whether or not this profile picture should be a link (default = true) + */ + link?: boolean; + + /** + * sm = 32px, lg = 128px + */ + size?: "sm" | "lg"; + /** * When clicking this this profile, should it take you to a UGPT page? */ toGPT?: string; }) { - if (typeof user === "string") { + const dimensions = size === "sm" ? 32 : 128; + const props = { + src: imgUrl ? imgUrl : ToAPIURL(`/users/${user.id}/pfp`), + alt: `${user.username}'s Profile Picture`, + height: dimensions, + width: dimensions, + className: "d-inline-block object-fit-cover bg-body-tertiary shadow-sm rounded fs-0", + }; + if (link) { return ( - - {`${user}'s + + ); } - - return ( - - {`${user.username}'s - - ); -} - -export function ProfilePictureSmall({ - user, - src, - toGPT = "", -}: { - user: UserDocument | string; - src?: string; - - /** - * When clicking this this profile, should it take you to a UGPT page? - */ - toGPT?: string; -}) { - if (toGPT) { - // eslint-disable-next-line no-param-reassign - toGPT = `games/${toGPT}`; - } - - if (typeof user === "string") { - return ( - - {`${user}'s - - ); - } - - return ( - - {`${user.username}'s - - ); + return ; } diff --git a/client/src/styles/customised-bootstrap/variables.scss b/client/src/styles/customised-bootstrap/variables.scss index cf2d37b39..3ffa1d4e3 100644 --- a/client/src/styles/customised-bootstrap/variables.scss +++ b/client/src/styles/customised-bootstrap/variables.scss @@ -637,11 +637,11 @@ $line-height-base: 1.5; $line-height-sm: 1.25; $line-height-lg: 2; -$h1-font-size: $font-size-base * 2; -$h2-font-size: $font-size-base * 1.75; -$h3-font-size: $font-size-base * 1.5; -$h4-font-size: $font-size-base * 1.25; -$h5-font-size: $font-size-base * 1.125; +$h1-font-size: $font-size-base * 2.5; +$h2-font-size: $font-size-base * 2; +$h3-font-size: $font-size-base * 1.75; +$h4-font-size: $font-size-base * 1.5; +$h5-font-size: $font-size-base * 1.25; $h6-font-size: $font-size-base; // scss-docs-end font-variables @@ -650,7 +650,7 @@ $h6-font-size: $font-size-base; $rfs-rem-value: 13; $rfs-base-value: $font-size-base; $rfs-factor: 25; // setting this <= 1 throws an error ==> bootstrap-scss/vendor/_rfs.scss:34 -$rfs-breakpoint: 648px; +$rfs-breakpoint: 576px; $rfs-class: "enable"; // this allows us to enable it with a class selector only when we want it // scss-docs-start font-sizes @@ -715,8 +715,8 @@ $hr-height: null !default; // Deprecated in v5.2.0 // fusv-enable $hr-border-color: null !default; // Allows for inherited colors -$hr-border-width: var(--#{$prefix}border-width) !default; -$hr-opacity: 0.25 !default; +$hr-border-width: var(--#{$prefix}border-width); +$hr-opacity: 0.1; $legend-margin-bottom: 0.5rem; $legend-font-size: 1.5rem;