feat(event): spider easter egg halloween

AxaFrance · Oct 29, 2020 · a3cd947 · a3cd947
1 parent 1caee97
commit a3cd947
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 0 deletions.
diff --git a/src/components/Event/Halloween/Skeleton/Spider.scss b/src/components/Event/Halloween/Skeleton/Spider.scss
@@ -0,0 +1,125 @@
+html,
+body {
+	height: 100%;
+	overflow: hidden;
+}
+.container {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin-left: -20px;
+	animation: inicio 3s ease-in-out forwards;
+
+	&__end {
+		animation: endSpider 1s;
+	}
+}
+.container::after {
+	background: rgba(0, 0, 0, 0.5);
+	content: '';
+	position: absolute;
+	top: -1000px;
+	left: 50%;
+	margin-left: 9px;
+	width: 1px;
+	height: 1000px;
+}
+.container::before {
+	background: #000000;
+	border-radius: 100%;
+	color: #fff;
+	font-size: 1.3em;
+	content: ' . .';
+	position: absolute;
+	margin-top: -5px;
+	margin-left: -2px;
+	width: 25px;
+	height: 25px;
+}
+.left {
+	position: absolute;
+}
+.right {
+	position: absolute;
+	transform: rotateY(180deg);
+}
+.uno,
+.dos,
+.tres,
+.cuatro {
+	background: rgba(0, 0, 0, 0.5);
+	position: relative;
+	width: 20px;
+	height: 3px;
+}
+.uno > .uno,
+.dos > .dos,
+.tres > .tres,
+.cuatro > .cuatro {
+	transform-origin: 20px top;
+	transform: rotate(-80deg) translateX(20px);
+	animation: seg 2.5s ease infinite;
+}
+.uno > .uno > .uno,
+.dos > .dos > .dos,
+.tres > .tres > .tres,
+.cuatro > .cuatro > .cuatro {
+	transform-origin: 20px top;
+	transform: rotate(10deg) translateX(20px);
+	animation: seg 1.5s ease infinite;
+}
+.right > .dos > .dos {
+	animation-delay: 200ms;
+}
+.dos > .dos {
+	animation-delay: 400ms;
+}
+.dos > .dos > .dos {
+	animation-delay: 200ms;
+}
+.right > .tres > .tres {
+	animation-delay: 400ms;
+}
+.tres > .tres {
+	animation-delay: 600ms;
+}
+.tres > .tres > .tres {
+	animation-delay: 300ms;
+}
+.right > .cuatro > .cuatro {
+	animation-delay: 100ms;
+}
+.cuatro > .cuatro {
+	animation-delay: 800ms;
+}
+.cuatro > .cuatro > .cuatro {
+	animation-delay: 400ms;
+}
+@keyframes seg {
+	50% {
+		transform: rotate(55deg) translateX(20px);
+	}
+}
+@keyframes inicio {
+	0% {
+		opacity: 0;
+		top: 0%;
+	}
+
+	100% {
+		opacity: 1;
+		top: 80%;
+	}
+}
+
+@keyframes endSpider {
+	0% {
+		opacity: 1;
+		top: 80%;
+	}
+
+	100% {
+		opacity: 0;
+		top: 0%;
+	}
+}
diff --git a/src/components/Event/Halloween/Skeleton/Spider.svelte b/src/components/Event/Halloween/Skeleton/Spider.svelte
@@ -0,0 +1,69 @@
+<script>
+	export let canEnd;
+</script>
+
+<style src="./Spider.scss">
+</style>
+
+<div class={`container ${canEnd && 'container__end'}`}>
+	<div class="left">
+		<div class="uno">
+			<div class="uno">
+				<div class="uno">
+					<div class="uno" />
+				</div>
+			</div>
+		</div>
+		<div class="dos">
+			<div class="dos">
+				<div class="dos">
+					<div class="dos" />
+				</div>
+			</div>
+		</div>
+		<div class="tres">
+			<div class="tres">
+				<div class="tres">
+					<div class="tres" />
+				</div>
+			</div>
+		</div>
+		<div class="cuatro">
+			<div class="cuatro">
+				<div class="cuatro">
+					<div class="cuatro" />
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="right">
+		<div class="uno">
+			<div class="uno">
+				<div class="uno">
+					<div class="uno" />
+				</div>
+			</div>
+		</div>
+		<div class="dos">
+			<div class="dos">
+				<div class="dos">
+					<div class="dos" />
+				</div>
+			</div>
+		</div>
+		<div class="tres">
+			<div class="tres">
+				<div class="tres">
+					<div class="tres" />
+				</div>
+			</div>
+		</div>
+		<div class="cuatro">
+			<div class="cuatro">
+				<div class="cuatro">
+					<div class="cuatro" />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/components/Event/Halloween/Skeleton/index.js b/src/components/Event/Halloween/Skeleton/index.js
@@ -0,0 +1,3 @@
+import Spider from './Spider.svelte';
+
+export default Spider;
diff --git a/src/components/ListHeader/ListHeader.svelte b/src/components/ListHeader/ListHeader.svelte
@@ -8,8 +8,17 @@
 		listIsFiltered,
 		isOffline,
 		language,
+		event,
 	} from '../../shared/store';
 	import { getPullRequests } from '../../shared/requester';
+	import Spider from '../Event/Halloween/Skeleton/Spider.svelte';
+	import { onDestroy, onMount } from 'svelte';
+
+	let canShow = false;
+	let canEnd = false;
+	let timeoutID: NodeJS.Timeout;
+	const DELAY_BETWEEN_SPIDER_EVENT = 60000;
+	const DELAY_DISPLAY_SPIDER_EVENT = 3000;
 
 	const toggleFilter = () => {
 		listIsFiltered.update(isFiltered => !isFiltered);
@@ -27,12 +36,42 @@
 			isFiltered: $listIsFiltered,
 			profileId: $profile.id,
 		});
+
+	const spiderEvent = (e: AnimationEvent) => {
+		if (e.animationName.includes('inicio')) {
+			setTimeout(() => (canEnd = true), DELAY_DISPLAY_SPIDER_EVENT);
+		}
+		if (e.animationName.includes('endSpider')) {
+			canEnd = false;
+			canShow = false;
+			clearTimeout(timeoutID);
+
+			timeoutID = setTimeout(() => {
+				canShow = true;
+			}, DELAY_BETWEEN_SPIDER_EVENT);
+		}
+	};
+
+	onMount(() => {
+		document.body.addEventListener('animationend', spiderEvent);
+		timeoutID = setTimeout(() => {
+			canShow = true;
+		}, DELAY_BETWEEN_SPIDER_EVENT);
+	});
+
+	onDestroy(() => {
+		document.body.removeEventListener('animationend', spiderEvent);
+		clearTimeout(timeoutID);
+	});
 </script>
 
 <style src="./ListHeader.scss">
 </style>
 
 <header class="skz-pullrequests-header">
+	{#if $event.isHalloween && canShow}
+		<Spider {canEnd} />
+	{/if}
 	<h1 class="skz-pullrequests-title">
 		{$pullRequests.length} Pull request{$pullRequests.length > 1 ? 's' : ''}
 		{#if !$isOffline}