mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-25 11:03:56 +00:00
Speedup item pick
This commit is contained in:
parent
bee6192894
commit
ed21e32b1f
2 changed files with 19 additions and 23 deletions
|
|
@ -532,14 +532,12 @@ body {
|
|||
|
||||
.menu-item div .pick {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.text-move {
|
||||
animation: horizontally 4s linear infinite alternate;
|
||||
}
|
||||
|
||||
.menu-item div .pick-over {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes horizontally {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
|
|
|
|||
|
|
@ -27,15 +27,19 @@ const gameList = (() => {
|
|||
.join('');
|
||||
};
|
||||
|
||||
let pickItems;
|
||||
|
||||
const show = () => {
|
||||
render();
|
||||
menuItemChoice.style.display = "block";
|
||||
pickItems = listBox.querySelectorAll(`.menu-item span`);
|
||||
pickGame();
|
||||
};
|
||||
|
||||
const pickDelayMs = 150
|
||||
let picking = false
|
||||
|
||||
const pickGame = (index, hold) => {
|
||||
const pickGame = (index) => {
|
||||
let idx = undefined !== index ? index : gameIndex;
|
||||
|
||||
// check boundaries
|
||||
|
|
@ -48,21 +52,18 @@ const gameList = (() => {
|
|||
menuTop = MENU_TOP_POSITION - idx * 36;
|
||||
listBox.style['top'] = `${menuTop}px`;
|
||||
|
||||
const cl = hold ? 'pick-over' : 'pick'
|
||||
let pick = listBox.querySelectorAll('.menu-item .pick, .menu-item .pick-over')[0];
|
||||
|
||||
setTimeout(() => { // overflow marquee
|
||||
if (pick) {
|
||||
pick.classList.remove('pick');
|
||||
pick.classList.remove('pick-over')
|
||||
}
|
||||
listBox.querySelectorAll(`.menu-item span`)[idx].classList.add(cl);
|
||||
}, 50)
|
||||
|
||||
let pick = listBox.querySelectorAll('.menu-item .pick')[0];
|
||||
if (pick) {
|
||||
pick.classList.remove('pick', 'text-move');
|
||||
}
|
||||
const i = pickItems[idx];
|
||||
setTimeout(() => i.classList.add('pick'), 50)
|
||||
!picking && i.classList.add('text-move')
|
||||
gameIndex = idx;
|
||||
};
|
||||
|
||||
const startGamePickerTimer = (upDirection) => {
|
||||
picking = true
|
||||
if (gamePickTimer !== null) return;
|
||||
const shift = upDirection ? -1 : 1;
|
||||
pickGame(gameIndex + shift);
|
||||
|
|
@ -75,15 +76,12 @@ const gameList = (() => {
|
|||
};
|
||||
|
||||
const stopGamePickerTimer = () => {
|
||||
picking = false
|
||||
pickItems[gameIndex] && pickItems[gameIndex].classList.add('text-move')
|
||||
|
||||
if (gamePickTimer === null) return;
|
||||
clearInterval(gamePickTimer);
|
||||
gamePickTimer = null;
|
||||
|
||||
const pick = listBox.querySelectorAll('.menu-item .pick-over')[0];
|
||||
if (pick) {
|
||||
pick.classList.remove('pick-over');
|
||||
pick.classList.add('pick');
|
||||
}
|
||||
};
|
||||
|
||||
const onMenuPressed = (newPosition) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue