can't click on other buttons if you press a button

my-app/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}

my-app/package.json

@@ -44,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.8.8"
   }
 }

my-app/src/App.tsx

@@ -46,7 +46,6 @@ const TitleText = styled.h1`
   }
 `;
 
-
 const CountersWrapper = styled.div`
   display: flex;
   @media (orientation: portrait) {
@@ -57,7 +56,7 @@ const CountersWrapper = styled.div`
 const players: Player[] = [
   {
     key: 1,
-    color: "grey",
+    color: 'grey',
     settings: {
       useCommanderDamage: true,
       usePartner: true,
@@ -65,11 +64,11 @@ const players: Player[] = [
       useExperience: true,
       usePoison: true,
       flipped: true,
-    }
+    },
   },
   {
     key: 2,
-    color: "mintcream",
+    color: 'mintcream',
     settings: {
       useCommanderDamage: true,
       usePartner: false,
@@ -77,11 +76,11 @@ const players: Player[] = [
       useExperience: true,
       usePoison: true,
       flipped: true,
-    }
+    },
   },
   {
     key: 3,
-    color: "gold",
+    color: 'gold',
     settings: {
       useCommanderDamage: true,
       usePartner: false,
@@ -89,11 +88,11 @@ const players: Player[] = [
       useExperience: true,
       usePoison: true,
       flipped: false,
-    }
+    },
   },
   {
     key: 4,
-    color: "aquamarine",
+    color: 'aquamarine',
     settings: {
       useCommanderDamage: true,
       usePartner: false,
@@ -101,7 +100,7 @@ const players: Player[] = [
       useExperience: true,
       usePoison: true,
       flipped: false,
-    }
+    },
   },
 ];
 
@@ -122,10 +121,9 @@ function App() {
 
   return (
     <MainWrapper>
-
       <TitleText>
         You need to be in landscape mode to use this app.
-        <hr/>
+        <hr />
         Pressing the fullscreen button is also very recommended.
       </TitleText>
       <FullScreenButtonContainer>

my-app/src/Components/Buttons/AddLifeButton.tsx

@@ -1,5 +1,5 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   width: 50%;
@@ -12,7 +12,7 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   outline: none;
   cursor: pointer;
   padding: 0 28px;
-  text-align: ${props => props.align || "center"};
+  text-align: ${(props) => props.align || 'center'};
   user-select: none;
 `;
 
@@ -24,6 +24,7 @@ type AddLifeButtonProps = {
 const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handleLifeChange = (increment: number) => {
     setLifeTotal(lifeTotal + increment);
@@ -31,24 +32,33 @@ const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => {
 
   const handleDownInput = () => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       handleLifeChange(10);
       setTimeoutFinished(true);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handleUpInput = () => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handleLifeChange(1);
-        }
+    setHasPressedDown(false);
-    }
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
 
   return (
     <StyledLifeCounterButton
       onPointerDown={handleDownInput}
       onPointerUp={handleUpInput}
-            onTouchCancel={handleDownInput}
+      onPointerLeave={handleLeaveInput}
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
       }}

my-app/src/Components/Buttons/CommanderDamageBar.tsx

@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
-import { Player } from "../../Types/Player";
+import { Player } from '../../Types/Player';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const CommanderDamageGrid = styled.div`
   display: flex;
@@ -23,7 +23,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
   height: 10vh;
   outline: none;
   cursor: pointer;
-  background-color: ${props => props.backgroundColor || "antiquewhite"}; 
+  background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
 `;
 
 const CommanderDamageButtonText = styled.p`
@@ -43,25 +43,27 @@ const VerticalSeperator = styled.div`
   background-color: rgba(0, 0, 0, 1);
 `;
 
-
-
 type CommanderDamageBarProps = {
   lifeTotal: number;
   setLifeTotal: (lifeTotal: number) => void;
   opponents: Player[];
 };
 
-const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDamageBarProps) => {
+const CommanderDamageBar = ({
+  opponents,
+  lifeTotal,
+  setLifeTotal,
+}: CommanderDamageBarProps) => {
   const [commanderDamage, setCommanderDamage] = useState<number[]>(
     Array(opponents.length).fill(0)
   );
-    const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<number[]>(
+  const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<
-        Array(opponents.length).fill(0)
+    number[]
-    );
+  >(Array(opponents.length).fill(0));
-
 
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handleCommanderDamageChange = (index: number, increment: number) => {
     const currentCommanderDamage = commanderDamage[index];
@@ -79,7 +81,10 @@ const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDam
     setLifeTotal(lifeTotal - increment);
   };
 
-    const handlePartnerCommanderDamageChange = (index: number, increment: number) => {
+  const handlePartnerCommanderDamageChange = (
+    index: number,
+    increment: number
+  ) => {
     const currentPartnerCommanderDamage = partnerCommanderDamage[index];
     if (currentPartnerCommanderDamage === 0 && increment === -1) {
       return;
@@ -94,34 +99,51 @@ const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDam
 
   const handleDownInput = (index: number) => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
       handleCommanderDamageChange(index, -1);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handleUpInput = (index: number) => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handleCommanderDamageChange(index, 1);
-        }
+    setHasPressedDown(false);
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
     clearTimeout(timeoutRef.current);
-    }
+    setHasPressedDown(false);
+  };
 
   const handlePartnerDownInput = (index: number) => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
       handlePartnerCommanderDamageChange(index, -1);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handlePartnerUpInput = (index: number) => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handlePartnerCommanderDamageChange(index, 1);
-        }
+    setHasPressedDown(false);
-    }
+  };
+
+  const handlePartnerLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
 
   return (
     <CommanderDamageGrid>
@@ -132,14 +154,16 @@ const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDam
               key={index}
               onPointerDown={() => handleDownInput(index)}
               onPointerUp={() => handleUpInput(index)}
-                            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+              onPointerLeave={handleLeaveInput}
+              onContextMenu={(
+                e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              ) => {
                 e.preventDefault();
-                            }
+              }}
-                            }
               backgroundColor={opponent.color}
             >
               <CommanderDamageButtonText>
