react-native-paper#ProgressBar JavaScript Examples
The following examples show how to use
react-native-paper#ProgressBar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: compatibility.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
Bars = ({ name, icon, end }) => {
const { colors } = useTheme();
return (
<>
<View style={styles.mathProgressText}>
<Button theme={{ colors: { primary: colors.text } }} icon={icon}>
{i18n.t(name)}
</Button>
<Text>{end}%</Text>
</View>
<ProgressBar progress={end / 100} style={styles.matchProgressBar} />
</>
);
}
Example #2
| Source File: daily.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
ProgressItem = ({ text, percent, style }) => {
const { colors } = useTheme();
return (
<View style={[{ flex: 1 }, style]}>
<Text style={ProgressItemStyles.text}>{text}</Text>
<ProgressBar style={ProgressItemStyles.bar} progress={percent / 100} />
<Text theme={{ colors: { text: colors.primary } }}>{percent}%</Text>
</View>
);
}
Example #3
| Source File: Home.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function ClanScreen() {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var nav = useNavigation();
var { data, status } = useAPIRequest({
endpoint: 'competition/rounds/v2',
cuppazee: true
}, true);
const [selectedConfig, setSelectedConfig] = React.useState(null);
const [viewMode, setViewMode] = React.useState("image");
React.useEffect(()=>{
if(data?.rounds.length) setSelectedConfig({
1: "r1",
2: "r2",
3: "r3",
4: "r3",
5: "r3",
6: "r3",
7: "r7",
8: "r8",
9: "r8"
}[data?.rounds.length] || "r8");
},[data?.rounds.length])
const gameConfig = gameConfigs.find(i=>i.id===selectedConfig)?.gameConfig;
if (status) {
if(status === "loading") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
} else {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
</View>
}
}
return (
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{ flexGrow: 1, width: 600, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", padding: 4 }}
style={{ flex: 1, backgroundColor: theme.page.bg }}>
{data.rounds.length === 0 ? <View style={{ paddingVertical: 16, alignItems: "center" }}>
<MaterialCommunityIcons name="clock" size={48} color={theme.page_content.fg} />
<Text style={{color: theme.page_content.fg, fontSize: 20, fontWeight: "bold"}}>Starting Soon</Text>
<Text style={{color: theme.page_content.fg, fontSize: 16}}>Whilst you are waiting... make sure to opt-in!</Text>
</View> : <View>
{data.rounds.slice().reverse().map((round, index) => <TouchableWithoutFeedback onPress={()=>nav.navigate('CompetitionRoundStats',{round:round.id})}>
<View style={{ padding: 4, paddingBottom: 16 }}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ flex: 1 }}>
<Text style={{textAlign: "center", fontSize: 12, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg}}>Team PEAR</Text>
<View style={{flexDirection: "row"}}>
<Image source={require('assets/pear.png')} style={{ height: 32, width: 32, borderTopLeftRadius: 4, borderBottomLeftRadius: 4, backgroundColor: "#98CA47", borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0}} />
<View style={{flex:1}}><ProgressBar style={{ transform: [{scaleX: -1}], height: 32, backgroundColor: theme.page_content.bg, borderTopWidth: 2, borderBottomWidth: 2, borderColor: theme.page_content.fg }} progress={round.pear / round.max} color="#98CA47" /></View>
</View>
<Text style={{textAlign: "center", fontSize: 16, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg}}>{round.pear}<Text style={{fontSize:12}}> / {round.max} HP</Text></Text>
</View>
<View style={{ height: 64, width: 64, borderRadius: 16, backgroundColor: {
pine: "#16341A",
pear: "#98CA47"
}[round.result] || theme.page_content.bg, borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0, justifyContent: "center", alignItems: "center"}}>
<Text style={{color: {
pine: "#ffffff",
pear: "#000000"
}[round.result] || theme.page_content.fg, fontWeight: "bold", fontSize: 12, lineHeight: 12 }}>Round</Text>
<Text style={{color: {
pine: "#ffffff",
pear: "#000000"
}[round.result] || theme.page_content.fg, fontWeight: "bold", fontSize: 32, lineHeight: 32 }}>{round.id}</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{textAlign: "center", fontSize: 12, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg}}>Team PINE</Text>
<View style={{flexDirection: "row"}}>
<View style={{flex:1}}><ProgressBar style={{ height: 32, backgroundColor: theme.page_content.bg, borderTopWidth: 2, borderBottomWidth: 2, borderColor: theme.page_content.fg }} progress={round.pine / round.max} color="#16341A" /></View>
<Image source={require('assets/pine.png')} style={{ height: 32, width: 32, borderTopRightRadius: 4, borderBottomRightRadius: 4, backgroundColor: "#16341A", borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0}} />
</View>
<Text style={{textAlign: "center", fontSize: 16, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg}}>{round.pine}<Text style={{fontSize:12}}> / {round.max} HP</Text></Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>)}
<View style={{ padding: 4}}>
<Card noPad>
<View style={{flexDirection: "row", alignItems: "center", paddingHorizontal: 4 }}>
<MaterialCommunityIcons name="information" size={24} style={{ marginVertical: 4 }} color={theme.page_content.fg} />
<View style={{ padding: 4, flex: 1 }}>
<Text style={{ color: theme.page_content.fg }}>Tap on a round for full information and stats</Text>
</View>
</View>
</Card>
</View>
</View>}
{/* <View style={{ padding: 4 }}><Button mode="contained" onPress={()=>nav.navigate('CompetitionOptIn')}>Opt-in to Competition</Button></View> */}
{(data.rounds.length > 0 && !!gameConfig) && <>
<View style={{ padding: 4 }}>
<Card noPad>
<View>
{data.rounds.length > 1 && <View style={{ padding: 4 }}>
<Dropdown dense={true} mode="outlined" selectedValue={selectedConfig} onValueChange={setSelectedConfig}>
{gameConfigs.map(i=><DropdownItem label={i.name} value={i.id} />)}
</Dropdown>
</View>}
<View style={{ padding: 4 }}>
<Dropdown dense={true} mode="outlined" selectedValue={viewMode} onValueChange={setViewMode}>
<DropdownItem label="View: Images" value="image" />
<DropdownItem label="View: List" value="list" />
</Dropdown>
</View>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Dealing Damage</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>Capture / Deploy these types to deal damage to the opposing team!</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: viewMode === "list" ? "100%" : 250, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Captures</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.damaging.filter(i => i.type === "capture").map(type => <CompetitionImage viewMode={viewMode} type={type} />)}
</View>
</View>
<View style={{ width: viewMode === "list" ? "100%" : 80, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Deploys</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.damaging.filter(i => i.type === "deploy").map(type => <CompetitionImage viewMode={viewMode} type={type} />)}
</View>
</View>
</View>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", flex: 1, padding: 4, textAlign: "center", fontSize: 20 }}>Regenerating Health</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>Capture / Deploy these types to regenerate your team's health!</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: viewMode === "list" ? "100%" : 250, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Captures</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.healing.filter(i => i.type === "capture").map(type => <CompetitionImage viewMode={viewMode} type={type} />)}
</View>
</View>
<View style={{ width: viewMode === "list" ? "100%" : 80, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Deploys</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.healing.filter(i => i.type === "deploy").map(type => <CompetitionImage viewMode={viewMode} type={type} />)}
</View>
</View>
</View>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontStyle: "italic", fontSize: 16 }}>We may change these values between rounds in order to improve gameplay.</Text>
</View>
</Card>
</View>
<View style={{ padding: 4 }}>
<Card noPad>
<View>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Aim of the Game</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
The primary objective of the Zeecret Agents Competition is to defeat the opposing team in as many rounds as possible. The team with the most rounds won at the end of the game will win.
</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Winning a Round</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
To win a round, you must damage the opposing team until their health is down to 0 HP. The first to be knocked out in a round loses.
</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Damaging your Opponent</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
To damage your opponent, you can capture or deploy any of the types listed above under the "Dealing Damage" section.
</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Healing your Team</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
To regenerate your team's health, you can capture or deploy any of the types mentioned above under the "Regenerating Health" section.
</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Round Endings</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
A round will end as soon as one team's health reaches 0 HP or when the round times out after a specified period of time. If a round times out, the team with the highest remaining health will be given the win.
</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Competition Ending</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
After the competition ending time ({moment('2020-11-08T23:59:59-06:00').format('L LT')}), the final round will continue until it ends, as normal. If the final round ends and both teams have won the same amount of rounds, there will be a final rapid decider round, with a low starting HP.
</Text>
<Countdown time="2020-11-08T23:59:59-06:00" />
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", padding: 4, textAlign: "center", fontSize: 20 }}>Health</Text>
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 16 }}>
The Starting Health and Maximum Health may change between rounds. For the first round, the Starting Health will be 1000 and the Maximum Health will be 2500, however future rounds may have different Starting and Maximum Health values.
</Text>
</View>
</Card>
</View>
</>}
</ScrollView>
</View>
);
}
Example #4
| Source File: Stats.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function ClanScreen({ route }) {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var dark = false;
var level_colors = useLevelColours();
if (theme.dark) {
dark = true;
level_colors.border = "#fffa"
}
var { data: round, status } = useAPIRequest({
endpoint: 'competition/stats/v1',
cuppazee: true,
data: {
round: route.params.round
}
}, true);
const [viewMode, setViewMode] = React.useState("image");
const gameConfig = {
1: gameConfig_1,
2: gameConfig_2,
3: gameConfig_3,
4: gameConfig_3,
5: gameConfig_3,
6: gameConfig_3,
7: gameConfig_7,
8: gameConfig_8,
}[round?.round_id] || gameConfig_8;
if (status) {
if (status === "loading") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
} else {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
</View>
}
}
return (
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{ width: 600, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", padding: 4 }}
style={{ flex: 1, backgroundColor: theme.page.bg }}>
<View style={{ padding: 4, paddingBottom: 16 }}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: "center", fontSize: 12, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg }}>Team PEAR</Text>
<View style={{ flexDirection: "row" }}>
<Image source={require('assets/pear.png')} style={{ height: 32, width: 32, borderTopLeftRadius: 4, borderBottomLeftRadius: 4, backgroundColor: "#98CA47", borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0 }} />
<View style={{ flex: 1 }}><ProgressBar style={{ transform: [{ scaleX: -1 }], height: 32, backgroundColor: theme.page_content.bg, borderTopWidth: 2, borderBottomWidth: 2, borderColor: theme.page_content.fg }} progress={(round.points?.pear ?? round.base ?? round.max) / round.max} color="#98CA47" /></View>
</View>
<Text style={{ textAlign: "center", fontSize: 16, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg }}>{round.points?.pear ?? round.base ?? round.max}<Text style={{ fontSize: 12 }}> / {round.max} HP</Text></Text>
</View>
<View style={{
height: 64, width: 64, borderRadius: 16, backgroundColor: {
pine: "#16341A",
pear: "#98CA47"
}[round.result] || theme.page_content.bg, borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0, justifyContent: "center", alignItems: "center"
}}>
<Text style={{
color: {
pine: "#ffffff",
pear: "#000000"
}[round.result] || theme.page_content.fg, fontWeight: "bold", fontSize: 12, lineHeight: 12
}}>Round</Text>
<Text style={{
color: {
pine: "#ffffff",
pear: "#000000"
}[round.result] || theme.page_content.fg, fontWeight: "bold", fontSize: 32, lineHeight: 32
}}>{round.round_id}</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: "center", fontSize: 12, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg }}>Team PINE</Text>
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}><ProgressBar style={{ height: 32, backgroundColor: theme.page_content.bg, borderTopWidth: 2, borderBottomWidth: 2, borderColor: theme.page_content.fg }} progress={(round.points?.pine ?? round.base ?? round.max) / round.max} color="#16341A" /></View>
<Image source={require('assets/pine.png')} style={{ height: 32, width: 32, borderTopRightRadius: 4, borderBottomRightRadius: 4, backgroundColor: "#16341A", borderWidth: 2, borderColor: theme.page_content.fg, zIndex: 2, marginHorizontal: 0 }} />
</View>
<Text style={{ textAlign: "center", fontSize: 16, lineHeight: 16, fontWeight: "bold", color: theme.page_content.fg }}>{round.points?.pine ?? round.base ?? round.max}<Text style={{ fontSize: 12 }}> / {round.max} HP</Text></Text>
</View>
</View>
<View style={{ paddingTop: 8 }}>
<Card noPad>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: 400, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 20, fontWeight: "bold" }}>Round {round.round_id}</Text>
<View style={{ flexDirection: "row", justifyContent: "center"}}>
<View style={{marginRight: 4}}>
<Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Started</Text>
<Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Data Updated</Text>
{round.end && <Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Ended</Text>}
<Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Timeout</Text>
<Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Base Health</Text>
<Text numberOfLines={1} style={{ fontSize: 16, fontWeight: "bold", textAlign: "right" }}>Max Health</Text>
</View>
<View style={{marginRight: 4}}>
<Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{moment(round.start).format('L LT')}</Text>
<Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{moment(round.updated_at).format('L LT')}</Text>
{round.end && <Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{moment(round.end).format('L LT')}</Text>}
<Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{moment(round.start + round.max_length).format('L LT')}</Text>
<Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{round.base} HP</Text>
<Text numberOfLines={1} style={{ fontSize: 16, textAlign: "left" }}>{round.max} HP</Text>
</View>
</View>
{!round.end && <Countdown time={round.start + round.max_length} />}
{/* <Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Started:</Text> {moment(round.start).format('L LT')}</Text>
{round.updated_at && <Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Data Updated:</Text> {moment(round.updated_at).format('L LT')}</Text>}
{round.end ? <Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Ended:</Text> {moment(round.end).format('L LT')}</Text> : <>
<Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Ends:</Text> {moment(round.start + round.max_length).format('L LT')} or when a Team is knocked out.</Text>
<Countdown time={round.start + round.max_length} />
</>}
<Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Timeout:</Text> {round.max_length / 86400000} Days</Text>
<Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Base Health:</Text> {round.base} HP</Text>
<Text style={{ color: theme.page_content.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>Max Health:</Text> {round.max} HP</Text> */}
</View>
</View>
</Card>
</View>
{["pear", "pine"].map(team => <View style={{ paddingTop: 8 }}>
<Card noPad>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: 400, flexGrow: 1, maxWidth: "100%" }}>
{team === "pear" && <View style={{ padding: 4 }}>
<Dropdown dense={true} mode="outlined" selectedValue={viewMode} onValueChange={setViewMode}>
<DropdownItem label="View: Images" value="image" />
<DropdownItem label="View: List" value="list" />
</Dropdown>
</View>}
<Text style={{ color: theme.page_content.fg, padding: 4, textAlign: "center", fontSize: 20, fontWeight: "bold" }}>Team {team.toUpperCase()}</Text>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", flex: 1, padding: 4, textAlign: "center", fontSize: 16 }}>Damage Dealing</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: viewMode === "list" ? "100%" : 250, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Captures</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.damaging.filter(i => i.type === "capture").map(type => <CompetitionImage viewMode={viewMode} type={type} count={round.stats[team][`${g(type.icon)}_${type.type}`] || 0} />)}
</View>
</View>
<View style={{ width: viewMode === "list" ? "100%" : 80, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Deploys</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.damaging.filter(i => i.type === "deploy").map(type => <CompetitionImage viewMode={viewMode} type={type} count={round.stats[team][`${g(type.icon)}_${type.type}`] || 0} />)}
</View>
</View>
</View>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", flex: 1, padding: 4, textAlign: "center", fontSize: 16 }}>Health Gaining</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<View style={{ width: viewMode === "list" ? "100%" : 250, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Captures</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.healing.filter(i => i.type === "capture").map(type => <CompetitionImage viewMode={viewMode} type={type} count={round.stats[team][`${g(type.icon)}_${type.type}`] || 0} />)}
</View>
</View>
<View style={{ width: viewMode === "list" ? "100%" : 80, flexGrow: 1, maxWidth: "100%" }}>
<Text style={{ color: theme.page_content.fg, fontWeight: "bold", textAlign: "center" }}>Deploys</Text>
<View style={viewMode === "list" ? {alignItems: "center"} : { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{gameConfig.healing.filter(i => i.type === "deploy").map(type => <CompetitionImage viewMode={viewMode} type={type} count={round.stats[team][`${g(type.icon)}_${type.type}`] || 0} />)}
</View>
</View>
</View>
</View>
</View>
</Card>
</View>)}
</View>
</ScrollView>
</View>
);
}
Example #5
| Source File: ZeeOps.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function ZeeOpsScreen({ route }) {
var { t } = useTranslation();
var moment = useMoment();
var theme = useSelector(i => i.themes[i.theme]);
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i => i?.user_id
})
const levelColours = useLevelColours(false);
var { data, status } = useAPIRequest(user_id ? {
endpoint: `ops/zeeops/status`,
data: {
user_id
},
user: user_id
} : null, true)
if (status === "loading") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
} else if (status) {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{t('error:' + status)}</Text>
</View>
} else if (data === null) {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:missing_data.locked')}</Text>
</View>
}
return (
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{ width: "100%", maxWidth: 800, flexDirection: "row", flexWrap: "wrap", justifyContent: "center", padding: 4, paddingBottom: 92, alignSelf: "center" }}
style={{ flex: 1, backgroundColor: theme.page.bg }}>
<View style={{ padding: 4, width: "100%" }}>
<Card noPad>
<View style={{ height: 32, backgroundColor: levelColours[Math.floor((data.missions.filter(i=>i.completedDate).length / 7) * 5)].fg === "#ffffff" ? "black" : "white", borderRadius: 8 }}>
<ProgressBar progress={data.missions.filter(i=>i.completedDate).length / 7} style={{ height: 32, borderRadius: 8 }} color={levelColours[Math.floor((data.missions.filter(i=>i.completedDate).length / 7) * 5)].bg} />
<View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
<Text style={{ fontWeight: "bold", fontSize: 16, lineHeight: 0, color: levelColours[Math.floor((data.missions.filter(i=>i.completedDate).length / 7) * 5)].fg }}>{data.missions.filter(i=>i.completedDate).length} / 7 Days</Text>
</View>
</View>
</Card>
</View>
{data.missions.map?.((i, index) => <View style={{ padding: 4, width: 350, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
{data.currentMission > i.id || (data.currentMission === i.id && moment.tz(data.start_time,'America/Chicago').valueOf() <= Date.now()) ? <View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ padding: 8 }}>
<Image source={getIcon(`https://munzee.global.ssl.fastly.net/images/pins/${i.rewards[0]?.imageUrl}`)} style={{ width: 48, height: 48 }} />
<Text style={{ color: theme.page_content.fg, position: "absolute", bottom: 0, right: 4, fontSize: 16, fontWeight: "bold" }}>x{i.rewards[0]?.amount}</Text>
</View>
<View style={{ padding: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }}>{i.description}</Text>
<Text allowFontScaling={false} style={{ fontSize: 16, color: theme.page_content.fg }}>Reward: {i.reward_description.replace(/[\r\n]/g,' ')}</Text>
{
i.completedDate ?
<Text allowFontScaling={false} style={{ fontSize: 12, color: theme.page_content.fg }}>Completed: {moment(i.completedDate).format('L')}</Text> :
<Text allowFontScaling={false} style={{ fontSize: 12, color: theme.page_content.fg }}>Incomplete</Text>
}
</View>
</View>
<View style={{ flex: 1}} />
<View style={{ height: 24, backgroundColor: levelColours[Math.floor((i.completedDate ? 1 : (i.progress / i.goal)) * 5)].fg === "#ffffff" ? "black" : "white", borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }}>
<ProgressBar progress={i.completedDate ? 1 : (i.progress / i.goal)} style={{ height: 24, borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }} color={levelColours[Math.floor((i.completedDate ? 1 : (i.progress / i.goal)) * 5)].bg} />
<View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
<Text style={{ fontWeight: "bold", fontSize: 16, lineHeight: 0, color: levelColours[Math.floor((i.completedDate ? 1 : (i.progress / i.goal)) * 5)].fg }}>{i.completedDate ? <MaterialCommunityIcons name="check-bold" size={16} color={levelColours[Math.floor((i.completedDate ? 1 : (i.progress / i.goal)) * 5)].fg} /> : `${i.progress} / ${i.goal}`}</Text>
</View>
</View>
</View> : <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 8 }}>
<MaterialCommunityIcons name="lock-question" size={32} color={theme.page_content.fg} />
<Text style={{ fontWeight: "bold", color: theme.page_content.fg, fontSize: 16 }}>Day {index + 1}</Text>
<Countdown days={false} time={moment.tz(data.start_time,'America/Chicago').format()} />
</View>}
</Card>
</View>)}
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
);
}
