Browse Source

Use CSS backgrounds for input display images

main
Holly McFarland 7 months ago
parent
commit
071a843bed
13 changed files with 89 additions and 69 deletions
  1. BIN
      assets/controller.png
  2. BIN
      assets/controllerdown.png
  3. BIN
      assets/controllerdownleft.png
  4. BIN
      assets/controllerdownright.png
  5. BIN
      assets/controllerleft.png
  6. BIN
      assets/controllerneutral.png
  7. BIN
      assets/controllerright.png
  8. BIN
      assets/controllerup.png
  9. BIN
      assets/controllerupleft.png
  10. BIN
      assets/controllerupright.png
  11. +3
    -37
      index.html
  12. +19
    -29
      script.js
  13. +67
    -3
      style.css

BIN
assets/controller.png View File

Before After
Width: 98  |  Height: 882  |  Size: 6.2 KiB

BIN
assets/controllerdown.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.3 KiB

BIN
assets/controllerdownleft.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.6 KiB

BIN
assets/controllerdownright.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.6 KiB

BIN
assets/controllerleft.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.3 KiB

BIN
assets/controllerneutral.png View File

Before After
Width: 98  |  Height: 98  |  Size: 4.9 KiB

BIN
assets/controllerright.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.3 KiB

BIN
assets/controllerup.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.5 KiB

BIN
assets/controllerupleft.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.8 KiB

BIN
assets/controllerupright.png View File

Before After
Width: 98  |  Height: 98  |  Size: 5.8 KiB

+ 3
- 37
index.html View File

@ -208,23 +208,7 @@
<div class="row w-100 m-4">
<div class="col-sm text-center">
<h5 class="card-title">Direction</h5>
<div id="input-display-direction">
<img class="mx-auto d-block" data-dir="none"
src="assets/controllerneutral.png">
<img class="mx-auto d-none" data-dir="up" src="assets/controllerup.png">
<img class="mx-auto d-none" data-dir="upright"
src="assets/controllerupright.png">
<img class="mx-auto d-none" data-dir="right"
src="assets/controllerright.png">
<img class="mx-auto d-none" data-dir="downright"
src="assets/controllerdownright.png">
<img class="mx-auto d-none" data-dir="down" src="assets/controllerdown.png">
<img class="mx-auto d-none" data-dir="downleft"
src="assets/controllerdownleft.png">
<img class="mx-auto d-none" data-dir="left" src="assets/controllerleft.png">
<img class="mx-auto d-none" data-dir="upleft"
src="assets/controllerupleft.png">
</div>
<div id="input-display-direction" class="input-dir"></div>
</div>
<div class="col-sm text-center">
@ -240,30 +224,12 @@
<div class="row w-100 m-4">
<div class="col-sm text-center">
<h5 class="card-title">Neutral Dash Direction</h5>
<div id="input-display-neutral-dash">
<img class="mx-auto d-none" data-dir="up" src="assets/controllerup.png">
<img class="mx-auto d-none" data-dir="upright"
src="assets/controllerupright.png">
<img class="mx-auto d-block" data-dir="right"
src="assets/controllerright.png">
<img class="mx-auto d-none" data-dir="downright"
src="assets/controllerdownright.png">
<img class="mx-auto d-none" data-dir="down" src="assets/controllerdown.png">
<img class="mx-auto d-none" data-dir="downleft"
src="assets/controllerdownleft.png">
<img class="mx-auto d-none" data-dir="left" src="assets/controllerleft.png">
<img class="mx-auto d-none" data-dir="upleft"
src="assets/controllerupleft.png">
</div>
<div id="input-display-neutral-dash" class="input-dir"></div>
</div>
<div class="col-sm text-center">
<h5 class="card-title">Neutral Shot Direction</h5>
<div id="input-display-neutral-shoot">
<img class="mx-auto d-none" data-dir="left" src="assets/controllerleft.png">
<img class="mx-auto d-none" data-dir="right"
src="assets/controllerright.png">
</div>
<div id="input-display-neutral-shoot" class="input-dir"></div>
</div>
</div>
<div class="row">


