ff09cb83bd
Adds new settings for controlling the note offset while playing. It can be either an actual offset (it is called "Audio Latency" in the settings) or just the visual offset ("Video Latency").
With higher audio latency it means you have to press the button sooner than what you hear, similarly with higher video latency it is sooner than what you see. By offsetting these events the game would play better, however, the sound effect of you hitting the drum would still play at the wrong time, the code cannot anticipate you to hit the drum in the future so to work around this issue a new option that disables drum sounds is also included.
These settings could be set through trial and error but it would be better to get the correct values through the automated latency calibration, where you can hit the drum as you hear sounds or see a blinking animation. I tried making one by measuring latency from user input, adding all the latency up, and dividing, but that gives unreliable results. I hope someone suggests to me what I should be doing during the calibration to get better results, as I cannot figure what to do on my own.
294 lines
5.1 KiB
CSS
294 lines
5.1 KiB
CSS
.view-outer{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-position: center;
|
|
}
|
|
.view{
|
|
background: rgb(246, 234, 212);
|
|
color: black;
|
|
border: 0.25em black solid;
|
|
border-radius: 0.5em;
|
|
width: 800px;
|
|
max-width: 40em;
|
|
padding: 1em;
|
|
margin: 1em;
|
|
font-size: 21px;
|
|
position: relative;
|
|
}
|
|
@media (max-width: 950px){
|
|
.view-outer:not(.touch-enabled) .view{
|
|
font-size: 3vmin;
|
|
}
|
|
}
|
|
@media (max-height: 650px){
|
|
.view-outer:not(.touch-enabled) .view{
|
|
font-size: 3vmin;
|
|
}
|
|
}
|
|
.touch-enabled .view{
|
|
font-size: 3vmin;
|
|
}
|
|
.view-title{
|
|
z-index: 1;
|
|
position: absolute;
|
|
color: white;
|
|
top: -0.7em;
|
|
font-size: 1.65em;
|
|
}
|
|
.view-content{
|
|
margin: 0.7em 0;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 14em);
|
|
}
|
|
kbd{
|
|
font-family: inherit;
|
|
padding: 0.1em 0.6em;
|
|
border: 1px solid #ccc;
|
|
font-size: 0.6em;
|
|
background-color: #f7f7f7;
|
|
color: #333;
|
|
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
text-shadow: 0 1px 0 #fff;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
.taibtn{
|
|
display: inline-block;
|
|
background: #f6ead4;
|
|
padding: 0.4em 0.4em;
|
|
border-radius: 0.5em;
|
|
border: 0.1em rgba(218, 205, 178, 1) solid;
|
|
cursor: pointer;
|
|
font-size: 1.4em;
|
|
box-sizing: border-box;
|
|
color: #555;
|
|
text-align: center;
|
|
}
|
|
.view-end-button{
|
|
float: right;
|
|
padding: 0.4em 1.5em;
|
|
font-weight: bold;
|
|
border-color: #000;
|
|
color: #000;
|
|
z-index: 1;
|
|
}
|
|
.taibtn:hover,
|
|
.taibtn.selected,
|
|
.view-end-button:hover,
|
|
.view-end-button.selected{
|
|
position: relative;
|
|
color: #fff;
|
|
background: #ffb547;
|
|
border-color: #fff;
|
|
}
|
|
.taibtn::before,
|
|
.view-end-button::before{
|
|
display: none;
|
|
}
|
|
.taibtn:hover::before,
|
|
.taibtn.selected::before,
|
|
.view-end-button:hover::before,
|
|
.view-end-button.selected::before{
|
|
display: block
|
|
}
|
|
.taibtn::before{
|
|
padding-left: inherit;
|
|
}
|
|
.left-buttons{
|
|
float: left;
|
|
display: flex;
|
|
}
|
|
.left-buttons .taibtn{
|
|
margin-right: 0.4em;
|
|
}
|
|
#diag-txt textarea,
|
|
#diag-txt iframe{
|
|
width: 100%;
|
|
height: 5em;
|
|
font-size: inherit;
|
|
resize: none;
|
|
word-break: break-all;
|
|
margin-bottom: 1em;
|
|
background: #fff;
|
|
border: 1px solid #a9a9a9;
|
|
user-select: all;
|
|
}
|
|
.text-warn{
|
|
color: #d00;
|
|
}
|
|
.link-btn a{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
pointer-events: none;
|
|
}
|
|
.nowrap{
|
|
white-space: nowrap;
|
|
}
|
|
@keyframes border-pulse{
|
|
0%{border-color: #ff0}
|
|
50%{border-color: rgba(255, 255, 0, 0)}
|
|
100%{border-color: #ff0}
|
|
}
|
|
@keyframes border-pulse2{
|
|
0%{border-color: #e29e06}
|
|
50%{border-color: rgba(226, 158, 6, 0)}
|
|
100%{border-color: #e29e06}
|
|
}
|
|
.settings-outer{
|
|
background-size: 50vh;
|
|
}
|
|
.setting-box{
|
|
display: flex;
|
|
height: 2em;
|
|
margin-top: 1.2em;
|
|
border: 0.25em solid #000;
|
|
border-radius: 0.5em;
|
|
padding: 0.3em;
|
|
outline: none;
|
|
color: #000;
|
|
cursor: pointer;
|
|
}
|
|
.setting-box:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.view-content:not(:hover) .setting-box.selected,
|
|
.setting-box:hover{
|
|
background: #ffb547;
|
|
animation: 2s linear border-pulse infinite;
|
|
}
|
|
.bold-fonts .setting-box{
|
|
line-height: 1em;
|
|
}
|
|
.setting-name{
|
|
position: relative;
|
|
width: 50%;
|
|
padding: 0.3em;
|
|
font-size: 1.3em;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.view-content:not(:hover) .setting-box.selected .setting-name,
|
|
.setting-box:hover .setting-name,
|
|
.setting-box:hover #gamepad-value{
|
|
color: #fff;
|
|
z-index: 0;
|
|
}
|
|
.setting-name::before{
|
|
padding-left: 0.3em;
|
|
}
|
|
.setting-value{
|
|
display: flex;
|
|
background: #fff;
|
|
width: 50%;
|
|
border-radius: 0.2em;
|
|
padding: 0.5em;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.setting-value.selected{
|
|
width: calc(50% + 0.2em);
|
|
margin: -0.1em;
|
|
border: 0.2em solid #e29e06;
|
|
padding: 0.4em;
|
|
animation: 2s linear border-pulse2 infinite;
|
|
}
|
|
.setting-value>div{
|
|
padding: 0 0.4em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.shadow-outer{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1;
|
|
}
|
|
#settings-gamepad,
|
|
#settings-latency{
|
|
display: none;
|
|
}
|
|
#settings-gamepad .view{
|
|
width: 29.9em;
|
|
max-width: 100vw;
|
|
}
|
|
#settings-gamepad .setting-box{
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
#gamepad-bg,
|
|
#gamepad-buttons{
|
|
background-size: 20.53em;
|
|
}
|
|
#gamepad-bg{
|
|
position: relative;
|
|
width: 20.53em;
|
|
height: 11.83em;
|
|
max-height: none;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
cursor: pointer;
|
|
}
|
|
#gamepad-buttons{
|
|
position: absolute;
|
|
left: 5.26em;
|
|
top: 4.48em;
|
|
width: 10.52em;
|
|
height: 4.89em;
|
|
background-position: 0 -11.87em;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
#gamepad-value{
|
|
position: relative;
|
|
margin-top: 1em;
|
|
}
|
|
#gamepad-value::before{
|
|
left: auto;
|
|
}
|
|
#settings-latency .view{
|
|
width: 30em;
|
|
}
|
|
#settings-latency .setting-value{
|
|
position: relative;
|
|
}
|
|
.setting-value:not(.selected) .latency-buttons{
|
|
display: none;
|
|
}
|
|
.setting-value .latency-buttons{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0;
|
|
}
|
|
.latency-buttons span{
|
|
display: inline-block;
|
|
width: 2em;
|
|
height: 100%;
|
|
text-align: center;
|
|
background-color: #c3862a;
|
|
color: #fff;
|
|
line-height: 2em;
|
|
outline: none;
|
|
}
|
|
.latency-buttons span:hover,
|
|
.latency-buttons span:active{
|
|
background-color: #946013;
|
|
}
|
|
.left-buttons .taibtn{
|
|
z-index: 1;
|
|
}
|