mirror of
https://github.com/mudabbir-ahmad/MAD-Treasure-Hunt.git
synced 2026-10-08 03:00:20 +00:00
added entities
added Cache, Event and Find entities for pressable and scrollable components
This commit is contained in:
1 parent
4d5eac38b7
commit
6e25fe6807
6 files changed
+328
No files matched your search
Vendored
+89
@@ -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;
|
||||||
Vendored
+28
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
Reference in new issue
Block a user