Add shadow switch

kayhide · Jan 25, 2020 · 0c2ae8a · 0c2ae8a
1 parent c0d9109
commit 0c2ae8a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/app/index.html b/app/index.html
@@ -10,7 +10,8 @@
         <button data-difficulty="hard">Hard</button>
       </div>
       <div id="switches" class="float-right">
-        <button data-toggle="glow">Glow</button>
+        <button data-toggle="glowing">Glow</button>
+        <button data-toggle="shadowing">Shadow</button>
       </div>
     </nav>
     <script src="../src/index.js"></script>

diff --git a/src/PieceActor.js b/src/PieceActor.js
@@ -30,9 +30,10 @@ class PieceActor extends PIXI.Container {
 
   createGeometry(piece) {
     var geometry = new PIXI.Graphics();
-    geometry.beginFill(0.5, 0.5);
     if (this.wireframe) {
-      geometry.lineStyle(5, 0xFFFFFF, 0.5);
+      geometry.lineStyle(5, 0xFFFFFF, 0.5, 0.5, true);
+    } else {
+      geometry.beginFill(0.5, 0.5);
     }
     geometry.moveTo(...piece.points[0]);
     _.chunk(piece.points.slice(1), 3).forEach(([p1, p2, p3]) => {

diff --git a/src/app.scss b/src/app.scss
@@ -6,7 +6,9 @@ body {
 
 nav {
   position: absolute;
+  z-index: 10;
   width: 100%;
+
   a, button {
     float: left;
     display: block;
@@ -20,12 +22,18 @@ nav {
     font-size: 1rem;
     text-decoration: none;
 
-    transition: background-color 300ms, box-shadow 300ms;
+    transition: background-color, box-shadow, filter;
+    transition-duration: 300ms;
 
     &.active {
       background-color: rgba(lighten(grey, 20%), 0.5);
       box-shadow: 0 0 4px cyan;
     };
+
+    &:hover {
+      cursor: pointer;
+      filter: brightness(1.2);
+    };
   };
 };
 
@@ -36,3 +44,10 @@ nav {
 .float-right {
   float: right;
 }
+
+canvas {
+  transition: filter 300ms ease;
+  &.shadow {
+    filter: drop-shadow(0 0 3px white) drop-shadow(0 6px 6px black);
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -16,7 +16,8 @@ PIXI.app = app;
 
 var state = {
   difficulty: "easy",
-  glowing: true,
+  glowing: false,
+  shadowing: false,
 };
 
 document.body.appendChild(app.view);
@@ -39,18 +40,12 @@ const updateNav = () => {
       elm.classList.remove("active");
     }
   })
-  document.querySelectorAll("[data-toggle=glow]").forEach(elm => {
-    if (state.glowing) {
-      elm.classList.add("active");
-    } else {
-      elm.classList.remove("active");
-    }
+  document.querySelectorAll("[data-toggle]").forEach(elm => {
+    elm.classList[state[elm.dataset.toggle] ? "add" : "remove"]("active");
   });
 }
 
 const init = (resources) => {
-  updateNav();
-
   app.stage.removeChildren();
 
   const texture = resources.image.texture;
@@ -106,14 +101,26 @@ PIXI.loader.load((loader, resources) => {
   document.querySelectorAll("[data-difficulty]").forEach(elm => {
     elm.addEventListener("click", e => {
       state.difficulty = elm.dataset.difficulty;
+      updateNav();
       init(resources);
     });
   });
-  document.querySelectorAll("[data-toggle=glow]").forEach(elm => {
+  document.querySelectorAll("[data-toggle=glowing]").forEach(elm => {
     elm.addEventListener("click", e => {
       state.glowing = ! state.glowing;
+      updateNav();
       init(resources);
     });
   });
+  document.querySelectorAll("[data-toggle=shadowing]").forEach(elm => {
+    elm.addEventListener("click", e => {
+      state.shadowing = ! state.shadowing;
+      updateNav();
+      document.querySelectorAll("canvas").forEach(canvas => {
+        canvas.classList[state.shadowing ? "add" : "remove"]("shadow");
+      });
+    });
+  });
+  updateNav();
   init(resources);
 });