Skip to content

Commit

Permalink
somewhat prep for different note directions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lyall-A
Lyall-A committed Jul 13, 2024
1 parent eb63fa5 commit b753fbc
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 12 deletions.
39 changes: 31 additions & 8 deletions Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,10 +243,12 @@ class Game {
// Move notes down/despawn when off screen
this.lanes.forEach((lane, laneIndex) => {
lane.notes.forEach(note => {
if (note.top - note.normalHeight > lane.elements.key.offsetTop && this.gameSettings.noteDirection == 1) note.passedKey = true; // TODO: more directions?!?!?!?!?!?!
if (this.gameSettings.noteDirection == 1 && this.getActualTop(note) > lane.elements.key.offsetTop) note.passedKey = true; // TODO: more directions?!?!?!?!?!?!
if (this.gameSettings.noteDirection == 2 && note.top > lane.elements.key.offsetTop) note.passedKey = true; // TODO: more directions?!?!?!?!?!?!

if (note.isSlider) {
if (note.top - note.height > lane.elements.key.offsetTop && this.gameSettings.noteDirection == 1) note.endPassedKey = true;
if (this.gameSettings.noteDirection == 1 && this.getActualTop(note, true) > lane.elements.key.offsetTop) note.endPassedKey = true;
if (this.gameSettings.noteDirection == 2 && note.top > lane.elements.key.offsetTop) note.endPassedKey = true;
}

if (note.isSlider) {
Expand Down Expand Up @@ -291,7 +293,7 @@ class Game {
this.getNewNotePos(note, deltaTime);
note.element.style.top = `${Math.round(note.top)}px`; // Set top

if (note.top - note.element.offsetHeight >= this.game.offsetHeight || (note.passedKey && this.getNoteDistance(lane, note) > this.pointRange)) {
if (this.getActualTop(note) >= this.game.offsetHeight || (note.passedKey && this.getNoteDistance(lane, note) > this.pointRange)) {
// Missed note
this.miss();
this.removeNote(lane, note);
Expand Down Expand Up @@ -358,21 +360,38 @@ class Game {
spawnNote(laneNum, sliderHeight = 0) {
const laneIndex = laneNum - 1;
const lane = this.lanes[laneIndex];
let top = 0;
let top = this.gameSettings.noteDirection == 1 ?
0 :
this.gameSettings.noteDirection == 2 ?
this.game.offsetHeight :
null;
const noteElement = document.createElement("div");
noteElement.classList.add("note");
noteElement.classList.add(`note-${this.lanes.length}-${laneNum}`);
noteElement.style.top = `${top}px`;
noteElement.style.transform = this.gameSettings.noteDirection == 1 ?
"translateY(-100%)" :
this.gameSettings.noteDirection == 2 ?
"translateY(0%)" :
null;
lane.elements.notes.appendChild(noteElement);
lane.notesSpawned++;
const height = sliderHeight ? Math.max(noteElement.offsetHeight, (this.beatToMs(sliderHeight) * this.noteMoveAmount + noteElement.offsetHeight) / this.speed) : noteElement.offsetHeight;
const note = { top, normalHeight: noteElement.offsetHeight, height, element: noteElement, id: lane.notesSpawned, isSlider: sliderHeight ? true : false };
const note = { top, normalHeight: noteElement.offsetHeight, height, element: noteElement, id: lane.notesSpawned, isSlider: sliderHeight ? true : false, holding: false, holdStart: null };
// lane.notes.push(note);
lane.notes.add(note);
noteElement.style.height = `${height}px`;
return note;
}

getActualTop(note, useHeight) {
return this.gameSettings.noteDirection == 1 ?
note.top - (useHeight ? note.height : note.normalHeight) :
this.gameSettings.noteDirection == 2 ?
note.top :
null;
}

getNewNotePos(note, deltaTime) {
const newPos = {
x: note.offsetLeft,
Expand Down Expand Up @@ -511,7 +530,7 @@ class Game {

getNoteDistance(lane, note, isEnd) {
const keyTop = lane.elements.key.offsetTop;
const noteTop = note.top - (isEnd ? note.height : note.normalHeight);
const noteTop = this.getActualTop(note, isEnd);
// console.log(noteTop - keyTop)
return Math.max(noteTop - keyTop, keyTop - noteTop);
}
Expand All @@ -521,7 +540,7 @@ class Game {
const closestNote = this.getClosestNote(lane);
const noteDistance = this.getNoteDistance(lane, closestNote);

const closestNoteTop = closestNote.top - closestNote.normalHeight;
const closestNoteTop = this.getActualTop(closestNote);

if (noteDistance > this.pointRange || closestNote.finished) return; // Ignore if closest note is still too far or has been finished
const pointsToAdd = this.gameSettings.points.reduce((prev, curr) => Math.abs(curr.distance - noteDistance) < Math.abs(prev.distance - noteDistance) ? curr : prev);
Expand All @@ -546,7 +565,11 @@ class Game {
closestNote.holding = true;
closestNote.holdStart = Date.now(); // For combo increments while holding
// Force onto key
closestNote.top = keyTop + closestNote.normalHeight;
closestNote.top = this.gameSettings.noteDirection == 1 ?
keyTop + closestNote.normalHeight :
this.gameSettings.noteDirection == 2 ?
keyTop :
null;
closestNote.element.style.top = `${closestNote.top}px`;
// Change note height depending on the distance when pressed
closestNote.height += Math.abs(closestNoteTop - keyTop) > Math.abs(keyTop - closestNoteTop) ? closestNoteTop - keyTop : keyTop - closestNoteTop;
Expand Down
8 changes: 5 additions & 3 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const modifiers = {};

// TEMP
skin = defaultSkin;
// const testSkin = await getSkinData("skins/up-test", "skin.gms");
// loadSkin(testSkin);

if (settings.skin) {
setLoadingText(`Loading skin '${settings.skin.name}'...`);
Expand Down Expand Up @@ -177,9 +179,9 @@ async function getSkinData(skinPath) {
const skin = await fetch(`${skinPath}/skin.gms`).then(i => i.json());

skin.style.data = await getData(skinPath, skin.style);
for (const [key, value] of Object.entries(skin.sfx)) value.data = await getData(skinPath, value);
for (const [key, value] of Object.entries(skin.hitScores[1])) value.data = await getData(skinPath, value);
skin.hitScores[0].data = await getData(skinPath, skin.hitScores[0]);
for (const [key, value] of Object.entries(skin.sfx || { })) value.data = await getData(skinPath, value);
for (const [key, value] of Object.entries(skin.hitScores?.[1] || { })) value.data = await getData(skinPath, value);
if (skin.hitScores?.[0]) skin.hitScores[0].data = await getData(skinPath, skin.hitScores[0]);

return skin;
}
Expand Down
3 changes: 2 additions & 1 deletion skins/default/skin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ body {
display: flex;
justify-content: flex-end;
flex-direction: column;
/* flex-direction: column-reverse; */
margin-left: var(--lane-margin);
margin-right: var(--lane-margin);
height: var(--game-height);
Expand All @@ -135,7 +136,6 @@ body {
.note {
will-change: top, height;
background-color: rgb(228, 228, 228);
transform: translateY(-100%);
position: absolute;
aspect-ratio: 1;
border-radius: calc(var(--lane-width) / 2);
Expand Down Expand Up @@ -164,6 +164,7 @@ body {

.key {
z-index: 0;
/* margin-top: 75px; */
margin-bottom: 75px;
min-width: 100%;
aspect-ratio: 1;
Expand Down
8 changes: 8 additions & 0 deletions skins/up-test/skin.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.lane {
flex-direction: column-reverse;
}

.key {
margin-top: 75px;
margin-bottom: unset;
}
5 changes: 5 additions & 0 deletions skins/up-test/skin.gms
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"style": {
"file": "skin.css"
}
}

0 comments on commit b753fbc

Please sign in to comment.