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

2025-11-19 09:18:02 +00:00 · 2023-07-03 18:05:59 +02:00
parent f6a8aeeb6f
commit d794a1cfdb
12 changed files with 418 additions and 312 deletions
--- a/my-app/.prettierrc
+++ b/my-app/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -44,5 +44,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "prettier": "2.8.8"
  }
 }
--- a/my-app/src/App.tsx
+++ b/my-app/src/App.tsx
@@ -16,16 +16,16 @@ const FullScreenButtonContainer = styled.div`

  @media (orientation: portrait) {
    display: block;
-      height: 80px;
-      width: 80vw;
-      margin: auto;
-      position: relative;
+    height: 80px;
+    width: 80vw;
+    margin: auto;
+    position: relative;
  }
 `;

 const FullscreenButton = styled.button`
  display: none;
-    @media (orientation: portrait) {
+  @media (orientation: portrait) {
    display: block;
    height: 100%;
    width: 100%;
@@ -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>
--- a/my-app/src/Components/Buttons/AddLifeButton.tsx
+++ b/my-app/src/Components/Buttons/AddLifeButton.tsx
@@ -1,5 +1,5 @@
-import { useRef, useState } from "react";
-import styled from "styled-components";
+import { useRef, useState } from 'react';
+import styled from 'styled-components';

 export const StyledLifeCounterButton = styled.button<{ align?: string }>`
  width: 50%;
@@ -12,51 +12,61 @@ 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;
 `;

 type AddLifeButtonProps = {
-    lifeTotal: number;
-    setLifeTotal: (lifeTotal: number) => void;
+  lifeTotal: number;
+  setLifeTotal: (lifeTotal: number) => void;
 };

 const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => {
-    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);

-    const handleLifeChange = (increment: number) => {
-        setLifeTotal(lifeTotal + increment);
-    };
+  const handleLifeChange = (increment: number) => {
+    setLifeTotal(lifeTotal + increment);
+  };

-    const handleDownInput = () => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            handleLifeChange(10);
-            setTimeoutFinished(true);
-        }, 500)
+  const handleDownInput = () => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      handleLifeChange(10);
+      setTimeoutFinished(true);
+    }, 500);
+  };
+
+  const handleUpInput = () => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
    }
+    clearTimeout(timeoutRef.current);
+    handleLifeChange(1);
+    setHasPressedDown(false);
+  };

-    const handleUpInput = () => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handleLifeChange(1);
-        }
-    }
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };

-    return ( 
-        <StyledLifeCounterButton
-            onPointerDown={handleDownInput}
-            onPointerUp={handleUpInput}
-            onTouchCancel={handleDownInput}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                e.preventDefault();
-            }}
-            align="right"
-        >
-            &#43;
-        </StyledLifeCounterButton>
-    );
+  return (
+    <StyledLifeCounterButton
+      onPointerDown={handleDownInput}
+      onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
+      onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+      }}
+      align="right"
+    >
+      &#43;
+    </StyledLifeCounterButton>
+  );
 };

 export default AddLifeButton;
--- a/my-app/src/Components/Buttons/CommanderDamageBar.tsx
+++ b/my-app/src/Components/Buttons/CommanderDamageBar.tsx
@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
-import { Player } from "../../Types/Player";
-import styled from "styled-components";
+import { useRef, useState } from 'react';
+import { Player } from '../../Types/Player';
+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`
@@ -39,136 +39,162 @@ const CommanderDamageButtonText = styled.p`
 `;

 const VerticalSeperator = styled.div`
-    width: 1px;
-    background-color: rgba(0, 0, 0, 1);
+  width: 1px;
+  background-color: rgba(0, 0, 0, 1);
 `;

-
-
 type CommanderDamageBarProps = {
-    lifeTotal: number;
-    setLifeTotal: (lifeTotal: number) => void;
-    opponents: Player[];
+  lifeTotal: number;
+  setLifeTotal: (lifeTotal: number) => void;
+  opponents: Player[];
 };

