add fireworks.scss, with scss fixes

README.md

@@ -19,6 +19,7 @@ https://spelling-b.netlify.app
 
 - Inspired by https://www.nytimes.com/puzzles/spelling-bee
 - Using [12 dicts](http://wordlist.aspell.net/12dicts/) word list https://github.com/en-wl/wordlist/blob/master/alt12dicts/2of4brif.txt
+- Using fireworks.scss https://codepen.io/hmaw/pen/qBEMLxV
 
 ## Development
 

src/App.vue

@@ -80,7 +80,9 @@ store.startGame({
   <el-dialog v-model="showInfo" :title="$t('How to play')">
     <Info />
   </el-dialog>
-  <div class="common-layout">
+  <div class="common-layout fireworks">
+    <div class="beforeFireworks" v-if="showGameWonModal" />
+    <div class="afterFireworks" v-if="showGameWonModal" />
     <el-header height="2em" id="title-header">
       <h2>
         <strong> Spelling Bee </strong>
@@ -127,6 +129,7 @@ store.startGame({
 <style lang="scss">
 @import "element-plus/dist/index.css";
 @import "element-plus/theme-chalk/dark/css-vars.css";
+@import "./assets/styles/fireworks.scss";
 @import "./assets/styles/_variables.scss";
 
 * {

src/assets/styles/fireworks.scss

@@ -0,0 +1,138 @@
+// https://codepen.io/hmaw/pen/qBEMLxV
+// sass fixes https://sass-lang.com/documentation/breaking-changes/color-units
+// https://sass-lang.com/documentation/breaking-changes/slash-div
+@use "sass:math";
+
+$particles: 50;
+$width: 500;
+$height: 500;
+
+// Create the explosion...
+$box-shadow: ();
+$box-shadow2: ();
+@for $i from 0 through $particles {
+  $box-shadow: $box-shadow,
+    random($width) -
+      math.div($width, 2) +
+      px
+      random($height) -
+      math.div($height, 1.2) +
+      px
+      hsl(random(360deg), 100%, 50%);
+  $box-shadow2: $box-shadow2, 0 0 #fff;
+}
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+
+  @-ms-keyframes #{$animationName} {
+    @content;
+  }
+
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@mixin animation-delay($settings) {
+  -moz-animation-delay: $settings;
+  -webkit-animation-delay: $settings;
+  -o-animation-delay: $settings;
+  -ms-animation-delay: $settings;
+  animation-delay: $settings;
+}
+
+@mixin animation-duration($settings) {
+  -moz-animation-duration: $settings;
+  -webkit-animation-duration: $settings;
+  -o-animation-duration: $settings;
+  -ms-animation-duration: $settings;
+  animation-duration: $settings;
+}
+
+@mixin animation($settings) {
+  -moz-animation: $settings;
+  -webkit-animation: $settings;
+  -o-animation: $settings;
+  -ms-animation: $settings;
+  animation: $settings;
+}
+
+@mixin transform($settings) {
+  transform: $settings;
+  -moz-transform: $settings;
+  -webkit-transform: $settings;
+  -o-transform: $settings;
+  -ms-transform: $settings;
+}
+
+.fireworks > .beforeFireworks,
+.fireworks > .afterFireworks {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  box-shadow: $box-shadow2;
+  @include animation(
+    (
+      1s bang ease-out infinite backwards,
+      1s gravity ease-in infinite backwards,
+      5s position linear infinite backwards
+    )
+  );
+}
+
+.fireworks > .afterFireworks {
+  @include animation-delay((1.25s, 1.25s, 1.25s));
+  @include animation-duration((1.25s, 1.25s, 6.25s));
+}
+
+@include keyframes(bang) {
+  to {
+    box-shadow: $box-shadow;
+  }
+}
+
+@include keyframes(gravity) {
+  to {
+    @include transform(translateY(200px));
+    opacity: 0;
+  }
+}
+
+@include keyframes(position) {
+  0%,
+  19.9% {
+    margin-top: 10%;
+    margin-left: 40%;
+  }
+  20%,
+  39.9% {
+    margin-top: 40%;
+    margin-left: 30%;
+  }
+  40%,
+  59.9% {
+    margin-top: 20%;
+    margin-left: 70%;
+  }
+  60%,
+  79.9% {
+    margin-top: 30%;
+    margin-left: 20%;
+  }
+  80%,
+  99.9% {
+    margin-top: 30%;
+    margin-left: 80%;
+  }
+}