deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

homepage hooks chart

more-scalatags
Thibault Duplessis 2019-02-28 18:59:41 +07:00
parent 7699d429f0
commit 6328cc9577
3 changed files with 79 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
ui/lobby/css/app/_hook-chart.scss
View File

@ -1,84 +1,83 @@
#hooks_wrap .hooks_chart {
position: absolute;
top: 0;
left: 0;
}
#hooks_wrap .hooks_chart > span.label {
font-size: 9px;
position: absolute;
left: 3px;
bottom: 1px;
text-shadow: 0 0 3px #fff;
font-weight: bold;
}
#hooks_wrap .hooks_chart > div.grid {
position: absolute;
left: 0;
.hooks__chart {
@extend %abs-100;
bottom: 0;
}
#hooks_wrap .hooks_chart > div.grid.horiz {
width: 100%;
border-top: 1px dashed #ccc;
}
#hooks_wrap .hooks_chart > div.grid.vert {
height: 100%;
border-right: 1px dashed #ccc;
}
#hooks_wrap .hooks_chart .canvas {
position: relative;
width: 510px;
height: 510px;
}
#hooks_wrap .hooks_chart .plot {
position: absolute;
cursor: pointer;
z-index: 1;
font-size: 1.4em;
text-shadow: 0 0 3px #fff;
opacity: 0.7;
transition: 0.5s;
transform: scale(1);
}
#hooks_wrap .hooks_chart .plot.rated {
opacity: 0.9;
color: #d59120!important;
}
#hooks_wrap .hooks_chart .plot.cancel {
opacity: 0.9;
color: #0b9c1e!important;
}
#hooks_wrap .hooks_chart .plot.new {
transform: translateY(-7px);
opacity: 0;
}
#hooks_wrap .hooks_chart .plot:hover {
z-index: 2;
opacity: 1;
transform: scale(1.2);
right: 0;
.label {
font-size: 9px;
position: absolute;
left: 3px;
bottom: 1px;
text-shadow: $text-shadow;
font-weight: bold;
}
.grid {
position: absolute;
left: 0;
bottom: 0;
&.horiz {
width: 100%;
border-top: 1px dashed $c-border;
}
&.vert {
height: 100%;
border-right: 1px dashed $c-border;
}
}
.canvas {
position: relative;
width: 510px;
height: 510px;
}
.plot {
position: absolute;
cursor: pointer;
z-index: 1;
font-size: 1.4em;
text-shadow: 0 0 3px #fff;
opacity: 0.7;
transition: 0.5s;
transform: scale(1);
&.rated {
opacity: 0.9;
color: #d59120!important;
}
&.cancel {
opacity: 0.9;
color: #0b9c1e!important;
}
&.new {
transform: translateY(-7px);
opacity: 0;
}
&:hover {
z-index: 2;
opacity: 1;
transform: scale(1.2);
}
}
}
#hook {
@extend %box-neat-force;
display: none;
color: #444;
box-shadow: 0 0 9px #333;
background: #d0d0d0;
background: $c-bg-box;
cursor: default;
position: absolute;
z-index: 900000;
}
#hook .inner {
display: inline-block;
text-align: center;
font-size: 1.25em;
padding-bottom: 5px;
}
#hook .opponent {
background: #666;
color: #eee;
min-width: 120px;
padding: 5px;
margin-bottom: 5px;
}
#hook .opponent,
#hook span {
display: block;
z-index: z('popup');
.inner {
@extend %flex-column;
text-align: center;
padding-bottom: 5px;
}
.opponent {
background: $c-secondary;
color: #fff;
min-width: 120px;
padding: .3em .6em;
margin-bottom: .3em;
line-height: 1.4;
}
.opponent,
span {
display: block;
}
}

4
ui/lobby/src/view/realTime/chart.ts
View File

@ -79,8 +79,8 @@ function renderHook(ctrl: LobbyController, hook: Hook): string {
} else {
html += '<span class="opponent anon ' + color + '">' + ctrl.trans('anonymous') + '</span>';
}
html += '<span class="clock" data-icon="p"> ' + hook.clock + '</span>';
html += '<span class="varicon" data-icon="' + perfIcons[hook.perf] + '"> ' + ctrl.trans(hook.ra ? 'rated' : 'casual') + '</span>';
html += hook.clock;
html += '<i data-icon="' + perfIcons[hook.perf] + '"> ' + ctrl.trans(hook.ra ? 'rated' : 'casual') + '</i>';
html += '</div>';
return html;
}

48
ui/lobby/src/view/realTime/list.ts
View File

@ -104,52 +104,6 @@ export function render(ctrl: LobbyController, allHooks: Hook[]) {
}
while (el.nodeName !== 'TABLE');
}, ctrl.redraw)
}, [
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
...renderedHooks,
])
}, renderedHooks)
]);
}