real

game.js

@@ -1,21 +1,158 @@
-function startGame(gameElement, level) {
-    gameElement.innerHTML = "";
-    gameElement.id = "game";
-    const gameChildren = { };
+let globalSpeed = 1;
 
-    // createChildren();
+async function startGame(gameContainer, map, level, settings) {
+    // Variables
+    let gameElement;
+    const rows = [];
+
+    setupGame();
+    createRows();
+    createEvents();
+
+    // gameLoop((deltaTime, nextFrame, fps) => {
+    //     console.log("FPS:", fps);
+    //     nextFrame();
+    // });
+
+    // THIS IS JUST TEMP SHIT FRRRRRR IMA MAKE THIS BETTER (PROBABLY NOT)
+    const songURL = URL.createObjectURL(map.songData);
+    const song = new Audio(songURL);
+    song.onended = () => URL.revokeObjectURL(songURL);
+    song.onloadeddata = () => console.log(song.duration);
+    song.volume = 0.05; // kill oyurself
+    await song.play();
+
+    setTimeout(() => {
+        let lastBeat = 0;
+        const getNextNotes = index => {
+            const nextNotes = level.data[index];
+            if (!nextNotes) return;
+            const notes = nextNotes[0] || nextNotes.notes;
+            const beat = nextNotes[1] || nextNotes.beat;
+
+            setTimeout(() => {
+                lastBeat = beat;
+                notes.forEach((note, index) => {
+                    if (note) spawnNote(index, note);
+                });
+                getNextNotes(index + 1);
+            }, ((beat - lastBeat) / map.bpm) * 60 * 1000);
+        }
+        getNextNotes(0);
+    }, map.offset);
+
+    // ----
+
+    function spawnNote(rowIndex) {
+        const noteElement = document.createElement("div");
+        noteElement.classList.add("note");
+        let top = 0;
+        noteElement.style.top = `${top}px`;
+
+        gameLoop((deltaTime, nextFrame, fps) => {
+            top += 1 * deltaTime * globalSpeed * ((settings.scrollSpeed || level.scrollSpeed) / 10);
+            noteElement.style.top = `${top}px`;
+            if (top >= screen.availHeight) {
+                if (!rows[rowIndex].notesElement.contains(noteElement)) return;
+                noteElement.remove();
+            } else nextFrame();
+        });
+
+        rows[rowIndex].notesElement.appendChild(noteElement);
+    }
+
+    function hitNote(note) {
+        note.remove() // TODO: BLOW THE FUCK UP
+    }
+
+    function setupGame() {
+        gameContainer.innerHTML = "";
+        gameElement = document.createElement("div");
+        gameElement.classList.add("game");
+        gameContainer.appendChild(gameElement);
+    }
+
+    function createRows() {
+        const rowsElement = document.createElement("div");
+        rowsElement.classList.add("rows");
+        gameElement.appendChild(rowsElement);
 
-    function spawnKeys() {
         for (let i = 0; i < level.keys; i++) {
+            const rowElement = document.createElement("div");
+            rowElement.classList.add("row");
+            rowsElement.appendChild(rowElement);
+
+            const notesElement = document.createElement("div");
+            notesElement.classList.add("notes");
+            rowElement.appendChild(notesElement);
+
+            const keyElement = document.createElement("div");
+            keyElement.classList.add("key");
+            rowElement.appendChild(keyElement);
+
+            rows.push({rowElement, notesElement, keyElement});
+        }
+    }
 
+    function createEvents() {
+        // Key pressed
+        document.body.onkeydown = ev => {
+            const index = settings.keybinds[`${level.keys}-keys`]?.findIndex(i => i == ev.key);
+            if (index >= 0 && !rows[index].pressed) {
+                rows[index].pressed = true;
+                onKeyPress(index);
+            }
+        }
+        // Key released
+        document.body.onkeyup = ev => {
+            const index = settings.keybinds[`${level.keys}-keys`]?.findIndex(i => i == ev.key);
+            if (index >= 0 && rows[index].pressed) {
+                rows[index].pressed = false;
+                onKeyRelease(index);
+            }
         }
     }
 
-    function createChildren() {
-        const maniaElement = document.createElement("div");
-        maniaElement.id = "game-mania";
-        gameChildren["mania"] = maniaElement;
+    function onKeyPress(index) {
+        rows[index].keyElement.classList.toggle("pressed");
+        const closestNote = rows[index].notesElement.children[0];
+        if (!closestNote) return;
+
+        const closestNoteTop = closestNote.offsetTop - closestNote.clientHeight;
+        const keyTop = rows[index].keyElement.offsetTop;
+
+        const distance = Math.max(closestNoteTop - keyTop, keyTop - closestNoteTop);
+
+        // points 
+        if (distance <= 25) {
+            console.log("VERY GOOD")
+        } else if (distance <= 50) {
+            console.log("GOOD")
+        } else if (distance <= 100) {
+            console.log("shit")
+        } else if (distance <= 150) {
+            console.log("miss")
+        } else return;
+        hitNote(closestNote)
+    }
+
+    function onKeyRelease(index) {
+        rows[index].keyElement.classList.toggle("pressed");
+    }
+
+    function gameLoop(callback) {
+        let prevTime;
+        let fps = 0;
+
+        const loop = () => {
+            const time = Date.now();
+            const deltaTime = time - (prevTime || time);
+            if (deltaTime) fps = Math.round(1000 / deltaTime);
+            prevTime = time;
+
+            callback(deltaTime, () => requestAnimationFrame(loop), fps);
+        }
 
-        Object.values(gameChildren).forEach(i => gameElement.appendChild(i));
+        requestAnimationFrame(loop);
     }
 }

index.html

@@ -9,15 +9,22 @@
         <script src="./game.js"></script>
     </head>
     <body>
-        <div class="game" id="game"></div>
+        <div id="game-container"></div>
         <script>
+            const settings = {
+                scrollSpeed: 17,
+                keybinds: {
+                    "4-keys": ["d","f","j","k"],
+                    "7-keys": ["s","d","f"," ","j","k","l"]
+                }
+            }
             loadSkin("/skins/default");
             // for testing
             const mapPath = "./maps/1";
-            fetch(`${mapPath}/map.json`).then(i => i.json()).then(async map => {
+            getMapData(mapPath).then(async map => {
                 const level = map.levels[0];
                 level.data = await getLevelData(mapPath, level);
-                startGame(document.getElementById("game"), level);
+                startGame(document.getElementById("game-container"), map, level, settings);
             });
         </script>
     </body>

main.css

@@ -1 +1,9 @@
-* {box-sizing:border-box;}
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+* { box-sizing: border-box; }
+div { outline: 1px solid blue; }

main.js

@@ -2,6 +2,13 @@ async function getLevelData(mapPath, level) {
     return level.data || await fetch(`${mapPath}/${level.file}`).then(i => i.json());
 }
 
+async function getMapData(mapPath) {
+    const map = await fetch(`${mapPath}/map.json`).then(i => i.json());
+    map.songData = map.songData || await fetch(`${mapPath}/${map.songFile}`).then(i => i.blob());
+    map.coverData = map.coverData || await fetch(`${mapPath}/${map.coverFile}`).then(i => i.blob());
+    return map;
+}
+
 async function loadSkin(skinPath) {
     const skin = await fetch(`${skinPath}/skin.json`).then(i => i.json());
 

maps/1/easy.json

@@ -1,6 +1,10 @@
 [
-    {
-        "notes": [0,0,0,0],
-        "beat": 40
-    }
+    [[0,1,0,1], 1],
+    [[1,0,1,0], 2],
+    [[0,1,0,1], 3],
+    [[1,0,1,0], 4],
+    [[0,1,0,1], 5],
+    [[1,0,1,0], 6],
+    [[0,1,0,1], 7],
+    [[0,1,0,1], 8]
 ]

maps/1/map.json

@@ -3,6 +3,8 @@
     "artist": "Kobaryo",
     "songFile": "song.mp3",
     "coverFile": "cover.jpg",
+    "offset": 0,
+    "bpm": 116,
     "mappers": [
         {
             "name": "Lyall",
@@ -11,6 +13,7 @@
     ],
     "levels": [
         {
+            "scrollSpeed": 17,
             "name": "Easy",
             "keys": 4,
             "file": "easy.json"

notes.md

@@ -0,0 +1 @@
+eyaghhhhhh scrollSpeed in settings overrides scrollSpeed in maps ok got it?

skins/default/skin.css

@@ -1,18 +1,58 @@
-html, body { 
-    margin: 0;
-    padding: 0;
+#game-container {
+    --key-width: 100px;
+    --key-height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 100%;
     height: 100%;
-};
+}
 
-#game {
-    width: 100%;
+.game {
+    display: flex;
     height: 100%;
-    background-color: red;
 }
 
-#game-mania {
-    /* height: 100%; */
-    /* background-color: grey; */
-    /* min-width: 200px; */
+.rows {
+    display: flex;
+    background-color: grey;
+}
+
+.row {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+}
+
+.notes {
+    position: absolute;
+    height: 100%;
+    width: var(--key-width);
+    overflow: hidden;
+}
+
+.note {
+    will-change: top;
+    background-color: blue;
+    transform: translateY(-100%);
+    position: absolute;
+    aspect-ratio: 1;
+    border: 2px solid green;
+    border-radius: 50%;
+    min-width: var(--key-width);
+    min-height: auto;
+}
+
+.key {
+    z-index: 0;
+    margin-bottom: 75px;
+    min-width: var(--key-width);
+    min-height: auto;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 2px solid red;
+}
+
+.key.pressed {
+    background-color: red;
 }