ui: contest_problemlist

packages/ui-default/backendlib/template.js

@@ -142,6 +142,7 @@ env.addGlobal('static_url', (assetName) => {
 env.addGlobal('eval', eval);
 env.addGlobal('Date', Date);
 env.addGlobal('Object', Object);
+env.addGlobal('String', String);
 env.addGlobal('Math', Math);
 env.addGlobal('process', process);
 env.addGlobal('global', global);

packages/ui-default/components/contest/contest.page.styl

@@ -40,3 +40,75 @@ for key, value in $contest-color
   &:hover
     background: $primary-color
     border-color: $primary-color
+
+.contest-problems
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  text-align: left;
+  box-sizing: border-box;
+  font-variant-ligatures: none!important;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(1.5rem,1fr));
+  justify-content: center;
+  row-gap: 0.75rem;
+  column-gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  
+  > a
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+    display: flex;
+    height: 1.5rem;
+    width: 1.5rem;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: 0.375rem;
+    position: relative;
+    transition: opacity 0.2s;
+    color: grey;
+    &.pass
+      color: green;
+      &:before
+        background: green;
+    &.fail
+      color: red;
+      &:before
+        background: red;
+
+    &:after
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      border: 2px solid currentColor;
+      border-radius: 6px;
+      opacity: 0.3;
+    
+    &.active:after
+      border: 3px solid cyan;
+
+    &:before
+      opacity: 0.5;
+    
+    &.pass, &.fail
+      &:not(:hover) .id
+        display: none;
+      
+      &:hover .icon
+        display: none;
+
+  // .placeholder
+  //   cursor: pointer;
+  //   position: absolute;
+  //   top: -0.375rem;
+  //   right: -0.375rem;
+  //   bottom: -0.375rem;
+  //   left: -0.375rem;
+  

packages/ui-default/pages/contest.page.ts

@@ -1,7 +1,7 @@
 import NProgress from 'nprogress';
 import { NamedPage } from 'vj/misc/Page';
 
-export default new NamedPage(['contest_detail', 'contest_detail_problem'], () => {
+export default new NamedPage(['contest_detail', 'contest_detail_problem', 'contest_scoreboard'], () => {
   const beginAt = new Date(UiContext.tdoc.beginAt).getTime();
   const endAt = new Date(UiContext.tdoc.endAt).getTime();
   NProgress.configure({ trickle: false, showSpinner: false, minimum: 0 });

packages/ui-default/templates/contest_scoreboard.html

@@ -1,5 +1,6 @@
 {% import "components/paginator.html" as paginator with context %}
 {% extends "layout/basic.html" %}
+{{ set(UiContext, 'tdoc', tdoc) }}
 {% set type = 'homework' if tdoc.rule == 'homework' else 'contest' %}
 {% block content %}
 <div class="row"><div class="medium-12 columns scoreboard--{{ tdoc.rule }}">

packages/ui-default/templates/partials/problem_sidebar_contest.html

@@ -6,6 +6,19 @@
   </div>
 {% endif %}
   <div>
+    <div class="contest-problems">
+      {% for pid in tdoc.pids -%}
+        {% set status = tsdoc.detail[pid].status %}
+        {% set pass = status == STATUS.STATUS_ACCEPTED %}
+        {% set fail = status and not pass %}
+        <a href="{{ url('problem_detail', pid=pid, query={tid:tdoc.docId}) }}"
+          class="{% if pass %}pass{% elif fail %}fail{% endif %}
+                 {% if pid==pdoc.docId %} active{% endif %}">
+          <span class="id">{{ String.fromCharCode(65+loop.index0) }}</span>
+          {% if status %}<span class="icon icon-{% if pass %}check{% else %}close{% endif %}"></span>{% endif %}
+        </a>
+      {%- endfor %}
+    </div>
     <ol class="menu">
     {% if model.contest.isOngoing(tdoc, tsdoc) %}
     {% if page_name == 'contest_detail_problem' %}