-
@@ -178,7 +166,7 @@
{/if}
{#each manTiles as tile}
{/each}
-
-
{#each pinTiles as tile}
{/each}
-
-
{#each souTiles as tile}
{/each}
-
-
-
+
{:else if error}
{#each honorTiles as tile}
{/each}
@@ -187,7 +141,7 @@
.picker-backdrop {
position: fixed;
inset: 0;
- background: rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
@@ -195,84 +149,74 @@
}
.picker-panel {
- background: var(--bg-primary);
+ background: var(--bg-surface);
border: 1px solid var(--border);
- border-radius: 12px;
- padding: 1rem;
+ padding: var(--space-4);
max-width: 90vw;
max-height: 90vh;
overflow: auto;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.picker-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 0.75rem;
- padding-bottom: 0.5rem;
+ margin-bottom: var(--space-3);
+ padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border);
}
.picker-header span {
+ font-size: 0.6875rem;
font-weight: 600;
- color: var(--text-primary);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-muted);
}
.close-btn {
- background: none;
- border: none;
- font-size: 1.5rem;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border);
+ font-size: 1rem;
color: var(--text-secondary);
cursor: pointer;
- padding: 0;
- width: 28px;
- height: 28px;
+ width: 24px;
+ height: 24px;
display: flex;
align-items: center;
justify-content: center;
- border-radius: 4px;
- transition: background-color 0.2s ease, color 0.2s ease;
+ transition: all 0.15s ease;
}
.close-btn:hover {
- background: var(--bg-secondary);
+ background: var(--bg-muted);
+ border-color: var(--text-muted);
color: var(--text-primary);
}
.picker-grid {
display: flex;
flex-direction: column;
- gap: 0.5rem;
+ gap: var(--space-2);
}
.tile-row {
display: flex;
flex-wrap: wrap;
- gap: 0.25rem;
+ gap: var(--space-1);
justify-content: center;
}
- .tile-row.honors {
- margin-top: 0.25rem;
- }
-
.tile-btn {
background: none;
- border: 2px solid transparent;
- border-radius: 4px;
- padding: 2px;
+ border: 1px solid transparent;
+ padding: 1px;
cursor: pointer;
- transition: border-color 0.15s ease, transform 0.1s ease;
+ transition: border-color 0.1s ease;
}
.tile-btn:hover:not(:disabled) {
border-color: var(--accent);
- transform: translateY(-2px);
- }
-
- .tile-btn:active:not(:disabled) {
- transform: translateY(0);
}
.tile-btn.disabled {
@@ -282,11 +226,7 @@
@media (max-width: 480px) {
.picker-panel {
- padding: 0.75rem;
- }
-
- .tile-row {
- gap: 0.125rem;
+ padding: var(--space-3);
}
}
diff --git a/web/src/lib/components/ScoreResult.svelte b/web/src/lib/components/ScoreResult.svelte
index defee55..32e6689 100644
--- a/web/src/lib/components/ScoreResult.svelte
+++ b/web/src/lib/components/ScoreResult.svelte
@@ -9,7 +9,6 @@
let { result, error = null, loading = false }: Props = $props();
- // Format payment string
const formatPayment = (payment: ScoringOutput['payment'], isDealer: boolean, isTsumo: boolean): string => {
if (isTsumo) {
if (isDealer) {
@@ -22,7 +21,6 @@
}
};
- // Get score level class
const getScoreLevelClass = (level: string): string => {
const normalized = level.toLowerCase().replace(/\s+/g, '');
if (normalized === 'mangan') return 'mangan';
@@ -44,19 +42,13 @@
-
{:else if result}
-
{#if result.inferred_winning_tile}
@@ -100,12 +92,8 @@
{#each result.yaku as yaku}
-
-
- Winning tile inferred as {result.inferred_winning_tile}.
- Click a tile in your hand to select explicitly.
-
+ Winning tile inferred as {result.inferred_winning_tile}
{/if}
@@ -71,24 +63,24 @@
{result.total_han}
- Han
+ han
- /
+ /
{result.fu}
- Fu
+ fu
{result.payment.total.toLocaleString()}
- points
+ pts
{formatPayment(result.payment, result.is_dealer, isTsumo)}
{#if result.is_dealer}
- Dealer
+ Dealer
{/if}
{yaku.name}
-
- {#if yaku.is_yakuman}
- 役満
- {:else}
- {yaku.han} han
- {/if}
+
+ {#if yaku.is_yakuman}役満{:else}{yaku.han}{/if}
{/each}
@@ -120,19 +108,19 @@
{#if result.dora.regular > 0}
Dora
- {result.dora.regular}
+ {result.dora.regular}
{/if}
{#if result.dora.ura > 0}
- Ura Dora
- {result.dora.ura}
+ Ura
+ {result.dora.ura}
{/if}
{#if result.dora.aka > 0}
- Aka Dora
- {result.dora.aka}
+ Aka
+ {result.dora.aka}
{/if}
- Total (rounded)
+ Total
{result.fu_breakdown.raw_total} → {result.fu_breakdown.rounded}
@@ -187,12 +175,11 @@
Structure:
- {result.hand_structure}
+
{:else}
{result.hand_structure}
-
Enter a complete hand to calculate score
{/if}
@@ -200,7 +187,7 @@
diff --git a/web/src/lib/components/Tile.svelte b/web/src/lib/components/Tile.svelte
index d1ffeed..9054291 100644
--- a/web/src/lib/components/Tile.svelte
+++ b/web/src/lib/components/Tile.svelte
@@ -68,79 +68,38 @@
// Map of tile codes to imported SVG paths
const tileMap: Record
字
-
+
{#each honorTiles as tile}