-const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDamageBarProps) => {
-    const [commanderDamage, setCommanderDamage] = useState<number[]>(
-        Array(opponents.length).fill(0)
-    );
-    const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<number[]>(
-        Array(opponents.length).fill(0)
-    );
+const CommanderDamageBar = ({
+  opponents,
+  lifeTotal,
+  setLifeTotal,
+}: CommanderDamageBarProps) => {
+  const [commanderDamage, setCommanderDamage] = useState<number[]>(
+    Array(opponents.length).fill(0)
+  );
+  const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<
+    number[]
+  >(Array(opponents.length).fill(0));

+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);

-    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const [timeoutFinished, setTimeoutFinished] = useState(false);
-
-    const handleCommanderDamageChange = (index: number, increment: number) => {
-        const currentCommanderDamage = commanderDamage[index];
-        if (currentCommanderDamage === 0 && increment === -1) {
-            return;
-        }
-
-        if (currentCommanderDamage === 21 && increment === 1) {
-            return;
-        }
-
-        const updatedCommanderDamage = [...commanderDamage];
-        updatedCommanderDamage[index] += increment;
-        setCommanderDamage(updatedCommanderDamage);
-        setLifeTotal(lifeTotal - increment);
-    };
-
-    const handlePartnerCommanderDamageChange = (index: number, increment: number) => {
-        const currentPartnerCommanderDamage = partnerCommanderDamage[index];
-        if (currentPartnerCommanderDamage === 0 && increment === -1) {
-            return;
-        }
-
-        const updatedPartnerCommanderDamage = [...partnerCommanderDamage];
-        updatedPartnerCommanderDamage[index] += increment;
-
-        setPartnerCommanderDamage(updatedPartnerCommanderDamage);
-        setLifeTotal(lifeTotal - increment);
-    };
-
-    const handleDownInput = (index: number) => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            setTimeoutFinished(true);
-            handleCommanderDamageChange(index, -1);
-        }, 500)
+  const handleCommanderDamageChange = (index: number, increment: number) => {
+    const currentCommanderDamage = commanderDamage[index];
+    if (currentCommanderDamage === 0 && increment === -1) {
+      return;
    }

-    const handleUpInput = (index: number) => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handleCommanderDamageChange(index, 1);
-        }
-        clearTimeout(timeoutRef.current);
+    if (currentCommanderDamage === 21 && increment === 1) {
+      return;
    }

-    const handlePartnerDownInput = (index: number) => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            setTimeoutFinished(true);
-            handlePartnerCommanderDamageChange(index, -1);
-        }, 500)
+    const updatedCommanderDamage = [...commanderDamage];
+    updatedCommanderDamage[index] += increment;
+    setCommanderDamage(updatedCommanderDamage);
+    setLifeTotal(lifeTotal - increment);
+  };
+
+  const handlePartnerCommanderDamageChange = (
+    index: number,
+    increment: number
+  ) => {
+    const currentPartnerCommanderDamage = partnerCommanderDamage[index];
+    if (currentPartnerCommanderDamage === 0 && increment === -1) {
+      return;
    }

-    const handlePartnerUpInput = (index: number) => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handlePartnerCommanderDamageChange(index, 1);
-        }
+    const updatedPartnerCommanderDamage = [...partnerCommanderDamage];
+    updatedPartnerCommanderDamage[index] += increment;
+
+    setPartnerCommanderDamage(updatedPartnerCommanderDamage);
+    setLifeTotal(lifeTotal - increment);
+  };
+
+  const handleDownInput = (index: number) => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      setTimeoutFinished(true);
+      handleCommanderDamageChange(index, -1);
+    }, 500);
+  };
+
+  const handleUpInput = (index: number) => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
    }
+    clearTimeout(timeoutRef.current);
+    handleCommanderDamageChange(index, 1);
+    setHasPressedDown(false);
+  };

-    return (
-        <CommanderDamageGrid>
-            {opponents.map((opponent, index) => {
-                return (
-                    <CommanderDamageContainer>
-                        <CommanderDamageButton
-                            key={index}
-                            onPointerDown={() => handleDownInput(index)}
-                            onPointerUp={() => handleUpInput(index)}
-                            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                                e.preventDefault();
-                            }
-                            }
-                            backgroundColor={opponent.color}
-                        >
-                            <CommanderDamageButtonText>
-                                {commanderDamage[index] > 0 ? commanderDamage[index] : ""}
-                            </CommanderDamageButtonText>
-                        </CommanderDamageButton>
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };

-                        {opponent.settings.usePartner && (
-                            <>
-                                <VerticalSeperator />
-                                <CommanderDamageButton
-                                    key={index}
-                                    onPointerDown={() => handlePartnerDownInput(index)}
-                                    onPointerUp={() => handlePartnerUpInput(index)}
-                                    onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                                        e.preventDefault();
-                                    }
-                                    }
-                                    backgroundColor={opponent.color}
-                                >
-                                    <CommanderDamageButtonText>
-                                        {partnerCommanderDamage[index] > 0 ? partnerCommanderDamage[index] : ""}
-                                    </CommanderDamageButtonText>
-                                </CommanderDamageButton>
-                            </>
+  const handlePartnerDownInput = (index: number) => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      setTimeoutFinished(true);
+      handlePartnerCommanderDamageChange(index, -1);
+    }, 500);
+  };

