diff options
Diffstat (limited to 'templates/@solitude/welcome.html')
| -rw-r--r-- | templates/@solitude/welcome.html | 209 |
1 files changed, 20 insertions, 189 deletions
diff --git a/templates/@solitude/welcome.html b/templates/@solitude/welcome.html index 9c07dad2..ba4e47d5 100644 --- a/templates/@solitude/welcome.html +++ b/templates/@solitude/welcome.html @@ -16,12 +16,23 @@ </div><div id="cover-wrapper"> <div id="welcome-content"> <div class="cwrapper"> - <div class="text-box"> - <h1>THE SOLITUDE</h1> + <div class="glitch"> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> + <div class="line">the solitude</div> </div> - </div> - <p class="description"></p> - <button id="enter">Enter The Solitude!</button> + </div> + <button class="button" style="margin-top: 1rem;" onclick="window.location.reload();"> + Enter Shifoo's Solitude... + <div class="button__horizontal"></div> + <div class="button__vertical"></div> + </button> <div id="welcome-playlist-player"> <div class="controls"> <button role="play" id="playButton" class="play"></button> @@ -48,190 +59,10 @@ </div> </div> <script> - Object.defineProperty(Array.prototype, 'shuffle', { - value: function() { - for (let i = this.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [this[i], this[j]] = [this[j], this[i]]; - } - return this; - } - }); - - const playlistTracks = JSON.parse("{{ playlist_tracks }}".replace(/"/g, '"')); - const tracks = Object.entries(playlistTracks).map(track => track[1]).shuffle(); - - const controls = document.querySelector('.controls'); - const audio = document.querySelector('#audio'); - const trackTitle = document.querySelector('#track-title'); - const trackArtist = document.querySelector('#track-artist'); - const albumArt = document.querySelector('#album-art'); - const minElap = document.querySelector('#min-elap'); - const secElap = document.querySelector('#sec-elap'); - const minDur = document.querySelector('#min-dur'); - const secDur = document.querySelector('#sec-dur'); - - let currentTrack = 0; - - const loadAudio = new Promise((resolve, reject) => { - audio.addEventListener('canplaythrough', () => { - resolve(audio); - }); - }); - - async function playAudio () { - audio.src = tracks[currentTrack].location; - const duration = audio.duration; - audio.play().catch(e => { - window.addEventListener('click', () => { - controls.click(); - audio.play(); - }, { once: true }); - }); - return audio; - } - - function pauseAudio () { - audio.pause(); - } - - function nextTrack () { - currentTrack = (currentTrack + 1) % tracks.length; - audio.currentTime = 0; - playTrack(); - } - - function playTrack() { - const track = tracks[currentTrack]; - trackTitle.textContent = track.title; - trackArtist.textContent = track.artist; - albumArt.src = track.cover_art; - playAudio().then(audio => { - audio.addEventListener('ended', nextTrack); - }); - } - - function updateIntervals() { - const duration = audio.duration; - const currentTime = audio.currentTime; - const elapsed = Math.floor(currentTime); - const total = Math.floor(duration); - const minutesElapsed = Math.floor(elapsed / 60); - const secondsElapsed = elapsed % 60; - const minutesTotal = Math.floor(total / 60) || 0; - const secondsTotal = total % 60 || 0; - minElap.textContent = minutesElapsed < 10 ? `0${minutesElapsed}` : minutesElapsed; - secElap.textContent = secondsElapsed < 10 ? `0${secondsElapsed}` : secondsElapsed; - minDur.textContent = minutesTotal < 10 ? `0${minutesTotal}` : minutesTotal; - secDur.textContent = secondsTotal < 10 ? `0${secondsTotal}` : secondsTotal; - } - - function togglePlayPause () { - const buttons = Array.from(this.children); - let triggeredButton; - buttons.forEach(button => { - if (!button.classList.contains('hidden')) { - triggeredButton = button; - } - button.classList.toggle('hidden') - }); - signalTrigger(triggeredButton); - }; - - function signalTrigger (button) { - const role = button.getAttribute('role'); - switch (role) { - case 'play': - playAudio(); - break; - case 'pause': - pauseAudio(); - break; - } - } - - audio.currentTime = 0; - controls.addEventListener('click', togglePlayPause); - audio.addEventListener('timeupdate', updateIntervals); - - playTrack(); - - class TextScramble { - constructor(el) { - this.el = el - this.chars = '!<>-_\\/[]{}—=+*^?#________' - this.update = this.update.bind(this) - } - setText(newText) { - const oldText = this.el.innerText - const length = Math.max(oldText.length, newText.length) - const promise = new Promise((resolve) => this.resolve = resolve) - this.queue = [] - for (let i = 0; i < length; i++) { - const from = oldText[i] || '' - const to = newText[i] || '' - const start = Math.floor(Math.random() * 40) - const end = start + Math.floor(Math.random() * 40) - this.queue.push({ from, to, start, end }) - } - cancelAnimationFrame(this.frameRequest) - this.frame = 0 - this.update() - return promise - } - update() { - let output = '' - let complete = 0 - for (let i = 0, n = this.queue.length; i < n; i++) { - let { from, to, start, end, char } = this.queue[i] - if (this.frame >= end) { - complete++ - output += to - } else if (this.frame >= start) { - if (!char || Math.random() < 0.28) { - char = this.randomChar() - this.queue[i].char = char - } - output += `<span class="dud">${char}</span>` - } else { - output += from - } - } - this.el.innerHTML = output - if (complete === this.queue.length) { - this.resolve() - } else { - this.frameRequest = requestAnimationFrame(this.update) - this.frame++ - } - } - randomChar() { - return this.chars[Math.floor(Math.random() * this.chars.length)] - } - } - - const phrases = [ - 'Welcome to Shifoo\'s Solitude', - 'A Web Dungeon located beyond the Dark Hollows of the Endless Information SuperHighway', - 'a dark yet tranquil place where all questions end, curiosity begins, the mind awakens,', - 'and one\'s journey begins anew in the solitude of a serene mind!', - 'The Solitude awaits your arrival...' - ] - - const el = document.querySelector('.description') - const fx = new TextScramble(el) - - let counter = 0 - const next = () => { - fx.setText(phrases[counter]).then(() => { - setTimeout(next, 3200) - }) - counter = (counter + 1) % phrases.length - } - - next() - + const playlistTracks = JSON.parse( + "{{ playlist_tracks }}".replace(/"/g, '"') + ); </script> - + <script src="{% static '@solitude/js/welcome.js' %}"></script> </body> </html> |