Implementing effects. Closes #2 (#19)

Co-authored-by: osiu97 <osiu97@gmail.com>
Reviewed-on: #19

web/js/sections/board-control.js

@@ -132,9 +132,12 @@ function buildHTML() {
               <label class="form-label">Movement Mode</label>
               <select id="mode-select" class="form-input" style="width:100%;">
                 <option value="direct">Direct (Normal)</option>
-                <option value="erratic">Erratic (Coming Soon)</option>
-                <option value="random">Random (Coming Soon)</option>
-                <option value="snaky">Snaky (Coming Soon)</option>
+                <option value="snaky">Snaky</option>
+                <option value="erratic">Erratic</option>
+                <option value="jumpy">Jumpy</option>
+                <option value="hesitant">Hesitant</option>
+                <option value="overshoot">Overshoot</option>
+                <option value="random">Random</option>
               </select>
             </div>
 

web/js/sections/input-text.js

@@ -128,6 +128,19 @@ function buildHTML() {
                 <option value="portrait-right">Right Side Test (Portrait)</option>
               </select>
             </div>
+            
+            <div class="form-group" style="margin-bottom: 12px;">
+              <label class="form-label">Movement Mode</label>
+              <select id="text-mode-select" class="form-input" style="width:100%;">
+                <option value="direct">Direct (Normal)</option>
+                <option value="snaky">Snaky</option>
+                <option value="erratic">Erratic</option>
+                <option value="jumpy">Jumpy</option>
+                <option value="hesitant">Hesitant</option>
+                <option value="overshoot">Overshoot</option>
+                <option value="random">Random</option>
+              </select>
+            </div>
 
             <!-- Settings -->
             <div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); margin-bottom: 12px;">
@@ -264,9 +277,11 @@ function delay(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-async function executeMove(spot) {
+async function executeMove(spot, forceDirect = false) {
   UI.log(`Spelling: ${spot.label}`, 'info');
-  return await Motion.goto(spot.x, spot.y);
+  const modeEl = document.getElementById('text-mode-select');
+  const mode = forceDirect ? 'direct' : (modeEl ? modeEl.value : 'direct');
+  return await Motion.goto(spot.x, spot.y, mode);
 }
 
 async function spellText(text) {
@@ -298,7 +313,7 @@ async function spellText(text) {
     const spot = spots.find(s => s.id.toUpperCase() === char);
     
     if (spot) {
-      await executeMove(spot);
+      await executeMove(spot, i === 0);
       // Wait for delay
       await delay(Settings.delay);
     } else {

web/js/sections/sequence-editor.js

@@ -261,6 +261,19 @@ function buildHTML() {
               </select>
               <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 4px;">Provides available spots for the editor.</div>
             </div>
+            
+            <div class="form-group" style="margin-bottom: 12px;">
+              <label class="form-label">Global Movement Mode</label>
+              <select id="seq-mode-select" class="form-input" style="width:100%;">
+                <option value="direct">Direct (Normal)</option>
+                <option value="snaky">Snaky</option>
+                <option value="erratic">Erratic</option>
+                <option value="jumpy">Jumpy</option>
+                <option value="hesitant">Hesitant</option>
+                <option value="overshoot">Overshoot</option>
+                <option value="random">Random</option>
+              </select>
+            </div>
 
             <div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm);">
               <div class="setting-row">
@@ -671,8 +684,11 @@ export default {
       btnPlay.style.display = 'none';
       btnStop.style.display = 'inline-block';
       
+      const modeEl = document.getElementById('seq-mode-select');
+      const mode = modeEl ? modeEl.value : 'direct';
+      
       await sendSettings();
-      await SequenceRunner.run(sequence, spots, steps1, steps2, (s1, s2) => {
+      await SequenceRunner.run(sequence, spots, steps1, steps2, mode, (s1, s2) => {
         steps1 = s1; steps2 = s2;
         updatePositionReadout();
       });

web/js/sections/stepper-test.js

@@ -195,7 +195,10 @@ async function moveToXY(targetX, targetY) {
     return false;
   }
 
-  return await Motion.goto(targetX, targetY);
+  const modeEl = document.getElementById('test-mode-select');
+  const mode = modeEl ? modeEl.value : 'direct';
+
+  return await Motion.goto(targetX, targetY, mode);
 }
 
 // ─────────────────────────────────────────────────────────────────
@@ -526,6 +529,17 @@ function buildHTML() {
         <div class="card">
           <div class="card-header"><span class="card-title">Move to XY</span></div>
           <div style="display:flex;flex-direction:column;gap:8px">
+            <div class="form-group" style="margin-bottom: 4px;">
+              <select id="test-mode-select" class="form-input" style="width:100%; font-size: 0.9rem;">
+                <option value="direct">Effect: Direct</option>
+                <option value="snaky">Effect: Snaky</option>
+                <option value="erratic">Effect: Erratic</option>
+                <option value="jumpy">Effect: Jumpy</option>
+                <option value="hesitant">Effect: Hesitant</option>
+                <option value="overshoot">Effect: Overshoot</option>
+                <option value="random">Effect: Random</option>
+              </select>
+            </div>
             <div style="display:flex;gap:6px;align-items:center">
               <label class="form-label" style="width:18px">X</label>
               <input class="form-input" type="number" id="input-x"