be-components 1.0.9 → 1.1.0

package/src/Squares/components/ResultsCard.tsx

@@ -0,0 +1,67 @@
+import { View, FlatList, Image, TouchableOpacity } from "react-native"
+import { view_styles } from "../../constants/styles"
+import { Icons, Text } from "../../Components"
+import Colors from "../../constants/colors"
+import type { PublicPlayerProps, SquareProps, SquareResultProps } from "../../types"
+import { useState } from "react"
+
+type ResultCardProps = {
+    square_results:SquareResultProps[],
+    squares:SquareProps[],
+    home_abbr?:string,
+    away_abbr?:string,
+    onPlayerSelect:(player:PublicPlayerProps) => void
+}
+
+const ResultsCard = ({ square_results, squares, home_abbr, away_abbr, onPlayerSelect }:ResultCardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+    const renderResults = (data: { item:SquareResultProps, index:number }) => {
+        if(!data.item.playerDetails){ return <></> }
+        const square = squares.find(s => s.sq_square_id == data.item.sq_square_id);
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onPlayerSelect(data.item.playerDetails)}>
+                <View style={{ marginRight:10 }}>
+                    <Text theme="header_2">Q{data.item.iteration_num}</Text>
+                </View>
+                <Image
+                    source={{ uri: data.item.playerDetails.profile_pic && data.item.playerDetails.profile_pic != '' ? data.item.playerDetails.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:40, width:40, borderRadius:100 }}
+                    resizeMode="cover"
+                />
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text theme="header_2">@{data.item.playerDetails.username}</Text>
+                    {square ?
+                    <Text style={{ marginTop:3 }} theme='body_2'>{home_abbr}: {square.square_score_x}, {away_abbr}: {square.square_score_y}</Text>
+                    :<></>}
+                </View>
+                <View style={{ paddingLeft:5, paddingRight:5 }}>
+                    <Text size={14} color={Colors.utility.success} weight='bold'>${data.item.winnings.toFixed(2)}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.TrophyIcon size={18} color={Colors.incentive.gold} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>WINNERS</Text>
+                    <Text style={{ marginTop:3 }} theme="body_2">See the winners of past quarters</Text>
+                </View>
+                <Icons.ChevronIcon direction={true?'down':'up'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={view_styles.section_body}>
+                <FlatList
+                    data={square_results.sort((a,b) => a.iteration_num - b.iteration_num)}
+                    renderItem={renderResults}
+                    keyExtractor={(item) => item.squares_result_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ResultsCard

package/src/Squares/components/SquareCard.tsx

@@ -0,0 +1,190 @@
+import { TouchableOpacity, View } from "react-native"
+import type { EventProps, PlayerSquareProps, SquareOfferProps, SquareProps, SquareResultProps, SquareStateProps } from "../../types"
+import Colors from "../../constants/colors"
+import { Icons, Text } from "../../Components"
+
+type SquareCardProps = {
+    square:SquareProps,
+    player_square?:PlayerSquareProps,
+    event?:EventProps, 
+    player_id?:string,
+    event_status:'not_started'|'in_progress'|'closed', 
+    market_type:string, 
+    square_result?:SquareResultProps,
+    draft_player_square?:PlayerSquareProps, 
+    square_offer?:SquareOfferProps,
+    draft_square_offer?:SquareOfferProps,
+    outbid_player_square?:PlayerSquareProps,
+    square_state_override?:SquareStateProps,
+    ip_result?:boolean 
+    onSquareSelect: (data:any, hey:any) => void,
+}
+const SquareCard = ({ player_id, square, player_square, event, event_status, market_type, draft_player_square, square_offer, draft_square_offer, outbid_player_square, square_state_override, onSquareSelect }:SquareCardProps) => {
+
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E';
+
+    const getStateOfSquare = ():SquareStateProps => {
+        if(square_state_override){ return square_state_override }
+        if(event_status === 'not_started'){
+            //No bids on the square
+            if(!player_square && !draft_player_square){ return 'no_bid' }
+            //There is a bid and currently no draft bid and there is an outbid square
+            if(player_square && !draft_player_square && outbid_player_square){ return 'outbid' }
+           //There is a bid and currently no draft bid 
+            if(player_square && !draft_player_square){ return 'existing_bid' }
+            //There is a draft bid on the square and no previous bid
+            if(!player_square && draft_player_square){ return 'bid_draft' }
+            //There is a draft bid on the square, but a previous bid is higher
+            if(player_square && draft_player_square && draft_player_square.purchase_price <= player_square.purchase_price){ return 'outbid_draft' }
+            //There is a draft bid on the square and it is higher than the previous bid
+            if(player_square && draft_player_square){ return 'bid_draft' }
+            return 'no_bid'
+        }
+
+        //There is an existing bid and no current offer
+        if(player_square && !draft_square_offer && !square_offer){ return 'no_offer' }
+        //There is an existing bid and an existing offer and currently no draft offer
+        if(player_square && !draft_square_offer && square_offer && square_offer.buy_sell_ind === 'sell'){ return 'existing_sell_offer' }
+        if(player_square && !draft_square_offer && square_offer && square_offer.buy_sell_ind === 'buy'){ return 'existing_buy_offer' }
+        //There is an existing bid and an existing draft buy offer
+        if(player_square && draft_square_offer && draft_square_offer.buy_sell_ind === 'buy'){ return 'draft_buy_offer' }
+        //There is an existing bid and an existing draft sell offer
+        if(player_square && draft_square_offer && draft_square_offer.buy_sell_ind === 'sell'){ return 'draft_sell_offer' }
+        return 'no_offer'
+    }
+
+    const getSquareBackgroundColor = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'no_bid': return Colors.shades.white
+            case 'existing_bid': 
+                if(player_square?.player_id == player_id){ return Colors.brand.electric } else { return Colors.shades.white }
+            case 'bid_draft': return Colors.shades.white
+            case 'outbid_draft': return Colors.shades.white
+            case 'outbid': return `rgba(255,71,71,0.2)`
+            case 'no_offer': 
+                if(player_square?.player_id == player_id){ return Colors.brand.electric } else { return Colors.shades.white }
+            case 'draft_buy_offer': return Colors.shades.white
+            case 'draft_sell_offer': return Colors.shades.white
+            case 'existing_buy_offer':
+                if(player_square?.player_id == player_id){ return 'rgba(125,205,133,0.2)' } else { return Colors.shades.white }
+            case 'existing_sell_offer':
+                if(player_square?.player_id == player_id){ return '#D9E8F7' } else { return '#D9E8F7' }
+            default: return Colors.shades.white
+        }
+    }
+    const getSquareBorderWidth = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'no_bid': return 0
+            case 'existing_bid': return 0
+            case 'bid_draft': return 2
+            case 'outbid_draft': return 2
+            case 'outbid': return 0
+            case 'no_offer': return 0
+            case 'draft_buy_offer': return 2
+            case 'draft_sell_offer': return 2
+            case 'existing_buy_offer':
+                if(player_square?.player_id == player_id){ return 1 } else { return 0 }
+            case 'existing_sell_offer': 
+                if(player_square?.player_id == player_id){ return 1 } else { return 1 }
+
+            default: return 0
+        }
+    }
+    const getSquareBorderColor = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'no_bid': return Colors.shades.white
+            case 'existing_bid': return Colors.shades.white
+            case 'bid_draft': return Colors.brand.electric
+            case 'outbid_draft': return Colors.utility.error
+            case 'outbid': return Colors.utility.error
+            case 'no_offer': return Colors.shades.white
+            case 'draft_buy_offer': return Colors.brand.electric
+            case 'draft_sell_offer': return Colors.brand.electric
+            case 'existing_buy_offer':
+                if(player_square?.player_id == player_id){ return Colors.utility.success } else { return Colors.shades.white }
+            case 'existing_sell_offer': 
+                if(player_square?.player_id == player_id){ return Colors.brand.cyan } else { return Colors.brand.electric }
+            default: return Colors.shades.white
+        }
+    }
+    const getSquareFontColor = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'no_bid': return Colors.brand.slate
+            case 'existing_bid':
+                if(player_square?.player_id == player_id){ return Colors.shades.white } else { return Colors.brand.slate }
+            case 'bid_draft': return Colors.brand.electric
+            case 'outbid_draft': return Colors.utility.error
+            case 'outbid': return Colors.utility.error
+            case 'no_offer':
+                if(player_square?.player_id == player_id){ return Colors.shades.white } else { return Colors.brand.electric }
+            case 'draft_buy_offer': return Colors.brand.electric
+            case 'draft_sell_offer': return Colors.brand.electric
+            case 'existing_buy_offer': 
+                if(player_square?.player_id == player_id){ return Colors.brand.slate } else { return Colors.brand.slate }
+            case 'existing_sell_offer':
+                if(player_square?.player_id == player_id){ return Colors.brand.slate } else { return Colors.brand.slate }
+            default: return Colors.brand.slate
+        }
+    }
+
+    const isUserIconVisible = (square_state:SquareStateProps) => {
+        if(!square_state){ return false }
+        if(player_square?.player_id == player_id){ return true }
+        if(draft_square_offer){ return true }
+        if(draft_player_square){ return true }
+        if(player_square && player_square.player_id == player_id){ return true }
+        return false
+    }
+
+    const getSquareBorderTopWidth = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'existing_sell_offer': return 6
+            case 'existing_buy_offer': 
+                if(player_square?.player_id == player_id){ return 6 } else { return 0 }
+
+            default: return getSquareBorderWidth(square_state)
+        }
+    }
+
+    const getSquareText = (square_state:SquareStateProps) => {
+        switch(square_state){
+            case 'no_bid': return 'BID'
+            case 'existing_bid': return `${cl}${player_square?.purchase_price?.toFixed(2)}`
+            case 'bid_draft': return `${cl}${draft_player_square?.purchase_price?.toFixed(2)}`
+            case 'outbid_draft': return `${cl}${draft_player_square?.purchase_price?.toFixed(2)}`
+            case 'outbid': return `${cl}${player_square?.purchase_price?.toFixed(2)}`
+            case 'no_offer': 
+                if(player_square?.player_id == player_id){ return 'SELL' } else { return 'OFFER' }
+            case 'draft_buy_offer': return `${cl}${draft_square_offer?.amount?.toFixed(2)}`
+            case 'draft_sell_offer': return `${cl}${draft_square_offer?.amount?.toFixed(2)}`
+            case 'existing_buy_offer': return `${cl}${square_offer?.amount?.toFixed(2)}`
+            case 'existing_sell_offer': return `${cl}${square_offer?.amount?.toFixed(2)}`
+            default: return 'BID'
+        }
+    }
+    const square_state = getStateOfSquare()
+    let showSubText:string|undefined
+    if(square_state === 'existing_buy_offer' && player_square?.player_id != player_id){ showSubText = 'OFFER' }
+    if(square_state === 'existing_buy_offer' && player_square?.player_id == player_id){ showSubText = 'SELL' }
+    if(square_state === 'existing_sell_offer' && player_square?.player_id != player_id){ showSubText = 'BUY' }
+
+    return (
+        <TouchableOpacity style={{ margin:3, height:40, width:40, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:getSquareBackgroundColor(square_state), borderWidth:getSquareBorderWidth(square_state), borderTopWidth:getSquareBorderTopWidth(square_state), borderColor:getSquareBorderColor(square_state) }} onPress={() => onSquareSelect(square, draft_player_square||draft_square_offer?'remove':'add')}>
+            {isUserIconVisible(square_state) ? 
+            <Icons.UserIcon size={14} color={getSquareFontColor(square_state)} />
+            :<></>}
+            <View>
+                {square_state == 'no_bid' ?
+                <Icons.UnbidSquare color={event?.home?.primary_color} secondary_color={event?.away?.primary_color}/>
+                :
+                <Text size={12} weight='regular' color={getSquareFontColor(square_state)} textAlign='center'>{getSquareText(square_state)}</Text>
+                }
+            </View>
+            {showSubText ?
+            <Text size={12} weight='regular' color={Colors.brand.electric} textAlign='center'>{showSubText}</Text>
+            :<></>}
+        </TouchableOpacity>
+    )
+}
+
+export default SquareCard

