ISITECH/tcl-guessr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make map fit screen

Browse source
This commit is contained in:
uku 2024-10-24 12:10:52 +02:00
parent 4f7d603848
commit ab2c93e71b
Signed by: uku
SSH key fingerprint: SHA256:4P0aN6M8ajKukNi6aPOaX0LacanGYtlfjmN+m/sHY/o
1 changed files with 28 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/routes/+page.svelte
View file

@ -87,38 +87,48 @@
}
</script>
<h1 class="banner">{data.gameData.stopName}</h1>
<div class="container">
<span class="title">{data.gameData.stopName}</span>
<div class="banner" hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div>
<div hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div>
<div class="banner results" hidden={!submitted}>
<div class="results" hidden={!submitted}>
{Math.floor(points)} points! Vous etiez à {Math.floor(distance)}m.
</div>
</div>
<div class="banner" {hidden}>
<div {hidden}>
<span>distance: {distance}, points: {points}</span>
</div>
</div>
<div class="banner" {hidden}>
<div {hidden}>
<label>lines: <input type="checkbox" bind:checked={lines} /></label>
<label>labels: <input type="checkbox" bind:checked={labels} /></label>
</div>
<div id="map" use:createMap></div>
</div>
<div id="map" use:createMap></div>
<style>
.banner {
padding: 4px;
.container {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
text-align: center;
}
.title {
font-weight: bold;
font-size: 32px;
}
.results {
color: green;
font-size: 20px;
}
#map {
height: 100%;
flex-grow: 1;
width: 100%;
}
</style>