Alexander/Froobtris
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UI tweaks; add control info

Browse source
This commit is contained in:
Alexander Bass 2023-08-06 21:34:18 -04:00
parent 5e9960fa5a
commit 12638b4131
1 changed files with 71 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/assets/froob.html
View file

@ -7,29 +7,29 @@
<link rel="icon" href="data:," />
<style>
body {
margin-inline: auto;
background-color: green;
background-image: url("./background.png");
color: white;
font-family: Charter, bitstream charter, sitka text, Cambria, serif;
max-height: 100vh;
}
h1 {
margin: 0;
text-align: center;
}
h1 {
font-size: 3vw;
}
img,
canvas {
image-rendering: optimizeSpeed;
image-rendering: pixelated;
max-width: 100%;
max-height: 90vh;
}
#sidebyside {
justify-content: center;
display: flex;
gap: 20px;
gap: 0.5%;
justify-content: center;
max-height: inherit;
}
#gameOver {
height: 100vh;
@ -71,27 +71,89 @@
font-size: 6vw;
}
#tryAgain {
text-decoration: underline;
}
#tryAgain:hover {
cursor: pointer;
}
#scoreCounter {
margin-top: 2vw;
}
#infobox {
font-family: sans-serif;
padding: 7px;
color: white;
background-color: #272727;
user-select: none;
}
#infobox h2 {
text-align: center;
margin: 0;
font-weight: normal;
font-size: medium;
}
#infobox ul {
margin: 0 0.5vw;
padding: 0;
list-style-type: none;
}
#infobox li {
display: flex;
align-items: center;
justify-content: space-between;
}
kbd {
background-color: #eee;
border-radius: 3px;
text-align: center;
height: 1.8vw;
width: 1.8vw;
font-size: 1.5vw;
margin-block: 2px;
color: black;
border: 1px solid #b4b4b4;
}
.with-border {
margin: 4px;
border: 4px solid #525252;
outline: 4px solid #6b6b6b;
}
.hidden {
display: none;
}
#rightcolumn {
gap: 0.5%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
</style>
<script type="module" src="main.js"></script>
</head>
<body>
<h1>Froobtris</h1>
<noscript
>This game requires javascript to do anything. You browser is either
incompatible with it, or you have disabled it.</noscript
>Froobtris requires JavaScript. You browser is either incompatible with
JavaScript, or you have disabled JavaScript.</noscript
>
<div id="sidebyside">
<div id="pfcontainer"></div>
<div id="rightcolumn">
<div id="sdcontainer"></div>
<div id="infobox" class="with-border">
<h2>Controls</h2>
<ul>
<li><kbd>↑</kbd> Rotate</li>
<li><kbd>↓</kbd> Drop</li>
<li><kbd>←</kbd> Left</li>
<li><kbd>→</kbd> Right</li>
</ul>
</div>
</div>
</div>
<div id="overlay" class="hidden">
<div id="gameOver">