fix(做对了): 点评弹窗等烟花放完再出来，不再放到一半就被盖住；星星雨、彩虹喷泉收短一点，十种都在两三秒内放完
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
655af07ca7
commit
4d6df4ab0c
2 files changed
+80
-36
No files matched your search
@@ -35,7 +35,7 @@ const { celebrate } = useFireworks()
|
||||
// 只对已经能评价、且还没评过的人弹：后端要求先有 AC 才收评价，这里刚 AC 完正好；
|
||||
// mine 非 null 说明早就评过了，别再打扰。
|
||||
//
|
||||
// 点评是强制的，但从 AC 到弹窗出来有 1.5 秒（加上查一次「评过没有」），而换题会把
|
||||
// 点评是强制的，但弹窗要等烟花放完才出来（两三秒，加上查一次「评过没有」），而换题会把
|
||||
// 定时器取消（见下面换题的 watch）—— 「下一题」在通过的那一刻就出现了，学生手快点
|
||||
// 下去，点评就跳过了。所以这段时间里欠着一次点评（reviewOwed），离开这道题的导航
|
||||
// 先拦下来：立刻弹点评，选完再去原来要去的地方。
|
||||
@@ -128,11 +128,24 @@ function continueAfterReview() {
|
||||
closeCommentPanel()
|
||||
}
|
||||
|
||||
const { start: showCommentPanelDelayed, stop: cancelCommentPanel } = useTimeoutFn(
|
||||
openReview,
|
||||
1500,
|
||||
{ immediate: false },
|
||||
)
|
||||
/**
|
||||
* 烟花放完再弹点评，两边一个时间（十种烟花长短不一，两到三秒）。
|
||||
* 每次通过记一个号，换题、被导航拦下提前弹了，就把号作废，放完也不再弹。
|
||||
*/
|
||||
let reviewAfterFireworks = 0
|
||||
|
||||
function showCommentPanelAfter(fireworks: Promise<void>) {
|
||||
const run = ++reviewAfterFireworks
|
||||
fireworks.then(() => {
|
||||
if (run === reviewAfterFireworks) openReview()
|
||||
})
|
||||
}
|
||||
|
||||
function cancelCommentPanel() {
|
||||
reviewAfterFireworks++
|
||||
}
|
||||
// 离开题目页时烟花那边当作放完了，不能接着去查、去弹
|
||||
onScopeDispose(cancelCommentPanel)
|
||||
|
||||
/**
|
||||
* 只拦「离开这道题」：换 query（左栏切页签会改 `?tab=`）不算。弹窗已经开着的时候
|
||||
@@ -166,7 +179,7 @@ const { start: goToProblemSetDelayed, stop: cancelGoToProblemSet } = useTimeoutF
|
||||
)
|
||||
|
||||
/**
|
||||
* 换题时收掉通过之后那两个 1.5 秒的定时器 —— 评价弹窗是按**当前**题目去查、去弹的，
|
||||
* 换题时收掉通过之后等着的点评和回题单 —— 评价弹窗是按**当前**题目去查、去弹的，
|
||||
* 不取消的话就会给一道还没做的题弹评价。欠着的点评走不到这里：离开这道题的导航
|
||||
* 已经被 holdForReview 拦下、评完才放行；还能走到这里的只有弹窗开着时按了浏览器后退。
|
||||
* 结果面板、还在跟的那条提交由 submission store 自己收。
|
||||
@@ -226,12 +239,12 @@ watch(
|
||||
if (result !== SubmissionStatus.accepted) return
|
||||
|
||||
// 2. 放烟花
|
||||
celebrate()
|
||||
const fireworks = celebrate()
|
||||
|
||||
// 3. 弹出评价框。比赛里不打扰；题单里 1.5 秒后要跳回题单页，弹了也会被冲掉
|
||||
// 3. 烟花放完弹出评价框。比赛里不打扰；题单里 1.5 秒后要跳回题单页，弹了也会被冲掉
|
||||
if (ctx.value.reviewAfterAccepted) {
|
||||
reviewOwed.value = true
|
||||
showCommentPanelDelayed()
|
||||
showCommentPanelAfter(fireworks)
|
||||
}
|
||||
|
||||
if (ctx.value.backToProblemSet) {
|
||||
|
||||
@@ -74,9 +74,9 @@ const PALETTES = [
|
||||
const RAINBOW = [COLORS.pink, COLORS.orange, COLORS.gold, COLORS.green, COLORS.blue, COLORS.purple]
|
||||
|
||||
/**
|
||||
* 盖在点评弹窗上面放：通过之后 1.5 秒点评弹窗就出来了，这十种要放 2～3 秒，
|
||||
* 默认的 zIndex 100 在 Naive 弹层（2000 起）底下，后半段会被遮罩挡住。
|
||||
* 画布本身 pointer-events: none，不挡点评的点击。
|
||||
* 盖在弹层上面放。点评弹窗平时等烟花放完才出来（见 celebrate 的返回值），但学生在放的时候
|
||||
* 点「下一题」，点评会被提前叫出来 —— 默认的 zIndex 100 在 Naive 弹层（2000 起）底下，
|
||||
* 剩下的半场就被遮罩挡住了。画布本身 pointer-events: none，不挡点评的点击。
|
||||
*/
|
||||
const Z_INDEX = 3000
|
||||
|
||||
@@ -113,6 +113,11 @@ export function useFireworks() {
|
||||
// 动画期间创建的定时器，组件卸载时统一清理，避免离开页面后动画继续
|
||||
const timers = new Set<ReturnType<typeof setTimeout>>()
|
||||
let disposed = false
|
||||
// 这一场最后一次发射的 promise：canvas-confetti 同一块画布上的粒子是一场动画，
|
||||
// 后发的接进去，promise 在所有粒子都落完的时候才 resolve
|
||||
let lastShot: Promise<unknown> | null = null
|
||||
// 还没发出去的异步准备（表情包位图在解码），算「还在放」
|
||||
let preparing = 0
|
||||
|
||||
function runLater(fn: () => void, ms: number) {
|
||||
const id = setTimeout(() => {
|
||||
@@ -146,7 +151,22 @@ export function useFireworks() {
|
||||
}
|
||||
|
||||
function fire(options: confetti.Options) {
|
||||
confetti({ zIndex: Z_INDEX, ...options })
|
||||
lastShot = confetti({ zIndex: Z_INDEX, ...options }) ?? lastShot
|
||||
}
|
||||
|
||||
/** 定时器都走完、最后一把粒子也落完。离开页面（定时器被清掉）就当放完了 */
|
||||
function finished(): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
const check = () => {
|
||||
if (disposed) return resolve()
|
||||
if (timers.size > 0 || preparing > 0) {
|
||||
setTimeout(check, 50)
|
||||
return
|
||||
}
|
||||
Promise.resolve(lastShot).then(() => resolve())
|
||||
}
|
||||
check()
|
||||
})
|
||||
}
|
||||
|
||||
/** 没有真火箭：沿上升路线一路撒往下掉的小火星，当作尾焰。x0 → x、从屏幕底到 y */
|
||||
@@ -228,15 +248,15 @@ export function useFireworks() {
|
||||
|
||||
// 效果2: 星星雨 —— 从顶上落下一片星星
|
||||
() => {
|
||||
every(1200, () => {
|
||||
every(1000, () => {
|
||||
fire({
|
||||
particleCount: 2,
|
||||
angle: 270,
|
||||
spread: 20,
|
||||
startVelocity: 8,
|
||||
startVelocity: 10,
|
||||
gravity: 0.7,
|
||||
decay: 0.97,
|
||||
ticks: 180,
|
||||
ticks: 120,
|
||||
scalar: 1.1,
|
||||
shapes: ["star"],
|
||||
colors: [COLORS.gold, COLORS.gold, COLORS.pink, COLORS.blue, COLORS.silver],
|
||||
@@ -263,7 +283,7 @@ export function useFireworks() {
|
||||
// 效果4: 彩虹喷泉 —— 两个下角往里喷，颜色按彩虹轮换
|
||||
() => {
|
||||
const start = performance.now()
|
||||
every(1500, () => {
|
||||
every(1300, () => {
|
||||
const color = RAINBOW[Math.floor((performance.now() - start) / 100) % RAINBOW.length]
|
||||
const base: confetti.Options = {
|
||||
particleCount: 3,
|
||||
@@ -271,7 +291,7 @@ export function useFireworks() {
|
||||
startVelocity: 55,
|
||||
gravity: 1,
|
||||
decay: 0.92,
|
||||
ticks: 120,
|
||||
ticks: 95,
|
||||
scalar: 0.8,
|
||||
flat: true,
|
||||
shapes: ["circle"],
|
||||
@@ -420,29 +440,40 @@ export function useFireworks() {
|
||||
|
||||
// 效果10: 表情包烟花 —— 一左一右炸出两团表情
|
||||
() => {
|
||||
loadEmojiShapes().then((emojiShapes) => {
|
||||
if (disposed) return
|
||||
const options: confetti.Options = {
|
||||
shapes: emojiShapes,
|
||||
flat: true,
|
||||
scalar: 5,
|
||||
particleCount: 16,
|
||||
spread: 360,
|
||||
startVelocity: 40,
|
||||
gravity: 0.7,
|
||||
ticks: 150,
|
||||
}
|
||||
fire({ ...options, origin: { x: 0.35, y: 0.5 } })
|
||||
runLater(() => fire({ ...options, origin: { x: 0.68, y: 0.42 } }), 300)
|
||||
})
|
||||
preparing++
|
||||
loadEmojiShapes()
|
||||
.then((emojiShapes) => {
|
||||
if (disposed) return
|
||||
const options: confetti.Options = {
|
||||
shapes: emojiShapes,
|
||||
flat: true,
|
||||
scalar: 5,
|
||||
particleCount: 16,
|
||||
spread: 360,
|
||||
startVelocity: 40,
|
||||
gravity: 0.7,
|
||||
ticks: 150,
|
||||
}
|
||||
fire({ ...options, origin: { x: 0.35, y: 0.5 } })
|
||||
runLater(() => fire({ ...options, origin: { x: 0.68, y: 0.42 } }), 300)
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => preparing--)
|
||||
},
|
||||
]
|
||||
|
||||
/** 最多等这么久：粒子落完的回调万一没来，别让点评弹窗一直不出来 */
|
||||
const MAX_WAIT_MS = 4000
|
||||
|
||||
/**
|
||||
* 触发随机烟花效果
|
||||
* 触发随机烟花效果，返回的 promise 在这一场放完时 resolve（点评弹窗等它）
|
||||
*/
|
||||
function celebrate() {
|
||||
function celebrate(): Promise<void> {
|
||||
pick(fireworkTypes)()
|
||||
return Promise.race([
|
||||
finished(),
|
||||
new Promise<void>((resolve) => setTimeout(resolve, MAX_WAIT_MS)),
|
||||
])
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Reference in new issue
Block a user