-                        )
-                        }
-                    </CommanderDamageContainer>
-                )
-            })}
-        </CommanderDamageGrid>
-    );
+  const handlePartnerUpInput = (index: number) => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
+    clearTimeout(timeoutRef.current);
+    handlePartnerCommanderDamageChange(index, 1);
+    setHasPressedDown(false);
+  };
+
+  const handlePartnerLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
+
+  return (
+    <CommanderDamageGrid>
+      {opponents.map((opponent, index) => {
+        return (
+          <CommanderDamageContainer>
+            <CommanderDamageButton
+              key={index}
+              onPointerDown={() => handleDownInput(index)}
+              onPointerUp={() => handleUpInput(index)}
+              onPointerLeave={handleLeaveInput}
+              onContextMenu={(
+                e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              ) => {
+                e.preventDefault();
+              }}
+              backgroundColor={opponent.color}
+            >
+              <CommanderDamageButtonText>
+                {commanderDamage[index] > 0 ? commanderDamage[index] : ''}
+              </CommanderDamageButtonText>
+            </CommanderDamageButton>
+
+            {opponent.settings.usePartner && (
+              <>
+                <VerticalSeperator />
+                <CommanderDamageButton
+                  key={index}
+                  onPointerDown={() => handlePartnerDownInput(index)}
+                  onPointerUp={() => handlePartnerUpInput(index)}
+                  onPointerLeave={handlePartnerLeaveInput}
+                  onContextMenu={(
+                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                  ) => {
+                    e.preventDefault();
+                  }}
+                  backgroundColor={opponent.color}
+                >
+                  <CommanderDamageButtonText>
+                    {partnerCommanderDamage[index] > 0
+                      ? partnerCommanderDamage[index]
+                      : ''}
+                  </CommanderDamageButtonText>
+                </CommanderDamageButton>
+              </>
+            )}
+          </CommanderDamageContainer>
+        );
+      })}
+    </CommanderDamageGrid>
+  );
 };

 export default CommanderDamageBar;
--- a/my-app/src/Components/Buttons/CommanderTaxButton.tsx
+++ b/my-app/src/Components/Buttons/CommanderTaxButton.tsx
@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
-import CommanderTaxIcon from "../../Icons/CommanderTaxIcon";
-import styled from "styled-components";
+import { useRef, useState } from 'react';
+import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
+import styled from 'styled-components';

 export const StyledCommanderTaxButton = styled.button`
  flex-grow: 1;
@@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button`
 `;

 const CommanderTaxButton = () => {
-    const [commanderTax, setCommanderTax] = useState(0);
+  const [commanderTax, setCommanderTax] = useState(0);

-    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);

-    const handleCommanderTaxChange = (increment: number) => {
-        setCommanderTax(commanderTax + increment);
-    };
+  const handleCommanderTaxChange = (increment: number) => {
+    setCommanderTax(commanderTax + increment);
+  };

-    const handleDownInput = () => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            setTimeoutFinished(true);
-            handleCommanderTaxChange(-1);
-        }, 500)
+  const handleDownInput = () => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      setTimeoutFinished(true);
+      handleCommanderTaxChange(-1);
+    }, 500);
+  };
+
+  const handleUpInput = () => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
    }
+    clearTimeout(timeoutRef.current);
+    handleCommanderTaxChange(1);
+    setHasPressedDown(false);
+  };

-    const handleUpInput = () => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handleCommanderTaxChange(1);
-        }
-    }
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };

-    return (
-        <StyledCommanderTaxButton
-            onPointerDown={handleDownInput}
-            onPointerUp={handleUpInput}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                    e.preventDefault();
-                }
-            }
-        >
-            <CommanderTaxIcon
-                size="8vh"
-                text={commanderTax ? commanderTax : undefined}
-            />
-        </StyledCommanderTaxButton>
-    );
+  return (
+    <StyledCommanderTaxButton
+      onPointerDown={handleDownInput}
+      onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
+      onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+      }}
+    >
+      <CommanderTaxIcon
+        size="8vh"
+        text={commanderTax ? commanderTax : undefined}
+      />
+    </StyledCommanderTaxButton>
+  );
 };

 export default CommanderTaxButton;
--- a/my-app/src/Components/Buttons/PartnerCommanderTaxButton
+++ b/my-app/src/Components/Buttons/PartnerCommanderTaxButton
@@ -1,6 +1,6 @@
-import { useRef, useState } from "react";
-import CommanderTaxIcon from "../../Icons/CommanderTaxIcon";
-import styled from "styled-components";
+import { useRef, useState } from 'react';
+import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
+import styled from 'styled-components';

 export const StyledCommanderTaxButton = styled.button`
  flex-grow: 1;
