Espresso Yourself

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div id="name-screen"> <p>What is your name?</p> <input id="nameField" type="text" placeholder="" /> <button id="submitName">Begin</button> </div> <<script>> setTimeout(function() { document.getElementById('submitName').addEventListener('click', function() { var name = document.getElementById('nameField').value; if (name.trim() !== '') { State.variables.name = name; Engine.play('Intro'); } }); }, 0); <</script>>

Hello, Barista. I don't care what your name is. Ready to make some drinks? [[Yeah.|End1]] [[No.|Cafe1]]

<<script>> var name = State.variables.name; var vowels = ['a', 'e', 'i', 'o', 'u', 'y']; var firstVowelIndex = -1; for (var i = 0; i < name.length; i++) { if (vowels.includes(name[i].toLowerCase())) { firstVowelIndex = i; break; } } if (firstVowelIndex === -1) { var firstLetter = name[0].toLowerCase(); var wrongLetter = firstLetter === 'z' ? 'G' : 'Z'; State.variables.wrongName = wrongLetter + name.substring(1); } else { var correct = name[firstVowelIndex].toLowerCase(); var otherVowels = vowels.filter(function(v) { return v !== correct; }); var wrongVowel = otherVowels[Math.floor(Math.random() * otherVowels.length)]; State.variables.wrongName = name.substring(0, firstVowelIndex) + wrongVowel + name.substring(firstVowelIndex + 1); } <</script>>Baristas shouldn't be that eager. Get out of here, $wrongName. I mean $name. [[Start Over|Start]]

Great, perfect attitude. Here's your first customer. <img src="https://animalfactguide.com/wp-content/uploads/2024/01/gray-wolf.jpg" style="width:400px;" /> Yikes. What drink do you serve? [[Wolf coffee|End2]] [[Normal coffee|End3]] [[He doesn't want a drink|Cafe2]]

<span id="swear" style="font-size:3em;">What the #$%^</span><span style="font-size:3em;"> is wolf coffee?</span> <button class="nav-button" id="fakeStart">Start Over</button> <div id="waitMsg" style="display:none;">No that choice was so bad you have to wait. <div id="countdown" style="font-size:3em; font-weight:bold;">10</div></div> <button class="nav-button" id="jkBtn" style="display:none;">Go Ahead</button> <<script>> setTimeout(function() { var chars = ['#', '$', '%', '^', '!', '*', '@', '&']; var swearTimer = setInterval(function() { var el = document.getElementById('swear'); if (!el) { clearInterval(swearTimer); return; } var shuffled = chars.slice().sort(function() { return 0.5 - Math.random(); }).slice(0, 4).join(''); el.textContent = 'What the ' + shuffled; }, 500); document.getElementById('fakeStart').addEventListener('click', function() { document.getElementById('fakeStart').style.display = 'none'; document.getElementById('waitMsg').style.display = 'block'; var count = 10; var timer = setInterval(function() { var cd = document.getElementById('countdown'); if (!cd) { clearInterval(timer); return; } count--; cd.textContent = count; if (count <= 0) { clearInterval(timer); document.getElementById('waitMsg').style.display = 'none'; document.getElementById('jkBtn').style.display = 'block'; } }, 1000); }); document.getElementById('jkBtn').addEventListener('click', function() { clearInterval(swearTimer); SugarCube.Engine.play('Start'); }); }, 0); <</script>>

