From 8b8e98a4797304bcf11a02344434fd6324c8ed92 Mon Sep 17 00:00:00 2001 From: Daithi Hearn Date: Fri, 14 Apr 2023 23:25:34 +0200 Subject: [PATCH] Minor UI enhancements --- package.json | 2 +- public/manifest.json | 2 +- src/assets/icons/Menu.svg | 9 +-- src/components/Game/PlayerCard.tsx | 73 +++++++++++++++++++--- src/components/Header/NavBar.tsx | 12 ++-- src/components/Header/_header.scss | 10 +++ src/components/MyProfile/MyProfileSync.tsx | 4 -- src/pages/Game/_game.scss | 22 ++++--- src/pages/Home/_home.scss | 9 +++ src/pages/Layout/Layout.tsx | 3 - 10 files changed, 112 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 3af439d..3e63199 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "frontend", - "version": "6.1.1", + "version": "6.1.2", "description": "React frontend for the Cards 110", "author": "Daithi Hearn", "license": "MIT", diff --git a/public/manifest.json b/public/manifest.json index 918a182..ec32a09 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "short_name": "Cards 110", "name": "Cards 110", - "version": "6.1.1", + "version": "6.1.2", "icons": [ { "src": "./assets/favicon.png", diff --git a/src/assets/icons/Menu.svg b/src/assets/icons/Menu.svg index f1de766..0cbea0d 100644 --- a/src/assets/icons/Menu.svg +++ b/src/assets/icons/Menu.svg @@ -1,5 +1,5 @@ - + Group Created with Sketch. @@ -7,10 +7,11 @@ - - + + + - \ No newline at end of file + diff --git a/src/components/Game/PlayerCard.tsx b/src/components/Game/PlayerCard.tsx index c25df03..9c8ef9c 100644 --- a/src/components/Game/PlayerCard.tsx +++ b/src/components/Game/PlayerCard.tsx @@ -1,5 +1,17 @@ -import { useMemo } from "react" -import { Col, CardImgOverlay, CardText, CardImg, Card } from "reactstrap" +import { useCallback, useMemo, useState } from "react" +import { + Col, + CardImgOverlay, + CardText, + CardImg, + Card, + CardSubtitle, + Modal, + ModalBody, + CardGroup, + CardHeader, + CardBody, +} from "reactstrap" import { getGamePlayers, getRound } from "caches/GameSlice" import { useAppSelector } from "caches/hooks" import { getPlayerProfiles } from "caches/PlayerProfilesSlice" @@ -7,6 +19,7 @@ import { BLANK_CARD } from "model/Cards" import { PlayedCard } from "model/Game" import { Player } from "model/Player" +import Leaderboard from "components/Leaderboard/Leaderboard" interface PlayerRowI { player: Player @@ -16,6 +29,12 @@ const PlayerCard: React.FC = ({ player, className }) => { const round = useAppSelector(getRound) const players = useAppSelector(getGamePlayers) const playerProfiles = useAppSelector(getPlayerProfiles) + const [modalLeaderboard, updateModalLeaderboard] = useState(false) + + const toggleLeaderboardModal = useCallback( + () => updateModalLeaderboard(!modalLeaderboard), + [modalLeaderboard], + ) const profile = useMemo( () => playerProfiles.find(p => p.id === player.id), @@ -41,21 +60,42 @@ const PlayerCard: React.FC = ({ player, className }) => { [round, player], ) + const scoreClassName = useMemo(() => { + if (player.score < 30) { + return "bg-dark text-light" + } else if (player.score < 30) { + return "bg-secondary text-light" + } else if (player.score <= 65) { + return "bg-primary text-light" + } else if (player.score <= 90) { + return "bg-warning text-dark" + } else if (player.score <= 105) { + return "bg-danger text-dark" + } else { + return "bg-success text-light" + } + }, [player.score]) + if (!profile) return null return ( - + - - - {player.score} + + +
+ {player.score} +
- + @@ -136,6 +176,23 @@ const PlayerCard: React.FC = ({ player, className }) => { )} + + + + + + Leaderboard + + + + + + + ) } diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx index f26d2da..08632a2 100644 --- a/src/components/Header/NavBar.tsx +++ b/src/components/Header/NavBar.tsx @@ -25,6 +25,7 @@ import { } from "reactstrap" import { getIsGameActive } from "caches/GameSlice" import Leaderboard from "components/Leaderboard/Leaderboard" +import MenuButton from "assets/icons/Menu.svg" const NavBar = () => { const { logout } = useAuth0() @@ -73,12 +74,15 @@ const NavBar = () => { xl="2"> - + {myProfile.name} setShowDropdown(true)} /> diff --git a/src/components/Header/_header.scss b/src/components/Header/_header.scss index 2005142..982f8fd 100644 --- a/src/components/Header/_header.scss +++ b/src/components/Header/_header.scss @@ -1,5 +1,6 @@ .custom-navbar { padding: 5px; + min-height: 55px; } .nav-container { @@ -11,8 +12,17 @@ margin-left: 15px; } +.nav-menu-button { + padding-top: 7px; +} + +.custom-dropdown { + min-height: 45px; +} + .nav-col { margin: auto; + min-height: 45px; } .linknavbar { diff --git a/src/components/MyProfile/MyProfileSync.tsx b/src/components/MyProfile/MyProfileSync.tsx index 9add110..f231079 100644 --- a/src/components/MyProfile/MyProfileSync.tsx +++ b/src/components/MyProfile/MyProfileSync.tsx @@ -20,7 +20,6 @@ const MyProfileSync: React.FC = () => { }, [error]) const updateProfile = async (name: string, picture: string) => { - console.log(`DAITHI: Attempting to update profile: ${name}`) const accessToken = await getAccessTokenSilently({ authorizationParams: { audience: AUTH0_AUDIENCE, @@ -29,8 +28,6 @@ const MyProfileSync: React.FC = () => { }, }) - console.log(`DAITHI: Got access token: ${accessToken}`) - dispatch( ProfileService.updateProfile( { @@ -47,7 +44,6 @@ const MyProfileSync: React.FC = () => { } useEffect(() => { - console.log(`DAITHI: isAuthenticated: ${isAuthenticated} user: ${user}`) if (isAuthenticated && user && user.name && user.picture) { updateProfile(user.name, user.picture) } diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss index e4889ac..b97c631 100644 --- a/src/pages/Game/_game.scss +++ b/src/pages/Game/_game.scss @@ -49,14 +49,23 @@ margin-top: 5rem; } -.overlay-score { +.player-score { font-weight: bolder; - font-size: 1.6em; - margin-top: 2.6rem; - mix-blend-mode: lighten; + font-size: 1.5em; color: white; } +.score-text { + width: 1.7em; + display: inline-block; + border-radius: 25%; +} + +.player-score-container { + padding-top: 0.25em; + padding-bottom: 0.25em; +} + .overlay-dealer-chip { margin-top: 2rem; } @@ -170,10 +179,6 @@ padding-right: 0; } - .overlay-score { - margin-top: 0.8em; - } - .overlay-chip { margin-top: 1rem; } @@ -186,6 +191,5 @@ vertical-align: middle; width: 50px; height: 50px; - border-radius: 50%; } } diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss index fce53d4..8532082 100644 --- a/src/pages/Home/_home.scss +++ b/src/pages/Home/_home.scss @@ -15,6 +15,7 @@ .navBarInner { max-width: 800px; + min-height: 45px; } .overflow-hidden { @@ -76,6 +77,14 @@ } } +.player-avatar { + // vertical-align: middle; + width: 75px; + height: 75px; + border-radius: 25%; +} + + .avatar { vertical-align: middle; width: 75px; diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx index 107b320..0688a44 100644 --- a/src/pages/Layout/Layout.tsx +++ b/src/pages/Layout/Layout.tsx @@ -14,9 +14,6 @@ const Layout = () => { const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0() useEffect(() => { - console.log( - `DAITHI: isLoading: ${isLoading} isAuthenticated: ${isAuthenticated}`, - ) if (!isLoading && !isAuthenticated) loginWithRedirect({ authorizationParams: {