From 51f9c4d20e8e9974d3d411f45d805e5771cf687a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Fri, 26 Jan 2024 21:24:40 +0100
Subject: [PATCH] initial test

---
 package.json                               |  1 +
 src/Components/LifeCounter/LifeCounter.tsx | 21 +++++++++++++++++++++
 yarn.lock                                  |  5 +++++
 3 files changed, 27 insertions(+)

diff --git a/package.json b/package.json
index 306c2e6..fd50ce2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-screen-wake-lock": "^3.0.2",
+    "react-swipeable": "^7.0.1",
     "react-twc": "^1.3.0",
     "zod": "^3.22.4"
   },
diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx
index 1cf9888..154b5c5 100644
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
@@ -72,6 +73,25 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const [recentDifference, setRecentDifference] = useState(0);
   const [differenceKey, setDifferenceKey] = useState(Date.now());
 
+  const isSide =
+    player.settings.rotation === Rotation.Side ||
+    player.settings.rotation === Rotation.SideFlipped;
+
+  const rotationAngle = isSide
+    ? player.settings.rotation - 180
+    : player.settings.rotation;
+
+  const handlers = useSwipeable({
+    onSwipedDown: (eventData) => {
+      console.log(`User Swiped on player ${player.index}`, eventData);
+      setShowPlayerMenu(!showPlayerMenu);
+    },
+
+    swipeDuration: 500,
+    onSwiping: (eventData) => console.log(eventData),
+    rotationAngle,
+  });
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setRecentDifference(0);
@@ -124,6 +144,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
       <LifeCounterWrapper
         $rotation={player.settings.rotation}
         style={{ rotate: `${calcRotation}deg` }}
+        {...handlers}
       >
         {settings.showStartingPlayer &&
           player.isStartingPlayer &&
diff --git a/yarn.lock b/yarn.lock
index e843103..2deaaa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7125,6 +7125,11 @@ react-screen-wake-lock@^3.0.2:
   resolved "https://registry.yarnpkg.com/react-screen-wake-lock/-/react-screen-wake-lock-3.0.2.tgz#ce185ebfdb74a82c89d532726738f60466f00438"
   integrity sha512-f88vcfMG1AWYRSIWQ5Qx5YVboH6TSL0F4ZlFLERZp6aKiZRGVRAAJ9wedJdO5jqTMcCDZ4OXJ8PjcSkDmvGSBg==
 
+react-swipeable@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
+  integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"