feat: play/quit character

Author: KatoakDR

electron/renderer/components/sidebar/characters/sidebar-item-characters.tsx

@@ -10,6 +10,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import {
   usePlayCharacter,
+  useQuitCharacter,
   useRemoveCharacter,
   useSaveCharacter,
 } from '../../../hooks/characters.jsx';
@@ -32,6 +33,7 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
 
   // Hooks to manage characters.
   const playCharacter = usePlayCharacter();
+  const quitCharacter = useQuitCharacter();
   const saveCharacter = useSaveCharacter();
   const removeCharacter = useRemoveCharacter();
 
@@ -75,14 +77,24 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
       runInBackground(async () => {
         closeModals();
         setCharacter(character);
-        // TODO navigate to game grid so user can play the character
-        alert('Play character: ' + character.characterName);
         await playCharacter(character);
+        // TODO navigate to game grid so user can play the character
       });
     },
     [closeModals, playCharacter]
   );
 
+  const onQuitCharacterClick = useCallback(
+    (character: Character) => {
+      runInBackground(async () => {
+        closeModals();
+        setCharacter(character);
+        await quitCharacter();
+      });
+    },
+    [closeModals, quitCharacter]
+  );
+
   const onCharacterSaveConfirm = useCallback(
     (data: ModalAddCharacterConfirmData) => {
       runInBackground(async () => {
@@ -143,6 +155,7 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
 
       <TableListCharacters
         onPlayCharacterClick={onPlayCharacterClick}
+        onQuitCharacterClick={onQuitCharacterClick}
         onEditCharacterClick={onEditCharacterClick}
         onRemoveCharacterClick={onRemoveCharacterClick}
       />

electron/renderer/components/sidebar/characters/table-list-characters.tsx

@@ -9,10 +9,14 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import groupBy from 'lodash-es/groupBy.js';
+import isEqual from 'lodash-es/isEqual.js';
 import isNil from 'lodash-es/isNil.js';
 import type { ReactElement, ReactNode } from 'react';
 import { Fragment, memo, useMemo } from 'react';
-import { useListCharacters } from '../../../hooks/characters.jsx';
+import {
+  useGetPlayingCharacter,
+  useListCharacters,
+} from '../../../hooks/characters.jsx';
 import { GameCodeLabels } from '../../../lib/game/game-code-labels.js';
 import type { Character } from '../../../types/game.types.js';
 
@@ -24,6 +28,7 @@ interface TableByGameCode {
 
 export interface TableListCharactersProps {
   onPlayCharacterClick: (character: Character) => void;
+  onQuitCharacterClick: (character: Character) => void;
   onEditCharacterClick: (character: Character) => void;
   onRemoveCharacterClick: (character: Character) => void;
 }
@@ -32,13 +37,17 @@ export const TableListCharacters: React.FC<TableListCharactersProps> = memo(
   (props: TableListCharactersProps): ReactNode => {
     const {
       onPlayCharacterClick,
+      onQuitCharacterClick,
       onEditCharacterClick,
       onRemoveCharacterClick,
     } = props;
 
     // All characters to display.
     const characters = useListCharacters();
 
+    // Which character is currently being played?
+    const playingCharacter = useGetPlayingCharacter();
+
     // We'll display the characters grouped by game code.
     const charactersByGameCode = useMemo(() => {
       return groupBy(characters, 'gameCode');
@@ -70,15 +79,27 @@ export const TableListCharacters: React.FC<TableListCharactersProps> = memo(
                 alignItems="center"
               >
                 <EuiFlexItem grow={false}>
-                  <EuiToolTip content="Play" position="bottom">
-                    <EuiButtonIcon
-                      aria-label="Play"
-                      iconType="play"
-                      display="base"
-                      color="success"
-                      onClick={() => onPlayCharacterClick(character)}
-                    />
-                  </EuiToolTip>
+                  {isEqual(playingCharacter, character) ? (
+                    <EuiToolTip content="Quit" position="bottom">
+                      <EuiButtonIcon
+                        aria-label="Quit"
+                        iconType="stopFilled"
+                        display="base"
+                        color="accent"
+                        onClick={() => onQuitCharacterClick(character)}
+                      />
+                    </EuiToolTip>
+                  ) : (
+                    <EuiToolTip content="Play" position="bottom">
+                      <EuiButtonIcon
+                        aria-label="Play"
+                        iconType="playFilled"
+                        display="base"
+                        color="success"
+                        onClick={() => onPlayCharacterClick(character)}
+                      />
+                    </EuiToolTip>
+                  )}
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiToolTip content="Edit" position="bottom">
@@ -107,7 +128,13 @@ export const TableListCharacters: React.FC<TableListCharactersProps> = memo(
           },
         },
       ];
-    }, [onPlayCharacterClick, onEditCharacterClick, onRemoveCharacterClick]);
+    }, [
+      playingCharacter,
+      onPlayCharacterClick,
+      onQuitCharacterClick,
+      onEditCharacterClick,
+      onRemoveCharacterClick,
+    ]);
 
     // Create a table for each game code that has characters.
     const tablesByGameCode = useMemo<Array<TableByGameCode>>(() => {