-                                {commanderDamage[index] > 0 ? commanderDamage[index] : ""}
+                {commanderDamage[index] > 0 ? commanderDamage[index] : ''}
               </CommanderDamageButtonText>
             </CommanderDamageButton>
 
@@ -150,22 +174,24 @@ const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDam
                   key={index}
                   onPointerDown={() => handlePartnerDownInput(index)}
                   onPointerUp={() => handlePartnerUpInput(index)}
-                                    onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                  onPointerLeave={handlePartnerLeaveInput}
+                  onContextMenu={(
+                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                  ) => {
                     e.preventDefault();
-                                    }
+                  }}
-                                    }
                   backgroundColor={opponent.color}
                 >
                   <CommanderDamageButtonText>
-                                        {partnerCommanderDamage[index] > 0 ? partnerCommanderDamage[index] : ""}
+                    {partnerCommanderDamage[index] > 0
+                      ? partnerCommanderDamage[index]
+                      : ''}
                   </CommanderDamageButtonText>
                 </CommanderDamageButton>
               </>
-
+            )}
-                        )
-                        }
           </CommanderDamageContainer>
-                )
+        );
       })}
     </CommanderDamageGrid>
   );

my-app/src/Components/Buttons/CommanderTaxButton.tsx

@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
-import CommanderTaxIcon from "../../Icons/CommanderTaxIcon";
+import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const StyledCommanderTaxButton = styled.button`
   flex-grow: 1;
@@ -16,6 +16,7 @@ const CommanderTaxButton = () => {
 
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handleCommanderTaxChange = (increment: number) => {
     setCommanderTax(commanderTax + increment);
@@ -23,27 +24,36 @@ const CommanderTaxButton = () => {
 
   const handleDownInput = () => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
       handleCommanderTaxChange(-1);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handleUpInput = () => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handleCommanderTaxChange(1);
-        }
+    setHasPressedDown(false);
-    }
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
 
   return (
     <StyledCommanderTaxButton
       onPointerDown={handleDownInput}
       onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
-                }
+      }}
-            }
     >
       <CommanderTaxIcon
         size="8vh"

my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx

@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
-import CommanderTaxIcon from "../../Icons/CommanderTaxIcon";
+import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const StyledCommanderTaxButton = styled.button`
   flex-grow: 1;
