Adds random starting states - slightly biased currently

lukebatchelor · Sep 4, 2018 · c267334 · c267334
1 parent 3f0d49c
commit c267334
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 11 deletions.
diff --git a/build-html.js b/build-html.js
@@ -8,21 +8,19 @@ function randBetween(min, max) {
   return Math.floor(Math.random() * (max - min +1)) + min;
 }
 
-function createLevel(numElements = 40) {
+function createLevel(levelNum) {
   let curOffset = 0;
   let curDomStr = '\n';
   while (curOffset < 9000) {
     const colNum = randBetween(1,4);
     curOffset += randBetween(1,5) * 50;
-    curDomStr += `<input type="checkbox" class="hitbox col${colNum}" style="top: -${curOffset}px"></input>\n`;
+    curDomStr += `<input type="checkbox" class="hitbox col${colNum} level${levelNum}" style="top: -${curOffset}px"></input>\n`;
   }
   return curDomStr;
 }
 
 console.log('Generating random level...');
 
-const level = createLevel(400);
-
 const htmlTemplate = `
   <!DOCTYPE html>
   <html lang="en">
@@ -44,18 +42,33 @@ const htmlTemplate = `
       <input type="radio" name="game-state" id="playing-easy">
       <input type="radio" name="game-state" id="playing-med">
       <input type="radio" name="game-state" id="playing-hard">
+      <input type="radio" name="game-state-level" id="level-1">
+      <input type="radio" name="game-state-level" id="level-2">
+      <input type="radio" name="game-state-level" id="level-3">
+      <input type="radio" name="game-state-level" id="level-4">
       <div id="game">
         <div class="startScreen">
           <h2>Rhythm Game!</h2>
           <p>Hit as many notes as you can, but only whilst they are in the strike zone!</p>
-          <label for="playing-easy" class="playButton">Easy</label>
-          <label for="playing-med" class="playButton">Medium</label>
-          <label for="playing-hard" class="playButton">Hard!</label>
+          <div class="levelSelectButtons">
+            <label for="level-1" class="playButton b1">Play!</label>
+            <label for="level-2" class="playButton b2">&nbsp;</label>
+            <label for="level-3" class="playButton b3">&nbsp;</label>
+            <label for="level-4" class="playButton b4">&nbsp;</label>
+          </div>
+          <div class="difficultySelectButtons">
+            <label for="playing-easy" class="playButton">Easy</label>
+            <label for="playing-med" class="playButton">Medium</label>
+            <label for="playing-hard" class="playButton">Hard!</label>
+          </div>
         </div>
         <div class="playingScreen">
           <div class="clickGuard"></div>
           <div class="level">
-            ${level}
+            ${createLevel(1)}
+            ${createLevel(2)}
+            ${createLevel(3)}
+            ${createLevel(4)}
             <div class="maxStreakBoard"></div>
           </div>
           <div class="hitboxIndicator col1"></div>

diff --git a/build-max-streak-rules.js b/build-max-streak-rules.js
@@ -13,7 +13,8 @@ for (let i =0; i < MAX_STREAK; i++) {
   maxStreakRules += `.hitbox:checked ${'+ .hitbox:checked '.repeat(i)}~ .maxStreakBoard::after {content: "Max streak: ${i + 1}x";}\n`
 }
 
+console.log('Writing to', outputPath, `(${maxStreakRules.length/1000}Kb)`);
+
 fs.writeFileSync(outputPath, maxStreakRules);
 
-console.log('Done');
-console.log(`${maxStreakRules.length/1000} Kb`);
+console.log('Done!');
diff --git a/styles.less b/styles.less
@@ -18,6 +18,47 @@ body, html {
   right: 95px;
 }
 
+.difficultySelectButtons {
+  display: none;
+  flex-direction: column;
+}
+
+// Use these to debug the start buttons
+// .b1 {
+//   background-color: red;
+// }
+// .b2 {
+//   background-color: blue;
+// }
+// .b3 {
+//   background-color: green;
+// }
+// .b4 {
+//   background-color: purple;
+// }
+
+.levelSelectButtons .playButton {
+  margin-left: -80px;
+  width: 80px;
+  position: absolute;
+  left: 190px;
+}
+
+// We debliberately don't animate the "bottom" button so that it is always visible underneath
+// to prevent any flashing of text
+// .levelSelectButtons .playButton[for="level-1"] {
+//   .toggleAnimationMixin(0s);
+// }
+.levelSelectButtons .playButton[for="level-2"] {
+  animation: toggle 2s steps(1, end) 0.5s infinite;
+}
+.levelSelectButtons .playButton[for="level-3"] {
+  animation: toggle 2s steps(1, end) 1s infinite;
+}
+.levelSelectButtons .playButton[for="level-4"] {
+  animation: toggle 2s steps(1, end) 1.5s infinite;
+}
+
 .app {
   display: flex;
   justify-content: center;
@@ -62,7 +103,16 @@ input[type="radio"] {
 #start:checked ~ #game .startScreen {
   display: flex;
 }
-// #playing:checked ~ #game .playingScreen
+
+#start:checked ~ input[name="game-state-level"]:checked {
+  ~ #game .levelSelectButtons {
+    display: none;
+  }
+  ~ #game .difficultySelectButtons {
+    display: flex;
+  }
+}
+
 #playing-hard:checked {
   .playingMixin(@game-length-hard)
 }
@@ -131,6 +181,7 @@ input[type="radio"] {
     height: @hitbox-size;
     width: @hitbox-size;
     position: absolute;
+    display: none; // We will override when selecting the level
     /* Icon from: https://material.io/tools/icons/?search=note&icon=music_note&style=baseline */
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
     background-size: contain;
@@ -143,6 +194,11 @@ input[type="radio"] {
   }
 }
 
+#level-1:checked ~ #game .level1 { display: initial; }
+#level-2:checked ~ #game .level2 { display: initial; }
+#level-3:checked ~ #game .level3 { display: initial; }
+#level-4:checked ~ #game .level4 { display: initial; }
+
 .level .hitbox:first-of-type:checked,
 .hitbox:not(:checked) + .hitbox:checked {
   counter-reset: streak;
@@ -237,3 +293,9 @@ input[type="radio"] {
   0% { transform: scale(1); }
   100% { transform: scale(1.25); }
 }
+
+@keyframes toggle {
+  0% { opacity: 1; }
+  33% { opacity: 0; pointer-events: none; }
+  66% { opacity: 0; pointer-events: none; }
+}