deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

homepage hook list

more-scalatags
Thibault Duplessis 2019-02-28 18:43:28 +07:00
parent 33701d1cdc
commit 7699d429f0
5 changed files with 138 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/lobby/css/_table.scss
View File

@ -10,11 +10,14 @@
a {
font-size: 1.1em;
text-align: center;
margin: .2em 0;
padding: .5em;
&.disabled {
opacity: 0.2;
}
margin: .2em 0;
padding: .5em;
&.active {
background: $c-secondary;
}
}
@include breakpoint($mq-col4) {
justify-content: center;

11
ui/lobby/css/app/_app.scss
View File

@ -10,7 +10,7 @@
user-select: none;
&__content {
@extend %box-neat;
@extend %box-neat-force; // need hidden for hooks overflow scroll
flex: 1 1 100%;
position: relative;
@if $theme == 'transp' {
@ -21,6 +21,10 @@
background: $c-bg-zebra url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy41MjkgMzMuNTA0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4yNS02LjI0NikiIG9wYWNpdHk9Ii4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiMwMDAiPjxwYXRoIGQ9Im0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5aC0yM2MwLTkgMTAtNi41IDgtMjEiLz48cGF0aCBkPSJtMjQgMThjLjM4IDIuOTEtNS41NSA3LjM3LTggOS0zIDItMi44MiA0LjM0LTUgNC0xLjA0Mi0uOTQgMS40MS0zLjA0IDAtMy0xIDAgLjE5IDEuMjMtMSAyLTEgMC00IDEtNC00IDAtMiA2LTEyIDYtMTIgMCAwIDEuODktMS45IDItMy41LS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMmMwIDAgLjc4LTEuOTkyIDIuNS0zIDEgMCAxIDMgMSAzIi8+PC9nPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im05LjUgMjUuNWEuNSAuNSAwIDEgMSAtMSAwIC41IC41IDAgMSAxIDEgMHoiLz48cGF0aCBkPSJtMTUgMTUuNWEuNSAxLjUgMCAxIDEgLTEgMCAuNSAxLjUgMCAxIDEgMSAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjg2Ni41LS41Ljg2NiA5LjY5My01LjE3MykiLz48L2c+PC9nPjwvc3ZnPg==');
}
background-size: 100% 100%;
overflow: hidden;
&:hover {
overflow-y: auto;
}
}
.redir {
@ -34,7 +38,7 @@
.toggle {
position: absolute;
padding: .3em .5em;
padding: .6em;
cursor: pointer;
z-index: 2;
font-size: 1.3em;
@ -43,8 +47,7 @@
}
@include transition();
&:hover {
background: $c-accent;
color: #fff;
color: $c-accent;
}
}
}

137
ui/lobby/css/app/_hook-list.scss
View File

