NDOJ/templates/resolver/media-js.html

{% compress js %}
  <script type="text/javascript">
    var updateInterval = 2000;
    var curop = -1;
    var lintHeight = 100;
    var bonusHeight = 30;
    var speed = 700;
    var autopress = false;
    $(document).ready(function() {
      window.data = {{ contest_json }};
      console.log("OK");
      var resolver = new Resolver(data.problem_sub, data.sub_frozen, data.problems, data.users);
      window.resolver = resolver;
      resolver.calcOperations();
      resolver.frozen_op = resolver.operations.length - 1;
      resetCSS();
      light_theme();
      show_rank();
    });

    function updateSelector() {
      $('.show-rank').css('opacity', '0');
      $('.show-rank').css('z-index', '-1');
      var operation = resolver.operations[curop];
      var tmp = resolver.rank_frozen[operation.user_id];
      if (operation.type != 'delay') {
        window.scrollTo({
          top: (resolver.rank_frozen[operation.user_id].rank_show - 6) * lintHeight + bonusHeight,
          left: 0,
          behavior: 'smooth'
        });
        for (let i in resolver.rank_frozen) {
          $('#rank-' + i).css({'background-color' : ''});
          if (resolver.rank_frozen[i].rank_show % 2 == 0) {
            $('#rank-' + i).removeClass('background-secondary');
            $("#rank-" + i).addClass('background-primary');
          } else {
            $("#rank-" + i).removeClass('background-primary');
            $("#rank-" + i).addClass('background-secondary');
          }
        }
        $('#rank-' + operation.user_id).css({ "background-color": "#5382DF" });
      }
      if (operation.type == 'problem') {
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score').removeClass(resolver.status(tmp.problem[operation.problem_index]));
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score').addClass('selected');
      } else if (operation.type == 'sub') {
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub).removeClass(resolver.status(tmp.problem[operation.problem_index][operation.problem_sub]));
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub + ' .pro-content').removeClass(resolver.status(tmp.problem[operation.problem_index][operation.problem_sub]));
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub).addClass('selected');
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub + ' .p-content').addClass('selected');
        if (operation.frozen == 'ok') {
          $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub).removeClass('frozen');
          $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub + ' .pro-content').removeClass('frozen');
        }
      }

    }

    function getNewData() {
      var operation = resolver.operations[curop];
      if (operation.type == 'problem') {
        var tmp = resolver.rank_frozen[operation.user_id];
        for (let i in resolver.rank_frozen) {
          if (resolver.rank_frozen[i].rank_show < operation.old_rank && resolver.rank_frozen[i].rank_show >= operation.new_rank) {
            resolver.rank_frozen[i].rank_show++;
          }
        }
        tmp.rank_show = operation.new_rank;
        tmp.score += operation.new_point - operation.old_point;
        tmp.problem[operation.problem_index].old_verdict = operation.new_verdict;
        tmp.problem[operation.problem_index].new_verdict = 'NA';
        tmp.problem[operation.problem_index].old_point = operation.new_point;
        tmp.score = round2(tmp.score);
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score').removeClass('selected');
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score').addClass(resolver.status(tmp.problem[operation.problem_index]));
        $('#rank-' + operation.user_id + ' .score').text(tmp.score);
        if (operation.new_rank % 2 == 0) {
          let per = round2(tmp.problem[operation.problem_index].old_point / resolver.total_points[operation.problem_index] * 100);
          let linear = `linear-gradient(90deg, ${partially} ${per}%, ${theme_background_color} ${per}%)`;
          $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score.partially').css("background", linear);
        } else {
          let per = round2(tmp.problem[operation.problem_index].old_point / resolver.total_points[operation.problem_index] * 100);;
          let linear = `linear-gradient(90deg, ${partially} ${per}%, ${untouched} ${per}%)`;
          $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score.partially').css("background", linear);
        }
        for (let i in resolver.rank_frozen) {
          $('#rank-' + i + ' .rank').text(resolver.rank_frozen[i].rank_show);
          $("#rank-" + i).css('top', (resolver.rank_frozen[i].rank_show - 1) * lintHeight + bonusHeight);
          if (resolver.rank_frozen[i].rank_show % 2 == 0) {
            if (i != operation.user_id) {
              $("#rank-" + i).removeClass('background-secondary');
              $("#rank-" + i).addClass('background-primary');
            }
            $("#rank-" + i + ' .prob-container').removeClass('background-primary');
            $("#rank-" + i + ' .problems').removeClass('background-primary');
            $("#rank-" + i + ' .prob-container').addClass('background-secondary');
            $("#rank-" + i + ' .problems').addClass('background-secondary');
            for (let problemid in resolver.rank_frozen[i].problem) {
              let per = round2(resolver.rank_frozen[i].problem[problemid].old_point / resolver.total_points[problemid] * 100);
              let linear = `linear-gradient(90deg, ${partially} ${per}%, ${primary_color} ${per}%)`;
              $('#rank-' + i + ' .p-' + problemid + ' .pro-score.partially').css("background", linear);
            }
          } else {
            if (i != operation.user_id) {
              $("#rank-" + i).removeClass('background-primary');
              $("#rank-" + i).addClass('background-secondary');
            }
            $("#rank-" + i + ' .prob-container').removeClass('background-secondary');
            $("#rank-" + i + ' .problems').removeClass('background-secondary');
            $("#rank-" + i + ' .prob-container').addClass('background-primary');
            $("#rank-" + i + ' .problems').addClass('background-primary');
            for (let problemid in resolver.rank_frozen[i].problem) {
              let per = round2(resolver.rank_frozen[i].problem[problemid].old_point / resolver.total_points[problemid] * 100);
              let linear = `linear-gradient(90deg, ${partially} ${per}%, ${secondary_color} ${per}%)`;
              $('#rank-' + i + ' .p-' + problemid + ' .pro-score.partially').css("background", linear);
            }
          }
        }
      } else if (operation.type == 'sub') {
        var tmp = resolver.rank_frozen[operation.user_id];
        tmp.problem[operation.problem_index][operation.problem_sub].old_verdict = operation.new_verdict;
        tmp.problem[operation.problem_index][operation.problem_sub].new_verdict = 'NA';
        tmp.problem[operation.problem_index].old_point += operation.new_point - operation.old_point;
        tmp.problem[operation.problem_index].old_point = round2(tmp.problem[operation.problem_index].old_point);
        tmp.problem[operation.problem_index][operation.problem_sub].old_point = operation.new_point;
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .pro-score').text(tmp.problem[operation.problem_index].old_point);
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + '.s-' + operation.problem_sub + ' .p-content').text(operation.new_point);
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub).removeClass('selected');
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub + ' .p-content').removeClass('selected');
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub).addClass(resolver.status(tmp.problem[operation.problem_index][operation.problem_sub]));
        $('#rank-' + operation.user_id + ' .p-' + operation.problem_index + ' .s-' + operation.problem_sub + ' .p-content').addClass(resolver.status(tmp.problem[operation.problem_index][operation.problem_sub]));
      } else if (operation.type == 'show') {
        $('.show-rank').css('opacity', '1');
        $('.show-rank').css('z-index', '10000');
        $('.show-rank .rank-show').text('Rank ' + resolver.rank_frozen[operation.user_id].rank_show);
        $('.show-rank .name-show').text(resolver.users[operation.user_id].name);
        $('.show-rank .school-show').text(resolver.users[operation.user_id].school);
      }

      $('.ac').css("background", "");
    }

    function resetCSS() {
      $('.navbar').css('border-radius', '0');
      $(".hidden-board").css('height', (window.resolver.rank_frozen.length - 1) * lintHeight);
    }

    function show_rank() {
      for (let i in window.resolver.rank_frozen) {
        rank_id = document.createElement('div');
        $(rank_id).css('position', 'absolute');
        $(rank_id).css('top', (resolver.rank_frozen[i].rank_show - 1) * lintHeight + bonusHeight);
        if (resolver.rank_frozen[i].rank_show % 2 == 0) {
          $(rank_id).addClass('background-primary');
        } else {
          $(rank_id).addClass('background-secondary');
        }

        $(rank_id).attr('id', 'rank-' + i);
        $(rank_id).addClass('rank-list-item');
        $(".rank-list").append($(rank_id));

        rank = document.createElement('div');
        $(rank).addClass('rank');
        $(rank).text(resolver.rank_frozen[i].rank_show);
        $(rank_id).append($(rank));

        content = document.createElement('div');
        $(content).addClass('content');
        $(rank_id).append($(content));

        info_div = document.createElement('div');
        $(info_div).addClass('info-container');
        $(content).append($(info_div));

        name_div = document.createElement('div');
        $(name_div).addClass('name');
        $(name_div).text(window.resolver.users[i].name);
        $(info_div).append($(name_div));

        school_div = document.createElement('div');
        $(school_div).addClass('school');
        $(school_div).text("(" + window.resolver.users[i].school + ")");
        $(info_div).append($(school_div));

        problem_container = document.createElement('div');
        $(problem_container).addClass('problem-container');

        for (let problem_id in window.resolver.rank_frozen[i].problem) {
          problems_con = document.createElement('div');
          $(problems_con).addClass('p-' + problem_id);
          $(problems_con).addClass('prob-container');
          if (resolver.rank_frozen[i].rank_show % 2 == 1) {
            $(problems_con).addClass('background-primary');
          } else {
            $(problems_con).addClass('background-secondary');
          }
          pro_score = document.createElement('div');
          $(pro_score).addClass('pro-score');
          $(pro_score).text(resolver.rank_frozen[i].problem[problem_id].old_point);
          $(pro_score).addClass(window.resolver.status(window.resolver.rank_frozen[i].problem[problem_id]));

          if (resolver.status(window.resolver.rank_frozen[i].problem[problem_id]) == 'partially') {
            if (resolver.rank_frozen[i].rank_show % 2 == 1) {
              let per = round2(resolver.rank_frozen[i].problem[problem_id].old_point / resolver.total_points[problem_id] * 100);
              let linear = `linear-gradient(90deg, ${partially} ${per}%, ${secondary_color} ${per}%)`;
              $(pro_score).css("background", linear);
            } else {
              let per = round2(resolver.rank_frozen[i].problem[problem_id].old_point / resolver.total_points[problem_id] * 100);
              let linear = `linear-gradient(90deg, ${partially} ${per}%, ${primary_color} ${per}%)`;
              $(pro_score).css("background", linear);
            }
          }
          $(problems_con).append($(pro_score));
          problems = document.createElement('ul');
          $(problems).addClass('p-' + problem_id);
          $(problems).addClass('problems');

          for (let j = 1; j <= resolver.problem_sub[problem_id - 1]; j++) {
            problem = document.createElement('li');
            $(problem).addClass('item');
            $(problem).addClass(window.resolver.substatus(window.resolver.rank_frozen[i].problem[problem_id], j));
            $(problem).addClass('p-' + problem_id);
            $(problem).addClass('s-' + j);
            $(problem).addClass('id-' + i);
            $(problems).append($(problem));
            p_content = document.createElement('div');
            $(p_content).addClass(window.resolver.substatus(window.resolver.rank_frozen[i].problem[problem_id], j));
            $(p_content).addClass('p-content');
            if (j < resolver.sub_frozen[problem_id - 1]) {
              $(p_content).text(window.resolver.rank_frozen[i].problem[problem_id][j].old_point);
            } else {
              $(p_content).text("?");
            }
            $(problem).append($(p_content));
          }
          $(problems_con).append($(problems));
          $(problem_container).append($(problems_con));
        }

        $(content).append($(problem_container));

        score = document.createElement('div');
        $(score).addClass('score');
        $(score).text(window.resolver.rank_frozen[i].score);
        $(rank_id).append($(score));
      }
    }

    var theme = 0;

    $('body').keydown(function (e) {
      if (e.keyCode == 77) {
        console.log("Press M!");
      }
      if (e.keyCode == 13) {
        console.log("Press Enter!");
        if (curop == resolver.operations.length - 1) {
          console.log("Do Enter Pressed!");
          resolver.operations = [];
          curop = -1;
          resolver.next_operation();
          if (window.resolver.operations.length == 0) {
            $('.show-rank').css('visibility', 'hidden');
            $('.show-rank').css('opacity', '0');
            for (let i in resolver.rank_frozen) {
              if (resolver.rank_frozen[i].rank_show % 2 == 0) {
                $("#rank-" + i).removeClass('background-secondary');
                $("#rank-" + i).addClass('background-primary');
              } else {
                $("#rank-" + i).removeClass('background-primary');
                $("#rank-" + i).addClass('background-secondary');
              }
            }
          }
          console.log(resolver.operations);
          if (resolver.operations.length == 1) {
            for (let x in window.resolver.operations) {
              curop++;
              updateSelector();
              setTimeout(function () {
                getNewData();
              }, 500);
            }
          } else {
            for (let x in window.resolver.operations) {
              setTimeout(function () {
                curop++;
                updateSelector();
              }, speed * x);
              setTimeout(function () {
                getNewData();
              }, speed * x + speed / 2);
            }
          }
        }
      }
      if (e.keyCode == 65) {
        console.log("A pressed!");
        if (autopress == false) {
          autopress = true;
          // for (let x in resolver.operations) {
          //     curop++;
          //     updateSelector();
          //     getNewData();
          // }
          for (let x in window.resolver.operations) {
            setTimeout(function () {
              curop++;
              updateSelector();
            }, speed * x);
            setTimeout(function () {
              getNewData();
            }, speed * x + speed / 2);
          }
        }
      }
      if (e.keyCode == 66) {
        theme = 1 - theme;
        if (theme) dark_theme();
        else light_theme();
      }
    });

    $('.rank-list').on('click', 'li', function () {
      if (curop == resolver.operations.length - 1) {
        var classstr = $(this).attr('class');
        var index = classstr.indexOf('id-');
        var useridstr = "";
        for (let i = index + 3; i < classstr.length; i++) {
          useridstr = useridstr + classstr[i];
        }
        var userid = parseInt(useridstr);
        var problemid = classstr[classstr.indexOf('p-') + 2];
        var sub = parseInt(classstr[classstr.indexOf('s-') + 2]);
        var rankid = resolver.rank_frozen[userid].rank_show;
        resolver.operations = [];
        curop = -1;
        console.log("Clicked!");
        resolver.operation(rankid - 1, problemid, sub);
        if (resolver.operations.length == 1) {
          for (let x in window.resolver.operations) {
            curop++;
            updateSelector();
            setTimeout(function () {
              getNewData();
            }, 500);
          }
        } else {
          for (let x in window.resolver.operations) {
            setTimeout(function () {
              curop++;
              updateSelector();
            }, speed * x);
            setTimeout(function () {
              getNewData();
            }, speed * x + speed / 2);
          }
        }
      }
    });

    var primary_color, secondary_color;
    var wa, partially, ac, selected, frozen, untouched;
    var theme_text_color, theme_background_color;

    function dark_theme() {
      primary_color = "black";
      secondary_color = '#3e3e3e';
      frozen = "#34495e";
      untouched = "#1f1f1f";
      wa = "#B71C0C";
      partially = "#A79D03";
      ac = "#086d08";
      selected = "rgb(206, 75, 199)";
      theme_text_color = "white";
      theme_background_color = "black";
      set_theme();
    }

    function light_theme() {
      primary_color = "#EFF5F5";
      secondary_color = "#D6E4E5";
      wa = "#EB6440";
      partially = "#fff133";
      ac = "#80ED99";
      // ac = "green";
      frozen = "#497174";
      untouched = "#A7BBC7";
      selected = "rgb(206, 75, 199)";
      theme_text_color = "black";
      theme_background_color = "white";
      set_theme();
    }

    function set_theme() {
      let root = document.querySelector(':root');
      root.style.setProperty('--primary_color', primary_color);
      root.style.setProperty('--secondary_color', secondary_color);
      root.style.setProperty('--wa', wa);
      root.style.setProperty('--partially', partially);
      root.style.setProperty('--ac', ac);
      root.style.setProperty('--selected', selected);
      root.style.setProperty('--frozen', frozen);
      root.style.setProperty('--untouched', untouched);
      root.style.setProperty('--theme-text-color', theme_text_color);
      root.style.setProperty('--theme-background-color', theme_background_color);
      for (let i in resolver.rank_frozen) {
        if (resolver.rank_frozen[i].rank_show % 2 == 0) {
          for (let problemid in resolver.rank_frozen[i].problem) {
            let per = round2(resolver.rank_frozen[i].problem[problemid].old_point / resolver.total_points[problemid] * 100);
            let linear = `linear-gradient(90deg, ${partially} ${per}%, ${primary_color} ${per}%)`;
            $('#rank-' + i + ' .p-' + problemid + ' .pro-score.partially').css("background", linear);
          }
        } else {
          for (let problemid in resolver.rank_frozen[i].problem) {
            let per = round2(resolver.rank_frozen[i].problem[problemid].old_point / resolver.total_points[problemid] * 100);
            let linear = `linear-gradient(90deg, ${partially} ${per}%, ${secondary_color} ${per}%)`;
            $('#rank-' + i + ' .p-' + problemid + ' .pro-score.partially').css("background", linear);
          }
        }
      }
    }

  </script>
{% endcompress %}