Merge pull request #82 from daithihearn/bugfix11

Fixing default sorting on tables
daithihearn · Jan 15, 2023 · ceba122 · ceba122
2 parents fc94083 + effc04e
commit ceba122
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 48 deletions.
diff --git a/src/components/Game/GameOver.tsx b/src/components/Game/GameOver.tsx
@@ -5,14 +5,12 @@ import Leaderboard from "../Leaderboard/Leaderboard"
 const GameOver = () => {
     return (
         <CardGroup>
-            <Card color="secondary" className="p-6">
+            <Card className="p-6 data-card">
                 <CardHeader className="cardAreaHeaderContainer" tag="h2">
                     Game Over
                 </CardHeader>
                 <CardBody>
-                    <Container>
-                        <Leaderboard />
-                    </Container>
+                    <Leaderboard />
                 </CardBody>
             </Card>
         </CardGroup>

diff --git a/src/components/Game/GameWrapper.tsx b/src/components/Game/GameWrapper.tsx
@@ -19,10 +19,7 @@ const GameWrapper = () => {
             <WebsocketManager />
             <AutoActionManager />
 
-            <Card
-                className="p-6 tableCloth"
-                inverse
-                style={{ backgroundColor: "#333", borderColor: "#333" }}>
+            <Card className="p-6" inverse>
                 <PlayersAndCards />
 
                 {!iamSpectator ? <MyCards /> : null}

diff --git a/src/components/Game/ThrowCardsWarningModal.tsx b/src/components/Game/ThrowCardsWarningModal.tsx
@@ -51,12 +51,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
             </ModalHeader>
             <ModalBody className="called-modal">
                 <CardGroup className="gameModalCardGroup">
-                    <CardComponent
-                        className="p-6 tableCloth"
-                        style={{
-                            backgroundColor: "#333",
-                            borderColor: "#333",
-                        }}>
+                    <CardComponent className="p-6">
                         <CardBody className="cardArea">
                             {cards.map(card => (
                                 <img

diff --git a/src/components/GameStats/GameStats.tsx b/src/components/GameStats/GameStats.tsx
@@ -57,7 +57,7 @@ const GameStats = () => {
 
     return (
         <CardGroup>
-            <Card color="secondary" className="p-6">
+            <Card className="p-6 data-card">
                 <CardHeader tag="h2">My Stats </CardHeader>
                 <CardBody>
                     {!!stats && stats.length > 0 ? (

diff --git a/src/components/Leaderboard/DoublesLeaderboard.tsx b/src/components/Leaderboard/DoublesLeaderboard.tsx
@@ -7,6 +7,7 @@ import { getPlayerProfiles } from "../../caches/PlayerProfilesSlice"
 import { GameStatus } from "../../model/Game"
 import { compareScore, compareTeamIds } from "../../utils/PlayerUtils"
 import { Player, Team } from "../../model/Player"
+import { customStyles } from "../Tables/CustomStyles"
 
 const DoublesLeaderboard = () => {
     const game = useAppSelector(getGame)
@@ -196,7 +197,9 @@ const DoublesLeaderboard = () => {
                 data={teams}
                 columns={columns}
                 highlightOnHover
-                defaultSortFieldId="score"
+                customStyles={customStyles}
+                defaultSortFieldId={3}
+                defaultSortAsc={false}
             />
         </React.Fragment>
     )

diff --git a/src/components/Leaderboard/LeaderboardModal.tsx b/src/components/Leaderboard/LeaderboardModal.tsx
@@ -1,6 +1,14 @@
 import { useCallback, useState } from "react"
 
-import { Modal, ModalBody, Button } from "reactstrap"
+import {
+    Modal,
+    ModalBody,
+    Button,
+    CardGroup,
+    Card,
+    CardHeader,
+    CardBody,
+} from "reactstrap"
 
 import Leaderboard from "../Leaderboard/Leaderboard"
 
@@ -31,7 +39,14 @@ const LeaderboardModal = () => {
                 toggle={toggleLeaderboardModal}
                 isOpen={modalLeaderboard}>
                 <ModalBody className="gameModalBody">
-                    <Leaderboard />
+                    <CardGroup>
+                        <Card className="data-card">
+                            <CardHeader tag="h2">Leaderboard</CardHeader>
+                            <CardBody>
+                                <Leaderboard />
+                            </CardBody>
+                        </Card>
+                    </CardGroup>
                 </ModalBody>
             </Modal>
         </>

diff --git a/src/components/Leaderboard/SinglesLeaderboard.tsx b/src/components/Leaderboard/SinglesLeaderboard.tsx
@@ -6,6 +6,7 @@ import { useAppSelector } from "../../caches/hooks"
 import { getPlayerProfiles } from "../../caches/PlayerProfilesSlice"
 import { GameStatus } from "../../model/Game"
 import { Player } from "../../model/Player"
+import { customStyles } from "../Tables/CustomStyles"
 
 interface LeaderboardItem {
     previousCard?: string
@@ -129,7 +130,9 @@ const SinglesLeaderboard = () => {
                 data={leaderboardData}
                 columns={columns}
                 highlightOnHover
-                defaultSortFieldId="score"
+                customStyles={customStyles}
+                defaultSortFieldId={3}
+                defaultSortAsc={false}
             />
         </React.Fragment>
     )

diff --git a/src/components/MyGames/MyGames.tsx b/src/components/MyGames/MyGames.tsx
@@ -25,6 +25,7 @@ import { getMyGames } from "../../caches/MyGamesSlice"
 import { getMyProfile } from "../../caches/MyProfileSlice"
 import { useSnackbar } from "notistack"
 import { Game, GameStatus } from "../../model/Game"
+import { customStyles } from "../Tables/CustomStyles"
 
 const MyGames = () => {
     const dispatch = useAppDispatch()
@@ -143,7 +144,7 @@ const MyGames = () => {
 
     return (
         <CardGroup>
-            <Card color="secondary" className="p-6">
+            <Card className="p-6 data-card">
                 <CardHeader tag="h2">Games</CardHeader>
                 <CardBody>
                     <DataTable
@@ -152,7 +153,8 @@ const MyGames = () => {
                         theme="solarized"
                         data={myGames}
                         columns={columns}
-                        defaultSortFieldId="timestamp"
+                        customStyles={customStyles}
+                        defaultSortFieldId={3}
                         defaultSortAsc={false}
                         highlightOnHover
                     />

diff --git a/src/components/StartNewGame/StartNewGame.tsx b/src/components/StartNewGame/StartNewGame.tsx
@@ -14,11 +14,13 @@ import {
     Card,
     CardBody,
     CardGroup,
+    CardHeader,
 } from "reactstrap"
 
 import { useAppDispatch, useAppSelector } from "../../caches/hooks"
 import { PlayerProfile } from "../../model/Player"
 import { useSnackbar } from "notistack"
+import { customStyles } from "../Tables/CustomStyles"
 
 const StartNewGame = () => {
     const dispatch = useAppDispatch()
@@ -96,14 +98,10 @@ const StartNewGame = () => {
 
     return (
         <CardGroup>
-            <Card color="secondary">
-                <CardBody>
-                    <h1>Start a new game</h1>
-                </CardBody>
+            <Card className="data-card">
+                <CardHeader tag="h2">Start a new game</CardHeader>
                 <CardBody>
                     <FormGroup>
-                        <h3>Players</h3>
-
                         <DataTable
                             noHeader
                             pagination
@@ -112,6 +110,7 @@ const StartNewGame = () => {
                             columns={columns}
                             highlightOnHover
                             selectableRows
+                            customStyles={customStyles}
                             onSelectedRowsChange={togglePlayer}
                         />
 

diff --git a/src/components/Tables/CustomStyles.ts b/src/components/Tables/CustomStyles.ts
@@ -0,0 +1,26 @@
+export const customStyles = {
+    headRow: {
+        style: {
+            border: "none",
+        },
+    },
+    headCells: {
+        style: {
+            color: "#202124",
+            fontSize: "14px",
+        },
+    },
+    rows: {
+        highlightOnHoverStyle: {
+            backgroundColor: "rgb(230, 244, 244)",
+            borderBottomColor: "#FFFFFF",
+            borderRadius: "25px",
+            outline: "1px solid #FFFFFF",
+        },
+    },
+    pagination: {
+        style: {
+            border: "none",
+        },
+    },
+}
diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -2,6 +2,10 @@
     font-family: $fontFamily;
 }
 
+.card {
+    --cui-card-bg: ;
+}
+
 .cardNotSelected {
     opacity: 0.9;
     filter: brightness(70%);
@@ -11,11 +15,6 @@
     filter: drop-shadow(16px 16px 20px red);
 }
 
-.tableCloth {
-    background-image: url("/assets/img/cloth.jpg");
-    min-height: 350px;
-}
-
 // .carpet {
 //   background-image: url("/assets/img/carpet2.jpg");
 // }

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useEffect } from "react"
 
 import { Card, CardGroup, CardHeader } from "reactstrap"
 
@@ -14,6 +14,7 @@ import GameService from "../../services/GameService"
 import { useSnackbar } from "notistack"
 import StatsService from "../../services/StatsService"
 import Loading from "../../components/icons/Loading"
+import { Divider } from "@mui/material"
 
 const Home = () => {
     const dispatch = useAppDispatch()
@@ -44,7 +45,7 @@ const Home = () => {
                     <div className="game_container">
                         {!myProfile.isPlayer && !myProfile.isAdmin ? (
                             <CardGroup>
-                                <Card color="secondary" className="p-6">
+                                <Card className="p-6">
                                     <CardHeader tag="h2">
                                         You are successfully logged in but don't
                                         yet have any access permissions. Please
@@ -55,16 +56,18 @@ const Home = () => {
                         ) : (
                             <div>
                                 {myProfile.isPlayer ? (
-                                    <div>
+                                    <>
                                         <MyGames />
+                                        <Divider />
+                                        <Divider />
+                                        <Divider />
                                         <GameStats />
-                                    </div>
-                                ) : null}
-                                {myProfile.isAdmin ? (
-                                    <div>
-                                        <StartNewGame />
-                                    </div>
+                                        <Divider />
+                                        <Divider />
+                                        <Divider />
+                                    </>
                                 ) : null}
+                                {myProfile.isAdmin ? <StartNewGame /> : null}
                             </div>
                         )}
                     </div>

diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss
@@ -2,25 +2,24 @@
     font-family: $fontFamily;
 }
 .app_body {
-    background-color: $white;
     width: auto;
     flex: 1;
     position: relative;
     font-family: $fontFamily;
 }
 
-.card-group {
-    padding-top: 10px;
-    padding-bottom: 10px;
+.data-card {
+    background-color: $white;
+    opacity: 0.95;
 }
 
+
 .game_wrap {
     min-width: 650px;
     overflow: overlay;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-    background-color: $white;
 }
 
 .game_container {
@@ -545,6 +544,5 @@
 @media (max-width: 277px) {
     .app {
         position: absolute;
-        background: $white;
     }
 }
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -8,7 +8,8 @@ body {
 
 // Here you can add other styles
 .main_content {
-    background-color: $white;
+    background-image: url("/assets/img/cloth.jpg");
+    min-height: 800px;
     position: fixed;
     width: 100%;
     height: 100vh;