@ -1,82 +1,77 @@
.hooks__list {
text-shadow: $text-shadow;
width: 100%;
overflow: hidden;
tr {
&.disabled {
opacity: 0.4;
td {
cursor: default;
background: transparent;
border-color: transparent;
}
}
&.cancel td {
background: fade-out($c-secondary, .6);
}
&.join:hover td {
background: fade-out($c-primary, .2);
color: #fff;
transition: none;
}
&:not(.disabled):hover ::before {
opacity: 1;
}
&.variants td {
text-align: center;
padding: 3px 0;
background: none;
text-transform: uppercase;
letter-spacing: 3px;
}
}
th {
padding: 14px 12px;
border-bottom: transparent;
font-family: 'Roboto';
font-weight: 300;
}
th.sortable {
cursor: pointer;
}
th.sortable:hover,
th.sort {
font-weight: normal;
}
th.sort .is:before {
opacity: 0.7;
margin-right: 3px;
content: "R";
}
th.player {
width: 110px;
@extend %roboto;
padding: 1em;
&.sortable {
cursor: pointer;
}
&.sortable:hover,
&.sort {
font-weight: normal;
}
&.sort .is:before {
opacity: 0.7;
margin-right: 3px;
content: "R";
}
&.player {
width: 110px;
}
}
td {
padding: 9px 12px;
border-bottom: 1px solid #ccc;
@extend %nowrap-hidden;
padding: .5em .7em;
border-bottom: $border;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
background: rgba(255, 255, 255, 0.6);
@include transition();
background: fade-out($c-bg-box, .5);
&:first-child {
width: 16px;
}
&:first-child ::before {
font-size: 1.2em;
line-height: 1.3;
}
&:last-child ::before {
margin-right: 8px;
line-height: 0.9;
font-size: 1.6em;
}
::before {
opacity: 0.6;
}
}
tbody.stepping {
opacity: 0.7;
}
tr.disabled {
opacity: 0.4;
}
tr.disabled td {
cursor: default;
background: transparent!important;
border-color: transparent!important;
}
tr.cancel td {
background: rgba(200, 255, 200, 0.7);
}
tr.join:hover td {
background: rgba(191, 231, 255, 0.7);
}
td:first-child {
width: 16px;
}
td:first-child span {
display: block;
padding: 0;
width: 16px;
height: 16px;
opacity: 0.7;
}
.varicon::before {
margin-right: 8px;
line-height: 12px;
font-size: 20px;
opacity: 0.7;
}
tr:hover .varicon::before,
tr:hover td:first-child span {
opacity: 1;
}
tr.disabled:hover .varicon::before,
tr.disabled:hover td:first-child span {
opacity: 0.7;
}
tr.variants td {
text-align: center;
padding: 3px 0;
background: none;
text-transform: uppercase;
letter-spacing: 3px;
}
}

1
ui/lobby/css/build/_lobby.scss
View File

@ -2,5 +2,6 @@
@import '../../../common/css/component/scroll-shadow';
@import '../../../common/css/component/now-playing';
@import '../../../common/css/component/vs';
@import '../../../common/css/component/color-icon';
@import '../../../common/css/base/scrollbar';
@import '../lobby';

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

@ -22,12 +22,9 @@ function renderHook(ctrl: LobbyController, hook: Hook) {
}, hook.u) : 'Anonymous'),
(hook.rating ? hook.rating : '') + (hook.prov ? '?' : ''),
hook.clock,
h('span', [
h('span.varicon', {
attrs: { 'data-icon': perfIcons[hook.perf] }
}),
noarg(hook.ra ? 'rated' : 'casual')
])
h('span', {
attrs: { 'data-icon': perfIcons[hook.perf] }
}, noarg(hook.ra ? 'rated' : 'casual'))
]));
}
@ -55,10 +52,10 @@ export function toggle(ctrl: LobbyController) {
export function render(ctrl: LobbyController, allHooks: Hook[]) {
const mine = allHooks.find(isMine),
max = mine ? 13 : 14,
hooks = allHooks.slice(0, max),
render = (hook: Hook) => renderHook(ctrl, hook),
standards = hooks.filter(isNotMine).filter(isStandard(true));
max = mine ? 13 : 14,
hooks = allHooks.slice(0, max),
render = (hook: Hook) => renderHook(ctrl, hook),
standards = hooks.filter(isNotMine).filter(isStandard(true));
hookRepo.sort(ctrl, standards);
const variants = hooks.filter(isNotMine).filter(isStandard(false))
.slice(0, Math.max(0, max - standards.length - 1));
@ -101,12 +98,58 @@ export function render(ctrl: LobbyController, allHooks: Hook[]) {
class: { stepping: ctrl.stepping },
hook: bind('click', e => {
let el = e.target as HTMLElement
do {
el = el.parentNode as HTMLElement;
if (el.nodeName === 'TR') return ctrl.clickHook(el.getAttribute('data-id')!);
}
while (el.nodeName !== 'TABLE');
do {
el = el.parentNode as HTMLElement;
if (el.nodeName === 'TR') return ctrl.clickHook(el.getAttribute('data-id')!);
}
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,
])
]);
}