code/memelee
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stylistic fixes, etc

Browse source
This commit is contained in:
Ryan McGrath 2018-04-16 14:57:28 -04:00
parent c02ad19f2b
commit 2554789f5f
No known key found for this signature in database
GPG key ID: 811674B62B666830
10 changed files with 283 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

24
controllers/AttendeesListViewController.js
View file

@ -9,6 +9,7 @@
import moment from 'moment';
import React from 'react';
import {FlatList, View, ActivityIndicator} from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';
import {inject, observer} from 'mobx-react/native';
import {SearchBar} from 'react-native-elements';
@ -20,6 +21,14 @@ import TournamentRow from './components/TournamentRow';
const keyExtractor = (item, index) => item.id;
export default class AttendeesListViewController extends MemeleeViewController {
state = {
selectedIndex: 0
};
swapIndex = (index) => this.setState({
selectedIndex: index
});
renderItem = ({item}) => (<View />)
render() {
@ -29,6 +38,19 @@ export default class AttendeesListViewController extends MemeleeViewController {
renderItem: this.renderItem
};
return <FlatList {...props} renderItem={this.renderItem} />
const segmentedProps = {
values: ['Players', 'Teams'],
borderRadius: 0,
activeTabStyle: styles.tournamentInfoActiveTableStyle,
tabStyle: styles.tournamentInfoTabsStyle,
tabTextStyle: styles.tournamentInfoTabTextStyle,
selectedIndex: this.state.selectedIndex,
onTabPress: this.swapIndex
};
return (<View>
<SegmentedControlTab {...segmentedProps} />
<FlatList {...props} />
</View>);
}
}

23
controllers/BracketViewController.js
View file

