Skip to content

Commit

Permalink
add point calculation explaination
Browse files Browse the repository at this point in the history
  • Loading branch information
@TsFreddie
TsFreddie committed Jan 16, 2025
1 parent 43983ff commit 9712804
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 27 deletions.
4 changes: 2 additions & 2 deletions src/lib/components/Modal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
<dialog
class="border-none bg-transparent text-slate-300 shadow-lg backdrop:bg-black/60"
class="fixed z-50 mx-auto overflow-visible border-none bg-transparent text-slate-300 shadow-lg backdrop:bg-black/60"
bind:this={dialog}
onclose={() => (show = false)}
onclick={(e) => {
Expand All @@ -23,7 +23,7 @@
<button
autofocus
onclick={() => dialog.close()}
class="float-right mr-5 rounded-t bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none"
class="absolute -top-8 right-0 flex h-8 w-16 items-center justify-center rounded-t-lg bg-slate-600 text-white hover:bg-slate-500 focus:outline-none active:bg-slate-600"
><Fa icon={faXmark}></Fa></button
>
<div>
Expand Down
179 changes: 179 additions & 0 deletions src/lib/components/PointCalculation.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<div
class="scrollbar-subtle container grid max-h-[calc(100svh-12rem)] grid-cols-1 gap-4 overflow-y-auto rounded-l-lg rounded-br-lg bg-slate-700 p-3 text-left shadow-lg md:grid-cols-2 lg:grid-cols-3"
>
<div>
<h3 class="mb-2 rounded-lg bg-slate-600 px-2 text-xl font-bold">🌎 通过分</h3>
<div>
首次通过地图会获得通过分。每张地图的难度由星星数量表示。不同类型的地图有不同的分数数据：
</div>
<table class="my-3 w-full table-auto overflow-hidden border border-slate-500">
<tbody>
<tr class="bg-slate-900">
<th class="px-2">地图类型</th>
<th>基数</th>
<th>倍率</th>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">新手（Novice）</td>
<td>0</td>
<td>1</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">中阶（Moderate）</td>
<td>5</td>
<td>2</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">高阶（Brutal）</td>
<td>15</td>
<td>3</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">疯狂（Insane）</td>
<td>30</td>
<td>4</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">分身（Dummy）</td>
<td>5</td>
<td>5</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">古典（DDMaX）</td>
<td>0</td>
<td>4</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">传统（Oldschool）</td>
<td>0</td>
<td>6</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">单人（Solo）</td>
<td>0</td>
<td>4</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">竞速（Race）</td>
<td>0</td>
<td>2</td>
</tr>
</tbody>
</table>

<div>分数计算公式</div>
<div class="rounded bg-slate-900 p-1 text-center">分数 = 基数 + (星星 × 倍率)</div>
</div>
<div>
<h3 class="mb-2 rounded-lg bg-slate-600 px-2 text-xl font-bold">👥 团队排位分</h3>
<div>
使用 /team 指令加入队伍完成地图。团队排位分由每个地图的<span
class="font-semibold text-orange-500">团队世界记录前十名</span
>记录计算而来。
</div>
<table class="my-3 w-full table-auto overflow-hidden border border-slate-500">
<tbody>
<tr class="bg-slate-900">
<th class="px-2">世界排名</th>
<th>分数</th>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2 text-orange-500">第一名</td>
<td>25pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2 text-orange-400">第二名</td>
<td>18pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class=" px-2 text-orange-300">第三名</td>
<td>15pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第四名</td>
<td>12pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第五名</td>
<td>10pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第六名</td>
<td>8pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第七名</td>
<td>6pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第八名</td>
<td>4pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第九名</td>
<td>2pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第十名</td>
<td>1pts</td>
</tr>
</tbody>
</table>
</div>
<div>
<h3 class="mb-2 rounded-lg bg-slate-600 px-2 text-xl font-bold">👤 个人排位分</h3>
<div>
无论是否组队，只要产生记录结算就会被统计。个人排位分由每个地图的<span
class="font-semibold text-orange-500">个人世界记录前十名</span
>记录计算而来。
</div>
<table class="my-3 w-full table-auto overflow-hidden border border-slate-500">
<tbody>
<tr class="bg-slate-900">
<th class="px-2">世界排名</th>
<th>分数</th>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2 text-orange-500">第一名</td>
<td>25pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2 text-orange-400">第二名</td>
<td>18pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class=" px-2 text-orange-300">第三名</td>
<td>15pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第四名</td>
<td>12pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第五名</td>
<td>10pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第六名</td>
<td>8pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第七名</td>
<td>6pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第八名</td>
<td>4pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第九名</td>
<td>2pts</td>
</tr>
<tr class="odd:bg-slate-600 even:bg-slate-700">
<td class="px-2">第十名</td>
<td>1pts</td>
</tr>
</tbody>
</table>
</div>
</div>
18 changes: 17 additions & 1 deletion src/routes/ddnet/players/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@
import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
import PlayerLink from '$lib/components/ddnet/PlayerLink.svelte';
import FlagSpan from '$lib/components/FlagSpan.svelte';
import Modal from '$lib/components/Modal.svelte';
import PointCalculation from '$lib/components/PointCalculation.svelte';
import { encodeAsciiURIComponent } from '$lib/link';
import type { RankInfo } from '$lib/server/fetches/ranks.js';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import Fa from 'svelte-fa';
let { data } = $props();
Expand Down Expand Up @@ -48,6 +52,7 @@
let ranks: RankInfo['ranks'] = $state(sliceRanks());
let searchName = $state('');
let showModal = $state(false);
const MIN_QUERY_INTERVAL = 200;
let queryingName: string | null = null;
Expand Down Expand Up @@ -118,7 +123,14 @@
]}
/>

