Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-02-17 21:39:20 +00:00
Code Issues Projects Releases Wiki Activity

add pin indicator to stats page so users have an indication of why lower rate shapes may be at the top

Browse Source
This commit is contained in:
David Burhans 2020-06-15 23:49:55 -05:00
parent f64ac04d9e
commit bd265d36de
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/css/ingame_hud/statistics.scss
View File

@ -80,6 +80,7 @@
background: #f4f4f4; background: #f4f4f4;
@include S(margin-bottom, 4px); @include S(margin-bottom, 4px);
display: grid; display: grid;
position: relative;
@include DarkThemeOverride { @include DarkThemeOverride {
background: #222428; background: #222428;
@ -103,6 +104,19 @@
@include S(padding, 0, 3px); @include S(padding, 0, 3px);
} }
div.pin {
@include S(width, 12px);
@include S(height, 12px);
@include S(padding, 0px);
background: uiResource("icons/pin.png") center center / 95% no-repeat;
position: absolute;
opacity: 0.6;
transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert;
}
} }
} }
@ -135,6 +149,13 @@
background: rgba(0, 10, 20, 0.05); background: rgba(0, 10, 20, 0.05);
justify-self: end; justify-self: end;
} }
.pin {
grid-column: 2 / 2;
grid-row: 1 / 3;
@include S(top, 4px);
@include S(right, 8px);
}
} }
} }
&[data-displaymode="detailed"] .content.hasEntries { &[data-displaymode="detailed"] .content.hasEntries {
@ -153,6 +174,13 @@
color: #55595a; color: #55595a;
} }
.pin {
grid-column: 1 / 2;
grid-row: 1 / 3;
@include S(top, 4px);
@include S(left, 40px);
}
canvas.graph { canvas.graph {
@include S(width, 270px); @include S(width, 270px);
@include S(height, 40px); @include S(height, 40px);

6
src/js/game/hud/parts/statistics_handle.js
View File

@ -32,7 +32,11 @@ export class HUDShapeStatisticsHandle {
initElement() { initElement() {
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.setAttribute("data-shape-key", this.definition.getHash()); this.element.setAttribute("data-shape-key", this.definition.getHash());
if (this.root.hud.parts.pinnedShapes.isShapePinned(this.definition.getHash())) {
const pinButton = document.createElement("div");
pinButton.classList.add("pin");
this.element.appendChild(pinButton);
}
this.counter = document.createElement("span"); this.counter = document.createElement("span");
this.counter.classList.add("counter"); this.counter.classList.add("counter");
this.element.appendChild(this.counter); this.element.appendChild(this.counter);