@@ -15,40 +15,50 @@ const PartnerCommanderTaxButton = () => {
   const [partnerCommanderTax, setPartnerCommanderTax] = useState(0);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handlePartnerCommanderTaxChange = (increment: number) => {
     setPartnerCommanderTax(partnerCommanderTax + increment);
   };
 
-
   const handleDownInput = () => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
       handlePartnerCommanderTaxChange(-1);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handleUpInput = () => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handlePartnerCommanderTaxChange(1);
-        }
+    setHasPressedDown(false);
-    }
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
 
   return (
     <StyledCommanderTaxButton
       onPointerDown={handleDownInput}
       onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
-                }
+      }}
-            }
     >
       <CommanderTaxIcon
         size="8vh"
         text={partnerCommanderTax ? partnerCommanderTax : undefined}
-            /> 2
+      />{' '}
+      2
     </StyledCommanderTaxButton>
   );
 };

my-app/src/Components/Buttons/SubtractLifeButton.tsx

@@ -1,5 +1,5 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   width: 50%;
@@ -12,7 +12,7 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   outline: none;
   cursor: pointer;
   padding: 0 28px;
-  text-align: ${props => props.align || "center"};
+  text-align: ${(props) => props.align || 'center'};
   user-select: none;
 `;
 
@@ -21,9 +21,13 @@ type SubtractLifeButtonProps = {
   setLifeTotal: (lifeTotal: number) => void;
 };
 
-const SubtractLifeButton = ({ lifeTotal, setLifeTotal }: SubtractLifeButtonProps) => {
+const SubtractLifeButton = ({
+  lifeTotal,
+  setLifeTotal,
+}: SubtractLifeButtonProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handleLifeChange = (increment: number) => {
     setLifeTotal(lifeTotal + increment);
@@ -31,23 +35,33 @@ const SubtractLifeButton = ({ lifeTotal, setLifeTotal }: SubtractLifeButtonProps
 
   const handleDownInput = () => {
     setTimeoutFinished(false);
+    setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       handleLifeChange(-10);
       setTimeoutFinished(true);
-        }, 500)
+    }, 500);
-    }
+  };
 
   const handleUpInput = () => {
-        if (!timeoutFinished) {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
     clearTimeout(timeoutRef.current);
     handleLifeChange(-1);
-        }
+    setHasPressedDown(false);
-    }
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
 
   return (
     <StyledLifeCounterButton
       onPointerDown={handleDownInput}
       onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
       }}

my-app/src/Components/Counters/Counters.tsx

@@ -1,12 +1,14 @@
-import * as S from "./Counters.style";
+import { useState } from "react";
-import LifeCounter from "../LifeCounter/LifeCounter";
 import { Player } from "../../Types/Player";
+import LifeCounter from "../LifeCounter/LifeCounter";
+import * as S from "./Counters.style";
 
 type CountersProps = {
     players: Player[];
 };
 
 const Counters = ({ players }: CountersProps) => {
+    const [isAnyButtonsPressed, setIsAnyButtonsPressed] = useState(false);
     return (
         <S.CountersWrapper>
             <S.CountersGrid>
@@ -16,7 +18,9 @@ const Counters = ({ players }: CountersProps) => {
                             <S.GridItemContainerFlipped>
                                 <LifeCounter backgroundColor={player.color} player={player} opponents={
                                     players.filter((opponent) => opponent.key !== player.key)
-                                } />
+                                } isAnyButtonsPressed={isAnyButtonsPressed}
+                                    setIsAnyButtonsPressed={setIsAnyButtonsPressed}
+                                />
                             </S.GridItemContainerFlipped>
                         )
                     }
@@ -24,7 +28,10 @@ const Counters = ({ players }: CountersProps) => {
                         <S.GridItemContainer>
                             <LifeCounter backgroundColor={player.color} player={player} opponents={
                                 players.filter((opponent) => opponent.key !== player.key)
-                            } />
+                            }
+                                isAnyButtonsPressed={isAnyButtonsPressed}
+                                setIsAnyButtonsPressed={setIsAnyButtonsPressed}
+                            />
                         </S.GridItemContainer>
                     )
                 })}

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -1,32 +1,44 @@
-import { useState } from "react";
+import { useState } from 'react';
-import * as S from "./LifeCounter.style";
+import * as S from './LifeCounter.style';
-import { Player } from "../../Types/Player";
+import { Player } from '../../Types/Player';
-import CommanderTaxButton from "../Buttons/CommanderTaxButton";
+import CommanderTaxButton from '../Buttons/CommanderTaxButton';
-import PartnerCommanderTaxButton from "../Buttons/PartnerCommanderTaxButton copy";
+import PartnerCommanderTaxButton from '../Buttons/PartnerCommanderTaxButton copy';
-import AddLifeButton from "../Buttons/AddLifeButton";
+import AddLifeButton from '../Buttons/AddLifeButton';
-import SubtractLifeButton from "../Buttons/SubtractLifeButton";
+import SubtractLifeButton from '../Buttons/SubtractLifeButton';
-import CommanderDamageBar from "../Buttons/CommanderDamageBar";
+import CommanderDamageBar from '../Buttons/CommanderDamageBar';
 
 type LifeCounterProps = {
   player: Player;
   backgroundColor: string;
   opponents: Player[];
+  setIsAnyButtonsPressed: (isAnyButtonsPressed: boolean) => void;
+  isAnyButtonsPressed: boolean;
 };
 
-const LifeCounter = ({ backgroundColor, player, opponents }: LifeCounterProps) => {
+const LifeCounter = ({
+  backgroundColor,
+  player,
+  opponents,
+  isAnyButtonsPressed,
+  setIsAnyButtonsPressed,
+}: LifeCounterProps) => {
   const [lifeTotal, setLifeTotal] = useState(40);
 
   return (
     <S.LifeCounterWrapper backgroundColor={backgroundColor}>
-            <CommanderDamageBar lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} opponents={opponents} />
+      <CommanderDamageBar
+        lifeTotal={lifeTotal}
+        setLifeTotal={setLifeTotal}
+        opponents={opponents}
+      />
       <S.LifeCountainer>
-                <SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal}/>
+        <SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
         <S.LifeCounterText>{lifeTotal}</S.LifeCounterText>
         <AddLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
       </S.LifeCountainer>
       <S.ExtraCountersGrid>
-                <CommanderTaxButton/>
+        <CommanderTaxButton />
-                {player.settings.usePartner && <PartnerCommanderTaxButton/>}
+        {player.settings.usePartner && <PartnerCommanderTaxButton />}
       </S.ExtraCountersGrid>
     </S.LifeCounterWrapper>
   );

my-app/src/Icons/CommanderTaxIcon.tsx

@@ -5,8 +5,14 @@ type CommanderTaxIconProps = {
 
 const CommanderTaxIcon = ({ size, text }: CommanderTaxIconProps) => {
   return (
-    <div style={{ position: 'relative', display: 'inline-block'}}>
+    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325 325" width={size || 'auto'} height={size || 'auto'}>
+      <svg
+        version="1.2"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 325 325"
+        width={size || 'auto'}
+        height={size || 'auto'}
+      >
         <title>CommanderTaxIcon</title>
         <style>{`.s0 { fill: #000000; fill-opacity: 0.5}`}</style>
         <path

my-app/yarn.lock

@@ -7594,6 +7594,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"