process input after enter key

bduhbya · Sep 4, 2024 · 26af5e8 · 26af5e8
1 parent 5ab7088
commit 26af5e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/app/components/CombatTracker.tsx b/src/app/components/CombatTracker.tsx
@@ -50,6 +50,7 @@ const CombatTracker: React.FC<CombatTrackerProps> = ({SetCharacterFile}) => {
             fileReference: file,
             dynamicData: jsonData,
             initiative: 0,
+            initiativeDisplay: 0,
             active: false,
           });
         } catch (error) {
@@ -86,12 +87,19 @@ const CombatTracker: React.FC<CombatTrackerProps> = ({SetCharacterFile}) => {
     setPendingCharacter(null);
   };
 
-  const handleInitiativeChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+  const handleInitiativeInputChange = (initiative: string, index: number) => {
     const newCombatCharacters = [...combatCharacters];
     var newInitiative = 0;
-    if (!isNaN(parseInt(e.target.value, 10))) {
-      newInitiative = parseInt(e.target.value, 10);
+    if (initiative !== '') {
+      newInitiative = parseInt(initiative);
     }
+    newCombatCharacters[index].initiativeDisplay = newInitiative;
+    setCombatCharacters(newCombatCharacters);
+  }
+
+  const handleInitiativeChange = (index: number) => {
+    const newCombatCharacters = [...combatCharacters];
+    const newInitiative = newCombatCharacters[index].initiativeDisplay;
     newCombatCharacters[index].initiative = newInitiative;
     setCombatCharacters(newCombatCharacters);
   }
@@ -190,10 +198,15 @@ const CombatTracker: React.FC<CombatTrackerProps> = ({SetCharacterFile}) => {
               <td className="border p-2">{character.name}</td>
               <td className="border p-2">
                 <input
-                  type="text"
+                  type="number"
                   className="w-full p-1 border rounded bg-white dark:bg-gray-800 text-black dark:text-white"
-                  value={character.initiative}
-                  onChange={(e) => handleInitiativeChange(e, index)}
+                  value={character.initiativeDisplay}
+                  onChange={(e) => handleInitiativeInputChange(e.target.value, index)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleInitiativeChange(index);
+                    }
+                  }}
                 />
               </td>
             </tr>

diff --git a/src/app/components/InitiativeInputDialog.tsx b/src/app/components/InitiativeInputDialog.tsx
@@ -26,6 +26,7 @@ const InitiativeInputDialog: React.FC<InitiativeInputDialogProps> = ({
       ...character,
       name: name,
       initiative: initiative,
+      initiativeDisplay: initiative
     };
     onConfirm(newCharacter, SetCharacterFile);
   };

diff --git a/src/app/lib/definitions.ts b/src/app/lib/definitions.ts
@@ -1,6 +1,7 @@
 export class Character {
   name!: string;
   initiative!: number;
+  initiativeDisplay!: number;
   fileReference!: File;
   active!: boolean;
   // TODO: remove this field and read the dynamic data from the fileReference