Putting stuff under rocks.

README.md

@@ -10,7 +10,5 @@ A game in which a 2.5 year old will hopefully look for bugs under rocks before s
 ## Todo
 
 - Fix all the PWA assets, some are still default
-- Make sounds when rocks are flung
-- Make rocks smaller so that they're easier to find?
 - Add things under rocks
 - Add ridiculous sounds

index.html

@@ -104,8 +104,13 @@ <h1 class="extrabold">Nora Looks For Bugs</h1>
     <div id="scrollable-area" style="display: none"></div>
 
     <template id="rock-template">
-      <div class="rock">
-        <img src="./assets/img/rock1.png" alt="Rock" />
+      <div class="rock-container">
+        <div class="rock">
+          <img src="./assets/img/rock1.png" alt="Rock" />
+        </div>
+        <div class="bug">
+          <img src="./assets/img/unicorn.png" alt="Surprise!" />
+        </div>
       </div>
     </template>
   </body>

main.js

@@ -4,7 +4,10 @@ const gridSize = 51200 / 256;
 const rockSounds = [];
 
 function preloadAssets() {
-  const imagesToPreload = ["./assets/img/rock1.png"];
+  const imagesToPreload = [
+    "./assets/img/rock1.png",
+    "./assets/img/unicorn.png",
+  ];
 
   const soundsToPreload = [
     "./assets/sound/rock1.m4a",
@@ -52,11 +55,13 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   function createRockComponent(location) {
-    const rock = rockTemplate.content.cloneNode(true).querySelector(".rock");
-    rock.style.gridRow = location.x;
-    rock.style.gridColumn = location.y;
-    rock.addEventListener("click", flingRock);
-    scrollableArea.appendChild(rock);
+    const rockContainer = rockTemplate.content
+      .cloneNode(true)
+      .querySelector(".rock-container");
+    rockContainer.style.gridRow = location.x;
+    rockContainer.style.gridColumn = location.y;
+    rockContainer.querySelector(".rock").addEventListener("click", flingRock);
+    scrollableArea.appendChild(rockContainer);
   }
 
   function createRocks() {

style.css

@@ -117,7 +117,14 @@ body {
   grid-template-rows: repeat(auto-fill, 256px);
 }
 
+.rock-container {
+  position: relative;
+}
+
 .rock {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 256px;
   height: 256px;
   cursor: pointer;
@@ -126,10 +133,19 @@ body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
+  z-index: 100;
 }
 
 .rock img {
   width: 100%;
   height: 100%;
   pointer-events: none;
 }
+
+.bug {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  z-index: 50;
+}