dan/heaventaker
1
0
Fork 0
mirror of https://github.com/danbulant/heaventaker synced 2026-06-20 07:01:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Basic game overlay

Browse source
This commit is contained in:
Daniel Bulant 2021-02-25 18:38:07 +01:00
parent 44c7088ced
commit 5a44a5fe6c
6 changed files with 57 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/png/game_overlay.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 KiB

2
public/global.css
View file

@ -11,6 +11,8 @@ body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
position: relative;
font-family: 'Times New Roman W', 'Times New Roman', Times, serif;
user-select: none;
}
@font-face {

BIN
public/sprite/game_overlay.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

3
src/App.svelte
View file

@ -4,6 +4,7 @@
import Overlay from "./pages/overlay.svelte";
import { characters } from "./stores/characters.js";
import { dialog } from "./stores/dialog.js";
import Game from "./pages/game.svelte";
var page = "game";
var current = localStorage.getItem("dialog-page") || 0;
@ -45,6 +46,8 @@
<title>Heaventaker</title>
</svelte:head>
<Game />
<Overlay active={gameActive}>
<Dialog bind:current {characters} bind:page />
</Overlay>

7
src/pages/game.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import GameOverlay from "./gameOverlay.svelte";
</script>
<GameOverlay steps={11} chapter={"I"} />

45
src/pages/gameOverlay.svelte Normal file
View file

@ -0,0 +1,45 @@
<script>
export var steps;
export var chapter;
</script>
<div class="overlay">
<img src="/sprite/game_overlay.webp" alt="" class="left" draggable={false}>
<div class="left-info">{steps}</div>
<img src="/sprite/game_overlay.webp" alt="" class="right" draggable={false}>
<div class="right-info">{chapter}</div>
</div>
<style>
.left {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: scaleX(-1);
}
.left-info {
position: fixed;
top: 72vh;
font-size: 13vh;
left: 16vh;
color: white;
width: 24vh;
text-align: center;
}
.right {
position: fixed;
top: 0;
right: 0;
height: 100vh;
}
.right-info {
position: fixed;
top: 72vh;
font-size: 13vh;
right: 16vh;
color: white;
width: 24vh;
text-align: center;
}
</style>