System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[arcade] Shopkeepers stay on the sides

Browse source
This commit is contained in:
Max Wofford 2024-05-31 18:17:38 -04:00
parent 35201d226a
commit 4d6369f5d5
2 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
public/arcade/index.html
View file

@ -68,16 +68,20 @@
if (msg.character === 'Dino') {
dinoEl.src = msg.characterURL || characterImage(msg.character)
dinoEl.classList.add('talking')
yap(msg.message, {baseRate: 3.9, rateVariance: 1, endCallback: () => {
dinoEl.classList.remove('talking')
}})
yap(msg.message, {
baseRate: 3.9, rateVariance: 1, endCallback: () => {
dinoEl.classList.remove('talking')
}
})
} else {
// raccoon
raccEl.src = msg.characterURL || characterImage(msg.character)
raccEl.classList.add('talking')
yap(msg.message, {baseRate: 2.9, rateVariance: 1, endCallback: () => {
raccEl.classList.remove('talking')
}})
yap(msg.message, {
baseRate: 2.9, rateVariance: 1, endCallback: () => {
raccEl.classList.remove('talking')
}
})
}
} else {
document.querySelector('.shop-dialogue').innerHTML = '...'
@ -165,7 +169,8 @@
own PCB, building your own site, creating an app.</p>
<h2>Step 2: Bank your hours!</h2>
<p>Use /hack in <a href="https://hackclub.slack.com/archives/C06SBHMQU8G">#hack-hour</a> on the <a
href="https://hackclub.com/slack/">Hack Club Slack</a> to log your hours! It will activate a pomodoro timer for 1
href="https://hackclub.com/slack/">Hack Club Slack</a> to log your hours! It will activate a pomodoro timer for
1
hour, which is the length you'll be working on your project.</p>
<p>
<b>NOTE: you need to ship your project in order for your hours to count.</b>
@ -178,37 +183,38 @@
</div>
<div class="container section" style="position: relative;">
<div class="heading-card">
<span>What's in stock?</span>
<div class="heading-card">
<span>What's in stock?</span>
<button id="open-shop">
Open the shop
</button>
</div>
</div>
<div class="item-list">
<!-- item container -->
<div class="loading">🕹️</div>
</div>
<div class="shop-stand">
<div class="shop-stand">
<img id="shopkeeper-left" class="shopkeeper" src="" alt="shopkeeper" />
<img id="shopkeeper-right" class="shopkeeper" src="" alt="shopkeeper" />
<div class="shop-ledge"></div>
<div class="shop-counter">
<div class="dialogue-box">
<div class="dialogue-box-border">
<div class="shop-dialogue">
</div>
<div class="shop-dialogue">
</div>
</div>
</div>
</div>
</div>
<img id="shopkeeper-right" class="shopkeeper" src="" alt="shopkeeper" />
</div>
</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>
<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>

5
public/arcade/style.css
View file

@ -264,7 +264,10 @@ a:hover {
position: sticky;
user-select: none;
pointer-events: none;
/* top: 100; */
display: flex;
flex-direction: row;
align-items: end;
}
.shop-stand > * {
pointer-events: auto;