diff --git a/package.json b/package.json index 64f20f2..423a647 100644 --- 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 index ac73884..65a779c 100644 --- 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 index a02475c..8df0d26 100644 --- 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 = () => { - {allPlayers.map(player => ( + {orderedPlayers.map(player => ( @@ -176,13 +186,6 @@ const StartNewGame = () => { src={player.picture} className="avatar-large" /> - - - {FormatName( - player.name, - )} - -