chandlerswift/name-all-lakes-by-area-quiz
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add checkbox to show unguessed cities

Browse source
This commit is contained in:
Chandler Swift 2024-03-05 23:29:06 -06:00
parent 70c954d4fa
commit 5dd5d4cd73
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -61,6 +61,9 @@
</div> </div>
<div class="col-8 h-100"> <div class="col-8 h-100">
<canvas id="canvas" class="mx-3 my-auto" @vue:mounted="draw" width="800" height="600"></canvas> <canvas id="canvas" class="mx-3 my-auto" @vue:mounted="draw" width="800" height="600"></canvas>
<div>
<input type="checkbox" v-model="show_unguessed_cities" @change="draw"> Show unguessed cities
</div>
</div> </div>
</div> </div>
</div> </div>
@ -137,6 +140,7 @@
simplified_cities: cities.map(city => simplify(city.name)), simplified_cities: cities.map(city => simplify(city.name)),
city_guess: "", city_guess: "",
message: "", message: "",
show_unguessed_cities: true,
achievements: { achievements: {
"Top Five": cities => cities.slice(0, 5), "Top Five": cities => cities.slice(0, 5),
"Top Ten": cities => cities.slice(0, 10), "Top Ten": cities => cities.slice(0, 10),
@ -192,7 +196,13 @@
if (city.guessed) { if (city.guessed) {
ctx.beginPath(); ctx.beginPath();
const c = transform(city.location) const c = transform(city.location)
console.log(city.location, c) ctx.fillStyle = "black";
ctx.arc(c[0], c[1], 2, 0, 2*Math.PI, true);
ctx.fill();
} else if (this.show_unguessed_cities) {
ctx.beginPath();
const c = transform(city.location)
ctx.fillStyle = "lightgray";
ctx.arc(c[0], c[1], 2, 0, 2*Math.PI, true); ctx.arc(c[0], c[1], 2, 0, 2*Math.PI, true);
ctx.fill(); ctx.fill();
} }