<div class="mb-4 md:flex md:space-x-5">
<button
class="mb-2 cursor-pointer text-nowrap rounded bg-slate-700 px-4 py-2 font-semibold hover:bg-slate-600 active:bg-slate-700"
onclick={() => {
showModal = !showModal;
}}><Fa class="inline" icon={faQuestionCircle}></Fa> 了解分数计算方式</button
>

<div class="mb-4 space-y-2 md:flex md:space-x-5">
<input
type="text"
placeholder="查找玩家名"
Expand Down Expand Up @@ -200,3 +212,7 @@
})}
{/if}
</div>

<Modal bind:show={showModal}>
<PointCalculation></PointCalculation>
</Modal>
54 changes: 39 additions & 15 deletions src/routes/ddnet/players/[name]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,23 @@
import MapLink from '$lib/components/ddnet/MapLink.svelte';
import PlayerLink from '$lib/components/ddnet/PlayerLink.svelte';
import FlagSpan from '$lib/components/FlagSpan.svelte';
import Modal from '$lib/components/Modal.svelte';
import PointCalculation from '$lib/components/PointCalculation.svelte';
import TeeRender from '$lib/components/TeeRender.svelte';
import { secondsToDate } from '$lib/date';
import { mapType } from '$lib/ddnet/helpers';
import { secondsToTime } from '$lib/helpers';
import { encodeAsciiURIComponent } from '$lib/link.js';
import { share } from '$lib/share';
import { tippy } from '$lib/tippy';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import { Chart } from 'chart.js/auto';
import Fa from 'svelte-fa';
let { data } = $props();
let explaination = $state(false);
let showModal = $state(false);
const hoursToColor = (value: number) => {
const weight = value / 24;
Expand Down Expand Up @@ -105,20 +110,32 @@
/>

<div class="mb-4">
<div class="flex flex-row items-center">
<!-- increased max loss iter to make the color more accurate at least in player page -->
<TeeRender
url={data.skin.n}
body={data.skin.b}
feet={data.skin.f}
useDefault
className="w-16 h-16 -mb-1 -mt-1 mr-2"
maxLossIter={10}
></TeeRender>
<div class="text-2xl font-bold">{data.player.player}</div>
</div>
<div class="text-md font-bold">
<span>最近活跃：{secondsToDate(data.last_finish.timestamp)}</span>
<div class="flex w-full flex-col items-center justify-between gap-2 sm:flex-row">
<div>
<div class="flex flex-row items-center">
<!-- increased max loss iter to make the color more accurate at least in player page -->
<TeeRender
url={data.skin.n}
body={data.skin.b}
feet={data.skin.f}
useDefault
className="w-16 h-16 -mb-1 -mt-1 mr-2"
maxLossIter={10}
></TeeRender>
<div class="text-2xl font-bold">{data.player.player}</div>
</div>
<div class="text-md font-bold">
<span>最近活跃：{secondsToDate(data.last_finish.timestamp)}</span>
</div>
</div>
<div>
<button
class="cursor-pointer text-nowrap rounded bg-slate-700 px-4 py-2 font-semibold hover:bg-slate-600 active:bg-slate-700"
onclick={() => {
showModal = !showModal;
}}><Fa class="inline" icon={faQuestionCircle}></Fa> 了解分数计算方式</button
>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-1">
Expand Down Expand Up @@ -150,7 +167,10 @@
class="rounded-lg bg-slate-600 px-3 py-1 shadow-md sm:py-3"
class:opacity-50={!rank.rank.rank}
>
<h3 class="mb-1 text-base font-bold">{rank.name}</h3>
<h3 class="mb-1 text-base font-bold">
{rank.icon}
{rank.name}
</h3>
{#if rank.rank.rank}
<p class="text-md">
<span class="text-sm">No.</span>{rank.rank.rank} - {rank.rank
Expand Down Expand Up @@ -358,3 +378,7 @@
</div>
</div>
</div>

<Modal bind:show={showModal}>
<PointCalculation></PointCalculation>
</Modal>
13 changes: 7 additions & 6 deletions src/routes/ddnet/players/[name]/+page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,20 @@ export const load = (async ({ data, parent }) => {

// setup ranks
let ranks: {
icon: string;
name: string;
rank: {
points?: number;
rank?: number | null;
pending?: number;
};
}[] = [
{ name: '🌎 总通过分', rank: { ...player.points, pending: player.pending_points } },
{ name: '👥 团队排位分', rank: player.team_rank },
{ name: '👤 个人排位分', rank: player.rank },
{ name: '📅 获得通过分 (近365天)', rank: player.points_last_year },
{ name: '📅 获得通过分 (近30天)', rank: player.points_last_month },
{ name: '📅 获得通过分 (近7天)', rank: player.points_last_week }
{ icon: '🌎', name: '总通过分', rank: { ...player.points, pending: player.pending_points } },
{ icon: '👥', name: '团队排位分', rank: player.team_rank },
{ icon: '👤', name: '个人排位分', rank: player.rank },
{ icon: '📅', name: '获得通过分 (近365天)', rank: player.points_last_year },
{ icon: '📅', name: '获得通过分 (近30天)', rank: player.points_last_month },
{ icon: '📅', name: '获得通过分 (近7天)', rank: player.points_last_week }
];

// setup activity
Expand Down
5 changes: 2 additions & 3 deletions src/routes/ddnet/servers/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
import { page } from '$app/state';
import MapLink from '$lib/components/ddnet/MapLink.svelte';
import TeeRender from '$lib/components/TeeRender.svelte';
import tippy from 'tippy.js';
const { data } = $props();
Expand Down Expand Up @@ -366,7 +365,7 @@
<Modal bind:show={showModal}>
{#if selectedServer}
<div
class="scrollbar-subtle flex max-h-[calc(100svh-8rem)] w-[512px] max-w-[calc(100svw-3rem)] flex-col gap-4 overflow-y-auto rounded-lg bg-slate-700 p-3 text-left shadow-lg"
class="scrollbar-subtle flex max-h-[calc(100svh-8rem)] w-[512px] max-w-[calc(100svw-3rem)] flex-col gap-4 overflow-y-auto rounded-l-lg rounded-br-lg bg-slate-700 p-3 text-left shadow-lg"
>
<div class="flew flew-col gap-1">
<h1 class="flex-grow text-xl font-bold">{selectedServer.info.name}</h1>
Expand Down Expand Up @@ -412,7 +411,7 @@
<p class="ml-2">{address}</p>
{/each}
</div>
<div class="collapse flex flex-col gap-1 sm:visible">
<div class="hidden flex-col gap-1 sm:flex">
{#if joinViaSteam(selectedServer.addresses)}
<a
class="w-full rounded bg-[#090909] px-4 py-2 text-center font-semibold text-white hover:bg-gray-900 active:bg-gray-800"
Expand Down

0 comments on commit 9712804

Please sign in to comment.