claude (blind_chess)
0498f1de43
Attempted-move lines (no_such_piece, no_legal_moves, wont_help, illegal_move) now show "White — " or "Black — " prefix derived from ply parity. Removed alarm-red err styling; replaced with neutral dim+italic via .entry.attempt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
2.2 KiB
Svelte
82 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { Announcement, Color } from '@blind-chess/shared';
|
|
import { moderatorText } from './moderator-strings.js';
|
|
|
|
interface Props {
|
|
announcements: Announcement[];
|
|
you: Color;
|
|
}
|
|
let { announcements, you }: Props = $props();
|
|
|
|
// Show only entries this viewer is allowed to see.
|
|
const visible = $derived(
|
|
announcements.filter((a) => a.audience === 'both' || a.audience === you),
|
|
);
|
|
|
|
let scrollEl: HTMLDivElement | null = $state(null);
|
|
$effect(() => {
|
|
void visible.length;
|
|
if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
|
|
});
|
|
</script>
|
|
|
|
<div class="panel">
|
|
<header>Moderator</header>
|
|
<div class="log" bind:this={scrollEl}>
|
|
{#each visible as a, i (i)}
|
|
{@const isAttempt = a.text === 'no_such_piece' || a.text === 'no_legal_moves' || a.text === 'wont_help' || a.text === 'illegal_move'}
|
|
{@const actor = a.ply % 2 === 0 ? 'White' : 'Black'}
|
|
<div class="entry" class:attempt={isAttempt}>
|
|
<span class="ply">{a.ply > 0 ? `#${a.ply}` : ''}</span>
|
|
<span class="text">{isAttempt ? `${actor} — ` : ''}{moderatorText(a.text, a.payload)}</span>
|
|
</div>
|
|
{:else}
|
|
<div class="empty muted">The moderator is silent.</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
}
|
|
header {
|
|
padding: 10px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.log {
|
|
padding: 8px 14px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
.entry {
|
|
padding: 4px 0;
|
|
display: flex;
|
|
gap: 8px;
|
|
border-bottom: 1px dashed rgba(255,255,255,0.05);
|
|
}
|
|
.entry:last-child { border-bottom: none; }
|
|
.entry.attempt .text { color: var(--text-dim); font-style: italic; }
|
|
.ply {
|
|
color: var(--text-dim);
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
}
|
|
.empty { padding: 6px 0; font-style: italic; }
|
|
</style>
|