sus

scripts/filldb/players.ts

@@ -22,6 +22,15 @@ export const createPlayers = async (parsedTeams: TeamWithRef[], pb: PocketBase)
             });
             insertedRefs.push(inserted.id);
         }
+
+        // unknown member
+        const amogus = await playersColl.create({
+            name: '\u0d9e',
+            goals: [],
+            team: team.dbRef,
+        });
+        insertedRefs.push(amogus.id);
+
         updatedTeams.push({
             ...team,
             memberRefs: insertedRefs,

src/components/team-view.tsx

@@ -12,6 +12,8 @@ type TeamProps = {
     team: Team,
 };
 
+const AMOGUS = '\u0d9e';
+
 export const TeamView: React.FC<TeamProps> = props => {
     const { players } = useGameLogic();
 
@@ -20,21 +22,33 @@ export const TeamView: React.FC<TeamProps> = props => {
     } = props;
 
     const members = useMemo(() => {
-        return players.filter(player => player.team === team.id).sort((a, b) => a.goals.length - b.goals.length);
+        return players.filter(player => player.team === team.id);
     }, [players, team.id]);
 
     const totalGoals = useMemo(() => {
         return members.map(m => m.goals.length).reduce((prev, curr) => prev + curr, 0);
     }, [members]);
 
+    const membersShown = useMemo(() => {
+        const amogus = members.find(m => m.name === AMOGUS);
+        if (amogus && amogus.goals.length > 0) {
+            return [
+                ...members.filter(m => m.name !== AMOGUS).sort((a, b) => b.goals.length - a.goals.length),
+                amogus,
+            ];
+        } else {
+            return members.filter(m => m.name !== AMOGUS).sort((a, b) => b.goals.length - a.goals.length);
+        }
+    }, [members]);
+
     return (
         <Card className={team.teachers ? 'border border-warning border-4 my-3' : 'my-3'}>
             <Card.Header as="h5">{team.name}</Card.Header>
             <Card.Body className='pb-0'>
                 <Table>
                     <tbody>
-                        {members.map((member, idx) => (
-                            <PlayerRow player={member} last={idx === members.length-1} key={member.id}/>
+                        {membersShown.map((member, idx) => (
+                            <PlayerRow player={member} last={idx === membersShown.length-1} key={member.id}/>
                         ))}
                     </tbody>
                     <tfoot>

src/pages/admin/home.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { useAuth } from 'pocketbase-react/src';
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 import Stack from 'react-bootstrap/Stack';
@@ -33,6 +34,8 @@ export const AdminHomePage: React.FC = () => {
         finishGame,
     } = useAdminLogic();
 
+    const { actions } = useAuth();
+
     const [showGameNo, setShowGameNo] = useState(gameState.currentGameNo);
 
     const [shownGame, team1, team2] = useMemo(() => {
@@ -152,6 +155,7 @@ export const AdminHomePage: React.FC = () => {
                     </Table>
                 </Card>
             )}
+            <Button variant="danger" onClick={() => actions.signOut()}>log out</Button>
         </div>
     );
 };