From 8a04d24a5bbd702353c43dc7194435dd9addc4f4 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Sun, 26 Feb 2023 18:03:00 +0800
Subject: [PATCH] refactor(contest): contest card

---
 web/app/controllers/contest_inside.php     | 33 +-----------
 web/app/controllers/contests.php           | 13 +++--
 web/app/controllers/problem.php            | 33 +-----------
 web/app/controllers/problem_statistics.php | 33 +-----------
 web/app/models/UOJContest.php              | 58 +++++++++++++++++++++-
 web/app/views/sidebar.php                  |  5 +-
 web/js/uoj.js                              | 35 ++++++-------
 7 files changed, 88 insertions(+), 122 deletions(-)

diff --git a/web/app/controllers/contest_inside.php b/web/app/controllers/contest_inside.php
index 138d1d1..ee33aa0 100644
--- a/web/app/controllers/contest_inside.php
+++ b/web/app/controllers/contest_inside.php
@@ -554,38 +554,7 @@ echoUOJPageHeader($tabs_info[$cur_tab]['name'] . ' - ' . UOJContest::info('name'
 		<hr class="d-md-none" />
 
 		<div class="col-md-3">
-			<div class="card card-default mb-2">
-				<div class="card-body">
-					<h3 class="h4 card-title text-center">
-						<a class="text-decoration-none text-body" href="<?= UOJContest::cur()->getUri() ?>">
-							<?= UOJContest::info('name') ?>
-						</a>
-					</h3>
-					<div class="card-text text-center text-muted">
-						<?php if ($contest['cur_progress'] <= CONTEST_IN_PROGRESS) : ?>
-							<span id="contest-countdown"></span>
-							<script type="text/javascript">
-								$('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJTime::$time_now->getTimestamp() ?>, function() {}, '1.75rem', false);
-							</script>
-						<?php elseif ($contest['cur_progress'] <= CONTEST_TESTING) : ?>
-							<?php $judge_progress = UOJContest::cur()->queryJudgeProgress() ?>
-							<?= $judge_progress['title'] ?> (<?= $judge_progress['rop'] ?>%)
-						<?php else : ?>
-							<?= UOJLocale::get('contests::contest ended') ?>
-						<?php endif ?>
-					</div>
-				</div>
-				<div class="list-group list-group-flush">
-					<li class="list-group-item d-flex justify-content-between align-items-center">
-						<span class="flex-shrink-0">
-							<?= UOJLocale::get('appraisal') ?>
-						</span>
-						<span>
-							<?= UOJContest::cur()->getZanBlock() ?>
-						</span>
-					</li>
-				</div>
-			</div>
+			<?= UOJContest::cur()->getContestCard() ?>
 
 			<?php if (UOJContest::cur()->basicRule() === 'OI') : ?>
 				<p>此次比赛为 OI 赛制。</p>
diff --git a/web/app/controllers/contests.php b/web/app/controllers/contests.php
index fa2c4ce..add6bf7 100644
--- a/web/app/controllers/contests.php
+++ b/web/app/controllers/contests.php
@@ -112,11 +112,14 @@ if ($rest_second <= 86400) {
 	echo <<<EOD
 <div class="text-center bot-buffer-lg">
 <div class="text-secondary">$upcoming_contest_name 倒计时</div>
-<div id="contest-countdown"></div>
-<script type="text/javascript">
-$('#contest-countdown').countdown($rest_second, function() {
-	if (confirm($notification)) {
-		window.location.href = "$upcoming_contest_href";
+<div class="text-secondary" id="contest-countdown"></div>
+<script>
+$('#contest-countdown').countdown($rest_second, {
+	font_size: '30px',
+	callback: function() {
+		if (confirm($notification)) {
+			window.location.href = "$upcoming_contest_href";
+		}
 	}
 });
 </script>
diff --git a/web/app/controllers/problem.php b/web/app/controllers/problem.php
index 58ef7fd..959bc61 100644
--- a/web/app/controllers/problem.php
+++ b/web/app/controllers/problem.php
@@ -386,38 +386,7 @@ if (UOJContest::cur()) {
 	<!-- right col -->
 	<aside class="col-lg-3 mt-3 mt-lg-0">
 		<?php if (UOJContest::cur()) : ?>
-			<!-- Contest card -->
-			<div class="card card-default mb-2">
-				<div class="card-body">
-					<h3 class="h4 card-title text-center">
-						<a class="text-decoration-none text-body" href="<?= UOJContest::cur()->getUri() ?>">
-							<?= UOJContest::info('name') ?>
-						</a>
-					</h3>
-					<div class="card-text text-center text-muted">
-						<?php if (UOJContest::cur()->progress() <= CONTEST_IN_PROGRESS) : ?>
-							<span id="contest-countdown"></span>
-						<?php else : ?>
-							<?= UOJLocale::get('contests::contest ended') ?>
-						<?php endif ?>
-					</div>
-				</div>
-				<div class="list-group list-group-flush">
-					<li class="list-group-item d-flex justify-content-between align-items-center">
-						<span class="flex-shrink-0">
-							<?= UOJLocale::get('appraisal') ?>
-						</span>
-						<span>
-							<?= UOJContest::cur()->getZanBlock() ?>
-						</span>
-					</li>
-				</div>
-			</div>
-			<?php if (UOJContest::cur()->progress() <= CONTEST_IN_PROGRESS) : ?>
-				<script>
-					$('#contest-countdown').countdown(<?= UOJContest::info('end_time')->getTimestamp() - UOJTime::$time_now->getTimestamp() ?>, function() {}, '1.75rem', false);
-				</script>
-			<?php endif ?>
+			<?= UOJContest::cur()->getContestCard() ?>
 		<?php endif ?>
 
 		<!-- 题目导航卡片 -->
diff --git a/web/app/controllers/problem_statistics.php b/web/app/controllers/problem_statistics.php
index 2514213..a97e382 100644
--- a/web/app/controllers/problem_statistics.php
+++ b/web/app/controllers/problem_statistics.php
@@ -258,42 +258,13 @@ if (UOJContest::cur()) {
 	<!-- right col -->
 	<aside class="col-lg-3 mt-3 mt-lg-0">
 		<?php if (UOJContest::cur()) : ?>
-			<!-- Contest card -->
-			<div class="card card-default mb-2">
-				<div class="card-body">
-					<h3 class="h4 card-title text-center">
-						<?= UOJContest::cur()->getLink(['class' => 'text-body']) ?>
-					</h3>
-					<div class="card-text text-center text-muted">
-						<?php if (UOJContest::cur()->progress() <= CONTEST_IN_PROGRESS) : ?>
-							<span id="contest-countdown"></span>
-						<?php else : ?>
-							<?= UOJLocale::get('contests::contest ended') ?>
-						<?php endif ?>
-					</div>
-				</div>
-				<div class="list-group list-group-flush">
-					<li class="list-group-item d-flex justify-content-between align-items-center">
-						<span class="flex-shrink-0">
-							<?= UOJLocale::get('appraisal') ?>
-						</span>
-						<span>
-							<?= UOJContest::cur()->getZanBlock() ?>
-						</span>
-					</li>
-				</div>
-			</div>
-			<?php if (UOJContest::cur()->progress() <= CONTEST_IN_PROGRESS) : ?>
-				<script type="text/javascript">
-					$('#contest-countdown').countdown(<?= UOJContest::info('end_time')->getTimestamp() - UOJTime::$time_now->getTimestamp() ?>, function() {}, '1.75rem', false);
-				</script>
-			<?php endif ?>
+			<?= UOJContest::cur()->getContestCard() ?>
 		<?php endif ?>
 
 		<div class="card card-default mb-2">
 			<ul class="nav nav-pills nav-fill flex-column" role="tablist">
 				<li class="nav-item text-start">
-					<a class="nav-link" role="tab" <?php if (UOJContest::cur()) : ?> href="/contest/<?= UOJContest::info('id') ?>/problem/<?= UOJProblem::info('id') ?>" <?php else : ?> href="/problem/<?= UOJProblem::info('id') ?>" <?php endif ?>>
+					<a class="nav-link" role="tab" href="<?= UOJProblem::cur()->getUri() ?>">
 						<i class="bi bi-journal-text"></i>
 						<?= UOJLocale::get('problems::statement') ?>
 					</a>
diff --git a/web/app/models/UOJContest.php b/web/app/models/UOJContest.php
index 5a21f2e..51db4d5 100644
--- a/web/app/models/UOJContest.php
+++ b/web/app/models/UOJContest.php
@@ -315,7 +315,7 @@ class UOJContest {
 	}
 
 	public function queryJudgeProgress() {
-		if ($this->basicRule() == 'OI' && $this->progress() < CONTEST_TESTING) {
+		if (/* $this->basicRule() == 'OI' && */$this->progress() < CONTEST_TESTING) {
 			$rop = 0;
 			$title = UOJLocale::get('contests::contest pending final test');
 			$fully_judged = false;
@@ -623,4 +623,60 @@ class UOJContest {
 	public function getAdditionalLinks() {
 		return $this->info['extra_config']['links'] ?: [];
 	}
+
+	public function getContestCard($cfg = []) {
+		$cfg += [
+			'class' => 'mb-2',
+		];
+
+		$res = '';
+		$res .= <<<EOD
+		<div class="card mb-2">
+			<div class="card-body">
+				<h3 class="h4 card-title text-center">
+					<a class="text-decoration-none text-body" href="{$this->getUri()}">
+						{$this->info['name']}
+					</a>
+				</h3>
+				<div class="card-text text-center text-muted">
+		EOD;
+
+		if ($this->progress() <= CONTEST_IN_PROGRESS) {
+			$res .= HTML::tag('span', [
+				'class' => 'countdown fs-3',
+				'data-rest' => $this->info['end_time']->getTimestamp() - UOJTime::$time_now->getTimestamp(),
+			], ' ');
+		} else if ($this->progress() <= CONTEST_TESTING) {
+			$judge_progress = $this->queryJudgeProgress();
+
+			$res .= HTML::tag('span', [], "{$judge_progress['title']} ({$judge_progress['rop']})");
+		} else {
+			$res .= HTML::tag('span', [], UOJLocale::get('contests::contest ended'));
+		}
+
+		$res .= <<<EOD
+				</div>
+			</div>
+			<div class="list-group list-group-flush">
+		EOD;
+
+		$appraisal = UOJLocale::get('appraisal');
+		$res .= <<<EOD
+				<div class="list-group-item d-flex justify-content-between align-items-center">
+					<span class="flex-shrink-0 me-2">
+						{$appraisal}
+					</span>
+					<span class="text-end">
+						{$this->getZanBlock()}
+					</span>
+				</div>
+		EOD;
+
+		$res .= <<<EOD
+			</div>
+		</div>
+		EOD;
+
+		return $res;
+	}
 }
diff --git a/web/app/views/sidebar.php b/web/app/views/sidebar.php
index 2c56467..7cb39ac 100644
--- a/web/app/views/sidebar.php
+++ b/web/app/views/sidebar.php
@@ -92,10 +92,7 @@ $parsedown = HTML::parsedown(['username_with_color' => true]);
 									<?php if ($rest_seconds > 86400) : ?>
 										<?= UOJLocale::get('contests::will start in x days', ceil($rest_seconds / 86400)) ?>
 									<?php else : ?>
-										<div id="contest-<?= $contest->info['id'] ?>-countdown"></div>
-										<script>
-											$('#contest-<?= $contest->info['id'] ?>-countdown').countdown(<?= $rest_seconds ?>, function() {}, 'inherit', false);
-										</script>
+										<div class="countdown" data-rest="<?= $rest_seconds ?>"></div>
 									<?php endif ?>
 								<?php endif ?>
 							</div>
diff --git a/web/js/uoj.js b/web/js/uoj.js
index 520f0ba..4684bb5 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -349,45 +349,46 @@ $.fn.click_zan_block = function() {
 }
 
 // count down
-function getCountdownStr(t, font_size, color = true) {
+function getCountdownStr(t, config) {
 	var x = Math.floor(t);
 	var ss = toFilledStr(x % 60, '0', 2);
 	x = Math.floor(x / 60);
 	var mm = toFilledStr(x % 60, '0', 2);
 	x = Math.floor(x / 60);
 	var hh = x.toString();
+
+	var style = '';
+
+	if (config.font_size) {
+		style += 'font-size: ' + config.font_size + ';';
+	}
 	
-	var res = '<span style="font-size:' + font_size + '">';
-	res += '<span '
-	if (color) res += ' style="color:' + getColOfScore(Math.min(t / 10800 * 100, 100)) + '" ';
-	res += ' >' + hh + '</span>';
+	var res = '<span style="' + style + '">';
+	res += '<span>' + hh + '</span>';
 	res += ':';
-	res += '<span '
-	if (color) res += ' style="color:' + getColOfScore(mm / 60 * 100) + '" ';
-	res += ' >' + mm + '</span>';
+	res += '<span>' + mm + '</span>';
 	res += ':';
-	res += '<span ';
-	if (color) res += ' style="color:' + getColOfScore(ss / 60 * 100) + '" ';
-	res +=' >' + ss + '</span>';
-	res += '</span>'
+	res += '<span>' + ss + '</span>';
+	res += '</span>';
 	return res;
 }
 
-$.fn.countdown = function(rest, callback, font_size = '30px', color = true) {
+$.fn.countdown = function(rest, config = {}) {
 	return this.each(function() {
 		var start = new Date().getTime();
 		var cur_rest = rest != undefined ? rest : parseInt($(this).data('rest'));
+		config = $.merge(config, JSON.parse($(this).data('config') || '{}'));
 		var cur = this;
 		var countdown = function() {
 			var passed = Math.floor((new Date().getTime() - start) / 1000);
 			if (passed >= cur_rest) {
-				$(cur).html(getCountdownStr(0, font_size, color));
-				if (callback != undefined) {
+				$(cur).html(getCountdownStr(0, config));
+				if (config.callback != undefined) {
 					callback();
 				}
 			} else {
-				$(cur).html(getCountdownStr(cur_rest - passed, font_size, color));
-				setTimeout(countdown, 1000);
+				$(cur).html(getCountdownStr(cur_rest - passed, config));
+				setTimeout(countdown, 500);
 			}
 		}
 		countdown();