+ 19
- 29
script.js View File

@ -500,6 +500,18 @@ function updateTargetElement(element, direction) {
}
}
function updateDirectionDisplayElement(element, direction) {
for (let dir of Object.values(Direction)) {
if (!dir) continue;
if (dir === direction) {
element.classList.add(dir);
} else {
element.classList.remove(dir);
}
}
}
let quizDir = ""
function newDirection() {
let target = document.getElementById("target");
@ -508,7 +520,7 @@ function newDirection() {
let directions = Object.values(SuperDirection).filter(Boolean);
let dirIndex = randomInteger(0, directions.length - 1);
quizDir = directions[dirIndex];
updateTargetElement(document.getElementById("quiz-target"), quizDir);
let hintDirs = getHintDirs(quizDir);
@ -516,16 +528,8 @@ function newDirection() {
}
function updateInputDisplay(frames) {
let currentDirection = frames[0].dir ?? "none";
for (let e of document.getElementById("input-display-direction").children) {
if (e.dataset.dir === currentDirection) {
e.classList.add("d-block");
e.classList.remove("d-none");
} else {
e.classList.remove("d-block");
e.classList.add("d-none");
}
}
updateDirectionDisplayElement(
document.getElementById("input-display-direction"), frames[0].dir);
let dashFrames = document.getElementById("remaining-dash-frames");
dashFrames.innerText = 0;
@ -538,25 +542,11 @@ function updateInputDisplay(frames) {
document.getElementById("shooting").innerText = frames[0].shoot ? "BANG!" : "...";
for (let e of document.getElementById("input-display-neutral-dash").children) {
if (e.dataset.dir === frames[0].neutralDashDir) {
e.classList.add("d-block");
e.classList.remove("d-none");
} else {
e.classList.remove("d-block");
e.classList.add("d-none");
}
}
updateDirectionDisplayElement(
document.getElementById("input-display-neutral-dash"), frames[0].neutralDashDir);
for (let e of document.getElementById("input-display-neutral-shoot").children) {
if (e.dataset.dir === frames[0].neutralShootDir) {
e.classList.add("d-block");
e.classList.remove("d-none");
} else {
e.classList.remove("d-block");
e.classList.add("d-none");
}
}
updateDirectionDisplayElement(
document.getElementById("input-display-neutral-shoot"), frames[0].neutralShootDir);
}
function attemptShot(frames) {


+ 67
- 3
style.css View File

@ -1,3 +1,8 @@
:root {
--target-image-width: 404px;
--input-image-width: 98px;
}
/* Sticky footer */
#main {
@ -23,9 +28,6 @@ footer {
}
/* Direction displays */
:root {
--target-image-width: 404px;
}
.dir-display.small {
--local-image-width: calc(var(--target-image-width) / 4);
@ -131,4 +133,66 @@ footer {
.dir-display.nnw:after {
background-position-y: -1600%;
}
/* Input displays */
.input-dir {
width: 100%;
max-width: var(--input-image-width) !important;
padding-bottom: min(var(--input-image-width), 100%);
position: relative;
margin: auto;
}
.input-dir:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
background-image: url("assets/controller.png");
background-size: cover;
}
/* Again, one for each direction */
.input-dir.up:after {
background-position-y: -100%;
}
.input-dir.upright:after {
background-position-y: -200%;
}
.input-dir.right:after {
background-position-y: -300%;
}
.input-dir.downright:after {
background-position-y: -400%;
}
.input-dir.down:after {
background-position-y: -500%;
}
.input-dir.downleft:after {
background-position-y: -600%;
}
.input-dir.left:after {
background-position-y: -700%;
}
.input-dir.upleft:after {
background-position-y: -800%;
}

Loading…
Cancel
Save