HYPEISM (n.) Omnia ex Uno
Music • Illustration • Film • Games
↓
(function () { function hpwInitialise() { const root = document.getElementById("hpw-works"); if (!root) { console.warn( "HPW works wrapper was not found." ); return; } /* Prevent the script being initialised twice. */ if (root.dataset.hpwReady === "true") { return; } root.dataset.hpwReady = "true"; const projects = [ ...root.querySelectorAll(".hpw-project") ]; const audioPlayer = document.getElementById( "hpw-audio-player" ); const playButton = document.getElementById( "hpw-play-button" ); const playIcon = document.getElementById( "hpw-play-icon" ); const playLabel = document.getElementById( "hpw-play-label" ); const downloadButton = document.getElementById( "hpw-download-button" ); const externalButton = document.getElementById( "hpw-external-button" ); const externalLabel = document.getElementById( "hpw-external-label" ); const projectInformation = document.getElementById( "hpw-project-information" ); const fixedDescription = document.getElementById( "hpw-fixed-description" ); const projectTitle = document.getElementById( "hpw-project-title" ); const projectType = document.getElementById( "hpw-project-type" ); const projectDescription = document.getElementById( "hpw-project-description" ); const projectDate = document.getElementById( "hpw-project-date" ); const projectNumber = document.getElementById( "hpw-project-number" ); const brand = document.getElementById( "hpw-hypeism-brand" ); const required = { audioPlayer, playButton, playIcon, playLabel, downloadButton, externalButton, externalLabel, projectInformation, fixedDescription, projectTitle, projectType, projectDescription, projectDate, projectNumber }; const missing = Object.keys(required) .filter(function (key) { return !required[key]; }); if (missing.length) { console.error( "Missing HPW elements:", missing ); return; } if (!projects.length) { console.error( "No .hpw-project sections found." ); return; } let activeProject = projects[0]; let textTimer = null; /* Dropbox links */ function hpwAudioLink(link) { if (!link) { return ""; } if (!link.includes("dropbox.com")) { return link; } try { const url = new URL(link); url.searchParams.delete("dl"); url.searchParams.set("raw", "1"); return url.toString(); } catch (error) { return link; } } function hpwDownloadLink(link) { if (!link) { return ""; } if (!link.includes("dropbox.com")) { return link; } try { const url = new URL(link); url.searchParams.delete("raw"); url.searchParams.set("dl", "1"); return url.toString(); } catch (error) { return link.replace( "dl=0", "dl=1" ); } } /* Audio controls */ function hpwUpdatePlayButton() { const playing = !audioPlayer.paused && !audioPlayer.ended; playIcon.textContent = playing ? "Ⅱ" : "▶"; playLabel.textContent = playing ? "Pause" : "Play"; playButton.setAttribute( "aria-label", playing ? "Pause current track" : "Play current track" ); } function hpwStopAudio() { audioPlayer.pause(); try { audioPlayer.currentTime = 0; } catch (error) { /* Audio may not be loaded yet. */ } hpwUpdatePlayButton(); } function hpwLoadAudio(project) { const source = hpwAudioLink( project.dataset.audio ); audioPlayer.pause(); if (!source) { audioPlayer.removeAttribute("src"); audioPlayer.load(); hpwUpdatePlayButton(); return; } if ( audioPlayer.getAttribute("src") !== source ) { audioPlayer.src = source; audioPlayer.load(); } hpwUpdatePlayButton(); } /* Buttons for each content type */ function hpwUpdateControls(project) { const controlType = project.dataset.control || "external"; if (controlType === "music") { playButton.hidden = false; downloadButton.hidden = false; externalButton.hidden = true; const downloadLink = hpwDownloadLink( project.dataset.download ); downloadButton.href = downloadLink || "#"; downloadButton.setAttribute( "aria-disabled", downloadLink ? "false" : "true" ); hpwLoadAudio(project); return; } hpwStopAudio(); playButton.hidden = true; downloadButton.hidden = true; externalButton.hidden = false; const externalLink = project.dataset.external || ""; externalButton.href = externalLink || "#"; externalButton.setAttribute( "aria-disabled", externalLink ? "false" : "true" ); externalLabel.textContent = project.dataset.externalLabel || "Open"; } /* Project text */ function hpwRenderProject(project) { const index = projects.indexOf(project); projectTitle.textContent = project.dataset.title || ""; projectType.textContent = project.dataset.type || ""; projectDescription.textContent = project.dataset.description || ""; projectDate.textContent = project.dataset.date || ""; projectNumber.textContent = String(index + 1).padStart(2, "0") + " / " + String(projects.length).padStart( 2, "0" ); hpwUpdateControls(project); } function hpwActivateProject(project) { if ( !project || project === activeProject ) { return; } activeProject = project; projects.forEach(function (item) { item.classList.toggle( "hpw-active", item === project ); }); window.clearTimeout(textTimer); projectInformation.classList.add( "hpw-changing" ); fixedDescription.classList.add( "hpw-changing" ); textTimer = window.setTimeout( function () { hpwRenderProject(project); projectInformation.classList.remove( "hpw-changing" ); fixedDescription.classList.remove( "hpw-changing" ); }, 220 ); } /* Play button */ playButton.addEventListener( "click", async function () { if ( activeProject.dataset.control !== "music" ) { return; } const source = hpwAudioLink( activeProject.dataset.audio ); if (!source) { console.warn( "No audio assigned to this project." ); return; } try { if ( !audioPlayer.paused && !audioPlayer.ended ) { audioPlayer.pause(); return; } if ( audioPlayer.getAttribute("src") !== source ) { audioPlayer.src = source; audioPlayer.load(); } await audioPlayer.play(); } catch (error) { console.error( "Audio playback failed:", error ); } hpwUpdatePlayButton(); } ); downloadButton.addEventListener( "click", function (event) { if ( downloadButton.getAttribute( "aria-disabled" ) === "true" || downloadButton.getAttribute( "href" ) === "#" ) { event.preventDefault(); } } ); externalButton.addEventListener( "click", function (event) { if ( externalButton.getAttribute( "aria-disabled" ) === "true" || externalButton.getAttribute( "href" ) === "#" ) { event.preventDefault(); } } ); audioPlayer.addEventListener( "play", hpwUpdatePlayButton ); audioPlayer.addEventListener( "pause", hpwUpdatePlayButton ); audioPlayer.addEventListener( "ended", hpwUpdatePlayButton ); /* Detect visible project */ const observer = new IntersectionObserver( function (entries) { const visible = entries .filter(function (entry) { return entry.isIntersecting; }) .sort(function (a, b) { return ( b.intersectionRatio - a.intersectionRatio ); }); if (visible.length) { hpwActivateProject( visible[0].target ); } }, { threshold: [ 0.35, 0.5, 0.65, 0.8 ] } ); projects.forEach(function (project) { observer.observe(project); }); /* HYPEISM era animation */ if (brand) { const eras = [ "hpw-era-renaissance", "hpw-era-roman", "hpw-era-victorian", "hpw-era-bauhaus", "hpw-era-swiss", "hpw-era-postmodern", "hpw-era-digital" ]; let eraIndex = eras.findIndex( function (era) { return brand.classList.contains( era ); } ); if (eraIndex < 0) { eraIndex = 0; brand.classList.add(eras[0]); } function hpwChangeEra() { brand.classList.add( "hpw-is-changing" ); window.setTimeout(function () { brand.classList.remove(...eras); eraIndex = (eraIndex + 1) % eras.length; brand.classList.add( eras[eraIndex] ); window.requestAnimationFrame( function () { brand.classList.remove( "hpw-is-changing" ); } ); }, 300); } window.setInterval( hpwChangeEra, 2400 ); } /* First project */ hpwRenderProject(activeProject); hpwUpdatePlayButton(); } /* Works both before and after Carrd has loaded. */ if ( document.readyState === "loading" ) { document.addEventListener( "DOMContentLoaded", hpwInitialise, { once: true } ); } else { hpwInitialise(); } })();
PotionNEW!
