Stylistic fixes, etc

controllers/AttendeesListViewController.js

@@ -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() {
@@ -28,7 +37,20 @@ export default class AttendeesListViewController extends MemeleeViewController {
             keyExtractor: keyExtractor,
             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 <FlatList {...props} renderItem={this.renderItem} />
+        return (<View>
+            <SegmentedControlTab {...segmentedProps} />
+            <FlatList {...props} />
+        </View>);
     }
 }

controllers/BracketViewController.js

@@ -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}}>
+    <View style={styles.matchWrapper}>
-        <Text style={{padding: 5, color: '#dbdbde'}}>{set.entrant1.name ? set.entrant1.name : ''} <Text>{set.entrant1Score}</Text></Text>
+        <View style={styles.matchEntrant}>
-        <View style={{borderTopWidth: 0.5, borderTopColor: '#2a2a33'}} />
+            <Text style={styles.matchEntrantText}>{set.entrant1.name ? set.entrant1.name : ''}</Text>
-        <Text style={{padding: 5, color: '#dbdbde'}}>{set.entrant2.name ? set.entrant2.name : ''} <Text>{set.entrant2Score}</Text></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>
+                            <Text style={styles.bracketTitle}>{bracket.title}</Text>
-                            {bracket.sets.map(set => <Match key={set.id} set={set} />)}
+                            {bracket.sets.map(set => {
+                                if(set.isGF) console.log(JSON.stringify(set, null, 4));
+                                return <Match key={set.id} set={set} />;
+                            })}
                         </View>
                     ))}
                 </View>

controllers/ContactViewController.js

@@ -6,29 +6,54 @@
  *  @copyright Ryan McGrath 2018.
  */
 
-import moment from 'moment';
 import React from 'react';
-import {FlatList, View, ActivityIndicator} from 'react-native';
+import {ScrollView, View, Text, StyleSheet} from 'react-native';
-import {inject, observer} from 'mobx-react/native';
+import Markdown from 'react-native-markdown-renderer';
-import {SearchBar} from 'react-native-elements';
+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 ContactViewController extends MemeleeViewController {
-
+    email = () => { openURL('mailto:' + this.props.data.email); }
-export default class AttendeesListViewController extends MemeleeViewController {
+    phone = () => { openURL('tel:' + this.props.data.phone); }
-    renderItem = ({item}) => (<View />)
+    twitter = () => { openURL('https://twitter.com/' + this.props.data.twitter); }
 
     render() {
-        const props = {
+        const s = StyleSheet.flatten(styles.tournamentDetailsEventWrapper);
-            data: this.props.data,
+        const ss = {
-            keyExtractor: keyExtractor,
+            itemWidth: 50,
-            renderItem: this.renderItem
+            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>);
     }
 }

controllers/LocationViewController.js

@@ -6,29 +6,38 @@
  *  @copyright Ryan McGrath 2018.
  */
 
-import moment from 'moment';
 import React from 'react';
-import {FlatList, View, ActivityIndicator} from 'react-native';
+import {ScrollView, StyleSheet, Image, Text, View, TouchableOpacity, Dimensions} from 'react-native';
-import {inject, observer} from 'mobx-react/native';
+import Markdown, {PluginContainer} from 'react-native-markdown-renderer';
-import {SearchBar} from 'react-native-elements';
+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 = {
+        const addy = '\n' + this.props.data.venue.name + '\n' + this.props.data.venue.address + ' ' + this.props.data.venue.city + 
-            data: this.props.data,
+            ' ' + this.props.data.venue.state + ' ' + this.props.data.venue.postalCode + '\n' + this.props.data.venue.country + '\n';
-            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 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>);
     }
 }

controllers/TournamentInfoViewController.js

@@ -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 = [
+        this.setState({
-            {slug: 'attendees', name: 'Attendees', screen: Constants.Screens.Attendees, adminOnly: false},
+            tabs: determineTabs(this.props.tournament)
-            {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
-            });
-
-        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}

controllers/components/TournamentRow.js

@@ -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

package.json

@@ -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",

stores/TournamentEventStore.js

@@ -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,13 +185,14 @@ class Store {
                 result.entrant1 = {};
                 result.entrant2 = {};
 
-                data.items.entities.entrants.forEach(function(entrant) {
+                if(data.items.entities.entrants)
-                    if(entrant.id === result.entrant1Id)
+                    data.items.entities.entrants.forEach(function(entrant) {
-                        result.entrant1 = entrant;
+                        if(entrant.id === result.entrant1Id)
+                            result.entrant1 = entrant;
                     
-                    if(entrant.id === result.entrant2Id)
+                        if(entrant.id === result.entrant2Id)
-                        result.entrant2 = entrant;
+                            result.entrant2 = entrant;
-                });
+                    });
 
                 if(result.isGF) {
                     grands.push(result);
@@ -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 => {
+                grands.forEach(grandFinal => brackets.winners.push({
-                    brackets.winners.push({
+                    title: 'Grand Finals',
-                        title: 'Grand Finals',
+                    sets: [grandFinal],
-                        sets: [grandFinal],
+                    key: v4()
-                        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();

styles/index.js

@@ -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'
     }
 });