Ajout d'un système de support pour les conditions d'Apple
This commit is contained in:
parent
5f2c8e11ed
commit
9bc829d572
5 changed files with 587 additions and 0 deletions
307
front/support.css
Normal file
307
front/support.css
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700&family=Golos+Text:wght@400;500;600&display=swap");
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--support-ink: #1f1b16;
|
||||
--support-muted: #5a4f44;
|
||||
--support-paper: #f6efe7;
|
||||
--support-soft: #efe5d7;
|
||||
--support-accent: #e39b43;
|
||||
--support-coral: #c96245;
|
||||
--support-teal: #2e6e74;
|
||||
--support-cream: #fffaf2;
|
||||
--support-border: rgba(44, 34, 26, 0.2);
|
||||
--support-shadow: 0 24px 60px rgba(30, 20, 12, 0.18);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.page-support {
|
||||
margin: 0;
|
||||
font-family: "Golos Text", "Segoe UI", sans-serif;
|
||||
background: radial-gradient(circle at 90% -10%, #ffe7c7, transparent 60%),
|
||||
radial-gradient(circle at 10% 15%, #dfeef2, transparent 55%),
|
||||
radial-gradient(circle at 70% 80%, #fbdac6, transparent 55%),
|
||||
var(--support-paper);
|
||||
color: var(--support-ink);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body.page-support::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0.05) 40%,
|
||||
transparent 100%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(31, 27, 22, 0.04) 0px,
|
||||
rgba(31, 27, 22, 0.04) 1px,
|
||||
transparent 1px,
|
||||
transparent 28px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.support {
|
||||
width: min(1100px, 92vw);
|
||||
margin: 0 auto;
|
||||
padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem;
|
||||
display: grid;
|
||||
gap: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.support__hero {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
align-items: start;
|
||||
padding: clamp(2rem, 5vw, 3rem);
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(140deg, #fff4e5, #f7e4cf 60%, #fbe8d6 100%);
|
||||
border: 1px solid rgba(31, 27, 22, 0.12);
|
||||
box-shadow: var(--support-shadow);
|
||||
}
|
||||
|
||||
.support__badge {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--support-muted);
|
||||
background: rgba(31, 27, 22, 0.08);
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.support__back {
|
||||
text-decoration: none;
|
||||
color: var(--support-teal);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.support__back::before {
|
||||
content: "<";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.support__hero h1 {
|
||||
font-family: "Bricolage Grotesque", "Golos Text", sans-serif;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.support__hero p {
|
||||
margin: 0;
|
||||
color: var(--support-muted);
|
||||
max-width: 55ch;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.support__grid {
|
||||
display: grid;
|
||||
gap: clamp(2rem, 4vw, 3rem);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.support__info {
|
||||
display: grid;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: var(--support-cream);
|
||||
border: 1px solid var(--support-border);
|
||||
border-radius: 22px;
|
||||
padding: 1.4rem 1.6rem;
|
||||
box-shadow: 0 18px 40px rgba(35, 24, 15, 0.08);
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
font-family: "Bricolage Grotesque", "Golos Text", sans-serif;
|
||||
margin: 0 0 0.8rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
color: var(--support-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-card.accent {
|
||||
border-color: rgba(227, 155, 67, 0.5);
|
||||
background: linear-gradient(140deg, #fff6e9, #f9e6ce);
|
||||
}
|
||||
|
||||
.info-card.link-card {
|
||||
background: #1d2128;
|
||||
color: #fef4e5;
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.info-card.link-card p {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #fff1d5;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-link::after {
|
||||
content: ">";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.support__form {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(31, 27, 22, 0.12);
|
||||
padding: clamp(1.8rem, 4vw, 2.6rem);
|
||||
box-shadow: var(--support-shadow);
|
||||
backdrop-filter: blur(10px);
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.form-head {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.form-head h2 {
|
||||
font-family: "Bricolage Grotesque", "Golos Text", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.9rem;
|
||||
color: var(--support-muted);
|
||||
}
|
||||
|
||||
.status.success {
|
||||
color: var(--support-teal);
|
||||
}
|
||||
|
||||
.status.error {
|
||||
color: var(--support-coral);
|
||||
}
|
||||
|
||||
.status.sending {
|
||||
color: var(--support-accent);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
font-weight: 600;
|
||||
color: var(--support-ink);
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field textarea {
|
||||
font: inherit;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(31, 27, 22, 0.2);
|
||||
background: #fffaf4;
|
||||
color: var(--support-ink);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.field textarea {
|
||||
resize: vertical;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.field input:focus-visible,
|
||||
.field textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgba(46, 110, 116, 0.9);
|
||||
box-shadow: 0 0 0 3px rgba(46, 110, 116, 0.2);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.send {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.9rem 1.8rem;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
color: #1d1a14;
|
||||
background: linear-gradient(130deg, #f5c66c, #f0a85f 50%, #dd8d4f);
|
||||
box-shadow: 0 12px 26px rgba(221, 141, 79, 0.4);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.send:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 16px 30px rgba(221, 141, 79, 0.5);
|
||||
}
|
||||
|
||||
.send:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 0.85rem;
|
||||
color: var(--support-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.support__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.support {
|
||||
width: min(92vw, 520px);
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.support__hero {
|
||||
padding: 1.8rem;
|
||||
}
|
||||
|
||||
.support__form {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
16
front/support.html
Normal file
16
front/support.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<title>Negopoly | Support</title>
|
||||
<link rel="stylesheet" href="./support.css" />
|
||||
</head>
|
||||
<body class="page-support">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./support.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
192
front/support.tsx
Normal file
192
front/support.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
import React, { useMemo, useState } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./support.css";
|
||||
|
||||
type FormState = {
|
||||
name: string;
|
||||
email: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
type Status = "idle" | "sending" | "success" | "error";
|
||||
|
||||
const tips = [
|
||||
"Session code or lobby name",
|
||||
"What you were trying to do",
|
||||
"Anything that looked broken or confusing",
|
||||
];
|
||||
|
||||
const contactNotes = [
|
||||
"Messages are routed to the Negopoly support desk.",
|
||||
"Add an email if you want a reply.",
|
||||
"No account needed. Just send and go.",
|
||||
];
|
||||
|
||||
const MAX_NAME_LENGTH = 80;
|
||||
const MAX_EMAIL_LENGTH = 120;
|
||||
const MAX_MESSAGE_LENGTH = 2000;
|
||||
|
||||
function Support() {
|
||||
const [form, setForm] = useState<FormState>({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
const [status, setStatus] = useState<Status>("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const canSubmit = useMemo(() => {
|
||||
return (
|
||||
status !== "sending" &&
|
||||
form.name.trim().length > 0 &&
|
||||
form.email.trim().length > 0 &&
|
||||
form.message.trim().length > 0
|
||||
);
|
||||
}, [form, status]);
|
||||
|
||||
const statusLabel = useMemo(() => {
|
||||
if (status === "success") return "Message sent. We'll follow up if you left contact info.";
|
||||
if (status === "error") return error ?? "Something went wrong. Try again in a moment.";
|
||||
if (status === "sending") return "Sending your message...";
|
||||
return "We only use your contact info to reply to this request.";
|
||||
}, [status, error]);
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
setStatus("sending");
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/support", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: form.name,
|
||||
email: form.email,
|
||||
message: form.message,
|
||||
}),
|
||||
});
|
||||
|
||||
const payload = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(payload?.message ?? "Unable to send message.");
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setForm({ name: "", email: "", message: "" });
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unable to send message.";
|
||||
setStatus("error");
|
||||
setError(message);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="support">
|
||||
<header className="support__hero">
|
||||
<div className="support__badge">NegoCity support desk</div>
|
||||
<div>
|
||||
<a className="support__back" href="/">
|
||||
Back to NegoCity
|
||||
</a>
|
||||
<h1>Support, reports, and lost deals.</h1>
|
||||
<p>
|
||||
Tell us what went wrong, what you need, or where the Banker needs a hand. We will read
|
||||
every message that lands in the support vault.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="support__grid">
|
||||
<div className="support__info">
|
||||
<div className="info-card">
|
||||
<h2>What to include</h2>
|
||||
<ul>
|
||||
{tips.map((tip) => (
|
||||
<li key={tip}>{tip}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info-card accent">
|
||||
<h2>How this works</h2>
|
||||
<ul>
|
||||
{contactNotes.map((note) => (
|
||||
<li key={note}>{note}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info-card link-card">
|
||||
<h2>Need the rules instead?</h2>
|
||||
<p>Head to the full guide to get back into the game quickly.</p>
|
||||
<a className="info-link" href="/rules">
|
||||
View the rulebook
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="support__form" onSubmit={handleSubmit}>
|
||||
<div className="form-head">
|
||||
<h2>Send a message</h2>
|
||||
<span className={`status ${status}`} role="status" aria-live="polite">
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<label className="field">
|
||||
<span>Name</span>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
autoComplete="name"
|
||||
placeholder="Your name"
|
||||
maxLength={MAX_NAME_LENGTH}
|
||||
value={form.name}
|
||||
onChange={(event) => setForm({ ...form, name: event.target.value })}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Email</span>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
placeholder="you@email.com"
|
||||
maxLength={MAX_EMAIL_LENGTH}
|
||||
value={form.email}
|
||||
onChange={(event) => setForm({ ...form, email: event.target.value })}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Message</span>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Describe what you need, the session code, and anything else we should know."
|
||||
rows={6}
|
||||
maxLength={MAX_MESSAGE_LENGTH}
|
||||
value={form.message}
|
||||
onChange={(event) => setForm({ ...form, message: event.target.value })}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="send" disabled={!canSubmit}>
|
||||
{status === "sending" ? "Sending..." : "Send message"}
|
||||
</button>
|
||||
<span className="char-count">
|
||||
{form.message.length}/{MAX_MESSAGE_LENGTH}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = createRoot(document.getElementById("root")!);
|
||||
root.render(<Support />);
|
||||
2
index.ts
2
index.ts
|
|
@ -2,6 +2,7 @@ import home from "./front/index.html";
|
|||
import play from "./front/play.html";
|
||||
import privacy from "./front/privacy.html";
|
||||
import rules from "./front/rules.html";
|
||||
import support from "./front/support.html";
|
||||
import { apiRoutes } from "./server/api";
|
||||
import { handleSocketMessage, registerSocket, unregisterSocket } from "./server/websocket";
|
||||
|
||||
|
|
@ -20,6 +21,7 @@ const server = Bun.serve({
|
|||
"/privacy": privacy,
|
||||
"/rules": Response.redirect("/rules/basics"),
|
||||
"/rules/:tab": rules,
|
||||
"/support": support,
|
||||
"/play": play,
|
||||
"/play/:sessionId": play,
|
||||
"/play/:sessionId/lobby": play,
|
||||
|
|
|
|||
|
|
@ -27,6 +27,18 @@ async function readJson<T>(req: Request): Promise<T> {
|
|||
return (await req.json()) as T;
|
||||
}
|
||||
|
||||
function clampLine(value: string, maxLength: number): string {
|
||||
return value.trim().replace(/\s+/g, " ").slice(0, maxLength);
|
||||
}
|
||||
|
||||
function clampMessage(value: string, maxLength: number): string {
|
||||
return value.trim().slice(0, maxLength);
|
||||
}
|
||||
|
||||
function isValidEmail(value: string): boolean {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||||
}
|
||||
|
||||
function previewSession(session: SessionSnapshot) {
|
||||
return {
|
||||
sessionId: session.id,
|
||||
|
|
@ -71,6 +83,64 @@ export const apiRoutes = {
|
|||
return jsonResponse({ ok: true });
|
||||
},
|
||||
},
|
||||
"/api/support": {
|
||||
async POST(req: BunRequest) {
|
||||
let body: { name?: string; email?: string; message?: string };
|
||||
try {
|
||||
body = await readJson<{ name?: string; email?: string; message?: string }>(req);
|
||||
} catch {
|
||||
return jsonResponse({ message: "Invalid request body" }, 400);
|
||||
}
|
||||
|
||||
const name = clampLine(body.name ?? "", 80);
|
||||
const email = clampLine(body.email ?? "", 120);
|
||||
const message = clampMessage(body.message ?? "", 2000);
|
||||
|
||||
if (!name || !email || !message) {
|
||||
return jsonResponse({ message: "Name, email, and message are required" }, 400);
|
||||
}
|
||||
if (!isValidEmail(email)) {
|
||||
return jsonResponse({ message: "Invalid email address" }, 400);
|
||||
}
|
||||
|
||||
const webhookUrl = process.env.DISCORD_SUPPORT_WEBHOOK_URL;
|
||||
if (!webhookUrl) {
|
||||
return jsonResponse({ message: "Support webhook not configured" }, 500);
|
||||
}
|
||||
|
||||
const userAgent = (req.headers.get("user-agent") ?? "unknown").slice(0, 180);
|
||||
const payload = {
|
||||
username: "Negopoly Support",
|
||||
embeds: [
|
||||
{
|
||||
title: "New support request",
|
||||
color: 0xe39b43,
|
||||
fields: [
|
||||
{ name: "Name", value: name, inline: true },
|
||||
{ name: "Email", value: email, inline: true },
|
||||
],
|
||||
description: message,
|
||||
footer: { text: `User agent: ${userAgent}` },
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const response = await fetch(webhookUrl, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text().catch(() => "");
|
||||
console.error("Support webhook failed:", response.status, errorText);
|
||||
return jsonResponse({ message: "Failed to forward support request" }, 502);
|
||||
}
|
||||
|
||||
return jsonResponse({ ok: true });
|
||||
},
|
||||
},
|
||||
"/api/session": {
|
||||
async POST(req: BunRequest) {
|
||||
let body: { bankerName?: string };
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue