feat: 更新依赖与增强功能

- 在 package.json 和 package-lock.json 中新增 laravel-echo 和 pusher-js 依赖 - 在 API 模块中新增 draw 相关函数的导出 - 在 PlayerAppShell 组件中引入 PlayerBottomNav 以增强底部导航 - 在 HallScreen 组件中引入 HallDrawPanel 以展示当前期号
2026-05-09 17:40:26 +08:00
parent 3ae2c0e7d1
commit 7e28cc154a
19 changed files with 1067 additions and 31 deletions
--- a/src/features/draw/draw-status-meta.ts
+++ b/src/features/draw/draw-status-meta.ts
@@ -0,0 +1,35 @@
+export type DrawStatusHud = {
+  label: string;
+  /** Tailwind 颜色类：状态圆点 */
+  dotClass: string;
+  /** 文案条（如「距封盘」） */
+  countdownKind: "close" | "draw" | "cooldown" | "none";
+};
+
+/** 对齐界面文档 §4.2 状态文案与 PRD 期号状态 */
+export function drawStatusHud(status: string): DrawStatusHud {
+  switch (status) {
+    case "pending":
+      return { label: "未开始", dotClass: "bg-muted-foreground", countdownKind: "none" };
+    case "open":
+      return { label: "可下注", dotClass: "bg-emerald-500", countdownKind: "close" };
+    case "closing":
+      return { label: "已封盘", dotClass: "bg-rose-500", countdownKind: "draw" };
+    case "closed":
+      return { label: "待开奖", dotClass: "bg-amber-500", countdownKind: "draw" };
+    case "drawing":
+      return { label: "开奖中", dotClass: "bg-sky-500", countdownKind: "none" };
+    case "review":
+      return { label: "待审核", dotClass: "bg-violet-500", countdownKind: "none" };
+    case "cooldown":
+      return { label: "冷静期", dotClass: "bg-cyan-500", countdownKind: "cooldown" };
+    case "settling":
+      return { label: "结算中", dotClass: "bg-blue-600", countdownKind: "none" };
+    case "settled":
+      return { label: "已结算", dotClass: "bg-muted-foreground", countdownKind: "none" };
+    case "cancelled":
+      return { label: "已取消", dotClass: "bg-muted-foreground", countdownKind: "none" };
+    default:
+      return { label: status, dotClass: "bg-muted-foreground", countdownKind: "none" };
+  }
+}
--- a/src/features/hall/hall-draw-panel.tsx
+++ b/src/features/hall/hall-draw-panel.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { getDrawCurrent } from "@/api/draw";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { drawStatusHud } from "@/features/draw/draw-status-meta";
+import { formatSecondsClock } from "@/lib/format-gmt";
+import { getLotteryEcho } from "@/lib/lottery-echo";
+import { formatLotteryInstant } from "@/lib/player-datetime";
+import { cn } from "@/lib/utils";
+import type { DrawCurrentPayload } from "@/types/api/draw-current";
+
+/** 界面文档 §2.1：`draw.countdown` / `draw.status_change` / `result.published` 载荷 */
+type HallWsEnvelope = {
+  data: DrawCurrentPayload | null;
+  emitted_at_ms?: number;
+};
+
+/**
+ * 「服务器时间为准」：以载荷里的 `seconds_*` 为基准、`emitted_at_ms` 为锚点在本地推演（兜底 HTTP 或未收到秒的间隙）。
+ */
+function applySnapshotDrift(
+  payload: DrawCurrentPayload,
+  emittedAtMs: number,
+  nowMs: number,
+): DrawCurrentPayload {
+  const elapsed = Math.max(0, Math.floor((nowMs - emittedAtMs) / 1000));
+  return {
+    ...payload,
+    seconds_to_close: Math.max(0, payload.seconds_to_close - elapsed),
+    seconds_to_draw: Math.max(0, payload.seconds_to_draw - elapsed),
+    seconds_remaining_in_cooldown:
+      payload.seconds_remaining_in_cooldown == null
+        ? null
+        : Math.max(0, payload.seconds_remaining_in_cooldown - elapsed),
+  };
+}
+
+function CountdownStrip({
+  hud,
+  payload,
+}: {
+  hud: ReturnType<typeof drawStatusHud>;
+  payload: DrawCurrentPayload;
+}) {
+  if (hud.countdownKind === "close" && payload.seconds_to_close > 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        封盘倒计时:{" "}
+        <span className="font-mono text-base font-semibold tabular-nums text-foreground">
+          {formatSecondsClock(payload.seconds_to_close)}
+        </span>
+      </p>
+    );
+  }
+  if (hud.countdownKind === "draw" && payload.seconds_to_draw > 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        距离开奖:{" "}
+        <span
+          className={cn(
+            "font-mono text-base font-semibold tabular-nums",
+            payload.status === "closing" && "text-rose-600 dark:text-rose-400",
+          )}
+        >
+          {formatSecondsClock(payload.seconds_to_draw)}
+        </span>
+      </p>
+    );
+  }
+  if (hud.countdownKind === "cooldown" && payload.seconds_remaining_in_cooldown != null) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        冷静期剩余:{" "}
+        <span className="font-mono text-base font-semibold tabular-nums text-foreground">
+          {formatSecondsClock(payload.seconds_remaining_in_cooldown)}
+        </span>
+      </p>
+    );
+  }
+  return null;
+}
+
+/**
+ * 界面文档 §2.1 / §2.2：WebSocket `draw.countdown`、`draw.status_change`、`result.published`；
+ * 降级：每 30s 轮询 `GET draw/current`。
+ */
+export function HallDrawPanel() {
+  const [raw, setRaw] = useState<DrawCurrentPayload | null | undefined>(undefined);
+  const [emittedAtMs, setEmittedAtMs] = useState(() => Date.now());
+  /** 推演用「当前毫秒」；`draw.countdown` 每秒到仍保留，避免零星丢包时停摆 */
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const [error, setError] = useState<string | null>(null);
+
+  const mergeFromWs = useCallback((evt: HallWsEnvelope) => {
+    setRaw(evt.data);
+    setEmittedAtMs(evt.emitted_at_ms ?? Date.now());
+  }, []);
+
+  const load = useCallback(async () => {
+    try {
+      setError(null);
+      const d = await getDrawCurrent();
+      setRaw(d);
+      setEmittedAtMs(Date.now());
+    } catch {
+      setError("加载失败，请下拉刷新");
+      setRaw(undefined);
+    }
+  }, []);
+
+  /** §2.2：WS 不可用或降级时每 30s 拉倒计时 */
+  const refreshMs = useMemo(() => {
+    if (raw === undefined) return 10_000;
+    return raw ? 30_000 : 12_000;
+  }, [raw]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      void load();
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [load]);
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      void load();
+    }, refreshMs);
+    return () => window.clearInterval(id);
+  }, [load, refreshMs]);
+
+  useEffect(() => {
+    const bump = () => setNowMs(Date.now());
+    bump();
+    const sid = window.setInterval(bump, 1000);
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") bump();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.clearInterval(sid);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, []);
+
+  useEffect(() => {
+    const echo = getLotteryEcho();
+    if (!echo) return;
+
+    echo
+      .channel("lottery-hall")
+      .listen(".draw.countdown", mergeFromWs)
+      .listen(".draw.status_change", mergeFromWs)
+      .listen(".result.published", mergeFromWs);
+
+    return () => {
+      echo.leave("lottery-hall");
+    };
+  }, [mergeFromWs]);
+
+  const display: DrawCurrentPayload | null | undefined =
+    raw === undefined || raw === null ? raw : applySnapshotDrift(raw, emittedAtMs, nowMs);
+
+  if (error) {
+    return (
+      <Card className="border-destructive/40">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">当期期号</CardTitle>
+          <CardDescription>{error}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex gap-2">
+          <Button type="button" variant="secondary" size="sm" onClick={() => void load()}>
+            重试
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (raw === undefined || display === undefined) {
+    return (
+      <Card>
+        <CardHeader className="space-y-2 pb-2">
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-4 w-52" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-12 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (raw === null || display === null) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">当期期号</CardTitle>
+          <CardDescription>暂无可用期号，请稍后再试</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  const hud = drawStatusHud(display.status);
+
+  return (
+    <Card className={cn(display.status === "closing" && "border-rose-500/40")}>
+      <CardHeader className="space-y-1 pb-2">
+        <div className="flex flex-wrap items-start justify-between gap-2">
+          <div className="min-w-0">
+            <CardTitle className="text-base leading-tight">
+              第 {display.draw_no} 期
+            </CardTitle>
+            <CardDescription className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span className="inline-flex items-center gap-1.5">
+                <span className={cn("inline-block size-2 rounded-full", hud.dotClass)} />
+                <span>{hud.label}</span>
+              </span>
+              {display.draw_time ? (
+                <span className="text-xs opacity-90">
+                  计划开奖：{formatLotteryInstant(display.draw_time)}
+                </span>
+              ) : null}
+            </CardDescription>
+          </div>
+          <Link
+            href="/results"
+            className={cn(buttonVariants({ variant: "outline", size: "sm" }), "shrink-0")}
+          >
+            开奖结果
+          </Link>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <CountdownStrip hud={hud} payload={display} />
+        {(display.status === "closing" || display.status === "closed") && (
+          <p className="text-xs text-muted-foreground">
+            下注表格封盘置灰见实施计划 docs/06 §11.7、§13.3；当前可先前往「开奖结果」查看已发布往期。
+          </p>
+        )}
+        {Array.isArray(display.result_items) && display.result_items.length > 0 ? (
+          <div className="rounded-lg border border-dashed border-border bg-muted/30 p-3 text-xs text-muted-foreground">
+            本期号码已发布，完整 23 组展示见{" "}
+            <Link href={`/results/${encodeURIComponent(display.draw_no)}`} className="font-medium text-primary underline-offset-4 hover:underline">
+              当期结果
+            </Link>
+            。
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/features/hall/hall-screen.tsx
+++ b/src/features/hall/hall-screen.tsx
@@ -9,24 +9,28 @@ import {
 } from "@/components/ui/card";

 import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
+import { HallDrawPanel } from "@/features/hall/hall-draw-panel";

 /**
- * 下注大厅：顶部钱包条对齐高保真稿；以下为期号/表格占位。
+ * 下注大厅：钱包条 §4 + 当期期号 §4.2；表格与封盘态见 docs/06 §11.7、§13.3。
 */
 export function HallScreen() {
  return (
    <div className="flex flex-col gap-5">
      <HallWalletStrip />
+      <HallDrawPanel />

      <Card>
        <CardHeader>
-          <CardTitle className="text-base">下注大厅</CardTitle>
+          <CardTitle className="text-base">下注表格</CardTitle>
          <CardDescription>
-            Issue No.、倒计时、2D/3D/4D 表格与 Submit Bet 将按界面文档 §4.2 接续开发。
+            2D / 3D / 4D 动态列在阶段 5 接入玩法配置后按界面 §4.2 渲染（实施计划 docs/06
+            §13.3「承接阶段 3」）。
          </CardDescription>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground">
-          封盘态、WebSocket 降级轮询等与 PRD §2 一致时再接入。
+          封盘整表置灰、按钮「已封盘」与 WebSocket 倒计时见 docs/06 §11.7 表、§13.3、§16.2
+          第二轮。
        </CardContent>
      </Card>
    </div>
--- a/src/features/results/draw-result-detail-screen.tsx
+++ b/src/features/results/draw-result-detail-screen.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+import { getDrawResultByNo } from "@/api/draw";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TwentyThreeResultsGrid } from "@/features/results/twenty-three-results-grid";
+import { formatLotteryInstant } from "@/lib/player-datetime";
+import { cn } from "@/lib/utils";
+import type { DrawResultDetailPayload } from "@/types/api/draw-results";
+
+type DrawResultDetailScreenProps = {
+  drawNo: string;
+};
+
+/** §4.6 开奖结果详情：23 分区 + [< >] 切换 */
+export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps) {
+  const [data, setData] = useState<DrawResultDetailPayload | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const row = await getDrawResultByNo(drawNo);
+      setData(row);
+    } catch {
+      setData(null);
+      setError("该期开奖结果不可用或不存在");
+    } finally {
+      setLoading(false);
+    }
+  }, [drawNo]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-7 w-48" />
+          <Skeleton className="h-4 w-56" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-48 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <Card className="border-destructive/40">
+        <CardHeader>
+          <CardTitle className="text-base">开奖结果</CardTitle>
+          <CardDescription>{error ?? "无数据"}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
+            重试
+          </Button>
+          <Link href="/results" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+            返回列表
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Card>
+        <CardHeader className="space-y-3 pb-2">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            {data.previous_draw_no ? (
+              <Link
+                href={`/results/${encodeURIComponent(data.previous_draw_no)}`}
+                className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
+              >
+                ‹ 上一期
+              </Link>
+            ) : (
+              <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                ‹ 上一期
+              </Button>
+            )}
+            <CardTitle className="text-center font-mono text-lg">
+              {data.draw_no}
+            </CardTitle>
+            {data.next_draw_no ? (
+              <Link
+                href={`/results/${encodeURIComponent(data.next_draw_no)}`}
+                className={cn(buttonVariants({ variant: "outline", size: "sm" }), "min-w-[5rem]")}
+              >
+                下一期 ›
+              </Link>
+            ) : (
+              <Button type="button" variant="outline" size="sm" className="min-w-[5rem]" disabled>
+                下一期 ›
+              </Button>
+            )}
+          </div>
+          <CardDescription className="text-center font-mono text-sm">
+            开奖时间:{" "}
+            {formatLotteryInstant(data.draw_time_iso ?? data.draw_time ?? null)}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-2">
+          <TwentyThreeResultsGrid numbers={data.results} />
+          <p className="mt-4 text-xs text-muted-foreground">
+            中奖号码高亮、「查看我的中奖情况」跳转注单并按该期筛选：见实施计划 docs/06 §11.7、§14.3「承接阶段
+            3」（界面 §4.6）。
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/src/features/results/draw-results-list-screen.tsx
+++ b/src/features/results/draw-results-list-screen.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+import { getDrawResults } from "@/api/draw";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { formatLotteryInstant } from "@/lib/player-datetime";
+import type { DrawResultListItem } from "@/types/api/draw-results";
+
+/** §4.6 历史列表 + 默认最新一期入口 */
+export function DrawResultsListScreen() {
+  const [items, setItems] = useState<DrawResultListItem[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [date, setDate] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const fetchList = useCallback(async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await getDrawResults({
+        page: 1,
+        size: 30,
+        business_date: /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : undefined,
+      });
+      setItems(res.items);
+    } catch {
+      setError("加载失败");
+      setItems(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [date]);
+
+  useEffect(() => {
+    void fetchList();
+  }, [fetchList]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+        <div className="flex flex-1 flex-col gap-1.5">
+          <Label htmlFor="biz-date">按业务日筛选</Label>
+          <Input
+            id="biz-date"
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            className="max-w-xs"
+          />
+        </div>
+        <Button type="button" variant="secondary" size="sm" onClick={() => void fetchList()}>
+          应用
+        </Button>
+      </div>
+
+      {loading ? (
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-24 w-full" />
+          </CardContent>
+        </Card>
+      ) : error ? (
+        <Card className="border-destructive/40">
+          <CardHeader>
+            <CardTitle className="text-base">开奖结果</CardTitle>
+            <CardDescription>{error}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button type="button" size="sm" onClick={() => void fetchList()}>
+              重试
+            </Button>
+          </CardContent>
+        </Card>
+      ) : items && items.length === 0 ? (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">开奖结果</CardTitle>
+            <CardDescription>暂无开奖结果</CardDescription>
+          </CardHeader>
+        </Card>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {items?.map((row) => (
+            <Card key={row.draw_no}>
+              <CardHeader className="pb-2">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <CardTitle className="font-mono text-base">{row.draw_no}</CardTitle>
+                  <Link
+                    href={`/results/${encodeURIComponent(row.draw_no)}`}
+                    className="text-sm font-medium text-primary underline-offset-4 hover:underline"
+                  >
+                    查看详情 →
+                  </Link>
+                </div>
+                <CardDescription className="font-mono text-xs">
+                  开奖时间：
+                  {formatLotteryInstant(row.draw_time_iso ?? row.draw_time ?? null)}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="grid grid-cols-3 gap-2 text-center font-mono text-sm">
+                <div className="rounded-md border bg-card py-2">
+                  <div className="text-[10px] uppercase text-muted-foreground">1st</div>
+                  <div className="font-semibold">{row.results["1st"]}</div>
+                </div>
+                <div className="rounded-md border bg-card py-2">
+                  <div className="text-[10px] uppercase text-muted-foreground">2nd</div>
+                  <div className="font-semibold">{row.results["2nd"]}</div>
+                </div>
+                <div className="rounded-md border bg-card py-2">
+                  <div className="text-[10px] uppercase text-muted-foreground">3rd</div>
+                  <div className="font-semibold">{row.results["3rd"]}</div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/features/results/twenty-three-results-grid.tsx
+++ b/src/features/results/twenty-three-results-grid.tsx
@@ -0,0 +1,53 @@
+import type { DrawResultsNumbers } from "@/types/api/draw-results";
+
+type TwentyThreeResultsGridProps = {
+  numbers: DrawResultsNumbers;
+};
+
+/**
+ * §4.6 开奖结果页：头/二/三奖 + Starter 10 + Consolation 10
+ */
+export function TwentyThreeResultsGrid({ numbers }: TwentyThreeResultsGridProps) {
+  const starters = numbers.starter ?? [];
+  const consos = numbers.consolation ?? [];
+
+  const cellCls =
+    "flex min-h-[2.75rem] items-center justify-center rounded-md border border-border bg-card font-mono text-base font-semibold tracking-wide tabular-nums";
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-3 gap-2">
+        {(["1st", "2nd", "3rd"] as const).map((key) => (
+          <div key={key} className="flex flex-col gap-1.5 text-center">
+            <span className="text-xs font-medium uppercase text-muted-foreground">
+              {key === "1st" ? "头奖" : key === "2nd" ? "二奖" : "三奖"}
+            </span>
+            <div className={cellCls}>{numbers[key] || "—"}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-foreground">特别奖 (Starter)</p>
+        <div className="grid grid-cols-5 gap-2">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={`s-${i}`} className={cellCls}>
+              {starters[i] ?? "—"}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-foreground">安慰奖 (Consolation)</p>
+        <div className="grid grid-cols-5 gap-2">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={`c-${i}`} className={cellCls}>
+              {consos[i] ?? "—"}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}