From fbd4f2129ce8fe106391302896dd86e05b2f331b Mon Sep 17 00:00:00 2001 From: nsfisis Date: Fri, 5 Dec 2025 04:08:22 +0900 Subject: add files --- assets/chart.js | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++ assets/favicon.svg | 21 ++++++++ assets/index.js | 13 +++++ assets/loading.js | 60 ++++++++++++++++++++++ 4 files changed, 240 insertions(+) create mode 100644 assets/chart.js create mode 100644 assets/favicon.svg create mode 100644 assets/index.js create mode 100644 assets/loading.js (limited to 'assets') diff --git a/assets/chart.js b/assets/chart.js new file mode 100644 index 0000000..9ff08e4 --- /dev/null +++ b/assets/chart.js @@ -0,0 +1,146 @@ +import { + Chart, + Colors, + LineController, + LineElement, + LinearScale, + PointElement, + TimeScale, + Tooltip, +} from 'chart.js' +import 'chartjs-adapter-date-fns'; + +Chart.register( + Colors, + LineController, + LineElement, + LinearScale, + PointElement, + TimeScale, + Tooltip, +); + +document.addEventListener('DOMContentLoaded', async () => { + const chartCanvas = document.getElementById('chart'); + const quizId = chartCanvas.dataset.quizId; + + const apiUrl = `${process.env.ALBATROSS_BASE_PATH}/api/quizzes/${quizId}/chart`; + const apiResult = await fetch(apiUrl).then(res => res.json()); + if (apiResult.error) { + return; + } + const stats = apiResult.stats; + + // Filter best scores. + for (const s of stats) { + const bestScores = []; + for (const score of s.scores) { + if (bestScores.length === 0 || bestScores[bestScores.length - 1].code_size > score.code_size) { + bestScores.push(score); + } + } + s.scores = bestScores; + } + + const scoresInChronologicalOrder = stats + .flatMap(s => s.scores.map(score => ({ ...score, user: s.user }))) + .toSorted((a, b) => a.submitted_at - b.submitted_at); + + const scoresAndRanksAtEachTime = (() => { + const result = []; + const currentScoresForUser = new Map(); + for (const { user, submitted_at, code_size } of scoresInChronologicalOrder) { + currentScoresForUser.set(user.name, { user, submitted_at, code_size }); + const ranking = currentScoresForUser + .values() + .toArray() + .toSorted( + (a, b) => a.code_size === b.code_size ? a.submitted_at - b.submitted_at : a.code_size - b.code_size, + ); + const scores = new Map(); + for (const [i, { user, code_size }] of ranking.entries()) { + scores.set(user.name, { + user, + code_size, + rank: i + 1, + }); + } + result.push({ submitted_at: submitted_at, scores }); + } + return result; + })(); + + const rankingHistory = (() => { + const result = new Map(); + for (const { submitted_at, scores } of scoresAndRanksAtEachTime) { + for (const [username, { user, code_size, rank }] of scores.entries()) { + if (!result.has(username)) { + result.set(username, []); + } + const scores = result.get(username); + scores.push({ user, code_size, rank, submitted_at }); + } + } + return result + .values() + .toArray() + .toSorted((a, b) => { + const finalRankA = a[a.length - 1].rank; + const finalRankB = b[b.length - 1].rank; + return finalRankA - finalRankB; + }); + })(); + + new Chart( + chartCanvas, + { + type: 'line', + data: { + datasets: rankingHistory.map(s => ({ + label: `${s[0].user.name}${s[0].user.is_admin ? ' (staff)' : ''}`, + data: s.map(row => ({ x: row.submitted_at * 1000, y: row.rank, code_size: row.code_size })), + })) + }, + options: { + scales: { + x: { + type: 'time', + time: { + parsing: false, + display: false, + unit: 'day', + tooltipFormat: 'yyyy-MM-dd HH:mm:ss', + displayFormats: { + day: 'yyyy-MM-dd', + }, + }, + title: { + display: true, + text: '日時', + }, + }, + y: { + title: { + display: true, + text: '順位', + }, + reverse: true, + min: 1, + offset: true, + }, + }, + plugins: { + tooltip: { + callbacks: { + label: (context) => { + const label = context.dataset.label; + const code_size = context.raw.code_size; + return `${label} (${code_size} byte)`; + }, + }, + }, + }, + }, + }, + ); +}); diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000..931fc7b --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/assets/index.js b/assets/index.js new file mode 100644 index 0000000..1125516 --- /dev/null +++ b/assets/index.js @@ -0,0 +1,13 @@ +import hljs from 'highlight.js/lib/core'; +import php from 'highlight.js/lib/languages/php'; +import plaintext from 'highlight.js/lib/languages/plaintext'; +import 'highlight.js/styles/github.css'; +import 'bootstrap/dist/css/bootstrap.css'; + +document.addEventListener('DOMContentLoaded', () => { + hljs.registerLanguage('php', php); + hljs.registerLanguage('plaintext', plaintext); + hljs.highlightAll(); +}); + +console.log(`#Hooray!Albatross!`); diff --git a/assets/loading.js b/assets/loading.js new file mode 100644 index 0000000..49d8b48 --- /dev/null +++ b/assets/loading.js @@ -0,0 +1,60 @@ +document.addEventListener('DOMContentLoaded', () => { + const phperTokenElem = document.getElementsByClassName('js-phper-token')[0]; + + const aggregatedStatusElem = document.getElementsByClassName('js-aggregated-execution-status')[0]; + const aggregatedStatusLoadingIndicatorElem = document.getElementsByClassName('js-aggregated-execution-status-loading-indicator')[0]; + const answerId = aggregatedStatusElem.dataset.answerId; + + const getElemsMap = cls => new Map( + Array.from(document.getElementsByClassName(cls) ?? []) + .map(e => [parseInt(e.dataset.testcaseExecutionId), e]) + ); + const statusElemsMap = getElemsMap('js-testcase-execution-status'); + const statusLoadingIndicatorElemsMap = getElemsMap('js-testcase-execution-status-loading-indicator'); + const stdoutElemsMap = getElemsMap('js-testcase-execution-stdout'); + const stderrElemsMap = getElemsMap('js-testcase-execution-stderr'); + + if (!aggregatedStatusLoadingIndicatorElem) { + return; + } + + const apiUrl = `${process.env.ALBATROSS_BASE_PATH}/api/answers/${answerId}/statuses`; + + let timerId; + timerId = setInterval(() => { + fetch(apiUrl) + .then(response => response.json()) + .then(({ aggregated_status, testcase_executions, phper_token }) => { + if (phper_token) { + phperTokenElem.innerHTML = `
バーディー！ ${phper_token}
`; + } + + for (const ex of testcase_executions) { + const statusElem = statusElemsMap.get(ex.id); + const loadingIndicatorElem = statusLoadingIndicatorElemsMap.get(ex.id); + const stdoutElem = stdoutElemsMap.get(ex.id); + const stderrElem = stderrElemsMap.get(ex.id); + + const { status, stdout, stderr } = ex; + if (status.label === statusElem.textContent) { + continue; + } + statusElem.textContent = status.label; + stdoutElem.textContent = stdout; + stderrElem.textContent = stderr; + if (loadingIndicatorElem && !status.show_loading_indicator) { + loadingIndicatorElem.remove(); + } + } + + if (aggregated_status.label === aggregatedStatusElem.textContent) { + return; + } + aggregatedStatusElem.textContent = aggregated_status.label; + if (!aggregated_status.show_loading_indicator) { + aggregatedStatusLoadingIndicatorElem.remove(); + clearInterval(timerId); + } + }); + }, 5 * 1000); +}); -- cgit v1.2.3-70-g09d2