feat: disable controls when dragging (#247)

- additionally splits up control panel into separate components
thenick775 · Jan 20, 2025 · e49c9a0 · e49c9a0
1 parent 50aab09
commit e49c9a0
Show file tree

Hide file tree

Showing 7 changed files with 415 additions and 375 deletions.
diff --git a/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap b/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
@@ -8,29 +8,15 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
   padding: inherit;
 }
 
-.c0 {
-  background-color: #4f555a;
-  list-style: none;
-  padding: 10px;
-  margin: 0;
-  max-width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 10px 10px;
-  grid-template-areas: '. . . .' 'volume volume fastForward fastForward';
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  gap: 10px;
+.c1 {
+  display: contents;
 }
 
-.c1 {
+.c4 {
   display: contents;
 }
 
-.c3 {
+.c5 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -43,21 +29,11 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  border: none;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.c3:active {
-  color: #1c76fd;
+  grid-area: volume;
+  max-height: 40px;
 }
 
-.c5 {
+.c7 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -70,11 +46,20 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  grid-area: volume;
+  grid-area: fastForward;
   max-height: 40px;
 }
 
-.c7 {
+.c6 {
+  flex-grow: 1;
+}
+
+.c6 >.MuiSlider-markActive {
+  opacity: 1;
+  background-color: currentColor;
+}
+
+.c3 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -87,45 +72,60 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  grid-area: fastForward;
-  max-height: 40px;
+  border: none;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
 }
 
-.c6 {
-  flex-grow: 1;
+.c3:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.c6 >.MuiSlider-markActive {
-  opacity: 1;
-  background-color: currentColor;
+.c3:active {
+  color: #1c76fd;
 }
 
-.c4 {
-  display: contents;
+.c0 {
+  background-color: #4f555a;
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 10px 10px;
+  grid-template-areas: '. . . .' 'volume volume fastForward fastForward';
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: 10px;
 }
 
 @media only screen and (min-width: 600px) {
-  .c3 {
+  .c5 {
     width: auto;
   }
 }
 
-@media only screen and (max-height: 450px) and (max-width: 1000px) and (orientation: landscape) {
-  .c3 {
-    flex-shrink: 1;
-    min-width: unset;
+@media only screen and (min-width: 600px) {
+  .c7 {
+    width: auto;
   }
 }
 
 @media only screen and (min-width: 600px) {
-  .c5 {
+  .c3 {
     width: auto;
   }
 }
 
-@media only screen and (min-width: 600px) {
-  .c7 {
-    width: auto;
+@media only screen and (max-height: 450px) and (max-width: 1000px) and (orientation: landscape) {
+  .c3 {
+    flex-shrink: 1;
+    min-width: unset;
   }
 }
 
@@ -143,7 +143,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
     >
       <button
         aria-label="Play"
-        class="c2 c3 noDrag"
+        class="c2 c3"
         id=":ra:--play"
       >
         <svg
@@ -166,7 +166,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
     >
       <button
         aria-label="Quit Game"
-        class="c2 c3 noDrag"
+        class="c2 c3"
         id=":ra:--quit-game"
       >
         <svg
@@ -547,24 +547,15 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
   padding: inherit;
 }
 
-.c0 {
-  background-color: #4f555a;
-  list-style: none;
-  padding: 10px;
-  margin: 0;
-  max-width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 10px 10px;
-  grid-template-areas: '. . . .' 'volume volume fastForward fastForward';
+.c1 {
+  display: contents;
 }
 
-.c1 {
+.c4 {
   display: contents;
 }
 
-.c3 {
+.c5 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -577,21 +568,11 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  border: none;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.c3:active {
-  color: #1c76fd;
+  grid-area: volume;
+  max-height: 40px;
 }
 
-.c5 {
+.c7 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -604,11 +585,20 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  grid-area: volume;
+  grid-area: fastForward;
   max-height: 40px;
 }
 
-.c7 {
+.c6 {
+  flex-grow: 1;
+}
+
+.c6 >.MuiSlider-markActive {
+  opacity: 1;
+  background-color: currentColor;
+}
+
+.c3 {
   cursor: pointer;
   background-color: #a9a9a9;
   border-radius: 0.25rem;
@@ -621,45 +611,55 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
   justify-content: center;
   color: #000;
   width: 100%;
-  grid-area: fastForward;
-  max-height: 40px;
+  border: none;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
 }
 
-.c6 {
-  flex-grow: 1;
+.c3:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.c6 >.MuiSlider-markActive {
-  opacity: 1;
-  background-color: currentColor;
+.c3:active {
+  color: #1c76fd;
 }
 
-.c4 {
-  display: contents;
+.c0 {
+  background-color: #4f555a;
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 10px 10px;
+  grid-template-areas: '. . . .' 'volume volume fastForward fastForward';
 }
 
 @media only screen and (min-width: 600px) {
-  .c3 {
+  .c5 {
     width: auto;
   }
 }
 
-@media only screen and (max-height: 450px) and (max-width: 1000px) and (orientation: landscape) {
-  .c3 {
-    flex-shrink: 1;
-    min-width: unset;
+@media only screen and (min-width: 600px) {
+  .c7 {
+    width: auto;
   }
 }
 
 @media only screen and (min-width: 600px) {
-  .c5 {
+  .c3 {
     width: auto;
   }
 }
 
-@media only screen and (min-width: 600px) {
-  .c7 {
-    width: auto;
+@media only screen and (max-height: 450px) and (max-width: 1000px) and (orientation: landscape) {
+  .c3 {
+    flex-shrink: 1;
+    min-width: unset;
   }
 }
 
@@ -677,7 +677,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
     >
       <button
         aria-label="Play"
-        class="c2 c3 noDrag"
+        class="c2 c3"
         id=":r5:--play"
       >
         <svg
@@ -700,7 +700,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
     >
       <button
         aria-label="Quit Game"
-        class="c2 c3 noDrag"
+        class="c2 c3"
         id=":r5:--quit-game"
       >
         <svg