leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some visual feedback to the chip, time, and score counters

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-09-10 18:07:49 -06:00
parent 16bfe22593
commit 55214fad75
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/main.js
View File

@ -369,6 +369,13 @@ class Player extends PrimaryView {
restart_level() {
this.level.restart(this.compat);
this.set_state('waiting');
this.chips_el.classList.remove('--done');
this.time_el.classList.remove('--frozen');
this.time_el.classList.remove('--danger');
this.time_el.classList.remove('--warning');
this.root.classList.remove('--bonus-visible');
this.update_ui();
this._redraw();
}
@ -504,13 +511,24 @@ class Player extends PrimaryView {
// TODO can we do this only if they actually changed?
this.chips_el.textContent = this.level.chips_remaining;
if (this.level.chips_remaining === 0) {
this.chips_el.classList.add('--done');
}
this.time_el.classList.toggle('--frozen', this.level.time_remaining === null || this.level.timer_paused);
if (this.level.time_remaining === null) {
this.time_el.textContent = '---';
}
else {
this.time_el.textContent = Math.ceil(this.level.time_remaining / 20);
this.time_el.classList.toggle('--warning', this.level.time_remaining < 30 * 20);
this.time_el.classList.toggle('--danger', this.level.time_remaining < 10 * 20);
}
this.bonus_el.textContent = this.level.bonus_points;
if (this.level.bonus_points > 0) {
this.root.classList.add('--bonus-visible');
}
this.message_el.textContent = this.level.hint_shown ?? "";
this.inventory_el.textContent = '';

26
style.css
View File

@ -409,10 +409,32 @@ dl.score-chart .-sum {
line-height: 1;
text-align: right;
font-family: monospace;
color: hsl(45, 100%, 60%);
background: #080808;
color: hsl(45, 100%, 40%);
background: hsl(0, 0%, 3%);
border: 1px inset #202020;
}
.chips output.--done {
color: hsl(90, 100%, 40%);
background: hsl(90, 50%, 3%);
}
.time output.--warning {
color: hsl(30, 100%, 40%);
background: hsl(0, 50%, 5%);
}
.time output.--danger {
color: hsl(0, 100%, 40%);
background: hsl(0, 75%, 8%);
}
.time output.--frozen {
color: hsl(195, 100%, 40%);
background: hsl(195, 25%, 3%);
}
#player .bonus {
visibility: hidden;
}
#player.--bonus-visible .bonus {
visibility: initial;
}
.message {
grid-area: message;