115 lines
4.4 KiB
TypeScript
115 lines
4.4 KiB
TypeScript
// Deterministic per-room theming: background image + accent color.
|
|
|
|
import type { CSSProperties } from "react"
|
|
import type { CalendarEvent, SignupStatus } from "./types"
|
|
|
|
const ROOM_BACKGROUNDS = [
|
|
"/backgrounds/room-1.png",
|
|
"/backgrounds/room-2.png",
|
|
"/backgrounds/room-3.png",
|
|
"/backgrounds/room-4.png",
|
|
"/backgrounds/room-5.png",
|
|
]
|
|
|
|
export const ALL_ROOMS_BACKGROUND = "/backgrounds/all-rooms.png"
|
|
|
|
// Tailwind background classes used to color-code events per room.
|
|
const ROOM_COLORS = [
|
|
{ bg: "bg-blue-500", dot: "bg-blue-500", ring: "ring-blue-400" },
|
|
{ bg: "bg-emerald-500", dot: "bg-emerald-500", ring: "ring-emerald-400" },
|
|
{ bg: "bg-purple-500", dot: "bg-purple-500", ring: "ring-purple-400" },
|
|
{ bg: "bg-orange-500", dot: "bg-orange-500", ring: "ring-orange-400" },
|
|
{ bg: "bg-pink-500", dot: "bg-pink-500", ring: "ring-pink-400" },
|
|
{ bg: "bg-cyan-500", dot: "bg-cyan-500", ring: "ring-cyan-400" },
|
|
{ bg: "bg-amber-500", dot: "bg-amber-500", ring: "ring-amber-400" },
|
|
{ bg: "bg-teal-500", dot: "bg-teal-500", ring: "ring-teal-400" },
|
|
]
|
|
|
|
export function getRoomBackground(roomId: number | null): string {
|
|
if (roomId === null) return ALL_ROOMS_BACKGROUND
|
|
return ROOM_BACKGROUNDS[roomId % ROOM_BACKGROUNDS.length]
|
|
}
|
|
|
|
// Guarded against null/undefined/NaN room ids (e.g. personal blocks that
|
|
// arrive without a valid room_id) so we never hand back an undefined color,
|
|
// which previously rendered as no background color at all.
|
|
export function getRoomColor(roomId: number | null | undefined) {
|
|
const id = typeof roomId === "number" && Number.isFinite(roomId) ? roomId : 0
|
|
const idx = ((id % ROOM_COLORS.length) + ROOM_COLORS.length) % ROOM_COLORS.length
|
|
return ROOM_COLORS[idx]
|
|
}
|
|
|
|
// ---------- Event coloring by type / status / RSVP ----------
|
|
//
|
|
// Confirmed and busy events each pick a color from a small themed pool,
|
|
// deterministically by room so the same room always looks the same.
|
|
// Private, proposed, declined and cancelled get one fixed look each so
|
|
// they're recognizable at a glance regardless of room.
|
|
|
|
export interface EventStyle {
|
|
bg: string
|
|
ring: string
|
|
/** Dashed border — signals "not yet settled" (pending proposal). */
|
|
dashed?: boolean
|
|
/** Diagonal hatch pattern — signals "you've declined this". */
|
|
striped?: boolean
|
|
/** Reduced opacity — signals "you're not going". */
|
|
muted?: boolean
|
|
/** Outline only, transparent fill — signals "private, details hidden". */
|
|
outline?: boolean
|
|
}
|
|
|
|
const CONFIRMED_PALETTE = [
|
|
{ bg: "bg-emerald-500", ring: "ring-emerald-400" },
|
|
{ bg: "bg-blue-500", ring: "ring-blue-400" },
|
|
{ bg: "bg-purple-500", ring: "ring-purple-400" },
|
|
]
|
|
|
|
const BUSY_PALETTE = [
|
|
{ bg: "bg-orange-500", ring: "ring-orange-400" },
|
|
{ bg: "bg-yellow-400", ring: "ring-yellow-300" },
|
|
{ bg: "bg-red-500", ring: "ring-red-400" },
|
|
]
|
|
|
|
function pickFromPalette(
|
|
palette: { bg: string; ring: string }[],
|
|
roomId: number | null | undefined,
|
|
) {
|
|
const id = typeof roomId === "number" && Number.isFinite(roomId) ? roomId : 0
|
|
const idx = ((id % palette.length) + palette.length) % palette.length
|
|
return palette[idx]
|
|
}
|
|
|
|
const PRIVATE_STYLE: EventStyle = { bg: "bg-white/10", ring: "ring-white/60", outline: true }
|
|
const PROPOSED_STYLE: EventStyle = { bg: "bg-white/25", ring: "ring-white/50", dashed: true }
|
|
const CANCELLED_STYLE: EventStyle = { bg: "bg-red-500", ring: "ring-red-400" }
|
|
const DECLINED_STYLE: EventStyle = {
|
|
bg: "bg-neutral-500",
|
|
ring: "ring-neutral-400",
|
|
striped: true,
|
|
muted: true,
|
|
}
|
|
|
|
// Inline CSS for diagonal hatch patterns — Tailwind has no built-in
|
|
// striped-background utility, so this is applied via style prop.
|
|
export const STRIPE_STYLE: CSSProperties = {
|
|
backgroundImage:
|
|
"repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 6px, transparent 6px, transparent 12px)",
|
|
}
|
|
|
|
export function getEventStyle(
|
|
event: Pick<CalendarEvent, "type" | "status" | "room_id">,
|
|
myResponse: SignupStatus | undefined,
|
|
): EventStyle {
|
|
if (event.type === "private") return PRIVATE_STYLE
|
|
if (event.type === "busy") return pickFromPalette(BUSY_PALETTE, event.room_id)
|
|
|
|
// Proposal-type events: colored by where they stand.
|
|
if (event.status === "cancelled") return CANCELLED_STYLE
|
|
if (myResponse === "declined") return DECLINED_STYLE
|
|
if (event.status === "proposed" || event.status === "draft") return PROPOSED_STYLE
|
|
|
|
// Confirmed proposal: pick from the confirmed palette, by room.
|
|
return pickFromPalette(CONFIRMED_PALETTE, event.room_id)
|
|
}
|