@ -11,13 +11,21 @@ import React from 'react';
import {ScrollView, Text, View} from 'react-native';
import {inject, observer} from 'mobx-react/native';
import styles from '../styles';
import MemeleeViewController from './MemeleeViewController';
const Match = ({set, ...rest}) => (
<View style={{backgroundColor: '#3b3b48', borderColor: '#0e0e12', borderWidth: 0.5, borderRadius: 4, marginBottom: 20}}>
<Text style={{padding: 5, color: '#dbdbde'}}>{set.entrant1.name ? set.entrant1.name : ''} <Text>{set.entrant1Score}</Text></Text>
<View style={{borderTopWidth: 0.5, borderTopColor: '#2a2a33'}} />
<Text style={{padding: 5, color: '#dbdbde'}}>{set.entrant2.name ? set.entrant2.name : ''} <Text>{set.entrant2Score}</Text></Text>
<View style={styles.matchWrapper}>
<View style={styles.matchEntrant}>
<Text style={styles.matchEntrantText}>{set.entrant1.name ? set.entrant1.name : ''}</Text>
<Text style={[{padding: 5, color: '#fff', borderTopRightRadius: 4}, set.entrant1.id === set.winnerId ? {backgroundColor: '#1bc382'} : {}]}>{set.entrant1Score}</Text>
</View>
<View style={styles.matchSeparator} />
<View style={styles.matchEntrant}>
<Text style={styles.matchEntrantText}>{set.entrant2.name ? set.entrant2.name : ''}</Text>
<Text style={[{padding: 5, color: '#fff', borderBottomRightRadius: 4}, set.entrant2.id === set.winnerId ? {backgroundColor: '#1bc382'} : {}]}>{set.entrant2Score}</Text>
</View>
</View>
);
@ -33,8 +41,11 @@ export default class BracketViewController extends MemeleeViewController {
<View key={key} style={{backgroundColor: '#21212d', flexDirection: 'row', paddingTop: 20, paddingBottom: 20, paddingLeft: 20}}>
{this.props.Events.bracketData[key].map(bracket => (
<View key={bracket.key} style={{backgroundColor: '#21212d', marginRight: 20, width: 200, flexDirection: 'column'}}>
<Text>{bracket.title}</Text>
{bracket.sets.map(set => <Match key={set.id} set={set} />)}
<Text style={styles.bracketTitle}>{bracket.title}</Text>
{bracket.sets.map(set => {
if(set.isGF) console.log(JSON.stringify(set, null, 4));
return <Match key={set.id} set={set} />;
})}
</View>
))}
</View>

55
controllers/ContactViewController.js
View file

@ -6,29 +6,54 @@
* @copyright Ryan McGrath 2018.
*/
import moment from 'moment';
import React from 'react';
import {FlatList, View, ActivityIndicator} from 'react-native';
import {inject, observer} from 'mobx-react/native';
import {SearchBar} from 'react-native-elements';
import {ScrollView, View, Text, StyleSheet} from 'react-native';
import Markdown from 'react-native-markdown-renderer';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import SettingsList, {Header, Item} from 'react-native-settings-list';
import styles from '../styles';
import Constants from '../utils/Constants';
import {openURL} from '../utils';
import MemeleeViewController from './MemeleeViewController';
import TournamentRow from './components/TournamentRow';
const keyExtractor = (item, index) => item.id;
export default class AttendeesListViewController extends MemeleeViewController {
renderItem = ({item}) => (<View />)
export default class ContactViewController extends MemeleeViewController {
email = () => { openURL('mailto:' + this.props.data.email); }
phone = () => { openURL('tel:' + this.props.data.phone); }
twitter = () => { openURL('https://twitter.com/' + this.props.data.twitter); }
render() {
const props = {
data: this.props.data,
keyExtractor: keyExtractor,
renderItem: this.renderItem
const s = StyleSheet.flatten(styles.tournamentDetailsEventWrapper);
const ss = {
itemWidth: 50,
backgroundColor: s.backgroundColor,
style: styles.tournamentDetailsEventWrapper,
titleStyle: styles.tournamentDetailsEventItem
};
return <FlatList {...props} renderItem={this.renderItem} />
return (<ScrollView>
<SettingsList>
{this.props.data.email ? <Item {...ss} title={this.props.data.email} onPress={this.email} icon={
<View style={{height:30, marginLeft:10, alignSelf:'center'}}>
<Icon name="email" size={26} color={styles.tournamentPromoIconColors.eventsCount} />
</View>
} /> : null}
{this.props.data.phone ? <Item {...ss} title={this.props.data.phone} onPress={this.phone} icon={
<View style={{height:30, marginLeft:10, alignSelf:'center'}}>
<Icon name="phone" size={26} color={styles.tournamentPromoIconColors.eventsCount} />
</View>
} /> : null}
{this.props.data.twitter ? <Item {...ss} title={this.props.data.twitter} onPress={this.twitter} icon={
<View style={{height:30, marginLeft:10, alignSelf:'center'}}>
<Icon name="twitter" size={26} color={styles.tournamentPromoIconColors.eventsCount} />
</View>
} /> : null}
</SettingsList>
{this.props.data.info ? <View style={styles.tournamentDetailsTextWrapper}>
<Markdown style={styles.tournamentDetailsText}>
{this.props.data.info}
</Markdown>
</View> : null}
</ScrollView>);
}
}

41
controllers/LocationViewController.js
View file

@ -6,29 +6,38 @@
* @copyright Ryan McGrath 2018.
*/
import moment from 'moment';
import React from 'react';
import {FlatList, View, ActivityIndicator} from 'react-native';
import {inject, observer} from 'mobx-react/native';
import {SearchBar} from 'react-native-elements';
import {ScrollView, StyleSheet, Image, Text, View, TouchableOpacity, Dimensions} from 'react-native';
import Markdown, {PluginContainer} from 'react-native-markdown-renderer';
import SettingsList, {Header, Item} from 'react-native-settings-list';
import openMap from 'react-native-open-maps';
import styles from '../styles';
import Constants from '../utils/Constants';
import MemeleeViewController from './MemeleeViewController';
import TournamentRow from './components/TournamentRow';
const keyExtractor = (item, index) => item.id;
export default class AttendeesListViewController extends MemeleeViewController {
renderItem = ({item}) => (<View />)
export default class LocationViewController extends MemeleeViewController {
render() {
const props = {
data: this.props.data,
keyExtractor: keyExtractor,
renderItem: this.renderItem
const addy = '\n' + this.props.data.venue.name + '\n' + this.props.data.venue.address + ' ' + this.props.data.venue.city +
' ' + this.props.data.venue.state + ' ' + this.props.data.venue.postalCode + '\n' + this.props.data.venue.country + '\n';
const s = StyleSheet.flatten(styles.tournamentDetailsEventWrapper);
const ss = {
itemWidth: 50,
backgroundColor: s.backgroundColor,
style: styles.tournamentDetailsEventWrapper,
titleStyle: styles.tournamentDetailsEventItem
};
return <FlatList {...props} renderItem={this.renderItem} />
return (<ScrollView>
<SettingsList style={styles.tournamentEventsWrapper} borderWidth={s.borderBottomWidth} borderColor={s.borderBottomColor}>
<Item {...ss} title={addy} onPress={() => openMap({latitude: this.props.data.map.lat, longitude: this.props.data.map.lng})} />
</SettingsList>
{this.props.data.gettingThere ? <View style={styles.tournamentDetailsTextWrapper}>
<Markdown style={styles.tournamentDetailsText}>
{this.props.data.gettingThere}
</Markdown>
</View> : null}
</ScrollView>);
}
}

168
controllers/TournamentInfoViewController.js
View file

@ -9,6 +9,7 @@
import moment from 'moment';
import React from 'react';
import {ScrollView, StyleSheet, Image, Text, View, TouchableOpacity, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Markdown, {PluginContainer} from 'react-native-markdown-renderer';
import SegmentedControlTab from 'react-native-segmented-control-tab';
import SettingsList, {Header, Item} from 'react-native-settings-list';
@ -21,16 +22,116 @@ import EventsStore from '../stores/TournamentEventStore';
import MemeleeViewController from './MemeleeViewController';
const w = Dimensions.get('screen').width;
/* <View style={styles.tournamentInfoButtonsRow}>
<TouchableOpacity style={styles.tournamentRegistrationButton} onPress={this.registerForTournament}>
<Text style={styles.tournamentRegistrationButtonText}>Register</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tournamentBookmarkButton} onPress={this.registerForTournament}>
<Text style={styles.tournamentRegistrationButtonText}>Bookmark</Text>
</TouchableOpacity>
</View>
*/
const determineTabs = (tournament) => {
const slugs = parseSlugs(tournament, null);
const tabs = [
// Actually can't do this without using what's pretty clearly a private API. :(
// {slug: 'attendees', name: 'Attendees', screen: Constants.Screens.Attendees, adminOnly: false, data: []}
{slug: 'attendees', icon: 'link', name: 'Attendees', url: 'https://smash.gg/tournament/' + slugs.tournament + '/attendees/players', adminOnly: false}
];
if(
tournament.gettingThere || tournament.lat || tournament.lng || tournament.mapsPlaceId || tournament.venueName ||
tournament.venueAddress || tournament.city || tournament.addrState || tournament.countryCode || tournament.postalCode
) tabs.push({
slug: 'location',
name: 'Location',
icon: 'map-marker',
screen: Constants.Screens.Location,
adminOnly: false,
data: {
gettingThere: tournament.gettingThere,
map: {
lat: tournament.lat,
lng: tournament.lng,
mapsPlaceId: tournament.mapsPlaceId,
},
venue: {
name: tournament.venueName,
address: tournament.venueAddress,
city: tournament.city,
state: tournament.addrState,
country: tournament.countryCode,
postalCode: tournament.postalCode
}
}
});
tabs.push({
slug: 'contact',
name: 'Contact',
icon: 'email',
screen: Constants.Screens.Contact,
adminOnly: false,
data: {
email: tournament.contactEmail,
info: tournament.contactInfo,
phone: tournament.contactPhone,
twitter: tournament.contactTwitter
}
});
if(tournament.rules && tournament.rules !== '') {
if(tournament.rules.startsWith('http://') || tournament.rules.startsWith('https://')) {
tabs.push({slug: 'rules', icon: 'link', name: 'Rules', url: tournament.rules, adminOnly: false});
} else {
tabs.push({slug: 'rules', name: 'Rules', icon: 'file-document-box', info: tournament.rules, adminOnly: false});
}
}
if(tournament.prizes && tournament.prizes !== '') {
if(tournament.prizes.startsWith('http://') || tournament.prizes.startsWith('https://')) {
tabs.push({slug: 'prizes', name: 'Prizes', icon: 'trophy', url: tournament.prizes, adminOnly: false});
} else {
tabs.push({slug: 'prizes', name: 'Prizes', icon: 'trophy', info: tournament.prizes, adminOnly: false});
}
}
if(tournament.publishing && tournament.publishing.fantasy)
tabs.push({
slug: 'fantasy',
name: 'Fantasy',
icon: 'chart-timeline',
url: 'https://smash.gg/tournament/' + slugs.tournament + '/fantasy/',
adminOnly: false
});
const generatedTabs = tournament.generatedTabs;
if(generatedTabs) {
const objs = Object.keys(generatedTabs).map(key => generatedTabs[key]);
objs.forEach(tab => {
Object.keys(tab).map(key => ({
slug: key,
name: tab[key].name,
adminOnly: tab[key].adminOnly,
icon: 'link',
url: 'https://smash.gg/tournament/' + slugs.tournament + '/' + key
})).filter(tab => !tab.adminOnly || tab.adminOnly === false).forEach(tab => tabs.push(tab));
});
}
const links = tournament.links;
if(links) {
Object.keys(tournament.links).forEach(key => {
tabs.push({
slug: key,
icon: 'link',
name: key[0].toUpperCase() + key.substring(1),
url: links[key]
});
});
}
return tabs;
}
const SIcon = (icon) => (
<View style={{height:30, marginLeft:10, alignSelf:'center'}}>
<Icon name={icon} size={26} color={styles.tournamentPromoIconColors.eventsCount} />
</View>
);
export default class TournamentInfoViewController extends MemeleeViewController {
state = {
@ -39,50 +140,9 @@ export default class TournamentInfoViewController extends MemeleeViewController
};
componentWillMount = () => {
const tabs = [
{slug: 'attendees', name: 'Attendees', screen: Constants.Screens.Attendees, adminOnly: false},
{slug: 'location', name: 'Location', screen: Constants.Screens.Location, adminOnly: false},
{slug: 'contact', name: 'Contact', screen: Constants.Screens.Contact, adminOnly: false}
];
if(this.props.tournament.rules && this.props.tournament.rules !== '') {
if(this.props.tournament.rules.startsWith('http://') || this.props.tournament.rules.startsWith('https://')) {
tabs.push({slug: 'rules', name: 'Rules', url: this.props.tournament.rules, adminOnly: false});
} else {
tabs.push({slug: 'rules', name: 'Rules', info: this.props.tournament.rules, adminOnly: false});
}
}
if(this.props.tournament.prizes && this.props.tournament.prizes !== '') {
if(this.props.tournament.prizes.startsWith('http://') || this.props.tournament.prizes.startsWith('https://')) {
tabs.push({slug: 'prizes', name: 'Prizes', url: this.props.tournament.prizes, adminOnly: false});
} else {
tabs.push({slug: 'prizes', name: 'Prizes', info: this.props.tournament.prizes, adminOnly: false});
}
}
if(this.props.tournament.publishing && this.props.tournament.publishing.fantasy)
tabs.push({
slug: 'fantasy',
name: 'Fantasy',
url: 'https://smash.gg/tournament/' + parseSlugs(this.props.tournament, null).tournament + '/fantasy/',
adminOnly: false
this.setState({
tabs: determineTabs(this.props.tournament)
});
const generatedTabs = this.props.tournament.generatedTabs;
if(generatedTabs) {
const objs = Object.keys(generatedTabs).map(key => generatedTabs[key]);
objs.forEach(tab => {
Object.keys(tab).map(key => ({
slug: key,
name: tab[key].name,
adminOnly: tab[key].adminOnly
})).filter(tab => !tab.adminOnly || tab.adminOnly === false).forEach(tab => tabs.push(tab));
});
}
this.setState({tabs: tabs});
}
onEventTapped = (evt) => {
@ -100,7 +160,7 @@ export default class TournamentInfoViewController extends MemeleeViewController
return this.props.navigator.push({
screen: tab.screen,
title: tab.name,
passProps: {data: []},
passProps: {data: tab.data},
navigatorStyle: {tabBarHidden: true}
});
@ -146,7 +206,7 @@ export default class TournamentInfoViewController extends MemeleeViewController
</View>
<SettingsList style={styles.tournamentEventsWrapper} borderWidth={s.borderBottomWidth} borderColor={s.borderBottomColor}>
{this.state.tabs.map(tab => <Item key={tab.slug} {...ss} title={tab.name} onPress={() => this.handleTab(tab)} />)}
{this.state.tabs.map(tab => <Item icon={SIcon(tab.icon)} key={tab.slug} {...ss} title={tab.name} onPress={() => this.handleTab(tab)} />)}
</SettingsList>
</View>
) : null}

2
controllers/components/TournamentRow.js
View file

@ -34,7 +34,7 @@ export default class TournamentRow extends React.Component {
</Text>
<Text style={styles.tournamentRowLocation}>
<Icon name="map-marker" size={16} color={styles.tournamentPromoIconColors.mapMarker} /> {this.props.tournament.hasOnlineEvents && (!this.props.tournament.city || this.props.tournament.city === '') ? 'Online' : (this.props.tournament.city ? this.props.tournament.city + ', ' : '') + this.props.tournament.addrState}</Text>
<Icon name="map-marker" size={16} color={styles.tournamentPromoIconColors.mapMarker} /> {this.props.tournament.hasOnlineEvents && (!this.props.tournament.city || this.props.tournament.city === '') ? 'Online' : (this.props.tournament.city ? this.props.tournament.city + ', ' : '') + (this.props.tournament.addrState ? this.props.tournament.addrState : '')}</Text>
<View style={{flexDirection: 'row'}}>
<Text style={styles.tournamentRowEventsCount}>
<Icon name="trophy-variant" size={16} color={styles.tournamentPromoIconColors.eventsCount} /> {this.props.tournament.memeleeEventsCount} Events

BIN
ios/memelee.xcodeproj/project.xcworkspace/xcuserdata/laika.xcuserdatad/UserInterfaceState.xcuserstate generated
View file

Binary file not shown.

2
package.json
View file

@ -31,8 +31,10 @@
"react-native": "0.52.0",
"react-native-elements": "^0.19.0",
"react-native-hyperlink": "0.0.12",
"react-native-maps": "^0.21.0",
"react-native-markdown-renderer": "^3.1.0",
"react-native-navigation": "^1.1.426",
"react-native-open-maps": "^0.1.4",
"react-native-segmented-control-tab": "^3.2.2",
"react-native-settings-list": "^1.8.0",
"react-native-svg": "^6.3.1",

25
stores/TournamentEventStore.js
View file

@ -139,6 +139,10 @@ class Store {
*
* @arg bracketID {String or Number} ID for the bracket - SmashGG calls this a phase. Go fig.
*/
//https://smash.gg/api/-/gg_api./tournament/fighter-s-spirit-2018-1;eventSlug=street-fighter-v-arcade-edition-singles;expand=["event","phase","wave","station","stream","entrantCounts","tagsByEntity","ruleset"];mutations=["playerData","profileTaskNotifs"];phaseId=246410;reset=false;slug=fighter-s-spirit-2018-1?returnMeta=true
fetchBracketData = (bracketID) => {
this.bracketData = {winners: [], losers: []};
this.bracketID = bracketID;
@ -157,10 +161,15 @@ class Store {
};
const url = api + Object.keys(args).map(key => `${key}=${args[key]}`).join(';') + '?returnMeta=true'
console.log(url);
//console.log(url);
fetch(
url
).then(response => response.json()).then(data => {
if(data.items.resultEntity && data.items.resultEntity === 'groups' && typeof data.items.entities.sets === 'undefined') {
this.parseAndStoreGroups(data);
return;
}
const grands = [];
const brackets = {
winners: [],
@ -176,6 +185,7 @@ class Store {
result.entrant1 = {};
result.entrant2 = {};
if(data.items.entities.entrants)
data.items.entities.entrants.forEach(function(entrant) {
if(entrant.id === result.entrant1Id)
result.entrant1 = entrant;
@ -208,13 +218,11 @@ class Store {
// GFs are technically in the winners bracket, but for presentation purposes they're shoved
// in after to be like how smash.gg presents them.
if(grands.length > 0) {
grands.forEach(grandFinal => {
brackets.winners.push({
grands.forEach(grandFinal => brackets.winners.push({
title: 'Grand Finals',
sets: [grandFinal],
key: v4()
});
});
}));
}
runInAction('Set Bracket Data', () => {
@ -222,6 +230,13 @@ class Store {
});
});
}
parseAndStoreGroups = (data) => {
console.warn('Groups!');
runInAction('Set Groups Data', () => {
});
}
};
export default new Store();

31
styles/index.js
View file

@ -121,6 +121,37 @@ const stylesheet = StyleSheet.create({
textAlign: 'center',
marginTop: 5,
color: textColor
},
bracketTitle: {
fontWeight: 'bold',
padding: 5,
textAlign: 'center',
color: textColor
},
matchWrapper: {
backgroundColor: '#3b3b48',
borderColor: '#0e0e12',
borderWidth: 0.5,
borderRadius: 4,
marginBottom: 20,
overflow: 'hidden'
},
matchEntrant: {
flexDirection: 'row',
justifyContent: 'space-between'
},
matchEntrantText: {
color: '#dbdbde',
padding: 5
},
matchSeparator: {
borderTopWidth: 0.5,
borderTopColor: '#2a2a33'
}
});