Merge pull request #21 from Vikeo/develop

add button to go back to start if render fails

src/App.tsx

@@ -26,6 +26,8 @@ const StartWrapper = styled.div`
 `;
 
 const PlayWrapper = styled.div`
+  position: relative;
+  z-index: 0;
   max-width: fit-content;
   max-height: fit-content;
   @media (orientation: portrait) {
@@ -39,6 +41,16 @@ const removeLocalStorage = async () => {
   localStorage.removeItem('playing');
 };
 
+const EmergencyResetButton = styled.button`
+  width: 100vmax;
+  height: 100vmin;
+  font-size: 4vmax;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  background-color: #4e6815;
+`;
+
 const App = () => {
   const analytics = useAnalytics();
   const savedPlayers = localStorage.getItem('players');
@@ -105,6 +117,12 @@ const App = () => {
             goToStart={goToStart}
             wakeLock={wakeLock}
           />
+          <EmergencyResetButton onClick={goToStart}>
+            <p>If you can see this, something is wrong.</p>
+            <p>Press screen to go to start.</p>
+            <br />
+            <p>If the issue persists, please inform me.</p>
+          </EmergencyResetButton>
         </PlayWrapper>
       ) : (
         <StartWrapper>

src/Components/Counters/Counters.tsx

@@ -28,14 +28,6 @@ export const GridItemContainer = styled.div<{
   grid-area: ${(props) => props.$gridArea};
 `;
 
-export const SettingsButtonContainer = styled.div`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9;
-`;
-
 type CountersProps = {
   players: Player[];
   onPlayerChange: (updatedPlayer: Player) => void;

src/Components/Views/Play.tsx

@@ -4,6 +4,8 @@ import { Player } from '../../Types/Player';
 import { WakeLock } from '../../Types/WakeLock';
 
 const MainWrapper = styled.div`
+  width: 100vmax;
+  height: 100vmin;
   width: 100dvmax;
   height: 100dvmin;
   overflow: hidden;