Merge pull request #24 from remarkablegames/feat/restart

feat: add "Restart" button

Author: remarkablemark

index.html

@@ -52,6 +52,7 @@
         <h1 class="basis-1/2 self-end">Code Arcade</h1>
         <div class="flex justify-between w-1/2">
           <button class="btn-primary">► Run</button>
+          <button class="btn-tertiary">⟳ Restart</button>
           <button class="btn-secondary">ⓘ Hint</button>
         </div>
       </div>
@@ -62,6 +63,7 @@ <h1 class="xl:hidden">Code Arcade</h1>
         <div id="editor"></div>
         <div class="xl:hidden">
           <button class="btn-primary">► Run</button>
+          <button class="btn-tertiary">⟳ Restart</button>
           <button class="btn-secondary">ⓘ Hint</button>
         </div>
       </div>

src/helpers/events.ts

@@ -3,13 +3,15 @@ const audio = new Audio('sounds/score.mp3')
 type Callback = () => void
 
 /**
- * Attaches click listeners to "Run" and "Hint" buttons.
+ * Attaches click listeners to "Run", "Restart", and "Hint" buttons.
  *
  * @param runCallback - Run callback.
+ * @param restartCallback - Restart callback.
  * @param hintCallback - Hint callback.
  */
 export function addEventListeners(
   runCallback: Callback,
+  restartCallback: Callback,
   hintCallback: Callback,
 ) {
   const runButtons = document.querySelectorAll(
@@ -23,6 +25,17 @@ export function addEventListeners(
     }
   })
 
+  const restartButtons = document.querySelectorAll(
+    'main .btn-tertiary',
+  ) as NodeListOf<HTMLButtonElement>
+
+  restartButtons.forEach((restartButton) => {
+    restartButton.onclick = () => {
+      audio.play()
+      restartCallback()
+    }
+  })
+
   const hintButtons = document.querySelectorAll(
     'main .btn-secondary',
   ) as NodeListOf<HTMLButtonElement>

src/scenes/game.ts

@@ -36,12 +36,23 @@ export async function go(levelNumber: number) {
     },
   })
 
+  run()
+
   function run() {
     const script = editorView.state.doc.toString()
     iframe.srcdoc = wrapGame({ ...level, script })
   }
 
-  run()
+  function restart() {
+    editorView.dispatch({
+      changes: {
+        from: 0,
+        to: editorView.state.doc.length,
+        insert: level.script?.trim(),
+      },
+    })
+    run()
+  }
 
   function hint() {
     iframe.contentWindow?.postMessage({
@@ -50,7 +61,7 @@ export async function go(levelNumber: number) {
     })
   }
 
-  addEventListeners(run, hint)
+  addEventListeners(run, restart, hint)
 }
 
 /**

src/style.css

@@ -25,6 +25,10 @@
   .btn-secondary {
     @apply bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded;
   }
+
+  .btn-tertiary {
+    @apply bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 border-b-4 border-yellow-700 hover:border-yellow-500 rounded;
+  }
 }
 
 @layer utilities {