card betting game react-native App.js

App.js

import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import _ from 'lodash';

const nextCardHigher = "Next Card Will Be Higher";
const nextCardLower = "Next Card Will Be Lower";


const reqObj = {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    };


var face_map = (facecode) => {
    switch (facecode) {
        case 'A':
            return 1;
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '10':
            return parseInt(facecode)
        case 'J':
            return 11
        case 'Q':
            return 12
        case 'K':
            return 13
    }
};

const hiddenCard = 'https://facebook.github.io/react/logo-og.png';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            bet_result: 'You Won!',
            current_bet: nextCardHigher,
            test000: {deck_id: 424242, y: 233393},
            cursor_1: {},
            deck_id: null,
            card0_image: 'https://facebook.github.io/react/logo-og.png',
            card1_image: 'https://facebook.github.io/react/logo-og.png',
            card1_hidden: true
            // card0: {
            //     image: 'https://facebook.github.io/react/logo-og.png'
            // },
            // card1: {
            //     image: 'https://facebook.github.io/react/logo-og.png'
            // }
        }
    };


    componentDidMount() {

        // fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1', reqObj)
        //     .then(function(res) {
        //         result = JSON.parse(res._bodyText);
        //         this.state.cursor_1 = result;
        //         this.state.deck_id = result.deck_id;
        //         this.state.remaining = result.remaining;
        //         this.state.deck_fetch_success = result.success;
        //         this.state.shuffled = result.shuffled;
        //     })

        this.drawCard();
    };


    drawCard() {
        // alert('drawing');
        fetch('https://deckofcardsapi.com/api/deck/new/draw/?count=2', reqObj)
            .then((res)=> {
                // alert(res._bodyText)
                result = JSON.parse(res._bodyText);
                // alert(result.success);
                if (result.success === true) {
                    var card0 = result.cards[0];
                    var rayy0 = card0.image.split('');
                    rayy0.splice(4, 0, 's');
                    var str0 = rayy0.join('');
                    var card1 = result.cards[1];
                    rayy0 = card1.image.split('');
                    rayy0.splice(4, 0, 's');
                    var str1 = rayy0.join('');
                    // alert(card0.code);
                    // alert(card1.code);
                    this.setState({card0_image:str0,
                        card0_code: card0.code,
                        card1_code: card1.code,
                        card1_image: str1});

                }
            })

    }

    render() {
        // var card1_uri = this.state.card1_image;
        var card1_uri = hiddenCard;
        var bet_result = null;
        var card1_higher = null;
        var betResult = '';
        if (this.state.card1_hidden === true) {
            card1_uri = hiddenCard;
        } else {
            card1_uri = this.state.card1_image;
            var rayy0 = this.state.card0_code.split('');
            var rayy1 = this.state.card1_code.split('');
            var face0 = face_map(rayy0[0]);
            var face1 = face_map(rayy1[0]);
            if (face1 >= face0) {
                card1_higher = true;
                // alert(this.state.current_bet);
                if (this.state.current_bet === nextCardHigher) {
                    bet_result = "You Won!"
                } else {
                    bet_result = "You Lost."
                }
            } else {
                card1_higher = false;
                // alert(this.state.current_bet);
                if (this.state.current_bet === nextCardLower) {
                    bet_result = "You Won!"
                } else {
                    bet_result = "You Lost."
                }
            }

        }
        return (
            <View style={styles.container}>

                <View style={{
                    height: '78%',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                }}>

                <Text>Bet on Cards</Text>


                <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '70%'}}>
                    <Image source={{uri: this.state.card0_image}}
                    style={{width: 120, height: 180}} />
                    <Image source={{uri: card1_uri}}
                    style={{width: 120, height: 180}} />
                </View>



                <Text>Your Bet: {this.state.current_bet} </Text>

                <Text> {this.state.card1_hidden ? '' : bet_result} </Text>
                    <View style = {{
                        display: 'flex',
                        flexDirection: 'row'
                    }}>
                        <Button
                            onPress={()=> {this.setState({current_bet: nextCardLower})}}
                            title="Lower" />
                        <Button
                            onPress={()=> {this.setState({current_bet: nextCardHigher})}}
                            title="Higher"/>
                    </View>

                    {this.state.card1_hidden ?
                        <Button
                            onPress={()=> {this.setState({card1_hidden: false})}}
                            title="Reveal"/>
                    :
                        <Button
                            onPress={()=> {
                                this.drawCard();
                                this.setState(
                                    {card1_hidden: true}
                                )
                            }}
                            title="New Deck"
                        />
                    }




                </View>

            </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});