diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-06 23:25:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Using Alpine.js to make the game page dynamic

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-03 21:28:50 +01:00
parent ff7ad42e32
commit cdd0085f26
2 changed files with 86 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -4,10 +4,13 @@ Omdat Nederlanders ook [alphaguess](https://alphaguess.com) willen spelen :)
My own implementation of an alphaguess like game with custom word lists, tailored to be used with a Dutch source. My own implementation of an alphaguess like game with custom word lists, tailored to be used with a Dutch source.
Using Alpine.js on the frontend and FastAPI as backend.
## Environment variables ## Environment variables
``` ```
set -x WORD_LIST /path/to/alfagok_wordlist.txt set -x WORD_LIST /path/to/alfagok_wordlist.txt
set -x START_DATE 2024-11-02 set -x START_DATE 2024-11-02
set -x DICTIONARY_LIST /path/to/dictionary.txt
``` ```

78
src/alfagok/templates/index.html
View File

@@ -8,37 +8,95 @@
</head> </head>
<body> <body>
<a href="/" v-cloak class="title">alphaguess</a> <span class="puzzleno">puzzle #{{numberOfDaysSinceStart}} • <span id="nextgame"></span></span> <div
<div v-cloak v-if="beforeGuesses.length || afterGuesses.length"><br></div> id="container"
x-data="{
search: '',
<div v-cloak class="instructions" v-else> items: ['foo', 'bar', 'baz'],
winTime: null,
startTime: null,
nrGuesses: 0,
guessesBefore: ['blah'],
guessesAfter: [],
guessValue: '',
gameID: 0,
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #[[ gameID ]] • <span id="nextgame"></span></span>
<div x-cloak x-if="guessesBefore.length || guessesAfter.length"><br></div>
<div x-cloak class="instructions" x-else>
<p>Guess the word of the day. Each guess reveals where the word sits alphabetically.</p> <p>Guess the word of the day. Each guess reveals where the word sits alphabetically.</p>
</div> </div>
<center> <center>
<ul>
<template x-for="item in guessesBefore" :key="item">
<li x-text="item"></li>
</template>
</ul>
<input type="text" x-model="guessValue">
<p x-cloak>Je huidige gok is: <span x-text="guessValue"></span></p>
<input type="button" value="Doe een gok">
<ul>
<template x-for="item in guessesAfter" :key="item">
<li x-text="item"></li>
</template>
</ul>
<div> <div>
<div v-if="winTime" class="win"> <div v-if="winTime" class="win">
<h3><b>You got it! 🎉</b></h3> <h3><b>Je hebt hem! 🎉</b></h3>
<p>Today's word was <b>{{guessValue}}</b>.</p> <p>Het woord van vandaag was <b x-text="guessValue"></b>.</p>
<div id="stats"> <div id="stats">
<div id="results"> <div id="results">
<p><b>🧩 Puzzle #{{numberOfDaysSinceStart}}</b></p> <p><b x-data="{ message: '🧩 Puzzle #' + gameID }" x-text="message"></b></p>
<p>🤔 {{guesses.length}} guesses</p> <p x-data="{ message: '🤔 '+ nrGuesses + ' gokken' }" x-text="message"></p>
<p>⏱️ {{getFormattedTime(winTime - startTime)}}</p> <p x-data="{ message: '⏱️ ' + getFormattedTime(winTime - startTime) '" x-text="message"></p>
<p>🔗 <span style="color:var(--blue)">alphaguess.com</span></p> <p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
</div> </div>
</div> </div>
<div id="copyresults"></div> <div id="copyresults"></div>
<button class="copy" data-clipboard-target="#results"> <button class="copy" data-clipboard-target="#results">
Tap to copy and share ❤️ Tik om te kopi&euml;ren te delen ❤️
</button> </button>
</div> </div>
</center> </center>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script>
<script src="/static/copy.js"></script> <script src="/static/copy.js"></script>
<script src="/static/countdown.js"></script> <script src="/static/countdown.js"></script>
<script src="/static/game.js"></script> <script src="/static/game.js"></script>
</body> </body>
</html> </html>