Merge pull request #168 from daithihearn/player-order

Player order
daithihearn · May 20, 2023 · e5d805a · e5d805a
2 parents b8b3682 + f8a7485
commit e5d805a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.0.5",
+    "version": "7.0.6",
     "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": "7.0.5",
+  "version": "7.0.6",
   "icons": [
     {
       "src": "./assets/favicon.png",

diff --git a/src/components/StartNewGame/StartNewGame.tsx b/src/components/StartNewGame/StartNewGame.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 
 import GameService from "services/GameService"
 import { getPlayerProfiles } from "caches/PlayerProfilesSlice"
@@ -40,6 +40,16 @@ const StartNewGame = () => {
         [],
     )
 
+    const orderedPlayers = useMemo(() => {
+        if (!allPlayers || allPlayers.length < 1) return []
+        // Sort by last lastAccess which is a string timestamp in the form 1970-01-01T00:00:00
+        return [...allPlayers].sort((a, b) => {
+            const aDate = new Date(a.lastAccess)
+            const bDate = new Date(b.lastAccess)
+            return bDate.getTime() - aDate.getTime()
+        })
+    }, [allPlayers])
+
     const togglePlayer = useCallback(
         (player: PlayerProfile) => {
             if (selectedPlayers.includes(player)) {
@@ -150,7 +160,7 @@ const StartNewGame = () => {
                                         </TableRow>
                                     </TableHead>
                                     <TableBody>
-                                        {allPlayers.map(player => (
+                                        {orderedPlayers.map(player => (
                                             <TableRow
                                                 key={player.id}
                                                 onClick={() =>
@@ -176,13 +186,6 @@ const StartNewGame = () => {
                                                             src={player.picture}
                                                             className="avatar-large"
                                                         />
-                                                        <span>
-                                                            <b>
-                                                                {FormatName(
-                                                                    player.name,
-                                                                )}
-                                                            </b>
-                                                        </span>
                                                     </div>
                                                 </TableCell>
                                                 <TableCell>