Beartaria/CampgroundTickets
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

Scanner: compact 3-cell Adults / Youth / Kids party panel
All checks were successful
Build Android APK / build-apk (push) Successful in 55m8s
Details

Browse source 
Split the party panel into Adults (18+) / Youth (13-16) / Kids (0-12)
so the paid tickets (adults + youth) are both visible, and shrank it
(36px numbers, tighter padding, single-line kid detail) so the confirm
card no longer scrolls on a phone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hank 2026-07-22 03:34:14 +00:00
parent 62231e9b10
commit 60f0908299
1 changed files with 24 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/app/index.tsx
View file

@ -396,30 +396,38 @@ function AdultNames({ names }: { names: string[] }) {
}
/**
* Big Adults / Kids breakdown so gate staff can eyeball the party against the
* ticket — a deterrent for adults signing up under a (free/cheaper) kid bracket.
* Adults = the 18+ bracket; Kids = everyone else (youth 13-16 + all under-13).
* Big Adults / Youth / Kids breakdown so gate staff can eyeball the party
* against the ticket — a deterrent for adults signing up under a (free/cheaper)
* younger bracket. Adults (18+) and Youth (13-16) are the paid tickets; Kids
* (0-12) are free. A detail line breaks the kids into their age bands.
*/
function PartyPanel({ ticket }: { ticket: TicketView }) {
const adults = ticket.ages.find((a) => a.bracket === "Adults")?.count ?? 0;
const kidBrackets = ticket.ages.filter((a) => a.bracket !== "Adults");
const get = (b: string) => ticket.ages.find((a) => a.bracket === b)?.count ?? 0;
const adults = get("Adults");
const youth = get("Youth 13-16");
const kidBrackets = ticket.ages.filter((a) => a.bracket.startsWith("Kids"));
const kids = kidBrackets.reduce((s, a) => s + a.count, 0);
return (
<View style={styles.party}>
<View style={styles.partyRow}>
<View style={styles.partyCell}>
<Text style={styles.partyNum}>{adults}</Text>
<Text style={styles.partyLbl}>{adults === 1 ? "ADULT" : "ADULTS"}</Text>
<Text style={styles.partyLbl}>ADULTS{"\n"}18+</Text>
</View>
<View style={styles.partyDivider} />
<View style={styles.partyCell}>
<Text style={styles.partyNum}>{youth}</Text>
<Text style={styles.partyLbl}>YOUTH{"\n"}13-16</Text>
</View>
<View style={styles.partyDivider} />
<View style={styles.partyCell}>
<Text style={styles.partyNum}>{kids}</Text>
<Text style={styles.partyLbl}>{kids === 1 ? "KID" : "KIDS"}</Text>
<Text style={styles.partyLbl}>KIDS{"\n"}0-12</Text>
</View>
</View>
{kidBrackets.length > 0 && (
<Text style={styles.partyDetail}>
{kidBrackets.map((a) => `${a.count}× ${a.bracket.replace(/^(Kids|Youth)\s*/, "")}`).join(" · ")}
kids: {kidBrackets.map((a) => `${a.count}× ${a.bracket.replace(/^Kids\s*/, "")}`).join(" · ")}
</Text>
)}
</View>
@ -573,18 +581,18 @@ const styles = StyleSheet.create({
backgroundColor: "#1d2a1f",
borderWidth: 2,
borderColor: theme.warn,
borderRadius: 16,
paddingVertical: 18,
paddingHorizontal: 12,
marginTop: 16,
borderRadius: 14,
paddingVertical: 10,
paddingHorizontal: 10,
marginTop: 10,
marginBottom: 2,
},
partyRow: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
partyCell: { flex: 1, alignItems: "center" },
partyNum: { color: theme.text, fontSize: 60, fontWeight: "900", lineHeight: 64 },
partyLbl: { color: theme.warn, fontSize: 15, fontWeight: "800", letterSpacing: 2, marginTop: 2 },
partyDivider: { width: 2, alignSelf: "stretch", backgroundColor: theme.cardBorder, marginVertical: 6 },
partyDetail: { color: theme.textDim, fontSize: 14, textAlign: "center", marginTop: 12, fontWeight: "600" },
partyNum: { color: theme.text, fontSize: 36, fontWeight: "900", lineHeight: 40 },
partyLbl: { color: theme.warn, fontSize: 11, fontWeight: "800", letterSpacing: 0.5, marginTop: 1, textAlign: "center", lineHeight: 13 },
partyDivider: { width: 1.5, height: 42, backgroundColor: theme.cardBorder },
partyDetail: { color: theme.textDim, fontSize: 12, textAlign: "center", marginTop: 8, fontWeight: "600" },
tags: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 8, marginTop: 14 },
tag: { color: "#fff", backgroundColor: "rgba(255,255,255,0.18)", paddingHorizontal: 10, paddingVertical: 5, borderRadius: 999, fontSize: 13, overflow: "hidden" },