package/src/Squares/components/SquareOfferCard.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { View, Image, TouchableOpacity, ImageBackground } from 'react-native';
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { EventProps, PlayerSquareProps, SquareOfferProps, SquareProps } from '../../types';
+import { SquaresApi } from '../api';
+
+type SquareOfferCardProps = { 
+    player_id:string, 
+    square:SquareProps, 
+    player_square:PlayerSquareProps, 
+    square_offer:SquareOfferProps, 
+    offerCompetitionSquares:any, 
+    event?:EventProps
+}
+const SquareOfferCard = ({ player_id, square, player_square, square_offer, event }: SquareOfferCardProps ) => {
+    const [ loading, setLoading ] = useState(false)
+    const handleResponse = async(response:string) => {
+        if(loading){ return  } //No mashymashy
+        setLoading(true)
+        switch(response){
+            case 'accepted':
+                await SquaresApi.offserSquare({ ...square_offer, status: 'accepted' })
+                break
+            case 'rejected':
+                await SquaresApi.offserSquare({ ...square_offer, status: 'rejected' })
+                break
+            case 'withdrawn':
+                await SquaresApi.offserSquare({ ...square_offer, status: 'withdrawn' })
+                break
+            default: break
+        }
+        setLoading(false)
+    }
+    
+    
+    const cl = square_offer.market_type === 'FOR_MONEY' ? '$' : 'E'
+    const mine = square_offer.offerer_id == player_id ? true : false
+    return (
+        <View style={{ flex:1, width:330, margin:5, borderRadius:10, backgroundColor:Colors.shades.white }}>
+            <View style={{padding:10}}>
+                <View style={{flexDirection:'row', alignItems:'flex-start', justifyContent:'space-between', marginBottom:16}}>
+                    <View style={{flexDirection:'row', alignItems:'center'}}>
+                        <View style={{backgroundColor:Colors.brand.cyan, height:36, width:36, borderRadius:4, justifyContent:'center', alignItems:'center'}}>
+                            <Image style={{height: 18, width:18}} source={require('../../../assets/images/icon_sparkline.png')} />                
+                        </View>
+                        <View style={{marginLeft:12}}>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>Squares{square_offer.buy_sell_ind === 'sell'?' Sale':' Buy'} Offer</Text>
+                        </View>
+                    </View>
+                    <View />
+                </View>
+
+                <View style={{flexDirection:'row', alignItems:'center'}}>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' style={{flex:3/4}}>Square</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' textAlign='right' style={{flex:1/4}}>{event?.home?.abbr+': '??''}{square.square_score_x}, {event?.away?.abbr+': '??''}{square.square_score_y}</Text>
+                </View>
+                <View style={{flexDirection:'row', alignItems:'center', marginTop:10}}>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' style={{flex:3/4}}>Purchased For</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' textAlign='right' style={{flex:1/4}}>{cl}{player_square.purchase_price.toFixed(2)}</Text>
+                </View>
+                <View style={{flexDirection:'row', alignItems:'center', marginTop:10}}>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' style={{flex:3/4}}>Offer Amount</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular' textAlign='right' style={{flex:1/4}}>{cl}{square_offer.amount.toFixed(2)}</Text>
+                </View>
+            </View>
+            {mine ?
+
+            <ImageBackground source={require('../../../assets/images/offer_action_bar.png')} style={{flex:1, flexDirection:'row', alignItems:'center', padding:12, borderBottomRightRadius:10, borderBottomLeftRadius:10}}>
+                <View style={{flex:3/7}}>
+                    <Text size={12} color={Colors.shades.white} weight='semibold'>WITHDRAW OFFER?</Text>
+                    <Text size={12} color={Colors.shades.white} weight='regular'>Do you wish to withdraw this offer?</Text>
+                </View>
+                <View style={{flex:4/7, flexDirection:'row', alignItems:'center', paddingLeft:10}}>
+                    <TouchableOpacity style={{flex:1, borderWidth:1, borderColor:Colors.shades.white, borderRadius:60, padding:10, marginLeft:4}} onPress={() => handleResponse('withdrawn')}>
+                        <Text size={12} weight='semibold' textAlign='center' color={Colors.shades.white}>Withdraw</Text>
+                    </TouchableOpacity>
+                </View>
+            </ImageBackground>
+            :
+            <ImageBackground source={require('../../../assets/images/offer_action_bar.png')} style={{flex:1, flexDirection:'row', alignItems:'center', padding:12, borderBottomRightRadius:10, borderBottomLeftRadius:10}}>
+                <View style={{flex:3/7}}>
+                    <Text size={12} color={Colors.shades.white} weight='semibold'>ACCEPT OFFER?</Text>
+                    <Text size={12} color={Colors.shades.white} weight='regular'>Do you wish to sell your square for this offer?</Text>
+                </View>
+                <View style={{flex:4/7, flexDirection:'row', alignItems:'center', paddingLeft:10}}>
+                    <TouchableOpacity style={{flex:1, borderRadius:60, padding:10, marginRight:4, backgroundColor:Colors.shades.white}} onPress={() => handleResponse('accepted')}>
+                        <Text size={12} weight='semibold' textAlign='center' color={Colors.brand.midnight}>Accept</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{flex:1, borderWidth:1, borderColor:Colors.shades.white, borderRadius:60, padding:10, marginLeft:4}} onPress={() => handleResponse('rejected')}>
+                        <Text size={12} weight='semibold' textAlign='center' color={Colors.shades.white}>Decline</Text>
+                    </TouchableOpacity>
+                </View>
+            </ImageBackground>
+            }
+        </View>
+    )
+}
+
+
+export default SquareOfferCard

