リファクタ等
This commit is contained in:
		| @@ -2,12 +2,12 @@ | |||||||
| <div style="overflow: hidden;"> | <div style="overflow: hidden;"> | ||||||
| 	<FormBase class="znqjceqz"> | 	<FormBase class="znqjceqz"> | ||||||
| 		<div id="debug"></div> | 		<div id="debug"></div> | ||||||
| 		<section class="_formItem"> | 		<section class="_formItem about"> | ||||||
| 			<div class="_formPanel" style="text-align: center; padding: 16px;" ref="about"> | 			<div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about"> | ||||||
| 				<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;" ref="icon" @load="iconLoaded" draggable="false"/> | 				<img src="/assets/icons/512.png" alt="" class="icon" ref="icon" @load="iconLoaded" draggable="false"/> | ||||||
| 				<div style="margin: 0.75em auto 0 auto; width: max-content;">Misskey</div> | 				<div class="misskey">Misskey</div> | ||||||
| 				<div style="margin: 0 auto; opacity: 0.5; width: max-content;">v{{ version }}</div> | 				<div class="version">v{{ version }}</div> | ||||||
| 				<span v-for="emoji in easterEggEmojis" :key="emoji.emoji" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }" :style="{ position: 'absolute', top: emoji.top, left: emoji.left, userSelect: 'none' }"><MkEmoji style="pointer-events: none; font-size: 24px; width: 24px;" :emoji="emoji.emoji" :custom-emojis="$store.state.instance.meta.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span> | 				<span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$store.state.instance.meta.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span> | ||||||
| 			</div> | 			</div> | ||||||
| 		</section> | 		</section> | ||||||
| 		<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity"> | 		<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity"> | ||||||
| @@ -127,17 +127,6 @@ export default defineComponent({ | |||||||
| 		} | 		} | ||||||
| 	}, | 	}, | ||||||
|  |  | ||||||
| 	created() { |  | ||||||
| 		const emojis = this.$store.state.settings.reactions; |  | ||||||
| 		for (let i = 0; i < 32; i++) { |  | ||||||
| 			this.easterEggEmojis.push({ |  | ||||||
| 				top: -(32 + (Math.random() * 256)) + 'px', |  | ||||||
| 				left: (Math.random() * 99) + '%', |  | ||||||
| 				emoji: emojis[Math.floor(Math.random() * emojis.length)], |  | ||||||
| 			}); |  | ||||||
| 		} |  | ||||||
| 	}, |  | ||||||
|  |  | ||||||
| 	mounted() { | 	mounted() { | ||||||
| 		VanillaTilt.init(this.$refs.icon, { | 		VanillaTilt.init(this.$refs.icon, { | ||||||
| 			max: 30, | 			max: 30, | ||||||
| @@ -155,6 +144,17 @@ export default defineComponent({ | |||||||
|  |  | ||||||
| 	methods: { | 	methods: { | ||||||
| 		iconLoaded() { | 		iconLoaded() { | ||||||
|  | 			const emojis = this.$store.state.settings.reactions; | ||||||
|  | 			const containerWidth = this.$refs.about.offsetWidth; | ||||||
|  | 			for (let i = 0; i < 32; i++) { | ||||||
|  | 				this.easterEggEmojis.push({ | ||||||
|  | 					id: i.toString(), | ||||||
|  | 					top: -(128 + (Math.random() * 256)), | ||||||
|  | 					left: (Math.random() * containerWidth), | ||||||
|  | 					emoji: emojis[Math.floor(Math.random() * emojis.length)], | ||||||
|  | 				}); | ||||||
|  | 			} | ||||||
|  |  | ||||||
| 			this.$nextTick(() => { | 			this.$nextTick(() => { | ||||||
| 				this.easterEggReady = true; | 				this.easterEggReady = true; | ||||||
| 			}); | 			}); | ||||||
| @@ -175,5 +175,58 @@ export default defineComponent({ | |||||||
| 	max-width: 800px; | 	max-width: 800px; | ||||||
| 	box-sizing: border-box; | 	box-sizing: border-box; | ||||||
| 	margin: 0 auto; | 	margin: 0 auto; | ||||||
|  |  | ||||||
|  | 	> .about { | ||||||
|  | 		> .panel { | ||||||
|  | 			position: relative; | ||||||
|  | 			text-align: center; | ||||||
|  | 			padding: 16px; | ||||||
|  |  | ||||||
|  | 			&.playing { | ||||||
|  | 				&, * { | ||||||
|  | 					user-select: none; | ||||||
|  | 				} | ||||||
|  |  | ||||||
|  | 				* { | ||||||
|  | 					will-change: transform; | ||||||
|  | 				} | ||||||
|  |  | ||||||
|  | 				> .emoji { | ||||||
|  | 					visibility: visible; | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  |  | ||||||
|  | 			> .icon { | ||||||
|  | 				display: block; | ||||||
|  | 				width: 100px; | ||||||
|  | 				margin: 0 auto; | ||||||
|  | 				border-radius: 16px; | ||||||
|  | 			} | ||||||
|  |  | ||||||
|  | 			> .misskey { | ||||||
|  | 				margin: 0.75em auto 0 auto; | ||||||
|  | 				width: max-content; | ||||||
|  | 			} | ||||||
|  |  | ||||||
|  | 			> .version { | ||||||
|  | 				margin: 0 auto; | ||||||
|  | 				width: max-content; | ||||||
|  | 				opacity: 0.5; | ||||||
|  | 			} | ||||||
|  |  | ||||||
|  | 			> .emoji { | ||||||
|  | 				position: absolute; | ||||||
|  | 				top: 0; | ||||||
|  | 				left: 0; | ||||||
|  | 				visibility: hidden; | ||||||
|  |  | ||||||
|  | 				> .emoji { | ||||||
|  | 					pointer-events: none; | ||||||
|  | 					font-size: 24px; | ||||||
|  | 					width: 24px; | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -58,18 +58,21 @@ export function physics(container: HTMLElement) { | |||||||
| 	const objEls = Array.from(container.children); | 	const objEls = Array.from(container.children); | ||||||
| 	const objs = []; | 	const objs = []; | ||||||
| 	for (const objEl of objEls) { | 	for (const objEl of objEls) { | ||||||
|  | 		const left = objEl.dataset.physicsX ? parseInt(objEl.dataset.physicsX) : objEl.offsetLeft; | ||||||
|  | 		const top = objEl.dataset.physicsY ? parseInt(objEl.dataset.physicsY) : objEl.offsetTop; | ||||||
|  |  | ||||||
| 		let obj; | 		let obj; | ||||||
| 		if (objEl.classList.contains('_physics_circle_')) { | 		if (objEl.classList.contains('_physics_circle_')) { | ||||||
| 			obj = Matter.Bodies.circle( | 			obj = Matter.Bodies.circle( | ||||||
| 				objEl.offsetLeft + (objEl.offsetWidth / 2), | 				left + (objEl.offsetWidth / 2), | ||||||
| 				objEl.offsetTop + (objEl.offsetHeight / 2), | 				top + (objEl.offsetHeight / 2), | ||||||
| 				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2, | 				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2, | ||||||
| 			); | 			); | ||||||
| 		} else { | 		} else { | ||||||
| 			const style = window.getComputedStyle(objEl); | 			const style = window.getComputedStyle(objEl); | ||||||
| 			obj = Matter.Bodies.rectangle( | 			obj = Matter.Bodies.rectangle( | ||||||
| 				objEl.offsetLeft + (objEl.offsetWidth / 2), | 				left + (objEl.offsetWidth / 2), | ||||||
| 				objEl.offsetTop + (objEl.offsetHeight / 2), | 				top + (objEl.offsetHeight / 2), | ||||||
| 				objEl.offsetWidth, | 				objEl.offsetWidth, | ||||||
| 				objEl.offsetHeight, | 				objEl.offsetHeight, | ||||||
| 				{ | 				{ | ||||||
| @@ -106,8 +109,6 @@ export function physics(container: HTMLElement) { | |||||||
| 		objEl.style.top = 0; | 		objEl.style.top = 0; | ||||||
| 		objEl.style.left = 0; | 		objEl.style.left = 0; | ||||||
| 		objEl.style.margin = 0; | 		objEl.style.margin = 0; | ||||||
| 		objEl.style.userSelect = 'none'; |  | ||||||
| 		objEl.style.willChange = 'transform'; |  | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	window.requestAnimationFrame(update); | 	window.requestAnimationFrame(update); | ||||||
| @@ -122,7 +123,6 @@ export function physics(container: HTMLElement) { | |||||||
| 			const x = (obj.position.x - objEl.offsetWidth / 2); | 			const x = (obj.position.x - objEl.offsetWidth / 2); | ||||||
| 			const y = (obj.position.y - objEl.offsetHeight / 2); | 			const y = (obj.position.y - objEl.offsetHeight / 2); | ||||||
| 			const angle = obj.angle; | 			const angle = obj.angle; | ||||||
|  |  | ||||||
| 			objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`; | 			objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`; | ||||||
| 		} | 		} | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo