PERSIST AND WATCH
CONTINUE
/ 3 needed
<div
x-data="{stage: Alpine.$persist('basic'), lastStage: Alpine.$persist(''), hearts: ['🤍', '🤍', '🤍', '🤍'], emptyHearts:[], jumpReact: false}"
x-init="$watch('hearts', (value) => {
if(value.length === 0) {
lastStage = stage
stage = 'you-loose'
}
})"
class="relative"
>
<template x-data="{coins: 0 }" x-if="stage === 'you-loose'">
<div class="nes-container with-title is-centered">
<p class="title">PERSIST AND WATCH</p>
<p class="text-3xl text-center">CONTINUE</p>
<div class="m-5">
<i class="nes-icon coin is-medium"></i> <span x-text="coins"></span
><span> / 3 needed</span>
</div>
<div class="animate-bounce">
<button
@click="() => {
if(coins < 3){
coins += 1
} else {
hearts = ['🤍','🤍','🤍','🤍']
stage = jumpReact ? 'alpine-intro' : lastStage
}
}"
type="button"
class="nes-btn is-warning"
x-text="() => coins < 3 ? 'Insert Coin' : 'Continue'"
></button>
</div>
</div>
</template>
</div>
Alpine.js adventure
<div x-data="{stage: 'basic'}">
<!-- basic state -->
<template x-if="stage === 'basic'">
<div class="nes-container with-title is-centered">
<div>
<h1 class="text-3xl p-5">Alpine.js</h1>
<img
class="w-1/2 m-auto p-5"
src="https://i.redd.it/r36s9exzs4u21.png"
/>
<button
type="button"
class="nes-btn is-warning animate-bounce"
@click="() => stage = 'binding'"
>
Press to Start
</button>
</div>
</div>
</template>
...
</div>
State Binding
<div class="nes-container with-title is-centered">
<p class="title">State Binding</p>
<div
x-data="{progress: 0}"
x-init="() => {
window.setInterval(
function () {
if(progress < 100) {
progress += 10;
}
}, 1000);
}"
>
<progress
class="nes-progress"
x-bind:value="progress"
max="100"
></progress>
</div>
</div>
JQuery Dono
<template
x-if="stage === 'alpine-presentation'"
x-data="{
jqueryLines: [
'...',
'you traitor...',
'I see you are with Alpine-chan now..',
'There was a time where listening to events and taking action was MY thing. Now every John-Doe thinks they can mimic my power using VIRTUAL DOMS and other gimmicks...',
'I will no longer tolarate the disrespect!'
],
lineIndex: 0,
}"
>
<div class="w-full">
<div
@keyup.prevent.document.enter="(e) => {
lineIndex += 1
}"
class="w-1/2 relative"
>
<img src="/images/jquery-kun.jpg" class="w-full relative" />
<img
x-show="enterHint"
src="/images/enter.png"
class="absolute w-24 bottom-20 right-0 animate-bounce"
/>
<div class="nes-container is-dark with-title">
<p class="title">JQuery kun</p>
<p x-text="jqueryLines[lineIndex]"></p>
</div>
<div x-show="lineIndex > 4" class="tex-center p-10">
<button
@click="stage = 'stage-management'"
class="nes-btn animate-bounce"
type="button"
>
mmmkay...
</button>
</div>
</div>
</template>
React kun
<template
x-if="stage === 'alpine-presentation'"
x-data="{
reactLines: [
'...',
'[weird breathing noises]',
'what happened??!',
'I tought we where woing to start that new project toggether!',
'...',
'[more weird breathing noises]',
'We could have conquered that landing without a sweat',
'Now since Alpine Chan arrived in town we dont hang out as regular as before',
'But I know... Im POWERFUL without measure, it doesnt matter the project I can handle it',
'Now Im taking all your precious hearts with me, If you are not with me, then you will not be with anyone!!!',
'NOBODY!!!'
],
lineIndex: 0,
}"
>
<div class="w-full">
<div
@keyup.prevent.document.enter="(e) => {
if(reactLineIndex < 10){
reactLineIndex += 1
} else {
hearts = []
emptyHearts = ['💔','💔','💔','💔']
}
}"
class="w-1/2 relative"
>
<img src="/images/reac-kun.jpg" class="w-full relative" />
<img
x-show="enterHint"
src="/images/enter.png"
class="absolute w-24 bottom-20 right-0 animate-bounce"
/>
<div class="nes-container is-dark with-title">
<p class="title">React kun</p>
<p x-text="jqueryLines[lineIndex]"></p>
</div>
</div>
</template>
Alpine chan