nullobsi/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

client: refactor components/ripple.vue to composition API

Browse source
This commit is contained in:
Johann150 2022-09-30 17:57:06 +02:00
parent f571f61c2d
commit be19ea610f
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 35 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
packages/client/src/components/ripple.vue
View file

@ -56,59 +56,47 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
export default defineComponent({
props: {
x: {
type: Number,
required: true,
},
y: {
type: Number,
required: true,
},
particle: {
type: Boolean,
required: false,
default: true,
},
},
emits: ['end'],
setup(props, context) {
const particles = [];
const origin = 64;
const colors = ['#FF1493', '#00FFFF', '#FFE202'];
const props = withDefaults(defineProps<{
x: number;
y: number;
particle?: boolean;
}>(), {
particle: true,
});
if (props.particle) {
for (let i = 0; i < 12; i++) {
const angle = Math.random() * (Math.PI * 2);
const pos = Math.random() * 16;
const velocity = 16 + (Math.random() * 48);
particles.push({
size: 4 + (Math.random() * 8),
xA: origin + (Math.sin(angle) * pos),
yA: origin + (Math.cos(angle) * pos),
xB: origin + (Math.sin(angle) * (pos + velocity)),
yB: origin + (Math.cos(angle) * (pos + velocity)),
color: colors[Math.floor(Math.random() * colors.length)],
});
}
}
const emit = defineEmits<{
(ev: 'end'): void;
}>();
onMounted(() => {
window.setTimeout(() => {
context.emit('end');
}, 1100);
const zIndex = os.claimZIndex('high');
const particles = [];
const origin = 64;
const colors = ['#FF1493', '#00FFFF', '#FFE202'];
if (props.particle) {
for (let i = 0; i < 12; i++) {
const angle = Math.random() * (Math.PI * 2);
const pos = Math.random() * 16;
const velocity = 16 + (Math.random() * 48);
particles.push({
size: 4 + (Math.random() * 8),
xA: origin + (Math.sin(angle) * pos),
yA: origin + (Math.cos(angle) * pos),
xB: origin + (Math.sin(angle) * (pos + velocity)),
yB: origin + (Math.cos(angle) * (pos + velocity)),
color: colors[Math.floor(Math.random() * colors.length)],
});
}
}
return {
particles,
zIndex: os.claimZIndex('high'),
};
},
onMounted(() => {
window.setTimeout(() => {
emit('end');
}, 1100);
});
</script>