dan/heaventaker
1
0
Fork 0
mirror of https://github.com/danbulant/heaventaker synced 2026-05-19 04:18:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add rotate warning

Browse source
This commit is contained in:
Daniel Bulant 2021-06-09 16:58:16 +02:00
parent 172bb06b65
commit 0e5debd4fb
1 changed files with 43 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/App.svelte
View file

@ -33,14 +33,37 @@
$: console.log(dialog[$page]);
console.log("Pancake recipe at https://github.com/danbulant/heaventaker");
var width = window.innerWidth;
var height = window.innerHeight;
var outerHeight = window.outerHeight;
var outerWidth = window.outerWidth;
/**
* @param {UIEvent} e
*/
function resize(e) {
width = window.innerWidth;
height = window.innerHeight;
outerHeight = window.outerHeight;
outerWidth = window.outerWidth;
}
</script>
<svelte:window on:click={startPlaying} on:keydown={startPlaying} />
<svelte:window on:click={startPlaying} on:resize={resize} on:keydown={startPlaying} />
<svelte:head>
<title>Heaventaker</title>
</svelte:head>
{#if width < height / 1080 * 615 * 2}
<div class="warning" style="height: {height}px; line-height: {height}px;">
<span>
Resize or rotate your device to play.
</span>
</div>
{/if}
{#if dialog[$page].map}
<Game bind:current={$page} />
{/if}
@ -48,3 +71,22 @@
<Overlay active={!$gameActive}>
<Dialog bind:current={$page} />
</Overlay>
<style>
.warning {
width: 100vw;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
color: white;
text-align: center;
z-index: 99;
font-size: x-large;
}
.warning span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>