Fix playpause button not toggling (#5)

Author: megasmack

force-app/main/default/lwc/smsSweeperForceMenuBar/smsSweeperForceMenuBar.html

@@ -3,21 +3,44 @@
     <div class="sms-counter">
       {flaggedMines}
       <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="sms-flag-counter">
-        <path d="m64 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v32 304 112c0 17.7 14.3 32 32 32s32-14.3 32-32v-128l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4 44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30v-247.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0-35.1-17.6-75.4-22-113.5-12.5l-69 17.4z"/>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        class="sms-flag-counter"
+      >
+        <path
+          d="m64 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v32 304 112c0 17.7 14.3 32 32 32s32-14.3 32-32v-128l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4 44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30v-247.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0-35.1-17.6-75.4-22-113.5-12.5l-69 17.4z"
+        />
       </svg>
     </div>
     <div class="sms-counter-container">
-      <button lwc:if={gameInProgress} type="button" class="sms-play-pause-button" onclick={handlePlayPause}>
+      <button
+        lwc:if={gameInProgress}
+        type="button"
+        class="sms-play-pause-button"
+        onclick={handlePlayPause}
+      >
         <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-        <svg lwc:if={timer} viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="m48 64c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-288c0-26.5-21.5-48-48-48zm192 0c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-288c0-26.5-21.5-48-48-48z"/></svg>
+        <svg
+          lwc:if={isTimerRunning}
+          viewBox="0 0 320 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m48 64c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-288c0-26.5-21.5-48-48-48zm192 0c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-288c0-26.5-21.5-48-48-48z"
+          />
+        </svg>
         <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-        <svg lwc:else viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg"><path d="m73 39c-14.8-9.1-33.4-9.4-48.5-.9s-24.5 24.5-24.5 41.9v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41z"/></svg>
+        <svg lwc:else viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="m73 39c-14.8-9.1-33.4-9.4-48.5-.9s-24.5 24.5-24.5 41.9v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41z"
+          />
+        </svg>
       </button>
       <div class="sms-counter">
         {elapsed}
-        <c-sms-clock-icon animate={timer}></c-sms-clock-icon>
+        <c-sms-clock-icon animate={isTimerRunning}></c-sms-clock-icon>
       </div>
     </div>
   </div>
-</template>
+</template>