'+escapeHtml(r.test_title)+'
看看同频的人把谁送到了最后
+ {error ?{error}
: null}
+ {result.test_title}
晋级
'+escapeHtml(m.winner.name)+'
':''+escapeHtml(m.winner.name)+'
VS
';}).join('')+'';}else{content='VS
';}
- root.innerHTML = '第 ' + state.bracket.round + ' 轮' + done + ' / ' + total + '
'+tabs+content+'
正在保存你的冠军…
';
- ensureLogin().then(function () { return request('/api/v1/tests/' + state.test.slug + '/runs',{method:'POST',data:{app_key:'hub',champion_id:champion.id,runner_up_id:runner,ranking_ids:b.pool.concat(b.eliminated).map(function(i){return i.id;}),decisions:b.decisions}}); }).then(function (result) { state.result = result; renderResult(); }).catch(renderError);
- }
- function renderResult() {
- var r = state.result;
- root.innerHTML = '分享图编辑器
'+escapeHtml(r.test_title)+' · '+escapeHtml(r.champion_name)+'
正在翻档案…
';ensureLogin().then(function(){return request('/api/v1/me/results');}).then(renderHistory).catch(renderError); }
- function loadDiscover() { root.innerHTML='正在收集答案…
';request('/api/v1/results/discover').then(function(results){root.innerHTML='PK
大家最近选了什么MY TASTE ARCHIVE
我的偏爱档案
每一次纠结，都算数。
做过的测试
'+results.length+' 条结果连接独立饭类版
两个小程序需要一次确认才能合并身份。
'+(results.length?results.map(function(r,i){return '';}).join(''):'
还没有结果，去选第一个冠军吧。
')+'暂时没接上服务
'+escapeHtml(error.message||'未知错误')+'
+
正在摆好擂台…
: null}
+
+
+
+ {test.title}
+{test.subtitle}
+{test.candidate_count} 强{test.run_count} 人完成
+ 暂时没接上服务
;
+}
diff --git a/web/components/PosterEditor.jsx b/web/components/PosterEditor.jsx
new file mode 100644
index 0000000..697dd1d
--- /dev/null
+++ b/web/components/PosterEditor.jsx
@@ -0,0 +1,195 @@
+'use client';
+
+import { motion } from 'motion/react';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { apiRequest, ensureLogin } from '../lib/api';
+
+const THEMES = {
+ celebration: ['#ff6038', '#fffaf4', '#25211f', '#ffe568'],
+ editorial: ['#f3eadf', '#201d1b', '#ffffff', '#285ee8'],
+ notebook: ['#c9f06b', '#1e2810', '#ff72a7', '#ffffff']
+};
+const TOOLS = [
+ ['filter', '滤镜'], ['text', '文字'], ['sticker', '贴纸'], ['crop', '裁剪'],
+ ['adjust', '调整'], ['layout', '布局'], ['brush', '画笔']
+];
+const VIEWS = [['overview', '总览'], ['left', '左半区'], ['right', '右半区'], ['top16', '16 强'], ['top8', '8 强'], ['final', '决赛']];
+
+export default function PosterEditor({ runId }) {
+ const router = useRouter();
+ const canvasRef = useRef(null);
+ const [result, setResult] = useState(null);
+ const [error, setError] = useState('');
+ const [theme, setTheme] = useState('celebration');
+ const [layout, setLayout] = useState('symmetric');
+ const [view, setView] = useState('overview');
+ const [tool, setTool] = useState('filter');
+ const [sticker, setSticker] = useState(true);
+ const [caption, setCaption] = useState('');
+ const [background, setBackground] = useState(null);
+ const [adjust, setAdjust] = useState({ brightness: 100, contrast: 100, saturate: 100 });
+
+ useEffect(() => {
+ async function loadResult() {
+ const cached = sessionStorage.getItem('pk_last_result');
+ if (cached) {
+ const parsed = JSON.parse(cached);
+ if (parsed.id === runId) return parsed;
+ }
+ await ensureLogin();
+ return apiRequest(`/api/v1/me/results/${runId}`);
+ }
+ loadResult().then(setResult).catch(error => setError(error.message));
+ }, [runId]);
+
+ const draw = useCallback(() => {
+ if (!result || !canvasRef.current) return;
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext('2d');
+ const colors = THEMES[theme];
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = colors[0];
+ ctx.fillRect(0, 0, 750, 1000);
+ if (background) {
+ ctx.save();
+ ctx.filter = `brightness(${adjust.brightness}%) contrast(${adjust.contrast}%) saturate(${adjust.saturate}%)`;
+ coverImage(ctx, background, 0, 0, 750, 1000);
+ ctx.restore();
+ ctx.fillStyle = `${colors[0]}d8`;
+ ctx.fillRect(0, 0, 750, 1000);
+ }
+ ctx.fillStyle = colors[1];
+ ctx.font = '700 24px system-ui';
+ ctx.fillText('PK 研究所 / BRACKET', 42, 62);
+ ctx.font = '900 48px system-ui';
+ ctx.fillText(result.test_title, 42, 125);
+ ctx.fillStyle = colors[2];
+ ctx.fillRect(28, 165, 694, 690);
+ drawBracket(ctx, result, colors, layout, view);
+ if (caption) {
+ ctx.fillStyle = colors[3];
+ roundRect(ctx, 42, 870, Math.min(650, 50 + caption.length * 34), 52, 26);
+ ctx.fill();
+ ctx.fillStyle = colors[2];
+ ctx.font = '800 25px system-ui';
+ ctx.fillText(caption.slice(0, 20), 67, 904);
+ } else {
+ ctx.fillStyle = colors[1];
+ ctx.font = '800 25px system-ui';
+ ctx.fillText(`冠军 ${result.champion_name}`, 42, 910);
+ }
+ if (sticker) {
+ ctx.fillStyle = colors[3];
+ ctx.beginPath(); ctx.arc(660, 100, 48, 0, Math.PI * 2); ctx.fill();
+ ctx.fillStyle = colors[2]; ctx.font = '900 22px system-ui'; ctx.fillText('WIN', 635, 108);
+ }
+ ctx.fillStyle = colors[1]; ctx.font = '18px system-ui';
+ ctx.fillText('保存分享图，看看朋友的晋级路线', 42, 962);
+ }, [adjust, background, caption, layout, result, sticker, theme, view]);
+
+ useEffect(() => { draw(); }, [draw]);
+
+ function pickBackground(event) {
+ const file = event.target.files?.[0];
+ if (!file) return;
+ const image = new Image();
+ image.onload = () => setBackground(image);
+ image.src = URL.createObjectURL(file);
+ }
+
+ function save() {
+ const link = document.createElement('a');
+ link.download = `我的PK冠军-${result.champion_name}.png`;
+ link.href = canvasRef.current.toDataURL('image/png');
+ link.click();
+ }
+
+ if (error) return {message}
结果读取失败
{error}
分享图编辑器{result.test_title} · {result.champion_name}
+
+ {Object.entries(value).map(([name, amount]) => )}
;
+}
+
+function coverImage(ctx, image, x, y, width, height) {
+ const ratio = Math.max(width / image.width, height / image.height);
+ const drawWidth = image.width * ratio, drawHeight = image.height * ratio;
+ ctx.drawImage(image, x + (width - drawWidth) / 2, y + (height - drawHeight) / 2, drawWidth, drawHeight);
+}
+
+function roundRect(ctx, x, y, width, height, radius) {
+ if (ctx.roundRect) { ctx.beginPath(); ctx.roundRect(x, y, width, height, radius); return; }
+ ctx.beginPath(); ctx.rect(x, y, width, height);
+}
+
+function drawBracket(ctx, result, colors, layout, view) {
+ const decisions = result.decisions || [], names = result.candidate_names || {};
+ if (!decisions.length) {
+ ctx.fillStyle = colors[1]; ctx.font = '900 72px system-ui'; ctx.fillText(result.champion_name, 70, 500); return;
+ }
+ const maxRound = Math.max(...decisions.map(item => item.round));
+ const minRound = view === 'final' ? maxRound : view === 'top8' ? Math.max(1, maxRound - 2) : view === 'top16' ? Math.max(1, maxRound - 3) : 1;
+ let visible = decisions.filter(item => item.round >= minRound);
+ if (view === 'left' || view === 'right') visible = visible.filter((item, index) => item.round === maxRound || index % 2 === (view === 'left' ? 0 : 1));
+ const groups = {}, positions = {};
+ visible.forEach(item => (groups[item.round] ||= []).push(item));
+ Object.entries(groups).forEach(([roundValue, items]) => {
+ const round = Number(roundValue);
+ items.forEach((item, index) => {
+ const symmetric = layout === 'symmetric';
+ const side = symmetric && round < maxRound && index % 2 ? 1 : -1;
+ const x = symmetric ? 375 + side * Math.min(260, 78 + (maxRound - round) * 62) : 70 + (round - minRound) * (580 / Math.max(1, maxRound - minRound));
+ const y = 230 + (index + 1) * (520 / (items.length + 1));
+ positions[`${item.winner_id}:${item.round}`] = { x, y, item };
+ });
+ });
+ ctx.strokeStyle = colors[3]; ctx.lineWidth = 3;
+ Object.values(positions).forEach(position => {
+ const parentDecision = visible.find(item => item.round > position.item.round && [item.left_id, item.right_id].includes(position.item.winner_id));
+ const parent = parentDecision && positions[`${parentDecision.winner_id}:${parentDecision.round}`];
+ if (!parent) return;
+ ctx.beginPath(); ctx.moveTo(position.x, position.y); ctx.lineTo((position.x + parent.x) / 2, position.y); ctx.lineTo((position.x + parent.x) / 2, parent.y); ctx.lineTo(parent.x, parent.y); ctx.stroke();
+ });
+ Object.values(positions).forEach(position => {
+ const label = names[position.item.winner_id] || result.champion_name;
+ ctx.fillStyle = position.item.round === maxRound ? colors[3] : colors[0];
+ ctx.fillRect(position.x - 56, position.y - 20, 112, 40);
+ ctx.fillStyle = colors[1]; ctx.font = `${label.length > 6 ? 13 : 16}px system-ui`; ctx.fillText(label.slice(0, 8), position.x - 47, position.y + 6);
+ });
+}
diff --git a/web/components/Profile.jsx b/web/components/Profile.jsx
new file mode 100644
index 0000000..a833bfc
--- /dev/null
+++ b/web/components/Profile.jsx
@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import AppLogo from './AppLogo';
+import BottomNav from './BottomNav';
+import { apiRequest, ensureLogin } from '../lib/api';
+
+export default function Profile() {
+ const [results, setResults] = useState([]);
+ const [linkCode, setLinkCode] = useState('');
+ const [error, setError] = useState('');
+ useEffect(() => {
+ ensureLogin().then(() => apiRequest('/api/v1/me/results')).then(setResults).catch(error => setError(error.message));
+ }, []);
+ async function createLinkCode() {
+ try {
+ const data = await apiRequest('/api/v1/me/link-code', { method: 'POST' });
+ setLinkCode(data.code);
+ } catch (error) { setError(error.message); }
+ }
+ return (
+ 连接独立饭类版
+生成一次性绑定码，在另一个小程序确认后合并历史。
+ + {linkCode ? : null} +做过的测试 · {results.length}
+ {error ?{error}
: null}
+ 暂时无法继续
{error}
+
+ {MODES.map(item => )}
+
+ {mode === 'multi' ? (
+ {match.winner.name}
正在保存你的冠军…
: null}
+