Solitude: Welcome Page Done! Reponds based on `visited` Cookie

2 files changed, 21 insertions, 189 deletions

diff --git a/templates/@solitude/home.html b/templates/@solitude/home.html
new file mode 100644
index 00000000..de6f7fe1
--- /dev/null
+++ b/templates/@solitude/home.html
@@ -0,0 +1 @@
+<h1>Welcome to Solitude</h1>
\ No newline at end of file
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(/&quot;/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(/&quot;/g, '"')
+      );
     </script>
-
+    <script src="{% static '@solitude/js/welcome.js' %}"></script>
   </body>
 </html>