He doesn't want a normal coffee, go home immediately. <button class="nav-button" id="startOver" style="display:block; margin:0.1em 0; position:relative;">Start Over</button> <<script>> setTimeout(function() { var btn = document.getElementById('startOver'); var clicked = false; btn.addEventListener('click', function() { if (clicked) return; clicked = true; var rect = btn.getBoundingClientRect(); var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; var moveX = centerX - rect.left - rect.width / 2; var moveY = centerY - rect.top - rect.height / 2; btn.style.transition = 'transform 0.5s ease-in-out'; btn.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)'; setTimeout(function() { btn.style.transition = 'transform 0.8s ease-in-out'; btn.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px) rotate(720deg)'; setTimeout(function() { btn.style.transition = 'transform 0.4s ease-in-out'; btn.style.transform = 'translate(0, 0) rotate(0deg)'; setTimeout(function() { clicked = false; btn.addEventListener('click', function() { SugarCube.Engine.play('Start'); }); }, 400); }, 800); }, 500); }); }, 0); <</script>>

That's right, he's just here to <span id="watch" style="display:inline-block;">watch</span> you. <<script>> setTimeout(function() { var w = document.getElementById('watch'); var posX = 0; var posY = 0; var targetX = 0; var targetY = 0; setTimeout(function() { w.style.fontWeight = 'bold'; w.style.color = '#8b0000'; var eyes = document.createElement('span'); eyes.id = 'floatingEyes'; eyes.textContent = '👀'; eyes.style.fontSize = '3em'; eyes.style.position = 'fixed'; eyes.style.zIndex = '999'; eyes.style.pointerEvents = 'none'; document.body.appendChild(eyes); document.addEventListener('mousemove', function(e) { targetX = e.clientX - 30; targetY = e.clientY - 30; }); function drift() { if (!document.getElementById('floatingEyes')) return; posX += (targetX - posX) * 0.05; posY += (targetY - posY) * 0.05; eyes.style.left = posX + 'px'; eyes.style.top = posY + 'px'; requestAnimationFrame(drift); } drift(); $(document).one(':passageinit', function() { var e = document.getElementById('floatingEyes'); if (e) e.remove(); }); }, 1000); }, 0); <</script>> New customer coming in. <img src="https://www.thepetexpress.co.uk/blog-admin/wp-content/uploads/2022/07/shutterstock_223329445.jpg" style="width:400px;" /> Omg cute. <span id="ribbit" style="font-weight:bold; color:green; display:inline-block;">Ribbit!</span> What drink do we get for him? <<script>> setTimeout(function() { var r = document.getElementById('ribbit'); var up = true; setInterval(function() { r.style.transform = up ? 'translateY(-5px)' : 'translateY(0px)'; up = !up; }, 300); }, 0); <</script>> [[Frog coffee|Cafe3]] [[Normal coffee|End4]] <button class="nav-button" id="thirsty">He doesn't want a drink</button> <<script>> setTimeout(function() { var btn = document.getElementById('thirsty'); var animating = false; btn.addEventListener('click', function() { if (animating) return; animating = true; btn.style.display = 'none'; var boom = document.createElement('div'); boom.textContent = "HE'S THIRSTY"; boom.style.color = 'green'; boom.style.fontWeight = 'bold'; boom.style.fontSize = '1em'; boom.style.transition = 'font-size 0.4s'; boom.style.fontFamily = 'monospace'; btn.parentNode.insertBefore(boom, btn); setTimeout(function() { boom.style.fontSize = '4em'; }, 50); setTimeout(function() { boom.style.fontSize = '1em'; }, 600); setTimeout(function() { boom.remove(); btn.style.display = 'inline-block'; animating = false; }, 1000); }); }, 0); <</script>>

Yeah, <span style="color:green; font-size:2em; font-weight:bold;">Frog Coffee</span> is for <span style="color:green; font-size:2em; font-weight:bold;">Frogs.</span> Amen to that. <span id="pray" style="display:inline-block;">🙏🙏🙏</span> <<script>> setTimeout(function() { var pray = document.getElementById('pray'); var up = true; setInterval(function() { pray.style.transform = up ? 'translateY(-3px)' : 'translateY(0px)'; pray.style.transition = 'transform 0.15s'; up = !up; }, 150); }, 0); <</script>> Closing time! One last customer. <img src="https://cdn10.phillymag.com/wp-content/uploads/sites/3/2020/12/gritty-philadelphia-election-results-write-in-votes-web.jpg" style="width:400px;" /> Oh yay! Gritty! What should you get for him? <div> <button class="nav-button" id="btn1" style="position:relative; display:block; margin:0.1em 0; left:0;">Gritty Coffee</button> <button class="nav-button" id="btn2" style="position:relative; display:block; margin:0.1em 0; left:0;">Normal Coffee</button> <button class="nav-button" id="btn3" style="display:block; margin:0.1em 0;">Wedding Ring</button> </div> <<script>> setTimeout(function() { var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3'); function moveButton(btn) { var maxX = document.getElementById('passages').offsetWidth - btn.offsetWidth - 40; var newX = Math.max(0, Math.random() * maxX); var newY = (Math.random() * 60) - 30; btn.style.left = newX + 'px'; btn.style.top = newY + 'px'; } btn1.addEventListener('click', function() { moveButton(btn1); }); btn2.addEventListener('click', function() { moveButton(btn2); }); btn3.addEventListener('click', function() { SugarCube.Engine.play('Cafe4'); }); }, 0); <</script>>

<h1 style="color:#8b0000; font-size:3em; text-transform:uppercase;">Obviously not normal coffee he's a frog</h1> <style> @keyframes shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 6px); } 40% { transform: translate(6px, -6px); } 60% { transform: translate(-6px, -6px); } 80% { transform: translate(6px, 6px); } 100%{ transform: translate(0, 0); } } </style> <div id="frog-arena" style="position:relative; width:100%; height:300px;"> <img id="driftFrog" src="https://cdn.pixabay.com/photo/2023/01/14/02/46/frog-7717355_1280.png" style="width:100px; position:absolute; pointer-events:none; left:0px; top:0px;" /> <div style="text-align:center; padding-top:1em;"> <button class="nav-button" id="getOut" style="font-size:3em; padding:0.4em 1.2em; background:#8b0000; color:#fdf6ee; border:none; animation: shake 0.3s infinite;">GET OUT</button> </div> </div> <<script>> setTimeout(function() { document.getElementById('getOut').addEventListener('click', function() { SugarCube.Engine.play('Start'); }); var frog = document.getElementById('driftFrog'); var arena = document.getElementById('frog-arena'); var posX = 0; var posY = 0; var speedX = 1.2; var speedY = 0.8; function drift() { if (!document.body.contains(frog)) return; posX += speedX; posY += speedY; if (posX < 0 || posX > arena.offsetWidth - 100) speedX *= -1; if (posY < 0 || posY > arena.offsetHeight - 100) speedY *= -1; frog.style.left = posX + 'px'; frog.style.top = posY + 'px'; requestAnimationFrame(drift); } frog.onload = drift; if (frog.complete) drift(); }, 0); $(document).one(':passageinit', function() { var f = document.getElementById('driftFrog'); if (f) f.remove(); }); <</script>>

<<script>> setTimeout(function() { var images = [ 'https://cdn.pixabay.com/photo/2013/07/12/17/55/bell-152615_1280.png', 'https://cdn.pixabay.com/photo/2013/07/13/10/08/flower-156608_1280.png' ]; for (var i = 0; i < 40; i++) { (function(index) { var img = document.createElement('img'); img.src = images[index % 2]; img.style.width = '50px'; img.style.position = 'fixed'; img.style.zIndex = '998'; img.style.pointerEvents = 'none'; img.style.left = Math.random() * (window.innerWidth - 50) + 'px'; img.style.top = Math.random() * (window.innerHeight - 50) + 'px'; document.body.appendChild(img); var speedX = (Math.random() - 0.5) * 3; var speedY = (Math.random() - 0.5) * 3; var posX = parseFloat(img.style.left); var posY = parseFloat(img.style.top); function float() { if (!document.body.contains(img)) return; posX += speedX; posY += speedY; if (posX < 0 || posX > window.innerWidth - 50) speedX *= -1; if (posY < 0 || posY > window.innerHeight - 50) speedY *= -1; img.style.left = posX + 'px'; img.style.top = posY + 'px'; requestAnimationFrame(float); } float(); $(document).one(':passageinit', function() { img.remove(); }); })(i); } }, 0); <</script>> <h1 style="text-align:center; font-size:3em; color:#5c2e00; margin:0.2em 0;">YOU MARRIED <span id="gritty" style="color:#e68019; display:inline-block;">GRITTY</span> YOU WIN THE COFFEE SHOP GAME!</h1> <<script>> setTimeout(function() { var g = document.getElementById('gritty'); var up = true; setInterval(function() { g.style.transform = up ? 'translateY(-15px)' : 'translateY(0px)'; g.style.transition = 'transform 0.2s'; up = !up; }, 200); }, 0); <</script>> <div style="text-align:center; margin-top:0.5em;"> <button class="nav-button" id="playAgain" style="font-size:2em; padding:0.4em 1.2em;">PLAY AGAIN?</button> </div> <<script>> setTimeout(function() { document.getElementById('playAgain').addEventListener('click', function() { SugarCube.Engine.play('Start'); }); }, 0); <</script>>