Merge pull request #160 from daithihearn/ui-improvements

Minor UI enhancements
daithihearn · Apr 14, 2023 · 5e8bac6 · 5e8bac6
2 parents 7cffc97 + 8b8e98a
commit 5e8bac6
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 34 deletions.
diff --git 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
@@ -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
diff --git a/src/components/Game/PlayerCard.tsx b/src/components/Game/PlayerCard.tsx
@@ -1,12 +1,25 @@
-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"
 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<PlayerRowI> = ({ 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<PlayerRowI> = ({ 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 (
         <Col key={`playercard_col_${player.id}`} className="player-column">
-            <Card className="card-transparent">
+            <Card
+                className="card-transparent clickable"
+                onClick={toggleLeaderboardModal}>
                 <CardImg
                     alt={profile.name}
                     src={profile.picture}
-                    className={`img-center avatar ${className}`}
+                    top={true}
+                    className={`img-center player-avatar ${className}`}
                 />
-                <CardImgOverlay>
-                    <CardText className="overlay-score">
-                        {player.score}
+                <CardSubtitle className="player-score-container">
+                    <CardText className="player-score">
+                        <div className={`score-text ${scoreClassName}`}>
+                            {player.score}
+                        </div>
                     </CardText>
-                </CardImgOverlay>
+                </CardSubtitle>
             </Card>
 
             <Card className="card-transparent">
@@ -136,6 +176,23 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
                     </>
                 )}
             </Card>
+
+            <Modal
+                fade={true}
+                size="lg"
+                toggle={toggleLeaderboardModal}
+                isOpen={modalLeaderboard}>
+                <ModalBody className="gameModalBody">
+                    <CardGroup>
+                        <Card className="data-card">
+                            <CardHeader tag="h2">Leaderboard</CardHeader>
+                            <CardBody>
+                                <Leaderboard />
+                            </CardBody>
+                        </Card>
+                    </CardGroup>
+                </ModalBody>
+            </Modal>
         </Col>
     )
 }

diff --git 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">
                 <Row>
                     <Col className="nav-col">
-                        <Dropdown isOpen={showDropdown} toggle={toggleDropdown}>
+                        <Dropdown
+                            isOpen={showDropdown}
+                            toggle={toggleDropdown}
+                            className="custom-dropdown"
+                            direction="down">
                             <DropdownToggle data-toggle="dropdown" tag="span">
                                 <img
-                                    alt={myProfile.name}
-                                    src={myProfile.picture}
-                                    className="avatar clickable"
+                                    src={MenuButton}
+                                    className="nav-menu-button clickable"
                                     onClick={() => setShowDropdown(true)}
                                 />
                             </DropdownToggle>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -14,9 +14,6 @@ const Layout = () => {
     const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0()
 
     useEffect(() => {
-        console.log(
-            `DAITHI: isLoading: ${isLoading} isAuthenticated: ${isAuthenticated}`,
-        )
         if (!isLoading && !isAuthenticated)
             loginWithRedirect({
                 authorizationParams: {