优化开始界面代码

This commit is contained in:
unanmed 2023-02-21 23:27:40 +08:00
parent 9e51b03a4d
commit 17e282a835
2 changed files with 34 additions and 29 deletions

View File

@ -197,9 +197,18 @@ export function download(content: string, name: string) {
* @param funcs * @param funcs
* @param interval * @param interval
*/ */
export async function doByInterval(funcs: (() => void)[], interval: number) { export async function doByInterval(
funcs: (() => void)[],
interval: number,
awaitFirst: boolean = false
) {
for await (const fn of funcs) { for await (const fn of funcs) {
await sleep(interval); if (awaitFirst) {
await sleep(interval);
}
fn(); fn();
if (!awaitFirst) {
await sleep(interval);
}
} }
} }

View File

@ -50,7 +50,7 @@ import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { RightOutlined, SoundOutlined } from '@ant-design/icons-vue'; import { RightOutlined, SoundOutlined } from '@ant-design/icons-vue';
import { sleep } from 'mutate-animate'; import { sleep } from 'mutate-animate';
import { Matrix4 } from '../plugin/webgl/matrix'; import { Matrix4 } from '../plugin/webgl/matrix';
import { keycode } from '../plugin/utils'; import { doByInterval, keycode } from '../plugin/utils';
import { KeyCode } from '../plugin/keyCodes'; import { KeyCode } from '../plugin/keyCodes';
let startdiv: HTMLDivElement; let startdiv: HTMLDivElement;
@ -184,20 +184,18 @@ async function showHard() {
'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear'; 'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear';
cursor.style.opacity = '0'; cursor.style.opacity = '0';
buttons.forEach(v => (v.style.transition = '')); buttons.forEach(v => (v.style.transition = ''));
ids.unshift(toshow.pop()!);
await sleep(150); await doByInterval(
ids.unshift(toshow.pop()!); Array(4).fill(() => ids.unshift(toshow.pop()!)),
await sleep(150); 150
ids.unshift(toshow.pop()!); );
await sleep(150); await sleep(250);
ids.unshift(toshow.pop()!);
await sleep(400);
text.value = hard; text.value = hard;
toshow.push(hardIds.shift()!);
await sleep(150); await doByInterval(
toshow.push(hardIds.shift()!); Array(3).fill(() => toshow.push(hardIds.shift()!)),
await sleep(150); 150
toshow.push(hardIds.shift()!); );
selected.value = 'easy'; selected.value = 'easy';
nextTick(() => { nextTick(() => {
buttons = toshow buttons = toshow
@ -219,24 +217,22 @@ async function setButtonAnimate() {
'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear'; 'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear';
cursor.style.opacity = '0'; cursor.style.opacity = '0';
buttons.forEach(v => (v.style.transition = '')); buttons.forEach(v => (v.style.transition = ''));
hardIds.unshift(toshow.pop()!); await doByInterval(
await sleep(150); Array(3).fill(() => hardIds.unshift(toshow.pop()!)),
hardIds.unshift(toshow.pop()!); 150
await sleep(150); );
hardIds.unshift(toshow.pop()!);
} }
text.value = text1; text.value = text1;
if (played) { if (played) {
text.value = text2; text.value = text2;
} }
await sleep(400); await sleep(250);
toshow.push(ids.shift()!);
await sleep(150); await doByInterval(
toshow.push(ids.shift()!); Array(4).fill(() => toshow.push(ids.shift()!)),
await sleep(150); 150
toshow.push(ids.shift()!); );
await sleep(150);
toshow.push(ids.shift()!);
selected.value = 'start-game'; selected.value = 'start-game';
nextTick(() => { nextTick(() => {
buttons = toshow buttons = toshow