soroushdes/HokmPlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auth: email/Google "coming soon"; mobile polish pass on the table

Browse Source 
- AuthScreen: phone+OTP is the only active method; email & Google shown as
  disabled "coming soon" buttons (until SMTP/Gmail are configured)
- GameTable responsive: compact scoreboard, smaller seat avatars, and
  turn-indicator/timer positions tuned for small screens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 16:11:30 +03:30
parent 0b376aec16
commit fe136f7ee4
3 changed files with 28 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GameTable.tsx
+7 -7
View File
@@ -142,7 +142,7 @@ function Scoreboard() {
const game = useGameStore((s) => s.game);
const { t } = useI18n();
return (
<div className="glass rounded-2xl px-4 py-2.5 flex items-center gap-4">
<div className="glass rounded-2xl px-2.5 py-1.5 gap-2.5 sm:px-4 sm:py-2.5 sm:gap-4 flex items-center">
<ScoreCol
label={t("team.us")}
tricks={game.roundTricks[0]}
@@ -177,9 +177,9 @@ function ScoreCol({
}) {
const { t } = useI18n();
return (
<div className="text-center min-w-14">
<div className={cn("text-xs font-semibold", accent)}>{label}</div>
<div className="text-2xl font-black leading-none">{score}</div>
<div className="text-center min-w-10 sm:min-w-14">
<div className={cn("text-[11px] sm:text-xs font-semibold", accent)}>{label}</div>
<div className="text-lg sm:text-2xl font-black leading-none">{score}</div>
<div className="text-[10px] text-cream/45 mt-0.5">
{t("score.tricks")}: {tricks}
</div>
@@ -235,7 +235,7 @@ function SeatAvatar({ seat, className }: { seat: Seat; className?: string }) {
: { boxShadow: "0 0 0 1px rgba(212,175,55,0.2)" }
}
className={cn(
"relative size-12 rounded-full flex items-center justify-center font-bold text-xl",
"relative size-10 sm:size-12 rounded-full flex items-center justify-center font-bold text-lg sm:text-xl",
team === 0 ? "bg-teal-700/80 text-teal-100" : "bg-rose-900/70 text-rose-100"
)}
>
@@ -454,7 +454,7 @@ function TurnIndicator() {
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="absolute bottom-[150px] left-1/2 -translate-x-1/2 z-30"
className="absolute bottom-[120px] sm:bottom-[150px] left-1/2 -translate-x-1/2 z-30"
>
<div
className={cn(
@@ -480,7 +480,7 @@ function TurnTimer() {
const pct = Math.max(0, Math.min(1, (deadline - Date.now()) / TURN_MS));
const danger = secs <= 5;
return (
<div className="absolute bottom-[190px] left-1/2 -translate-x-1/2 z-30 w-40 text-center">
<div className="absolute bottom-[156px] sm:bottom-[190px] left-1/2 -translate-x-1/2 z-30 w-36 sm:w-40 text-center">
<span
className={cn(
"block text-sm font-black tabular-nums mb-1",