Add play mode

Author: drewyoungren

media/src/form-components/PlayButtons.svelte

@@ -5,6 +5,8 @@
         play = () => {},
         pause,
         rew,
+        clicker = () => {},
+        playMode = 'loop',
         // animate,
     } = $props();
 </script>
@@ -32,6 +34,15 @@
     <button class="btn rewbtn" onclick={rew} aria-label="rewind">
         <i class="fa fa-fast-backward"></i>
     </button>
+    <button class="btn modebtn" onclick={clicker} aria-label="play mode">
+        {#if playMode == 'loop'}
+            <i class="fa fa-retweet"></i>
+        {:else if playMode == 'once'}
+            <i class="fa fa-arrow-right"></i>
+        {:else}
+            <i class="fa fa-arrows-alt-h"></i>
+        {/if}
+    </button>
 </div>
 
 <style>
@@ -43,4 +54,7 @@
     .btn {
         color: white;
     }
+    .modebtn {
+        width: 1rem;
+    }
 </style>

media/src/objects/Point.svelte

@@ -45,6 +45,7 @@
         selectObject,
         animate,
         onClose = () => {},
+        playMode = 'bounce',
     } = $props();
 
     let tau = $state(0);
@@ -106,6 +107,20 @@
     let isDynamic = $derived(dependsOn(params, 't'));
     let isDiscrete = $derived(dependsOn(params, 'n'));
 
+    /**
+     * @type "once"|"loop"|"bounce"
+     */
+    // let playMode = $state('loop');
+    function playModeCycle() {
+        if (playMode == 'once') {
+            playMode = 'loop';
+        } else if (playMode == 'loop') {
+            playMode = 'bounce';
+        } else {
+            playMode = 'once';
+        }
+    }
+
     $effect(() => {
         params;
         updatePoint();
@@ -213,9 +228,25 @@
 
     // texString1 = `t = ${Math.round(100 * T) / 100}`;
 
+    let modeSign = 1;
+
     const update = (dt = 0) => {
-        tau += dt / (t1 - t0);
-        if (tau > 1) tau %= 1;
+        tau += (modeSign * dt) / (t1 - t0);
+        if (tau > 1) {
+            if (playMode == 'loop') {
+                tau %= 1;
+            } else if (playMode == 'once') {
+                tau = 1;
+                animation = false;
+            } else {
+                modeSign = -1;
+                tau = 2 - tau;
+            }
+        }
+        if (tau <= 0) {
+            modeSign = 1;
+            tau *= -1;
+        }
         updatePoint(tVal);
     };
     // Start animating if animation changes (e.g. animating scene published)
@@ -308,6 +339,8 @@
                         tau = 0;
                         update();
                     }}
+                    {playMode}
+                    clicker={playModeCycle}
                 />
                 <!-- </div> -->
             {/if}