feat(jogo): expediente dos mortos, jogo de zumbis em primeira pessoa

Etapa 1 inteira (logica com 100% de cobertura, cena 3D, toque, sons, bancada de desempenho, e2e) e a base da etapa 2 (mapa novo no Tiled, texturas, imagens dos itens, sons conferidos, golpe recortado e medido). Pagina /jogo fora do menu e do sitemap ate a medicao no celular.
2026-11-10 19:37:10 -03:00
1 parent c7d09d63d4
commit 67b32fcab3
@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import {
+  pageTop,
+  primaryButton,
+  secondaryButtonDark,
+  textLinkDark,
+} from "@/app/components/button-styles";
+import { problemaPorId } from "@/lib/jogo/problemas";
+import { buildWhatsAppUrl } from "@/lib/whatsapp";
+import type { Resultado } from "./contrato";
+
+type Props = {
+  resultado: Resultado;
+  aoJogarDeNovo(): void;
+};
+
+export default function Relatorio({ resultado, aoJogarDeNovo }: Props) {
+  const titulo = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    titulo.current?.focus();
+  }, []);
+
+  const escolhido = problemaPorId(resultado.problemaId);
+  const resolvidos = resultado.resolvidos.flatMap((id) => {
+    const problema = problemaPorId(id);
+    return problema ? [problema] : [];
+  });
+  const mensagem = escolhido
+    ? `Oi, Evandro. Joguei o Expediente dos Mortos e o meu problema é: ${escolhido.nome}. Podemos conversar?`
+    : "";
+
+  return (
+    <section
+      aria-labelledby="relatorio-titulo"
+      className={`bg-[var(--ink)] px-sp-6 pb-sp-16 pt-[calc(var(--site-header-height)+var(--sp-12))] font-display text-[#f4f2ed] lg:px-sp-12 ${pageTop}`}
+    >
+      <div className="ds-section-shell">
+        <h1
+          id="relatorio-titulo"
+          ref={titulo}
+          tabIndex={-1}
+          className="text-[clamp(32px,6vw,64px)] font-semibold leading-none tracking-[-0.04em] outline-none"
+        >
+          {resultado.vitoria
+            ? "Problemas resolvidos"
+            : "Os problemas venceram desta vez"}
+        </h1>
+        <p className="mt-sp-6 text-[20px] font-medium leading-[1.3]">
+          Você {resultado.placar.jogador} · Drones {resultado.placar.drones}
+        </p>
+
+        {resolvidos.length > 0 ? (
+          <div className="mt-sp-10">
+            <h2 className="text-[24px] font-semibold leading-[1.15] tracking-[-0.02em]">
+              O que você resolveu
+            </h2>
+            <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
+              {resolvidos.map((problema) => (
+                <li key={problema.id} className="border border-white/25 p-sp-4">
+                  <h3 className="text-[18px] font-semibold leading-[1.25]">
+                    {problema.nome}
+                  </h3>
+                  <p className="mt-sp-1 text-[16px] leading-[1.5] text-[rgba(244,242,237,.72)]">
+                    {problema.solucao}
+                  </p>
+                  <Link
+                    href={problema.destino}
+                    className={`${textLinkDark} mt-sp-2`}
+                  >
+                    Ver como eu resolvo isso
+                    <span className="sr-only">: {problema.nome}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        {escolhido ? (
+          <div className="mt-sp-10 max-w-[44rem] border border-[var(--slash)] p-sp-6">
+            <h2 className="text-[24px] font-semibold leading-[1.15] tracking-[-0.02em]">
+              O chefão era o seu problema
+            </h2>
+            <p className="mt-sp-3 text-[18px] font-medium leading-[1.4]">
+              {escolhido.nome}
+            </p>
+            <p className="mt-sp-1 text-[16px] leading-[1.5] text-[rgba(244,242,237,.72)]">
+              {escolhido.solucao}
+            </p>
+            <div className="mt-sp-6">
+              <a
+                href={buildWhatsAppUrl(mensagem)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${primaryButton} !bg-[var(--whatsapp)] rounded-full`}
+              >
+                Chamar no WhatsApp
+              </a>
+            </div>
+          </div>
+        ) : null}
+
+        <div className="mt-sp-10">
+          <button
+            type="button"
+            onClick={aoJogarDeNovo}
+            className={secondaryButtonDark}
+          >
+            Jogar de novo
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}