Init commit, basic functionality working

lukebatchelor · Aug 27, 2018 · 7ee2e7c · 7ee2e7c
commit 7ee2e7c
Show file tree

Hide file tree

Showing 6 changed files with 2,128 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# CSS Rhythm Game
+
+Nice! 👌
diff --git a/build-html.js b/build-html.js
@@ -0,0 +1,73 @@
+const fs = require('fs');
+const path = require('path');
+
+
+const outputPath = path.join(__dirname, 'dist', 'index.html');
+
+function randBetween(min, max) {
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+
+function createLevel(numElements = 10) {
+  let curOffset = 0;
+  let curDomStr = '';
+  for (let i=0; i < numElements; i++) {
+    const colNum = randBetween(1,4);
+    curOffset += randBetween(1,5) * 50;
+    curDomStr += `<input type="checkbox" class="hitbox col${colNum}" style="top: -${curOffset}px"></input>`;
+  }
+  return curDomStr;
+}
+
+const level = createLevel(10);
+
+const htmlTemplate = `
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>CSS Rhythm Game</title>
+    <link href="../styles.css" rel="stylesheet"></head>
+  </head>
+  <body>
+  <div class="app">
+    <h1>CSS Rhythm Game</h1>
+    <p>This game is built entirely out of HTML and CSS, no JavaScript™ at all!</p>
+    <br><br>
+    <input type="radio" name="game-state" id="start" checked>
+    <input type="radio" name="game-state" id="playing">
+    <input type="radio" name="game-state" id="gameOver">
+    <div id="game">
+      <div class="startScreen">
+        <label for="playing" class="playButton">Click here to play!</label>
+      </div>
+      <div class="playingScreen">
+        <div class="clickGuard"></div>
+        <div class="level">
+          ${level}
+        </div>
+        <div class="hitboxIndicator col1"></div>
+        <div class="hitboxIndicator col2"></div>
+        <div class="hitboxIndicator col3"></div>
+        <div class="hitboxIndicator col4"></div>
+        <div class="scoreBoard"></div>
+      </div>
+      <div class="gameOverScreen">
+        <label for="playing" class="playButton">Click here to play again!</label>
+      </div>
+    </div>
+    States here
+    <label for="start" id="resetButton">Reset</label>
+    <p>Check out <a href="https://github.com/lukebatchelor/css-tic-tac-toe">lukebatchelor/css-tic-tac-toe</a> if you're interested in how it works!</p>
+  </div>
+  <a href="https://github.com/lukebatchelor/css-tic-tac-toe"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+  </body>
+  </html>
+`;
+console.log('Done!');
+console.log('Writing to', outputPath);
+
+fs.writeFileSync(outputPath, htmlTemplate);
+console.log('Done!');
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "css-rhythm-game",
+  "version": "1.0.0",
+  "private": true,
+  "description": "A Dance Dance style rhythm",
+  "main": "index.js",
+  "scripts": {
+    "dev": "yarn nodemon -e js,css --watch build-html.js --watch styles.less --exec \"yarn build && yarn serve\"",
+    "build": "mkdir -p dist && node build-html.js && lessc styles.less dist/styles.css",
+    "serve": "http-server -c-1 dist/"
+  },
+  "keywords": [],
+  "author": "Luke Batchelor",
+  "license": "ISC",
+  "devDependencies": {
+    "http-server": "^0.11.1",
+    "less": "^3.8.1",
+    "nodemon": "^1.18.3"
+  }
+}
diff --git a/styles.less b/styles.less
@@ -0,0 +1,116 @@
+@hitbox-size: 50px;
+@game-height: 400px;
+
+body, html {
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.startScreen, .gameOverScreen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.startScreen, .playingScreen, .gameOverScreen {
+  display: none;
+}
+
+#start:checked ~ #game .startScreen,
+#gameOver:checked ~ #game .gameOverScreen {
+  display: flex;
+}
+#playing:checked ~ #game .playingScreen
+{
+  display: block;
+
+  .level {
+    animation: playing 35s linear;
+  }
+}
+
+#game {
+  border: 1px solid black;
+  min-height: 400px;
+  min-width: 300px;
+  background-color: goldenrod;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+}
+.playingScreen {
+  .scoreBoard::after {
+    display: block;
+    content: "Score: " counter(score);
+  }
+  .level {
+    counter-reset: score;
+  }
+  .hitbox {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    height: @hitbox-size;
+    width: @hitbox-size;
+    background-color: red;
+    position: absolute;
+    outline: 1px solid;
+
+    &:checked {
+      background-color: purple;
+      counter-increment: score;
+      pointer-events: none;
+    }
+  }
+}
+
+
+.clickGuard {
+  background-color: transparent;
+  position: absolute;
+  height: calc(@game-height - @hitbox-size);
+  width: 100%;
+  z-index: 100;
+}
+
+
+.col1 {
+  left: 30px;
+}
+.col2 {
+  left: 90px;
+}
+.col3 {
+  left: 150px;
+}
+.col4 {
+  left: 210px;
+}
+
+.hitboxIndicator {
+  height: @hitbox-size;
+  width: @hitbox-size;
+
+  position: absolute;
+  outline: 1px solid;
+  bottom: 5px;
+  pointer-events: none;
+}
+
+.level {
+  // transform: translateY(200px)
+}
+
+@keyframes playing {
+  0%   { transform: translateY(-100px); }
+  100% { transform: translateY(9000px); }
+}