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

80
src/assets/froob.html
View file

@ -7,29 +7,29 @@
<link rel="icon" href="data:," /> <link rel="icon" href="data:," />
<style> <style>
body { body {
margin-inline: auto;
background-color: green; background-color: green;
background-image: url("./background.png"); background-image: url("./background.png");
color: white; color: white;
font-family: Charter, bitstream charter, sitka text, Cambria, serif; font-family: Charter, bitstream charter, sitka text, Cambria, serif;
max-height: 100vh;
} }
h1 { h1 {
margin: 0; margin: 0;
text-align: center; text-align: center;
}
h1 {
font-size: 3vw; font-size: 3vw;
} }
img,
canvas { canvas {
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
image-rendering: pixelated; image-rendering: pixelated;
max-width: 100%;
max-height: 90vh;
} }
#sidebyside { #sidebyside {
justify-content: center;
display: flex; display: flex;
gap: 20px; gap: 0.5%;
justify-content: center;
max-height: inherit;
} }
#gameOver { #gameOver {
height: 100vh; height: 100vh;
@ -71,27 +71,89 @@
font-size: 6vw; font-size: 6vw;
} }
#tryAgain {
text-decoration: underline;
}
#tryAgain:hover { #tryAgain:hover {
cursor: pointer; cursor: pointer;
} }
#scoreCounter { #scoreCounter {
margin-top: 2vw; 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 { .hidden {
display: none; display: none;
} }
#rightcolumn {
gap: 0.5%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
</style> </style>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>
</head> </head>
<body> <body>
<h1>Froobtris</h1> <h1>Froobtris</h1>
<noscript <noscript
>This game requires javascript to do anything. You browser is either >Froobtris requires JavaScript. You browser is either incompatible with
incompatible with it, or you have disabled it.</noscript JavaScript, or you have disabled JavaScript.</noscript
> >
<div id="sidebyside"> <div id="sidebyside">
<div id="pfcontainer"></div> <div id="pfcontainer"></div>
<div id="sdcontainer"></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>
<div id="overlay" class="hidden"> <div id="overlay" class="hidden">
<div id="gameOver"> <div id="gameOver">