Small improvement to bingo

This commit is contained in:
Adam Blažek 2021-06-29 21:29:42 +02:00
parent 841280dd5f
commit e8384098d5
2 changed files with 2 additions and 2 deletions

View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><link rel="stylesheet" href="bingo.css"><script type="module" src="bingo.js"></script><title>Bingo | xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><h1>Bingo</h1><noscript><div class="error">This page requires JavaScript to function properly. Please enable scripts in your browser.</div></noscript><template v-if="bingoGenerated"><div class="bingo-grid-wrapper"><table class="bingo-grid"><tr v-for="row in grid"><td v-for="cell in row" v-bind:class="{crossed: cell.crossed}" v-on:click="cell.crossed = !cell.crossed" class="bingo-cell">{{cell.text}}</td></tr></table></div><p><button v-on:click="bingoGenerated = false">Change</button></p></template><template v-else><p> <label for="bingo-input">Phrases (one per line):</label></p><p><textarea id="bingo-input" v-model="input" class="bingo-input"></textarea></p><p><label for="bingo-size-input">Size: </label><input id="bingo-size-input" type="number" v-model.number="gridSize" min="2"></p><p><button v-if="enoughPhrases" type="button" v-on:click="generate">Generate</button><div v-if="!enoughPhrases" class="error">You need at least {{gridSize * gridSize}} phrases to generate a bingo of size {{gridSize}}</div></p></template></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><link rel="stylesheet" href="bingo.css"><script type="module" src="bingo.js"></script><title>Bingo | xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><h1>Bingo</h1><noscript><div class="error">This page requires JavaScript to function properly. Please enable scripts in your browser.</div></noscript><template v-if="bingoGenerated"><div class="bingo-grid-wrapper"><table class="bingo-grid"><tr v-for="row in grid"><td v-for="cell in row" v-bind:class="{crossed: cell.crossed}" v-on:click="cell.crossed = !cell.crossed" class="bingo-cell">{{cell.text}}</td></tr></table></div><p><button v-on:click="bingoGenerated = false">Change</button></p></template><template v-else><p> <label for="bingo-input">Phrases (one per line):</label></p><p><textarea id="bingo-input" v-model="input" class="bingo-input"></textarea></p><p><label for="bingo-size-input">Size: </label><input id="bingo-size-input" type="number" v-model.number="gridSize" min="2"></p><p><button v-if="enoughPhrases" type="button" v-on:click="generate">Generate</button><div v-if="!enoughPhrases" class="error">You need at least {{gridSize * gridSize}} phrases to generate a bingo of size {{gridSize}}, but you have only {{phrases.length}} phrase{{phrases.length === 1 ? '' : 's'}}.</div></p></template></body></html>

View File

@ -29,4 +29,4 @@ block content
input#bingo-size-input(type="number" v-model.number="gridSize" min="2")
p
button(v-if="enoughPhrases" type="button" v-on:click="generate") Generate
.error(v-if="!enoughPhrases") You need at least {{gridSize * gridSize}} phrases to generate a bingo of size {{gridSize}}
.error(v-if="!enoughPhrases") You need at least {{gridSize * gridSize}} phrases to generate a bingo of size {{gridSize}}, but you have only {{phrases.length}} phrase{{phrases.length === 1 ? '' : 's'}}.