@@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button`
 `;

 const PartnerCommanderTaxButton = () => {
-    const [partnerCommanderTax, setPartnerCommanderTax] = useState(0);
-    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const [timeoutFinished, setTimeoutFinished] = useState(false);
+  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 handlePartnerCommanderTaxChange = (increment: number) => {
+    setPartnerCommanderTax(partnerCommanderTax + increment);
+  };

+  const handleDownInput = () => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      setTimeoutFinished(true);
+      handlePartnerCommanderTaxChange(-1);
+    }, 500);
+  };

-    const handleDownInput = () => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            setTimeoutFinished(true);
-            handlePartnerCommanderTaxChange(-1);
-        }, 500)
+  const handleUpInput = () => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
    }
+    clearTimeout(timeoutRef.current);
+    handlePartnerCommanderTaxChange(1);
+    setHasPressedDown(false);
+  };

-    const handleUpInput = () => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handlePartnerCommanderTaxChange(1);
-        }
-    }
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };

-    return (
-        <StyledCommanderTaxButton
-            onPointerDown={handleDownInput}
-            onPointerUp={handleUpInput}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                    e.preventDefault();
-                }
-            }
-            >
-            <CommanderTaxIcon
-                size="8vh"
-                text={partnerCommanderTax ? partnerCommanderTax : undefined}
-            /> 2
-        </StyledCommanderTaxButton>
-    );
+  return (
+    <StyledCommanderTaxButton
+      onPointerDown={handleDownInput}
+      onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
+      onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+      }}
+    >
+      <CommanderTaxIcon
+        size="8vh"
+        text={partnerCommanderTax ? partnerCommanderTax : undefined}
+      />{' '}
+      2
+    </StyledCommanderTaxButton>
+  );
 };

 export default PartnerCommanderTaxButton;
--- a/my-app/src/Components/Buttons/SubtractLifeButton.tsx
+++ b/my-app/src/Components/Buttons/SubtractLifeButton.tsx
@@ -1,5 +1,5 @@
-import { useRef, useState } from "react";
-import styled from "styled-components";
+import { useRef, useState } from 'react';
+import styled from 'styled-components';

 export const StyledLifeCounterButton = styled.button<{ align?: string }>`
  width: 50%;
@@ -12,50 +12,64 @@ 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;
 `;

 type SubtractLifeButtonProps = {
-    lifeTotal: number;
-    setLifeTotal: (lifeTotal: number) => void;
+  lifeTotal: number;
+  setLifeTotal: (lifeTotal: number) => void;
 };

-const SubtractLifeButton = ({ lifeTotal, setLifeTotal }: SubtractLifeButtonProps) => {
-    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const [timeoutFinished, setTimeoutFinished] = useState(false);
+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);
-    };
+  const handleLifeChange = (increment: number) => {
+    setLifeTotal(lifeTotal + increment);
+  };

-    const handleDownInput = () => {
-        setTimeoutFinished(false);
-        timeoutRef.current = setTimeout(() => {
-            handleLifeChange(-10);
-            setTimeoutFinished(true);
-        }, 500)
+  const handleDownInput = () => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      handleLifeChange(-10);
+      setTimeoutFinished(true);
+    }, 500);
+  };
+
+  const handleUpInput = () => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
    }
+    clearTimeout(timeoutRef.current);
+    handleLifeChange(-1);
+    setHasPressedDown(false);
+  };

-    const handleUpInput = () => {
-        if (!timeoutFinished) {
-            clearTimeout(timeoutRef.current);
-            handleLifeChange(-1);
-        }
-    }
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };

