This repository was archived by the owner on Oct 1, 2024. It is now read-only.
forked from discordjs/website
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathApp.vue
More file actions
131 lines (113 loc) · 3.89 KB
/
Copy pathApp.vue
File metadata and controls
131 lines (113 loc) · 3.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div id="app">
<app-navbar :repository="repository" />
<router-view :darkMode="darkMode" :konami="konami" @toggleDarkMode="toggleDarkMode" @setRepository="setRepository" />
<app-footer :darkMode="darkMode" @toggleDarkMode="toggleDarkMode" />
<transition name="fade-slide-vertical">
<snackbar action="Reload" @click="refresh" v-if="updateExists">An updated version of the site is available.</snackbar>
</transition>
</div>
</template>
<script>
import AppNavbar from './components/AppNavbar.vue';
import AppFooter from './components/AppFooter.vue';
import Snackbar from './components/Snackbar.vue';
import MainSource from './data/MainSource';
import Konami from 'konami-code-js';
let konami = null;
export default {
name: 'app',
components: {
AppNavbar,
AppFooter,
Snackbar,
},
data() {
const darkMode = localStorage.getItem('dark-mode');
return {
darkMode: darkMode !== 'false' && darkMode !== null,
repository: MainSource.repo,
updateExists: false,
refreshing: false,
konami: false,
};
},
methods: {
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('dark-mode', this.darkMode);
if (this.darkMode) this.$el.classList.add('dark'); else this.$el.classList.remove('dark');
},
setRepository(repo) {
this.repository = repo;
},
swUpdated(event) {
this.registration = event.detail;
this.updateExists = true;
},
refresh() {
if (!this.updateExists) return;
this.updateExists = false;
if (!this.registration || !this.registration.waiting) return;
this.registration.waiting.postMessage({ type: 'SKIP_WAITING' });
},
poop() {
// Create the poop
const poop = document.createElement('div');
poop.className = 'poop';
poop.innerHTML = '💩';
// Set the poop's travel time and how spinny it is
const duration = (Math.random() * 4000) + 1000;
poop.style.transition = `top ${duration}ms linear, left ${duration}ms linear`;
poop.style.animation = `spin ${duration / 3000}s infinite linear`;
// Determine the poop's initial location and final destination
const side = Math.floor(Math.random() * 4) + 1;
const initial = {
top: `${side === 2 || side === 4 ? Math.random() * window.innerHeight :
side === 1 ? -200 : window.innerHeight + 200}px`,
left: `${side === 1 || side === 3 ? Math.random() * window.innerWidth :
side === 4 ? -200 : window.innerWidth + 200}px`,
};
const final = {
top: `${side === 2 || side === 4 ? Math.random() * window.innerHeight :
side === 1 ? window.innerHeight + 200 : -200}px`,
left: `${side === 1 || side === 3 ? Math.random() * window.innerWidth :
side === 4 ? window.innerWidth + 200 : -200}px`,
};
// Pinpoint and relocate the poop
Object.assign(poop.style, initial);
window.setTimeout(() => { Object.assign(poop.style, final); }, 100);
// Add the poop to the page and remove it when its adventure is complete
document.body.appendChild(poop);
window.setTimeout(() => { document.body.removeChild(poop); }, duration + 100);
// Take another dump
window.setTimeout(() => this.poop(), (Math.random() * 10000) + 1000);
},
},
created() {
document.addEventListener('swUpdated', this.swUpdated, { once: true });
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (this.refreshing) return;
this.refreshing = true;
window.location.reload();
});
},
mounted() {
if (this.darkMode) this.$el.classList.add('dark');
if (!konami) {
konami = new Konami(() => {
this.konami = true;
this.poop();
konami.disable();
});
}
},
};
</script>
<style>
.poop {
z-index: 1000;
position: fixed;
font-size: 3rem;
}
</style>