Merge pull request lixin-wei#1 from XCPCIO/main

Feat: Data format optimization

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[*.yaml]
+indent_size = 2

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.en.md

@@ -1,92 +1,110 @@
+# acm-resolver
+
 **[\[中文文档\]](README.md)**
 
 Forked from [hiho-resolver](https://github.com/hiho-coder/hiho-resolver).
 Did some performance optimization, changed the color scheme and added a lot of documents.
 
 It's used for visualizing the final hidden stage(aka frozen time) in the competitive programming contest.
 
-# Screenshot
+## Screenshot
 
 ![screenshot](screenshots/shot1.gif)
 
-# Quick Start
+## Quick Start
 
-## 1. Prepare Data
+```bash
+pnpm install
+pnpm run start
+```
 
-The code of reading data is the end of `js/main.js`, `$.getJSON("contest.json", function(data){..})`
+### Load Data
 
-It reads the `contest.json` in the root folder by default.
+![](screenshots/tutorial_load_data.png)
 
-### JSON Format
+Enter a url address in the input box or paste the entire JSON content directly into the input box and click 「加载数据」.
 
-```
-{
-  problem_count: 10,
-  solutions: {... },
-  users: {... }
-}
-```
+### Preview
 
-For solution's format，you can use arbitrary keys，problem is indexed from 1.
+To see the demo, you can click on 「加载示例数据」.
 
-```
-381503: {
-  user_id: "1",
-  problem_index: "1",
-  verdict: "AC",
-  submitted_seconds: 22
-},
-381504: {
-  user_id: "2",
-  problem_index: "1",
-  verdict: "WA",
-  submitted_seconds: 23
-},
-```
+preview url:
 
-For user's format，the key is `user_id`，should be matched with what in solutions：
+* <https://acm-resolver.xcpcio.com/>
+* <https://xcpcio.github.io/acm-resolver/>
 
-```
-1: {
-  name: "TEAM1",
-  college: "HZNU",
-  is_exclude: true
-},
-2: {
-  name: "TEAM2",
-  college: "HDU",
-  is_exclude: false
-},
-3: {
-  name: "TEAM3",
-  college: "PKU",
-  is_exclude: true
-},
-```
+### Operation
 
-## 2. Frozen Time Configuration
+Just keep pushing the right-arrow key.
 
-The frozen time is 3600\*2s by default (2 hours before the contest ends. The default data is a warming-up contest which only last 3 hours).
-You can change this in the begging of `hiho-resolver.js`.
+### DOMjudge
 
-```javascript
-function Resolver(solutions, users, problem_count){
-	this.solutions = solutions;
-	this.users = users;
-	this.problem_count = problem_count;
-	this.frozen_seconds = 3600*2; // HERE!
-	this.operations = [];
-}
+You can use [XCPCIO/domjudge-utility](https://github.com/XCPCIO/domjudge-utility/tree/main/cmd/dump) to export the data in DOMjudge to the data format required by acm-resolver.
+
+Configuration reference for `dump`:
+
+```yaml
+base_url: "https://localhost/domjudge/"
+userpwd: "username:password"
+
+cid: 1
+saved_dir: "./output/1"
+
+exported_data:
+  resolver_data: true
 ```
 
-## 2. Prepare a Web Server
+Then refer to [Load Data](#Load-Data) to load the data in.
 
-1. The page must be visited using HTTP protocol. So you should prepare a web server.
-2. Put this project in the root path of your web server. And visit `index.html`.
+## JSON Configuration Format
 
-## 3. Run It
+```json
+{
+    "contest_name": "your contest name",
+    "problem_count": 13,
+    "frozen_seconds": 3600,
+    "solutions": {},
+    "users": {}
+}
+```
 
-Just keep pushing the right-arrow key.
+The format of the `solution`, the key can be arbitrary and the problem subscript starts from 1.
 
-**If you changed the input data. Please clear the browser cache and refresh the page.**
+```json
+{
+    "381503": {
+        "user_id": "1",
+        "problem_index": "1",
+        "verdict": "AC",
+        "submitted_seconds": 22
+    },
+    "381504": {
+        "user_id": "2",
+        "problem_index": "1",
+        "verdict": "WA",
+        "submitted_seconds": 23
+    }
+}
+```
+
+The format of the `user`, where the key is the id of the user, should be matched to the solution:
 
+```json
+{
+    "1": {
+        "name": "花落人亡两不知",
+        "college": "HZNU",
+        "is_exclude": true
+    },
+    "2": {
+        "name": "大斌丶凸(♯｀∧´)凸",
+        "college": "HDU",
+        "is_exclude": false
+    },
+    "3": {
+        "name": "天才少女队",
+        "college": "PKU",
+        "is_exclude": true
+    }
+}
+```

README.md

@@ -1,88 +1,108 @@
+# acm-resolver
+
 **[\[English Document\]](README.en.md)**
 
-本项目fork自[hiho-resolver](https://github.com/hiho-coder/hiho-resolver)，用于ICPC系列算法竞赛的滚榜。
+本项目 fork 自 [hiho-resolver](https://github.com/hiho-coder/hiho-resolver)，用于 ACM 系列竞赛的滚榜。
 相比原项目，主要优化了动画效率，更改了界面配色，并丰富了文档。
 
-# 截图
+## Screenshot
 
 ![screenshot](screenshots/shot1.gif)
 
-# 使用教程
+## Quick Start
 
-## 1. 准备数据
+```bash
+pnpm install
+pnpm run start
+```
 
-数据输入的代码在`js/main.js`的最后，`$.getJSON("contest.json", function(data){..})`
+### Load Data
 
-默认是使用根目录下的`contest.json`，可以直接把准备好的数据贴到里面去。
+![](screenshots/tutorial_load_data.png)
 
-### JSON格式
+在输入框中输入一个 url 地址，或者直接将整个 JSON 的内容粘贴在输入框中，然后点击「加载数据」。
 
-```
-{
-  problem_count: 10,
-  solutions: {... },
-  users: {... }
-}
-```
+### Preview
 
-solution的格式，key可以任意，problem下标从1开始:
+如果想看看效果，可以点击「加载示例数据」。
 
-```
-381503: {
-  user_id: "1",
-  problem_index: "1",
-  verdict: "AC",
-  submitted_seconds: 22
-},
-381504: {
-  user_id: "2",
-  problem_index: "1",
-  verdict: "WA",
-  submitted_seconds: 23
-},
-```
+预览地址：
 
-user的格式，其中key即为user的id，要和solution中对上：
+* <https://acm-resolver.xcpcio.com/>
+* <https://xcpcio.github.io/acm-resolver/>
 
-```
-1: {
-  name: "花落人亡两不知",
-  college: "HZNU",
-  is_exclude: true
-},
-2: {
-  name: "大斌丶凸(♯｀∧´)凸",
-  college: "HDU",
-  is_exclude: false
-},
-3: {
-  name: "天才少女队",
-  college: "PKU",
-  is_exclude: true
-},
+### Operation
+
+不停按方向键右即可。
+
+### DOMjudge
+
+可以使用 [XCPCIO/domjudge-utility](https://github.com/XCPCIO/domjudge-utility/tree/main/cmd/dump) 将 DOMjudge 中的数据导出成 acm-resolver 所需要的数据格式。
+
+dump 的配置参考：
+
+```yaml
+base_url: "https://localhost/domjudge/"
+userpwd: "username:password"
+
+cid: 1
+saved_dir: "./output/1"
+
+exported_data:
+  resolver_data: true
 ```
 
-## 2. 配置封榜时间
+然后参考 [Load Data](#Load-Data) 将数据加载进去。
 
-封榜的时间默认是3600\*2s（距离比赛开始2小时，用的是一个热身赛的数据，整场比赛只有3小时），在`hiho-resolver.js` 最开头修改
+## JSON Configuration Format
 
-```javascript
-function Resolver(solutions, users, problem_count){
-	this.solutions = solutions;
-	this.users = users;
-	this.problem_count = problem_count;
-	this.frozen_seconds = 3600*2; // HERE!
-	this.operations = [];
+```json
+{
+    "contest_name": "your contest name",
+    "problem_count": 13,
+    "frozen_seconds": 3600,
+    "solutions": {},
+    "users": {}
 }
 ```
 
-## 2. 搭建服务器
-
-1. 网页必须以HTTP协议访问，准备一个HTTP服务器，推荐用Apache Web Server, Windows装个[WAMP](https://www.wampserver.com/en/)就有了，MacOS装个[MAMP](https://www.mamp.info/en/mamp/mac/)。
-2. 把整个工程文件拷贝到服务器的目录下，在浏览器中访问`index.html`即可。
+`solution` 的格式，key 可以任意，problem 下标从 1 开始:
 
-## 3. 操作说明
+```json
+{
+    "381503": {
+        "user_id": "1",
+        "problem_index": "1",
+        "verdict": "AC",
+        "submitted_seconds": 22
+    },
+    "381504": {
+        "user_id": "2",
+        "problem_index": "1",
+        "verdict": "WA",
+        "submitted_seconds": 23
+    }
+}
+```
 
-不停按方向键右即可。
+`user` 的格式，其中 key 即为 user 的 id，要和 solution 中对上：
 
-**如果切换了数据源，需要清空浏览器缓存再刷新。**
+```json
+{
+    "1": {
+        "name": "花落人亡两不知",
+        "college": "HZNU",
+        "is_exclude": true
+    },
+    "2": {
+        "name": "大斌丶凸(♯｀∧´)凸",
+        "college": "HDU",
+        "is_exclude": false
+    },
+    "3": {
+        "name": "天才少女队",
+        "college": "PKU",
+        "is_exclude": true
+    }
+}
+```

contest.json

@@ -1,5 +1,7 @@
 {
+   "contest_name": "The 2015 ACM-ICPC Asia Beijing Regional Contest",
    "problem_count":20,
+   "frozen_seconds": 7200,
    "solutions":{
       "499293":{
          "user_id":"1",

css/main.css

@@ -57,7 +57,7 @@
 }
 .untouched {
     background-color: #1f1f1f;
-    color: transparent;
+    /* color: transparent; */
 }
 
 .selected {

hiho-resolver.js

@@ -1,8 +1,8 @@
-function Resolver(solutions, users, problem_count){
+function Resolver(solutions, users, problem_count, frozen_seconds){
 	this.solutions = solutions;
 	this.users = users;
 	this.problem_count = problem_count;
-	this.frozen_seconds = 3600*2;
+	this.frozen_seconds = frozen_seconds;
 	this.operations = [];
 }
 
@@ -29,6 +29,7 @@ Resolver.prototype.calcOperations = function() {
 			this.rank[sol.user_id].problem = {};
 			for(var i = 1; i <= this.problem_count; i++) {
 				this.rank[sol.user_id].problem[i] = {
+					'problem_index': i - 1,
 					'old_penalty':0,
 					'new_penalty':0,
 					'old_verdict':'NA',