added entities

added Cache, Event and Find entities for pressable and scrollable components
This commit is contained in:
suddenlyoranges committed 2026-04-09 14:52:56 +01:00
1 parent 4d5eac38b7
commit 6e25fe6807
6 files changed
+328

No files matched your search

+89
View File
@@ -0,0 +1,89 @@
import { Pressable, StyleSheet, Text, View } from "react-native";
const CacheItem = ({ cache, isFound, onSelect }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
const handleSelect = () => {
onSelect(cache);
};
// View --------------------------------
return (
<Pressable
onPress={handleSelect}
style={({ pressed }) => [styles.item, pressed && styles.pressedItem]}
>
<View style={styles.row}>
<Text style={styles.name} numberOfLines={1}>
{cache.CacheName}
</Text>
<View
style={[styles.badge, isFound ? styles.badgeFound : styles.badgeOpen]}
>
<Text style={styles.badgeText}>{isFound ? "Found" : "Open"}</Text>
</View>
</View>
{cache.CacheClue ? (
<Text style={styles.clue} numberOfLines={2}>
{cache.CacheClue}
</Text>
) : null}
<Text style={styles.points}>Points: {cache.CachePoints ?? 0}</Text>
</Pressable>
);
};
const styles = StyleSheet.create({
item: {
paddingVertical: 14,
paddingHorizontal: 2,
borderTopWidth: 1,
borderColor: "lightgray",
gap: 4,
},
pressedItem: {
backgroundColor: "#f0f9ff",
},
row: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
name: {
fontSize: 16,
fontWeight: "600",
color: "#111827",
flex: 1,
marginRight: 8,
},
clue: {
fontSize: 13,
color: "#6b7280",
},
points: {
fontSize: 12,
fontWeight: "500",
color: "#2563eb",
},
badge: {
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 10,
},
badgeFound: {
backgroundColor: "#d1fae5",
},
badgeOpen: {
backgroundColor: "#fef3c7",
},
badgeText: {
fontSize: 11,
fontWeight: "600",
color: "#374151",
},
});
export default CacheItem;
+28
View File
@@ -0,0 +1,28 @@
import { ScrollView, StyleSheet } from "react-native";
import CacheItem from "./CacheItem";
const CacheList = ({ caches, foundCacheIds, onSelect }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
// View --------------------------------
return (
<ScrollView style={styles.container}>
{caches.map((cache) => (
<CacheItem
key={cache.CacheID}
cache={cache}
isFound={foundCacheIds.includes(cache.CacheID)}
onSelect={onSelect}
/>
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {},
});
export default CacheList;
+100
View File
@@ -0,0 +1,100 @@
import { Pressable, StyleSheet, Text, View } from "react-native";
const EventItem = ({ event, onSelect }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
const handleSelect = () => {
onSelect(event);
};
const formatDate = (dt) => {
if (!dt) return "—";
return new Date(dt).toLocaleDateString();
};
// View --------------------------------
return (
<Pressable
onPress={handleSelect}
style={({ pressed }) => [styles.item, pressed && styles.pressedItem]}
>
<View style={styles.row}>
<Text style={styles.name} numberOfLines={1}>
{event.EventName}
</Text>
<View
style={[
styles.badge,
event.EventIspublic ? styles.badgePublic : styles.badgePrivate,
]}
>
<Text style={styles.badgeText}>
{event.EventIspublic ? "Public" : "Private"}
</Text>
</View>
</View>
{event.EventDescription ? (
<Text style={styles.description} numberOfLines={2}>
{event.EventDescription}
</Text>
) : null}
<Text style={styles.meta}>
{formatDate(event.EventStart)} — {formatDate(event.EventFinish)}
</Text>
</Pressable>
);
};
const styles = StyleSheet.create({
item: {
paddingVertical: 14,
paddingHorizontal: 2,
borderTopWidth: 1,
borderColor: "lightgray",
gap: 4,
},
pressedItem: {
backgroundColor: "#f0f9ff",
},
row: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
name: {
fontSize: 16,
fontWeight: "600",
color: "#111827",
flex: 1,
marginRight: 8,
},
description: {
fontSize: 13,
color: "#6b7280",
},
meta: {
fontSize: 12,
color: "#9ca3af",
},
badge: {
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 10,
},
badgePublic: {
backgroundColor: "#dcfce7",
},
badgePrivate: {
backgroundColor: "#f3f4f6",
},
badgeText: {
fontSize: 11,
fontWeight: "600",
color: "#374151",
},
});
export default EventItem;
+23
View File
@@ -0,0 +1,23 @@
import { ScrollView, StyleSheet } from "react-native";
import EventItem from "./EventItem";
const EventList = ({ events, onSelect }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
// View --------------------------------
return (
<ScrollView style={styles.container}>
{events.map((event) => (
<EventItem key={event.EventID} event={event} onSelect={onSelect} />
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {},
});
export default EventList;
+65
View File
@@ -0,0 +1,65 @@
import { StyleSheet, Text, View } from "react-native";
const FindItem = ({ find }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
const formatDate = (dt) => {
if (!dt) return "—";
return new Date(dt).toLocaleString();
};
const cacheName = find.FindCache?.CacheName ?? `Cache #${find.FindCacheID}`;
const points = find.FindCache?.CachePoints ?? 0;
const username =
find.FindPlayer?.PlayerUser?.UserUsername ?? `Player #${find.FindPlayerID}`;
// View --------------------------------
return (
<View style={styles.item}>
<View style={styles.row}>
<Text style={styles.cacheName} numberOfLines={1}>
{cacheName}
</Text>
<Text style={styles.points}>+{points} pts</Text>
</View>
<Text style={styles.meta}>
{username} · {formatDate(find.FindDatetime)}
</Text>
</View>
);
};
const styles = StyleSheet.create({
item: {
paddingVertical: 12,
borderTopWidth: 1,
borderColor: "lightgray",
gap: 3,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
cacheName: {
fontSize: 15,
fontWeight: "600",
color: "#111827",
flex: 1,
marginRight: 8,
},
points: {
fontSize: 14,
fontWeight: "700",
color: "#16a34a",
},
meta: {
fontSize: 12,
color: "#9ca3af",
},
});
export default FindItem;
+23
View File
@@ -0,0 +1,23 @@
import { ScrollView, StyleSheet } from "react-native";
import FindItem from "./FindItem";
const FindList = ({ finds }) => {
// Initialisations ---------------------
// State -------------------------------
// Handlers ----------------------------
// View --------------------------------
return (
<ScrollView style={styles.container}>
{finds.map((find) => (
<FindItem key={find.FindID} find={find} />
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {},
});
export default FindList;