change lane toggle

This commit is contained in:
esterTion
2022-03-14 00:24:12 +08:00
parent 1d8422d47a
commit cb25d08ebd
2 changed files with 33 additions and 48 deletions
+1 -3
View File
@@ -21,9 +21,7 @@
.bgm .volume{width:30px;padding:3px 0}
.bgm .volume_slider{width:50px;padding:0 15px 0 5px}
.bgm .volume_slider input[type=range]{height:40px;margin:0;padding:0;width:100%}
.long-audio .bgm {width:1000px}
.bgm .volume{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Ik03LjI0NSAxLjM1IDQuMTE3IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0TDkgMmMwLS45MjctMS4xNTItMS4zNTMtMS43NTUtLjY1eiIvPgogIDxwYXRoIGQ9Ik0xMS43NjQgMTVhLjYyMy42MjMgMCAwIDEtLjMyLTEuMTYyIDYuNzgzIDYuNzgzIDAgMCAwIDMuMzA2LTUuODA1IDYuNzY3IDYuNzY3IDAgMCAwLTMuNDA5LTUuODY0LjYyNC42MjQgMCAxIDEgLjYxOS0xLjA4NUE4LjAxNSA4LjAxNSAwIDAgMSAxNiA4LjAzM2E4LjAzOCA4LjAzOCAwIDAgMS0zLjkxOCA2Ljg3OWMtLjEuMDYtLjIxLjA4OC0uMzE4LjA4OHoiLz4KICA8cGF0aCBkPSJNMTEuNDM0IDExLjg1QTQuOTgyIDQuOTgyIDAgMCAwIDEzLjI1IDhhNC45ODIgNC45ODIgMCAwIDAtMS44MTktMy44NTJsLS40MzEgMCAwIDcuNzAyLjQzNCAweiIvPgo8L3N2Zz4=")}
.bgm .volume.muted{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Im0xMSA0LjE0OSAwIDQuMTgxIDEuNzc1IDEuNzc1Yy4zLS42NDEuNDc1LTEuMzUuNDc1LTIuMTA1YTQuOTgxIDQuOTgxIDAgMCAwLTEuODE4LTMuODUxbC0uNDMyIDB6Ii8+CiAgPHBhdGggZD0iTTIuMDY3IDEuMTgzYS42MjYuNjI2IDAgMCAwLS44ODUuODg1TDQuMTE1IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0bDAtNC4xMTYgMy4zMTcgMy4zMTdjLS4yNzMuMjMyLS41Ni40NS0uODczLjYzNmEuNjI0LjYyNCAwIDAgMC0uMjE4Ljg1Ni42MjEuNjIxIDAgMCAwIC44NTYuMjE5IDcuNTggNy41OCAwIDAgMCAxLjEyMi0uODIzbC43MjkuNzI5YS42MjYuNjI2IDAgMCAwIC44ODQtLjg4NkwyLjA2NyAxLjE4M3oiLz4KICA8cGF0aCBkPSJNOSAyYzAtLjkyNi0xLjE1Mi0xLjM1Mi0xLjc1NS0uNjQ5TDUuNzU3IDMuMDg3IDkgNi4zMyA5IDJ6Ii8+CiAgPHBhdGggZD0iTTExLjM0MSAyLjE2OWE2Ljc2NyA2Ljc2NyAwIDAgMSAzLjQwOSA1Ljg2NCA2LjczMiA2LjczMiAwIDAgMS0uODMgMy4yMTdsLjkxMi45MTJBNy45OTIgNy45OTIgMCAwIDAgMTYgOC4wMzNhOC4wMTggOC4wMTggMCAwIDAtNC4wNC02Ljk1LjYyNS42MjUgMCAwIDAtLjYxOSAxLjA4NnoiLz4KPC9zdmc+")}
.long-audio .bgm {width:1000px;max-width:calc(100vw - 16px)}
</style>
</head>
<body ontouchstart>
+32 -45
View File
@@ -454,7 +454,36 @@ function parseNotesFromText(text) {noteList = [];
])
}
laneToggleList = noteList.filter(i => (i.noteType === '12' || i.noteType === '13'))
laneToggleList = []
let laneToggleRawList = noteList.filter(i => (i.noteType === '12' || i.noteType === '13'))
laneToggleRawList.forEach(i => {
const value = i.noteType === '12' ? 1 : 0
const startTime = i.timestamp
if (i.extParam2 === 2) {
const width = i.noteWidth / 2
for (let j=0; j<width; j++) {
const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
if (value === 1) {
laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + width - 0.5 - j) % 60})
laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + width + j) % 60})
} else {
laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + j) % 60})
laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + i.noteWidth - 0.5 - j) % 60})
}
}
} else if (i.extParam2 === 0) {
for (let j=0; j<i.noteWidth; j++) {
const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
laneToggleList.push({timestamp: stepTime, value, lane: (i.laneOffset + j) % 60})
}
} else if (i.extParam2 === 1) {
for (let j=0; j<i.noteWidth; j++) {
const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
laneToggleList.push({timestamp: stepTime, value, lane: (i.laneOffset + i.noteWidth - 1 - j) % 60})
}
}
})
laneToggleList.sort((a,b) => a.timestamp-b.timestamp)
console.log('parsed notes')
@@ -1145,51 +1174,9 @@ function updateLaneOnState(fromTs, toTs) {
while (laneChangeIdx < laneToggleList.length) {
let i = laneToggleList[laneChangeIdx]
if (i.timestamp > toTs) break
const transitionWidth = i.noteWidth / (i.extParam2 === 2 ? 2 : 1)
const transitionLength = transitionWidth * 1000 / 60 / 2
if (i.tickTotal === 0 || toTs - i.timestamp > transitionLength) {
const value = i.noteType === '12' ? 1 : 0
const width = i.noteWidth * laneEffectMul
for (let idx = 0; idx < width; idx++) {
laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
}
} else if (pendingLaneChange.indexOf(i) === -1) {
pendingLaneChange.push(i)
}
laneOnState[i.lane] = i.value
laneChangeIdx++
}
for (let i_ = 0; i_<pendingLaneChange.length; i_++) {
const i = pendingLaneChange[i_]
const value = i.noteType === '12' ? 1 : 0
const transitionWidth = i.noteWidth / (i.extParam2 === 2 ? 2 : 1)
const transitionLength = transitionWidth * 1000 / 60 / 2
const transitionPercent = Math.min(toTs - i.timestamp, transitionLength) / transitionLength
const width = i.noteWidth * laneEffectMul
if (toTs - i.timestamp > transitionLength) {
for (let idx = 0; idx < width; idx++) {
laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
}
pendingLaneChange.splice(i_, 1)
i_--
continue
}
for (let idx = 0; idx < width; idx++) {
let idxCompare = idx + 0.5
if (i.extParam2 === 0) {
if (idxCompare > width * transitionPercent) continue
} else if (i.extParam2 === 1) {
if (width - idxCompare > width * transitionPercent) continue
} else if (i.extParam2 === 2) {
const transitionBorder = width * transitionPercent / 2
if (value === 1) {
if (Math.abs(width/2 - idxCompare) > transitionBorder) continue
} else {
if (Math.abs(width/2 - idxCompare) < (width / 2 - transitionBorder)) continue
}
}
laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
}
}
}
speed_input.addEventListener('input', e => {
@@ -1199,7 +1186,7 @@ speed_input.addEventListener('input', e => {
drawForNextFrame = true
})
function resize() {
const w = Math.round(window.innerWidth * displayRatio), h = Math.round(window.innerHeight * displayRatio)
const w = Math.round(window.innerWidth * devicePixelRatio), h = Math.round(window.innerHeight * devicePixelRatio)
canvas.width = w
canvas.height = h
maxR = Math.round(Math.min(w, h) * 0.45)