mirror of
https://github.com/System-End/site.git
synced 2026-04-19 20:55:09 +00:00
306 lines
No EOL
12 KiB
HTML
306 lines
No EOL
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<title>Power Hour: Arcade</title>
|
||
<link rel="icon" type="image/x-icon" href="https://cloud-n6tkrqcbc-hack-club-bot.vercel.app/0favicon.png">
|
||
|
||
<script>
|
||
let muted = true
|
||
</script>
|
||
<!-- <style href="style.css"></style> -->
|
||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||
<script src="data-loader.js"></script>
|
||
<script src="/yap.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.js"
|
||
integrity="sha512-7Zgn4mmO9yGGB1j9yP0mZvUPWBVg0fCcUMsYUV6FX7XIKQfb/dhGxsKh794YAzXH2F/+Z3eJL4mrTilrT2ZeFQ=="
|
||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<script>
|
||
|
||
let firstPlay = true
|
||
|
||
const containerImages = [
|
||
"https://cloud-3mgl7gw96-hack-club-bot.vercel.app/0container1.png",
|
||
"https://cloud-13mfwysva-hack-club-bot.vercel.app/0container2.png",
|
||
"https://cloud-ly6qgiv93-hack-club-bot.vercel.app/0container3.png",
|
||
]
|
||
|
||
const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
|
||
const randomContainer = () => sample(containerImages)
|
||
|
||
window.addEventListener("load", async () => {
|
||
const { inventory, selfClicks } = await fetchedData()
|
||
const itemList = document.querySelector('.item-list')
|
||
inventory.sort((a, b) => {
|
||
// sort by hours, but not everything will have hours set– put the stuff without hours at the end
|
||
if (a.hours && b.hours) {
|
||
return a.hours - b.hours
|
||
} else if (a.hours) {
|
||
return -1
|
||
} else if (b.hours) {
|
||
return 1
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
|
||
function characterImage(character) {
|
||
return {
|
||
"Dino": "https://cloud-h4wi9l5hg-hack-club-bot.vercel.app/2005.png",
|
||
"Raccoon": "https://cloud-nfmmdwony-hack-club-bot.vercel.app/1001.png"
|
||
|
||
}[character] || "https://cloud-6rd1boq71-hack-club-bot.vercel.app/0image.png"
|
||
}
|
||
|
||
const raccEl = document.querySelector('#shopkeeper-left')
|
||
const dinoEl = document.querySelector('#shopkeeper-right')
|
||
|
||
raccEl.src = characterImage("Raccoon")
|
||
dinoEl.src = characterImage("Dino")
|
||
|
||
raccEl.addEventListener('click', () => {
|
||
handleClick({ name: "Raccoon", flavorText: selfClicks["Raccoon"] })
|
||
})
|
||
|
||
dinoEl.addEventListener('click', () => {
|
||
handleClick({ name: "Dino", flavorText: selfClicks["Dino"] })
|
||
})
|
||
|
||
document.querySelector('.sound-button').addEventListener('click', toggleMute)
|
||
|
||
function handleClick(inv) {
|
||
let msg = sample(inv.flavorText)
|
||
if (msg) {
|
||
console.log(`${msg.character}:${msg.message}`)
|
||
document.querySelector('.shop-dialogue').innerHTML = msg.message
|
||
if (msg.character === 'Dino') {
|
||
dinoEl.src = msg.characterURL || characterImage(msg.character)
|
||
dinoEl.classList.add('talking')
|
||
yap(msg.message, {
|
||
baseRate: 4.2, rateVariance: 1, endCallback: () => {
|
||
dinoEl.classList.remove('talking')
|
||
}
|
||
})
|
||
} else {
|
||
// raccoon
|
||
raccEl.src = msg.characterURL || characterImage(msg.character)
|
||
raccEl.classList.add('talking')
|
||
yap(msg.message, {
|
||
baseRate: 3.5, rateVariance: 1, endCallback: () => {
|
||
raccEl.classList.remove('talking')
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
document.querySelector('.shop-dialogue').innerHTML = '...'
|
||
}
|
||
}
|
||
|
||
inventory.forEach((inv, i) => {
|
||
const el = document.createElement('div')
|
||
el.classList.add('cell')
|
||
|
||
el.addEventListener('click', () => handleClick(inv))
|
||
|
||
const smallNameDiv = inv.smallName ? ' <span class="small-name">' + inv.smallName + '</span>' : ''
|
||
|
||
el.innerHTML = `
|
||
<image src="${randomContainer()}" class="card"></image>
|
||
<div class="name">${inv.name.toUpperCase()}${smallNameDiv}</div>
|
||
<image src="${inv.imageURL}" class="itemimg"></image>
|
||
<div class="itemnumber">ITEM ${(i + 1).toString().padStart(2, '0')}</div>
|
||
<div class="price">${inv.hours || '-'}</div>
|
||
<image src="https://cloud-7kkn345tx-hack-club-bot.vercel.app/0energy.png" class="energy"></image>
|
||
`
|
||
|
||
document.querySelector('.item-list').appendChild(el)
|
||
})
|
||
const elements = document.querySelectorAll(".cell");
|
||
VanillaTilt.init(elements, {
|
||
scale: 1.05,
|
||
easing: "cubic-bezier(.03,.98,.52,.99)",
|
||
})
|
||
|
||
document.querySelector('.item-list > .loading').classList.add('display-none')
|
||
// audio stuff
|
||
const showMusic = new Howl({
|
||
src: ['https://cloud-akjvxw4d0-hack-club-bot.vercel.app/0indigo_park_ost_-_airplayn___mollie_s_landing_pad____vmy-mxohsuy__audio.mp4'],
|
||
// volume: 0.01,
|
||
loop: true,
|
||
rate: 0.5
|
||
})
|
||
|
||
Howler.volume(0)
|
||
|
||
async function toggleMute() {
|
||
muted = !muted
|
||
if (muted) {
|
||
document.querySelector('.sound-button').textContent = 'Want sound?'
|
||
Howler.volume(0)
|
||
} else if (!muted) {
|
||
document.querySelector('.sound-button').textContent = 'Mute sound'
|
||
Howler.volume(0.1)
|
||
if (firstPlay) {
|
||
// strange fade-in effect where the pitch shifts up like a record player
|
||
showMusic.fade(0, 1, 1000);
|
||
showMusic.play()
|
||
while (showMusic.rate() < 1) {
|
||
showMusic.rate(showMusic.rate() + 0.05)
|
||
await new Promise(r => setTimeout(r, 200))
|
||
}
|
||
firstPlay = false
|
||
// } else {
|
||
// showMusic.play()
|
||
}
|
||
}
|
||
}
|
||
|
||
// document.querySelector('#open-shop').addEventListener('click', toggleMusic)
|
||
})
|
||
</script>
|
||
|
||
<script defer data-domain="hackclub.com" src="https://plausible.io/js/script.js"></script>
|
||
<script>
|
||
window['_fs_host'] = 'fullstory.com';
|
||
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
|
||
window['_fs_org'] = 'ARN0J';
|
||
window['_fs_namespace'] = 'FS';
|
||
!function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
|
||
return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
|
||
;function p(b){var h,d=[];function j(){h&&(d.forEach((function(b){var d;try{d=b[h[0]]&&b[h[0]](h[1])}catch(h){return void(b[3]&&b[3](h))}
|
||
d&&d.then?d.then(b[2],b[3]):b[2]&&b[2](d)})),d.length=0)}function r(b){return function(d){h||(h=[b,d],j())}}return b(r(0),r(1)),{
|
||
then:function(b,h){return p((function(r,i){d.push([b,h,r,i]),j()}))}}}a&&(g=m[e]=function(){var b=function(b,d,j,r){function i(i,c){
|
||
h(b,d,j,i,c,r)}r=r||2;var c,u=/Async$/;return u.test(b)?(b=b.replace(u,""),"function"==typeof Promise?new Promise(i):p(i)):h(b,d,j,c,c,r)}
|
||
;function h(h,d,j,r,i,c){return b._api?b._api(h,d,j,r,i,c):(b.q&&b.q.push([h,d,j,r,i,c]),null)}return b.q=[],b}(),y=function(b){function h(h){
|
||
"function"==typeof h[4]&&h[4](new Error(b))}var d=g.q;if(d){for(var j=0;j<d.length;j++)h(d[j]);d.length=0,d.push=h}},function(){
|
||
(o=n.createElement(t)).async=!0,o.crossOrigin="anonymous",o.src="https://"+l,o.onerror=function(){y("Error loading "+l)}
|
||
;var b=n.getElementsByTagName(t)[0];b&&b.parentNode?b.parentNode.insertBefore(o,b):n.head.appendChild(o)}(),function(){function b(){}
|
||
function h(b,h,d){g(b,h,d,1)}function d(b,d,j){h("setProperties",{type:b,properties:d},j)}function j(b,h){d("user",b,h)}function r(b,h,d){j({
|
||
uid:b},d),h&&j(h,d)}g.identify=r,g.setUserVars=j,g.identifyAccount=b,g.clearUserCookie=b,g.setVars=d,g.event=function(b,d,j){h("trackEvent",{
|
||
name:b,properties:d},j)},g.anonymize=function(){r(!1)},g.shutdown=function(){h("shutdown")},g.restart=function(){h("restart")},
|
||
g.log=function(b,d){h("log",{level:b,msg:d})},g.consent=function(b){h("setIdentity",{consent:!arguments.length||b})}}(),s="fetch",
|
||
f="XMLHttpRequest",g._w={},g._w[f]=m[f],g._w[s]=m[s],m[s]&&(m[s]=function(){return g._w[s].apply(this,arguments)}),g._v="2.0.0")
|
||
}(window,document,window._fs_namespace,"script",window._fs_script);
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="section fold">
|
||
<div>
|
||
<p class="suptitle">
|
||
Power Hour
|
||
</p>
|
||
<h1 class="title">
|
||
ARCADE
|
||
</h1>
|
||
<p class="subtitle">
|
||
Every hour, more power!
|
||
</p>
|
||
</div>
|
||
|
||
<div class="cta">
|
||
<button onclick="document.querySelector('.instructions').scrollIntoView({behavior: 'smooth'})">
|
||
<span class="force-unicode">⚡︎︎</span> Power Up
|
||
</button>
|
||
<p><em class="muted">(and scroll down)</em></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section instructions">
|
||
<div class="heading-card">
|
||
<span>How to play:</span>
|
||
</div>
|
||
|
||
<h2>Step 1: <em>/hack</em> on your projects!</h2>
|
||
<p>
|
||
Hack on something cool! Produce something— consuming doesn't count. While
|
||
you build, record your work with /hack in the <a
|
||
href="https://hackclub.slack.com/archives/C06SBHMQU8G">#hack-hour</a>
|
||
channel on the <a href="https://hackclub.com/slack/">Hack Club Slack</a> to
|
||
log your hours! It will trigger a pomodoro timer that checks in during your hour.</p>
|
||
<h2>Step 2: Bank your hours!</h2>
|
||
<p>
|
||
Turn your hours into ⚡️ power hours by posting in #ship or #scrapbook.
|
||
Every hour that you have <b>a github commit link</b> or <b>image of what you
|
||
built</b> will get banked
|
||
</p>
|
||
<h2>Step 3: Redeem your hours for prizes!</h2>
|
||
<p>
|
||
We're keeping track of your total hours. Spend them on the prize list
|
||
below! The number next to the energy is how much each item costs. We'll
|
||
ship it to you after the event!
|
||
</p>
|
||
<!-- <h2>Have fun! Open until [date].</h2> -->
|
||
|
||
</div>
|
||
|
||
<div class="section inventory">
|
||
<div class="heading-card">
|
||
<span>What's in stock?</span>
|
||
</div>
|
||
<button class="sound-button" style="margin: 0 auto; display: block;">Want sound? 🔈</button>
|
||
<div style="position: relative;">
|
||
<div class="item-list">
|
||
<!-- item container -->
|
||
<div class="loading">🕹️</div>
|
||
</div>
|
||
|
||
<div class="shop-stand">
|
||
<img id="shopkeeper-left" class="shopkeeper" src="" alt="shopkeeper" />
|
||
<div class="shop-counter">
|
||
<div class="dialogue-box">
|
||
<div class="dialogue-box-border">
|
||
<div class="shop-dialogue">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img id="shopkeeper-right" class="shopkeeper" src="" alt="shopkeeper" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section footer" style="text-align: center;">
|
||
<div class="heading-card">
|
||
<span>Get your ⚡️ hours</span>
|
||
</div>
|
||
<p style="font-family: 1.5em;">
|
||
<b>Your own project</b>: Get 1 ⚡️ for every hour you hack in #hack-hour!
|
||
</p>
|
||
|
||
<p style="text-align: center;"><em>– or –</em></p>
|
||
<p>
|
||
<a href="https://workshops.hackclub.com/personal_website/">A new website</a>: Built a website and get 0.5 ⚡
|
||
</p>
|
||
<p>
|
||
<a href="https://jams.hackclub.com/jam/wizard-orpheus">Wizard Orpheus</a>: Build a text-based game with AI and get 0.5 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://hack.club/bin">The Bin</a>: Build an online circuit and get 0.5 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://hack.club/sprig">Sprig</a>: Build a game and get 2 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://hack.club/onboard">OnBoard</a>: Design a PCB and get 2 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://hack.club/blot">Blot</a>: Make programatic artwork and get 3 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://cider.hackclub.com/">Cider</a>: Make a mobile app and get 4 ⚡️
|
||
</p>
|
||
<p>
|
||
<a href="https://hack.club/easel">Easel</a>: Write a programming language and get 5 ⚡️
|
||
</p>
|
||
<!-- Add footer content here -->
|
||
</div>
|
||
|
||
|
||
</body>
|
||
<!-- Intentionally loaded last -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.js"
|
||
integrity="sha512-0eckjEcIDNlyXFNRAL2Kecw71G5Df+nI2kazjvQrH/DZEHYOdy0UnP0gAlQGZMq4ZOOHpc2eYG15N3JZDA6pGg=="
|
||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
|
||
</html> |