fix(stage-ui, ui-transitions): typecheck (#46)
* try fix type errors in Stage.vue * remove index * make index optional * setMotion also need to make index optional * fix(ui-transitions): typecheck --------- Co-authored-by: LemonNeko <chheese048@gmail.com>
This commit is contained in:
co-authored by
LemonNeko
parent
69b45aec00
commit
ff807ffa51
@@ -184,7 +184,7 @@ async function initLive2DPixiStage() {
|
||||
loadingLive2dModel.value = false
|
||||
}
|
||||
|
||||
async function setMotion(motionName: string, index: number) {
|
||||
async function setMotion(motionName: string, index?: number) {
|
||||
await model.value!.motion(motionName, index, MotionPriority.FORCE)
|
||||
}
|
||||
|
||||
|
||||
@@ -128,7 +128,7 @@ const emotionsQueue = useQueue<Emotion>({
|
||||
await vrmViewerRef.value!.setExpression(value)
|
||||
}
|
||||
else if (stageView.value === '2d') {
|
||||
live2dCurrentMotion.value = EMOTION_EmotionMotionName_value[ctx.data]
|
||||
live2dCurrentMotion.value = { group: EMOTION_EmotionMotionName_value[ctx.data] }
|
||||
}
|
||||
},
|
||||
],
|
||||
@@ -173,7 +173,7 @@ onBeforeMessageComposed(async () => {
|
||||
})
|
||||
|
||||
onBeforeSend(async () => {
|
||||
live2dCurrentMotion.value = EmotionThinkMotionName
|
||||
live2dCurrentMotion.value = { group: EmotionThinkMotionName }
|
||||
})
|
||||
|
||||
onTokenLiteral(async (literal) => {
|
||||
@@ -212,13 +212,13 @@ onMounted(() => {
|
||||
const extendedWindow = window as Window & typeof globalThis & { electron?: ElectronAPI }
|
||||
|
||||
extendedWindow.electron?.ipcRenderer.on('before-hide', () => {
|
||||
live2dCurrentMotion.value = EmotionAngryMotionName
|
||||
live2dCurrentMotion.value = { group: EmotionAngryMotionName }
|
||||
})
|
||||
extendedWindow.electron?.ipcRenderer.on('after-show', () => {
|
||||
live2dCurrentMotion.value = EmotionHappyMotionName
|
||||
live2dCurrentMotion.value = { group: EmotionHappyMotionName }
|
||||
})
|
||||
extendedWindow.electron?.ipcRenderer.on('before-quit', () => {
|
||||
live2dCurrentMotion.value = EmotionThinkMotionName
|
||||
live2dCurrentMotion.value = { group: EmotionThinkMotionName }
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ export const useSettings = defineStore('settings', () => {
|
||||
const live2dLoadSource = ref<'file' | 'url'>('url')
|
||||
const loadingLive2dModel = ref(false) // if set to true, the model will be loaded
|
||||
const live2dPosition = useLocalStorage('settings/live2d/position', { x: 0, y: 0 }) // position is relative to the center of the screen
|
||||
const live2dCurrentMotion = ref<{ group: string, index: number }>({ group: 'Idle', index: 0 })
|
||||
const live2dCurrentMotion = ref<{ group: string, index?: number }>({ group: 'Idle', index: 0 })
|
||||
const availableLive2dMotions = ref<{ motionName: string, motionIndex: number, fileName: string }[]>([])
|
||||
const live2dMotionMap = useLocalStorage<Record<string, string>>('settings/live2d/motion-map', {})
|
||||
|
||||
|
||||
@@ -10,11 +10,11 @@ const props = defineProps<{
|
||||
}
|
||||
}>()
|
||||
|
||||
const colors = computed(() => props.stageTransition.colors || ['#eee', '#ebcb8b', '#c56370', '#3f3b52'])
|
||||
const colors = computed(() => props.stageTransition?.colors || ['#eee', '#ebcb8b', '#c56370', '#3f3b52'])
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.style.setProperty('--circle-expansion-delay', `${props.stageTransition.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--circle-expansion-duration', `${props.stageTransition.duration || 0.4}s`)
|
||||
document.documentElement.style.setProperty('--circle-expansion-delay', `${props.stageTransition?.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--circle-expansion-duration', `${props.stageTransition?.duration || 0.4}s`)
|
||||
colors.value.forEach((color, index) => {
|
||||
document.documentElement.style.setProperty(`--circle-expansion-color-${index + 1}`, color)
|
||||
})
|
||||
@@ -22,7 +22,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="circle-expansion-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
|
||||
<div class="circle-expansion-transition" :style="{ zIndex: stageTransition?.zIndex || 100 }">
|
||||
<div v-for="(_, index) in colors" :key="index" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -16,21 +16,21 @@ const props = defineProps <{
|
||||
}
|
||||
}>()
|
||||
|
||||
const direction = computed(() => props.stageTransition.direction || 'up')
|
||||
const direction = computed(() => props.stageTransition?.direction || 'up')
|
||||
const directionClass = computed(() => `fantasy-fall-${direction.value}`)
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition.primaryColor || '#eee')
|
||||
document.documentElement.style.setProperty('--fantasy-fall-duration', `${props.stageTransition.duration || 0.6}s`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-delay', `${props.stageTransition.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-sm', `${props.stageTransition.borderRadius?.sm || '14rem'}`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-md', `${props.stageTransition.borderRadius?.md || '14rem'}`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-lg', `${props.stageTransition.borderRadius?.lg || '50%'}`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition?.primaryColor || '#eee')
|
||||
document.documentElement.style.setProperty('--fantasy-fall-duration', `${props.stageTransition?.duration || 0.6}s`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-delay', `${props.stageTransition?.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-sm', `${props.stageTransition?.borderRadius?.sm || '14rem'}`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-md', `${props.stageTransition?.borderRadius?.md || '14rem'}`)
|
||||
document.documentElement.style.setProperty('--fantasy-fall-radius-lg', `${props.stageTransition?.borderRadius?.lg || '50%'}`)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fantasy-fall-transition" :class="directionClass" :style="{ zIndex: stageTransition.zIndex || 100 }" />
|
||||
<div class="fantasy-fall-transition" :class="directionClass" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -10,8 +10,8 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
const stageTransition = computed(() => props.stageTransition)
|
||||
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
|
||||
const overlayColor1 = computed(() => stageTransition.value?.primaryColor || '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor || '#ccc')
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.style.setProperty('--stage-transition-4-overlay-color-1', overlayColor1.value)
|
||||
@@ -20,7 +20,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stage-transition-4" :style="{ zIndex: stageTransition.zIndex || 100 }">
|
||||
<div class="stage-transition-4" :style="{ zIndex: stageTransition?.zIndex ?? 100 }">
|
||||
<div class="stage-transition-4__block" />
|
||||
<div class="stage-transition-4__block" />
|
||||
<div class="stage-transition-4__block" />
|
||||
|
||||
@@ -16,18 +16,18 @@ const props = defineProps<{
|
||||
|
||||
onMounted(() => {
|
||||
// Set CSS variables for all three circles
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-1-color', props.stageTransition.primaryColor || '#ebcb8b')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-2-color', props.stageTransition.secondaryColor || '#c56370')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-3-color', props.stageTransition.tertiaryColor || '#43445b')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-duration', `${props.stageTransition.duration || 0.6}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-delay', `${props.stageTransition.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-stagger', `${props.stageTransition.staggerDelay || 0.1}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-rotation', `${props.stageTransition.rotation || 270}deg`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-1-color', props.stageTransition?.primaryColor || '#ebcb8b')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-2-color', props.stageTransition?.secondaryColor || '#c56370')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-3-color', props.stageTransition?.tertiaryColor || '#43445b')
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-duration', `${props.stageTransition?.duration || 0.6}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-delay', `${props.stageTransition?.delay || 0}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-stagger', `${props.stageTransition?.staggerDelay || 0.1}s`)
|
||||
document.documentElement.style.setProperty('--rectangle-rotate-rotation', `${props.stageTransition?.rotation || 270}deg`)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rectangle-rotate-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
|
||||
<div class="rectangle-rotate-transition" :style="{ zIndex: stageTransition?.zIndex ?? 100 }">
|
||||
<!-- First rectangle (top-left) -->
|
||||
<div class="rectangle rectangle-rotate-1">
|
||||
<div />
|
||||
|
||||
@@ -10,8 +10,8 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
const stageTransition = computed(() => props.stageTransition)
|
||||
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
|
||||
const overlayColor1 = computed(() => stageTransition.value?.primaryColor || '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor || '#ccc')
|
||||
|
||||
watch([stageTransition, overlayColor1, overlayColor2], () => {
|
||||
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-1', overlayColor1.value)
|
||||
@@ -25,7 +25,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stage-transition-1" :style="{ zIndex: stageTransition.zIndex || 100 }" />
|
||||
<div class="stage-transition-1" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -10,8 +10,8 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
const stageTransition = computed(() => props.stageTransition)
|
||||
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
|
||||
const overlayColor1 = computed(() => stageTransition.value?.primaryColor ?? '#666')
|
||||
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor ?? '#ccc')
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.style.setProperty('--stage-transition-2-overlay-color-1', overlayColor1.value)
|
||||
@@ -20,7 +20,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stage-transition-2" :style="{ zIndex: stageTransition.zIndex || 100 }" />
|
||||
<div class="stage-transition-2" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user