mirror of
https://github.com/mudabbir-ahmad/MAD-Treasure-Hunt.git
synced 2026-10-08 03:00:20 +00:00
Refactor UI components: update styles for consistency, changed colour scheme, dont like all the white light colours.
This commit is contained in:
bobbert committed
1 parent
188c581f37
commit
1465a55602
14 files changed
+556
-607
No files matched your search
@@ -7,40 +7,34 @@ import useGameHook from '../../hooks/useGameHook';
|
||||
import {getSession, setSessionTeam} from '../../hooks/SessionStore';
|
||||
|
||||
const TeamScreen = () => {
|
||||
// Initialisation ------------
|
||||
const session = getSession();
|
||||
const isAdmin = session.isAcceptedAdmin;
|
||||
const isBusiness = Boolean(session.isBusiness);
|
||||
const {getLobby, getSubgroup, getTeam, createTeam, joinTeamByCode, getTeamMembers, leaveTeam, getUser, updateUser, updateTeam, getAdminWaitlist} = useGameHook();
|
||||
|
||||
const session = getSession();
|
||||
const isAdmin = session.isAcceptedAdmin;
|
||||
const isBusiness = Boolean(session.isBusiness);
|
||||
const {getLobby, getSubgroup, getTeam, createTeam, joinTeamByCode, getTeamMembers, leaveTeam, getUser, updateUser, updateTeam, getAdminWaitlist} = useGameHook();
|
||||
const [activeTid, setActiveTid] = useState(session.currentTid);
|
||||
const [teamCode, setTeamCode] = useState('');
|
||||
const [team, setTeam] = useState(null);
|
||||
const [members, setMembers] = useState([]);
|
||||
const [memberNames, setMemberNames] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamsDisabled, setTeamsDisabled] = useState(false);
|
||||
const [onAdminWaitlist, setOnAdminWaitlist] = useState(false);
|
||||
const [editingName, setEditingName] = useState(false);
|
||||
const [teamNameDraft, setTeamNameDraft] = useState('');
|
||||
|
||||
// State ----------------------
|
||||
|
||||
const [activeTid, setActiveTid] = useState(session.currentTid);
|
||||
const [teamCode, setTeamCode] = useState('');
|
||||
const [team, setTeam] = useState(null);
|
||||
const [members, setMembers] = useState([]);
|
||||
const [memberNames, setMemberNames] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamsDisabled, setTeamsDisabled] = useState(false);
|
||||
const [onAdminWaitlist, setOnAdminWaitlist] = useState(false);
|
||||
const [editingName, setEditingName] = useState(false);
|
||||
const [teamNameDraft, setTeamNameDraft] = useState('');
|
||||
|
||||
// Handlers -------------------
|
||||
|
||||
const loadTeamData = async (tid) => {
|
||||
const t = await getTeam(tid);
|
||||
setTeam(t);
|
||||
const ms = await getTeamMembers(tid);
|
||||
setMembers(ms || []);
|
||||
const names = {};
|
||||
for (const m of (ms || [])) {
|
||||
const u = await getUser(m.Uid);
|
||||
if (u) names[m.Uid] = u.username;
|
||||
}
|
||||
setMemberNames(names);
|
||||
};
|
||||
const loadTeamData = async (tid) => {
|
||||
const t = await getTeam(tid);
|
||||
setTeam(t);
|
||||
const ms = await getTeamMembers(tid);
|
||||
setMembers(ms || []);
|
||||
const names = {};
|
||||
for (const m of (ms || [])) {
|
||||
const u = await getUser(m.Uid);
|
||||
if (u) names[m.Uid] = u.username;
|
||||
}
|
||||
setMemberNames(names);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
@@ -304,66 +298,64 @@ const styles = StyleSheet.create({
|
||||
center: {justifyContent: 'center', alignItems: 'center'},
|
||||
container: {padding: 0},
|
||||
disabledWrap: {paddingHorizontal: 30, alignItems: 'center', opacity: 0.45},
|
||||
disabledTitle: {fontSize: 20, fontWeight: '700', color: '#6b7280', marginBottom: 10, textAlign: 'center'},
|
||||
disabledBody: {fontSize: 15, color: '#9ca3af', textAlign: 'center'},
|
||||
// Shown when the user has not yet joined a game
|
||||
notInGameText: {color: '#6b7280', fontSize: 15, fontWeight: '600', marginBottom: 16, textAlign: 'center', paddingHorizontal: 20},
|
||||
inputDisabled: {backgroundColor: '#f3f4f6', opacity: 0.5},
|
||||
disabledTitle: {fontSize: 20, fontWeight: '700', color: '#6c7086', marginBottom: 10, textAlign: 'center'},
|
||||
disabledBody: {fontSize: 15, color: '#6c7086', textAlign: 'center'},
|
||||
notInGameText: {color: '#6c7086', fontSize: 15, fontWeight: '600', marginBottom: 16, textAlign: 'center', paddingHorizontal: 20},
|
||||
inputDisabled: {backgroundColor: '#313244', opacity: 0.5},
|
||||
inputRow: {flexDirection: 'row', gap: 10, marginBottom: 15, width: '100%', paddingHorizontal: 20},
|
||||
fullRow: {width: '100%', paddingHorizontal: 20},
|
||||
codeInput: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderColor: '#45475a',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#cdd6f4',
|
||||
backgroundColor: '#313244',
|
||||
},
|
||||
joinButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0, paddingHorizontal: 20},
|
||||
joinLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
createButton: {backgroundColor: '#16a34a', borderColor: '#16a34a'},
|
||||
createLabel: {color: '#ffffff', fontWeight: '600'},
|
||||
joinButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0, paddingHorizontal: 20},
|
||||
joinLabel: {color: '#1e1e2e', fontWeight: '600'},
|
||||
createButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1'},
|
||||
createLabel: {color: '#1e1e2e', fontWeight: '600'},
|
||||
waitlistText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#374151',
|
||||
color: '#cdd6f4',
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 30,
|
||||
},
|
||||
teamHeader: {
|
||||
backgroundColor: '#374151',
|
||||
backgroundColor: '#45475a',
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
teamCodeLabel: {color: '#d1d5db', fontSize: 15, fontWeight: '600'},
|
||||
teamCodeValue: {color: '#ffffff', fontSize: 17, fontWeight: '700', letterSpacing: 2},
|
||||
// Team name / rename section
|
||||
teamNameSection: {paddingHorizontal: 15, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#e5e7eb'},
|
||||
teamNameText: {fontSize: 18, fontWeight: '700', color: '#1f2937', flex: 1},
|
||||
teamCodeLabel: {color: '#bac2de', fontSize: 15, fontWeight: '600'},
|
||||
teamCodeValue: {color: '#cdd6f4', fontSize: 17, fontWeight: '700', letterSpacing: 2},
|
||||
teamNameSection: {paddingHorizontal: 15, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#45475a'},
|
||||
teamNameText: {fontSize: 18, fontWeight: '700', color: '#cdd6f4', flex: 1},
|
||||
renameRow: {flexDirection: 'row', alignItems: 'center', gap: 8},
|
||||
renameInput: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderColor: '#45475a',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
fontSize: 16,
|
||||
color: '#1f2937',
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#cdd6f4',
|
||||
backgroundColor: '#313244',
|
||||
},
|
||||
renameButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', flex: 0, minHeight: 36, paddingHorizontal: 14},
|
||||
renameLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
renameSaveButton: {backgroundColor: '#16a34a', borderColor: '#16a34a', flex: 0, minHeight: 36, paddingHorizontal: 12},
|
||||
renameSaveLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
renameCancelButton: {backgroundColor: '#6b7280', borderColor: '#6b7280', flex: 0, minHeight: 36, paddingHorizontal: 12},
|
||||
renameCancelLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
renameButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0, minHeight: 36, paddingHorizontal: 14},
|
||||
renameLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
|
||||
renameSaveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1', flex: 0, minHeight: 36, paddingHorizontal: 12},
|
||||
renameSaveLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
|
||||
renameCancelButton: {backgroundColor: '#6c7086', borderColor: '#6c7086', flex: 0, minHeight: 36, paddingHorizontal: 12},
|
||||
renameCancelLabel: {color: '#cdd6f4', fontWeight: '600', fontSize: 13},
|
||||
memberList: {flex: 1, paddingHorizontal: 15, paddingTop: 10},
|
||||
memberRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -371,8 +363,16 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
memberInfo: {flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6},
|
||||
memberName: {fontSize: 16, color: '#1f2937', fontWeight: '600'},
|
||||
leaderBadge: {fontSize: 12, color: '#2563eb', fontWeight: '700'},
|
||||
memberName: {fontSize: 16, color: '#cdd6f4', fontWeight: '600'},
|
||||
leaderBadge: {fontSize: 12, color: '#89b4fa', fontWeight: '700'},
|
||||
kickButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 0, paddingHorizontal: 14},
|
||||
kickLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
|
||||
emptyText: {color: '#6c7086', textAlign: 'center', marginTop: 30, fontSize: 14},
|
||||
leaveWrap: {paddingHorizontal: 0, paddingTop: 10, paddingBottom: 16},
|
||||
leaveButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8'},
|
||||
leaveLabel: {color: '#1e1e2e', fontWeight: '600'},
|
||||
selfCard: {backgroundColor: 'rgba(166, 227, 161, 0.15)', borderColor: '#a6e3a1'},
|
||||
});
|
||||
kickButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 0, paddingHorizontal: 14},
|
||||
kickLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
|
||||
emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
|
||||
|
||||
Reference in new issue
Block a user