package/src/Squares/components/SquareOwners.tsx

@@ -0,0 +1,69 @@
+import { View, FlatList, Image, TouchableOpacity } from 'react-native';
+import type { PlayerSquareProps, PublicPlayerProps } from "../../types";
+import { view_styles } from '../../constants/styles';
+import { Icons, Text } from '../../Components';
+import { SqauresHelpers } from '../api';
+import Colors from '../../constants/colors';
+import { useState } from 'react';
+
+
+type SquareOwnersCardProps = {
+    player_squares:PlayerSquareProps[],
+    players:PublicPlayerProps[],
+    onPlayerSelect:(player:PublicPlayerProps) => void
+}
+const SquareOwnersCard = ({ player_squares, players, onPlayerSelect }:SquareOwnersCardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+    const ownerships = SqauresHelpers.getOwnerShipPercents(player_squares);
+
+    const renderOwners = (data:{ item: { player_id:string, owned_squares:number, owned_pct:number }, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        return (
+            <TouchableOpacity style={{ margin:3, borderRadius:4, borderColor:Colors.shades.shade600, justifyContent:'center', maxWidth:100, ...view_styles.float }} onPress={() => onPlayerSelect(player)}>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:90, width:90, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                <View style={{ position:'absolute', left:0, right:0, bottom:0, borderBottomRightRadius:4, borderBottomLeftRadius:4, backgroundColor:Colors.shades.white }}>
+                    <View style={{ padding:10 }}>
+                        <Text theme='header_2'>@{player.username}</Text>
+                    </View>
+                    <View style={{ position:'absolute', left:0, right:0, top:-15, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ height:30, width:30, backgroundColor:Colors.shades.white, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                            <Text color={Colors.brand.midnight} size={12} weight='bold'>{(data.item.owned_pct * 100).toFixed()}%</Text>
+                        </View>
+                        
+                    </View>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.OwnedSquareIcon size={18} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>SQUARE OWNERS</Text>
+                    <Text style={{ marginTop:3 }} theme='body_2'>Players that own or have highest bid on at least 1 square</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={view_styles.section_body}>
+                <FlatList
+                    data={ownerships}
+                    renderItem={renderOwners}
+                    horizontal
+                    keyExtractor={(item) => item.player_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>   
+    )
+}
+
+export default SquareOwnersCard

package/src/Squares/components/SquaresBoard.tsx

@@ -0,0 +1,161 @@
+import { Icons, Text } from "../../Components";
+import type { EventProps, PlayerSquareProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps } from "../../types"
+import { View, FlatList, ScrollView, TouchableOpacity } from 'react-native';
+import SquareCard from "./SquareCard";
+import { SqauresHelpers } from "../api";
+import Colors from "../../constants/colors";
+import { view_styles } from "../../constants/styles";
+import { useState } from "react";
+
+type SquaresBoardProps = {
+    squares_competition:SquaresCompetitionProps,
+    squares:SquareProps[],
+    event?:EventProps,
+    onSquareBid:(square:SquareProps, action:'add'|'remove') => void,
+    onSquareOffer:(square:SquareProps, action:'add'|'remove') => void,
+    player_id?:string,
+    square_offers:SquareOfferProps[],
+    player_squares:PlayerSquareProps[],
+    player_square_history:PlayerSquareProps[],
+    square_results:SquareResultProps[],
+    square_bids:PlayerSquareProps[],
+    draft_square_offers:SquareOfferProps[]
+
+}
+const SquaresBoard = ({ 
+    player_id, event, square_bids, draft_square_offers, squares_competition, player_square_history, square_offers, squares, player_squares, onSquareBid, onSquareOffer 
+}:SquaresBoardProps) => {
+    const [ expanded, setExpanded ] = useState(true);
+
+    const comp_status = SqauresHelpers.getCompStatus(event, squares_competition);
+    const unique_score_y = [ ...new Set(squares.map(s => s.square_score_y)) ].sort((a,b) => a - b)
+
+    const handleSquareSelect = (square:SquareProps, action:'remove'|'add') => {
+        switch(comp_status){
+            case 'not_started': return onSquareBid(square, action)
+            case 'closed': return alert('Auction squares has completed')
+            case 'in_progress': return onSquareOffer(square, action) 
+            default: return
+        }
+    }
+    
+    const renderXSquares = (data: { item:SquareProps, index:number }) => {
+        let player_square = player_squares.find(s => s.sq_square_id == data.item.sq_square_id)
+        let draft_player_square = square_bids.find(s => s.sq_square_id == data.item.sq_square_id)
+        let draft_square_offer = draft_square_offers.find(s => s.sq_player_square_id == player_square?.sq_player_square_id)
+        let outbid_player_square:PlayerSquareProps | undefined = undefined
+        let square_offer = square_offers.find(s => s.sq_player_square_id == player_square?.sq_player_square_id)
+        if(player_id && player_square && player_square.player_id != player_id){ 
+            outbid_player_square = player_square_history.find(s => s.sq_square_id == data.item.sq_square_id) 
+        }
+        const event_status = SqauresHelpers.getCompStatus(event, squares_competition);
+        return (
+            <SquareCard
+                player_id={player_id}
+                square={data.item}
+                outbid_player_square={outbid_player_square}
+                market_type={squares_competition.market_type}
+                player_square={player_square}
+                draft_player_square={draft_player_square}
+                draft_square_offer={draft_square_offer}
+                square_offer={square_offer}
+                event_status={event_status}
+                onSquareSelect={(square, action) => handleSquareSelect(square, action)}
+            />
+        )
+    }
+    
+    const renderYSquares = (data: { item:number, index:number }) => {
+        const x_squares = squares.filter(s => s.square_score_y == data.item);
+        return (
+            <View>
+                <FlatList
+                    data={x_squares.sort((a,b) => a.square_score_x - b.square_score_x)}
+                    horizontal
+                    scrollEnabled={false}
+                    renderItem={renderXSquares}
+                    keyExtractor={(item) => item.sq_square_id.toString()}
+                />
+            </View>
+        )
+    }
+
+    const away_name = `${event?.away?.market_name} ${event?.away?.name}`
+    const TEXT_LENGTH = away_name.length * 8
+    const TEXT_HEIGHT = 20;
+    const OFFSET = TEXT_LENGTH / 2 - TEXT_HEIGHT / 2
+    
+    return (
+        <View style={{ ...view_styles.section, minWidth:350, maxWidth:600 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.SquaresIcon size={18} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header">SQUARES BOARD</Text>
+                    <Text style={{ marginTop:3 }} theme="body_2">Bid, buy, sell squares using the board below.</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={view_styles.section_body} nativeID="board">
+                <ScrollView horizontal style={{ marginLeft:20 }}>
+                    <View>
+                        <View style={{ flexDirection:'row', overflow:'scroll', marginLeft:4 }}>
+                            {unique_score_y.map(num => {
+                                return (
+                                    <View key={`y_${num}`} style={{ margin:3, justifyContent:'center', alignItems:'center', height:20, width:40, backgroundColor:'transparent' }}>
+                                        <Text theme="header_2" textAlign="center">{num}</Text>
+                                    </View>
+                                )
+                            })}
+                        </View>
+                        <View style={{ backgroundColor:Colors.shades.shade100, padding:2, borderRadius:8, marginLeft:2 }}>
+                            <FlatList
+                                data={unique_score_y}
+                                renderItem={renderYSquares}
+                                keyExtractor={(item) => `x_${item}`}
+                            />
+                        </View>
+                    </View>
+                </ScrollView>
+                <View style={{ position:'absolute', top: 47, backgroundColor:'transparent' }}>
+                    {unique_score_y.map(num => {
+                        return (
+                            <View key={`x_${num}`} style={{ margin:3, justifyContent:'center', alignItems:'center', height:40, width:20, backgroundColor:'transparent' }}>
+                                <Text theme='header_2'>{num}</Text>
+                            </View>
+                        )
+                    })}
+                </View>
+                {event && event.home ?
+                <View style={{ position:'absolute', top:4, left:0, right:0, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme="header_2">{event.home.market_name} {event.home.name}</Text>
+                </View>
+                :<></>}
+                {event && event.away ?
+                <View style={{ position:'absolute', top:0, left:4, bottom:0, justifyContent:'center' }}>
+                    <View style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
+                        <Text 
+                            textAlign="center"
+                            style={{
+                                transform: [
+                                    { rotate: "-90deg" }, 
+                                    { translateX: -OFFSET }, 
+                                    { translateY: -OFFSET }
+                                ],
+                                width: TEXT_LENGTH,
+                                height: TEXT_HEIGHT
+                            }}
+                            theme="header_2"
+                        >
+                            {away_name}
+                        </Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SquaresBoard

package/src/Squares/components/SquaresDetails.tsx

@@ -0,0 +1,54 @@
+import { TouchableOpacity, View } from "react-native"
+import type { SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../../types"
+import { view_styles } from "../../constants/styles"
+import { Icons, Text } from "../../Components"
+import Colors from "../../constants/colors"
+import { useState } from "react"
+
+type SquaresDetailsProps = {
+    squares_competition:SquaresCompetitionProps,
+    squares_type?:SquaresTypeProps,
+    squares_payout_type?:SquaresPayoutProps
+}
+
+const SquaresDetails = ({ squares_competition, squares_type, squares_payout_type }:SquaresDetailsProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    return (
+        <View nativeID="competition_details" style={{ ...view_styles.section, minWidth:350 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.SettingsIcon size={18} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header">COMPETITION DETAILS</Text>
+                    <Text style={{ marginTop: 4 }} theme="body_2">Detailed Information on this competition</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                {squares_type ?
+                <View style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="body">Type</Text>
+                    <Text theme="header_2">{squares_type.sq_type_name}</Text>
+                </View>
+                :<></>}
+                <View style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="body">Initial Square Price</Text>
+                    <Text theme="header_2">${squares_competition.minimum_square_price.toFixed(2)}</Text>
+                </View>
+                {squares_payout_type ?
+                <View style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="body">Payout</Text>
+                    <Text theme="header_2">{squares_payout_type.sq_payout_name.toUpperCase()}</Text>
+                </View>
+                :<></>}
+                <View style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="body">Payout Frequency</Text>
+                    <Text theme="header_2">{squares_competition.payout_frequency} Quarters</Text>
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SquaresDetails