physics-simulations

commit 627e994a5d1378d6b1d7d5f0751248a427454c4e
parent cc6efb5f85f803d3949281a6ed7066256558ebdb
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri,  5 Mar 2021 12:50:28 -0800

Improve control buttons

Diffstat:
M
simulations/atwood-machine.html
 | 
2
+-
M
simulations/circular-motion.html
 | 
2
+-
M
simulations/horizontal-motion.html
 | 
2
+-
M
simulations/styles.css
 | 
4
++++

4 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/simulations/atwood-machine.html b/simulations/atwood-machine.html
@@ -46,7 +46,7 @@
                     <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')" :disabled="Math.abs(displacement) === 3">
                         <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
                     </button>
-                    <button @click="update" class="icon" title="Step Forward" :disabled="Math.abs(displacement) === 3">
+                    <button @click="update" class="icon" title="Step Forward" :disabled="Math.abs(displacement) === 3 || active">
                         <img alt="" src="../images/step-forward.svg">
                     </button>
                     <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
diff --git a/simulations/circular-motion.html b/simulations/circular-motion.html
@@ -42,7 +42,7 @@
                     <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
                         <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
                     </button>
-                    <button @click="update" class="icon" title="Step Forward">
+                    <button @click="update" class="icon" title="Step Forward" :disabled="active">
                         <img alt="" src="../images/step-forward.svg">
                     </button>
                     <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
diff --git a/simulations/horizontal-motion.html b/simulations/horizontal-motion.html
@@ -42,7 +42,7 @@
                     <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
                         <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
                     </button>
-                    <button @click="update" class="icon" title="Step Forward">
+                    <button @click="update" class="icon" title="Step Forward" :disabled="active">
                         <img alt="" src="../images/step-forward.svg">
                     </button>
                     <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
diff --git a/simulations/styles.css b/simulations/styles.css
@@ -12,6 +12,7 @@ div[hidden] {
     display: flex;
     flex-direction: column;
     align-items: center;
+    touch-action: manipulation;
 }
 
 header {
@@ -81,6 +82,9 @@ noscript {
     #output>svg {
         width: 100%;
     }
+    #controls .icon {
+        padding: 10px;
+    }
 }
 @media only screen and (max-width: 350px) {
     header a.icon {