Add shake screen to explosion. (#6)

Author: megasmack

CHANGELOG.md

@@ -1,5 +1,15 @@
 # SMS - SweeperForce Changelog
 
+## v1.0.2
+
+### Added
+ - Added animated shake to lost game explosion (#2)
+
+### Fixed
+ - Fixed play/pause button not toggling (#1)
+ - Fixed clock not animating (#1)
+ - Fixed pause screen not going away when resetting game.
+
 ## v1.0.1
 
 ### Added

force-app/main/default/lwc/smsSweeperForce/smsSweeperForce.css

@@ -61,6 +61,10 @@
     overflow: visible;
 }
 
+.sms-lost{
+    animation: shake 0.15s 5;
+}
+
 .sms-winner::after,
 .sms-lost::after,
 .sms-paused::before,
@@ -175,7 +179,7 @@
     animation-iteration-count: infinite;
 }
 
-.sms-grid.reset .sms-cell_top {
+.sms-grid.sms-reset .sms-cell_top {
     --sms-radiate-delay: calc(var(--sms-radiate) * 30ms);
     animation-name: reset;
     animation-duration: 350ms;
@@ -290,6 +294,14 @@ svg {
     }
 }
 
+@keyframes shake {
+    0% { transform: translateX(0) }
+    25% { transform: translateX(0.25rem) }
+    50% { transform: translateX(-0.25rem) }
+    75% { transform: translateX(0.25rem) }
+    100% { transform: translateX(0) }
+}
+
 @keyframes explode {
     0% {
         border-color: var(--sms-border-color);

force-app/main/default/lwc/smsSweeperForce/smsSweeperForce.js

@@ -3,9 +3,7 @@
  * https://github.com/megasmack/SweeperForce
  */
 
-/**
- * @typedef {import("./typedefs").ForceCell} ForceCell
- */
+/** @typedef {import("./typedefs").ForceCell} ForceCell */
 
 import { LightningElement } from "lwc";
 import SmsSweeperForceModal from "c/smsSweeperForceModal";
@@ -142,11 +140,12 @@ export default class SmsSweeperForce extends LightningElement {
       const timeout = this.height * 100;
       this.refs.smsGrid.classList.remove("sms-winner");
       this.refs.smsGrid.classList.remove("sms-lost");
-      this.refs.smsGrid.classList.add("reset");
+      this.refs.smsGrid.classList.remove("sms-paused");
+      this.refs.smsGrid.classList.add("sms-reset");
       // eslint-disable-next-line @lwc/lwc/no-async-operation
       setTimeout(() => {
         // Remove on animation finish
-        this.refs.smsGrid.classList.remove("reset");
+        this.refs.smsGrid.classList.remove("sms-reset");
       }, timeout);
     }
   }

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

@@ -39,18 +39,18 @@ <h2 class="slds-m-bottom_small slds-text-heading_medium">
                     How to Play
                 </h2>
                 <p class="slds-m-bottom_small">
-                    <b>Clear the mines!</b> Expose squares one at a time by clicking on them.
-                    If the square is clear, you'll get to see how many of its neighbors have mines in them (0 through
-                    8). However, if the square has a mine in it, all the mines will explode.
+                    <b>Clear the mines!</b> Expose squares one at a time by clicking on them. If the square is clear,
+                    you'll get to see how many of its neighbors have mines in them (0 through 8). However, if the square
+                    has a mine in it, all the mines will explode.
                 </p>
                 <p class="slds-m-bottom_small">
-                    <em>Right-click</em> or <em>Long-Press</em> on a square to flag it as a suspected mine. Do it again to
-                    mark it as questionable, and again to clear the mark. When you've exposed all the vacant squares,
+                    <em>Right-click</em> or <em>Long-Press</em> on a square to flag it as a suspected mine. Do it again
+                    to mark it as questionable, and again to clear the mark. When you've exposed all the vacant squares,
                     you win. If a mine explodes, you lose. Click on the refresh button to start a new game.
                 </p>
                 <p class="slds-m-bottom_small">
-                    The left-hand counter shows the number of mines less the number of
-                    squares that you've flagged (correctly or not).
+                    The left-hand counter shows the number of mines less the number of squares that you've flagged
+                    (correctly or not).
                 </p>
 
                 <h2 class="slds-m-top_medium slds-text-heading_medium">
@@ -64,19 +64,21 @@ <h2 class="slds-m-top_medium slds-text-heading_medium">
                         </p>
                         <p class="slds-m-bottom_x-small slds-text-body_small">
                             See a problem? Help out by <a href="https://github.com/megasmack/SweeperForce/issues"
-                                target="_blank">logging a bug on <span>GitHub <lightning-icon icon-name="utility:new_window"
-                                    size="xx-small" class="slds-current-color"></lightning-icon></span></a>.
+                                target="_blank">logging a bug on <span>GitHub <lightning-icon
+                                        icon-name="utility:new_window"
+                                        size="xx-small" class="slds-current-color"></lightning-icon></span></a>.
                         </p>
                         <p class="slds-m-bottom_xxx-small slds-text-body_small">
                             <a href="https://github.com/megasmack/SweeperForce" target="_blank">
                                 <span>
                                     GitHub Repo
-                                    <lightning-icon icon-name="utility:new_window" size="xx-small" class="slds-current-color"></lightning-icon>
+                                    <lightning-icon icon-name="utility:new_window" size="xx-small"
+                                        class="slds-current-color"></lightning-icon>
                                 </span>
                             </a>
                         </p>
                         <p class="slds-text-color_weak slds-text-body_small">
-                            Version: 1.0.1
+                            Version: 1.0.2
                         </p>
                     </div>
                 </div>