-    return (
-        <StyledLifeCounterButton
-            onPointerDown={handleDownInput}
-            onPointerUp={handleUpInput}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                e.preventDefault();
-            }}
-            align="left"
-        >
-            &#8722;
-        </StyledLifeCounterButton>
-    );
+  return (
+    <StyledLifeCounterButton
+      onPointerDown={handleDownInput}
+      onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
+      onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+      }}
+      align="left"
+    >
+      &#8722;
+    </StyledLifeCounterButton>
+  );
 };

 export default SubtractLifeButton;
--- a/my-app/src/Components/Counters/Counters.tsx
+++ b/my-app/src/Components/Counters/Counters.tsx
@@ -1,12 +1,14 @@
-import * as S from "./Counters.style";
-import LifeCounter from "../LifeCounter/LifeCounter";
+import { useState } from "react";
 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,15 +18,20 @@ 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>
                        )
                    }
                    return (
                        <S.GridItemContainer>
-                            <LifeCounter backgroundColor={player.color} player={player}  opponents={
+                            <LifeCounter backgroundColor={player.color} player={player} opponents={
                                players.filter((opponent) => opponent.key !== player.key)
-                            } />
+                            }
+                                isAnyButtonsPressed={isAnyButtonsPressed}
+                                setIsAnyButtonsPressed={setIsAnyButtonsPressed}
+                            />
                        </S.GridItemContainer>
                    )
                })}
--- a/my-app/src/Components/LifeCounter/LifeCounter.tsx
+++ b/my-app/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,35 +1,47 @@
-import { useState } from "react";
-import * as S from "./LifeCounter.style";
-import { Player } from "../../Types/Player";
-import CommanderTaxButton from "../Buttons/CommanderTaxButton";
-import PartnerCommanderTaxButton from "../Buttons/PartnerCommanderTaxButton copy";
-import AddLifeButton from "../Buttons/AddLifeButton";
-import SubtractLifeButton from "../Buttons/SubtractLifeButton";
-import CommanderDamageBar from "../Buttons/CommanderDamageBar";
+import { useState } from 'react';
+import * as S from './LifeCounter.style';
+import { Player } from '../../Types/Player';
+import CommanderTaxButton from '../Buttons/CommanderTaxButton';
+import PartnerCommanderTaxButton from '../Buttons/PartnerCommanderTaxButton copy';
+import AddLifeButton from '../Buttons/AddLifeButton';
+import SubtractLifeButton from '../Buttons/SubtractLifeButton';
+import CommanderDamageBar from '../Buttons/CommanderDamageBar';

 type LifeCounterProps = {
-    player: Player;
-    backgroundColor: string;
-    opponents: Player[];
+  player: Player;
+  backgroundColor: string;
+  opponents: Player[];
+  setIsAnyButtonsPressed: (isAnyButtonsPressed: boolean) => void;
+  isAnyButtonsPressed: boolean;
 };

-const LifeCounter = ({ backgroundColor, player, opponents }: LifeCounterProps) => {
-    const [lifeTotal, setLifeTotal] = useState(40);
+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} />
-            <S.LifeCountainer>
-                <SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal}/>
-                    <S.LifeCounterText>{lifeTotal}</S.LifeCounterText>
-                <AddLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
-            </S.LifeCountainer>
-            <S.ExtraCountersGrid>
-                <CommanderTaxButton/>
-                {player.settings.usePartner && <PartnerCommanderTaxButton/>}
-            </S.ExtraCountersGrid>
-        </S.LifeCounterWrapper>
-    );
+  return (
+    <S.LifeCounterWrapper backgroundColor={backgroundColor}>
+      <CommanderDamageBar
+        lifeTotal={lifeTotal}
+        setLifeTotal={setLifeTotal}
+        opponents={opponents}
+      />
+      <S.LifeCountainer>
+        <SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
+        <S.LifeCounterText>{lifeTotal}</S.LifeCounterText>
+        <AddLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
+      </S.LifeCountainer>
+      <S.ExtraCountersGrid>
+        <CommanderTaxButton />
+        {player.settings.usePartner && <PartnerCommanderTaxButton />}
+      </S.ExtraCountersGrid>
+    </S.LifeCounterWrapper>
+  );
 };

 export default LifeCounter;
--- a/my-app/src/Icons/CommanderTaxIcon.tsx
+++ b/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'}}>
-      <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325 325" width={size || 'auto'} height={size || 'auto'}>
+    <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'}
+      >
        <title>CommanderTaxIcon</title>
        <style>{`.s0 { fill: #000000; fill-opacity: 0.5}`}</style>
        <path
--- a/my-app/yarn.lock
+++ b/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"