9)[사이드프로젝트]App개발_전국국밥-내기할래 페이지

내기할래 페이지

1) 구성

1-1 ) 인원수 선택화면 : 2~6명까지 선택이 가능하며, 최소인원 이나 최대인원이 넘어가면 Alert를 띄운다.

1-2)  인원수 구성에 맞게 이름을 입력받을 수 캐릭터를 설정한다.

1-3)   캐릭터와 이름을 입력 받으면 랜덤함수를 통해 timer를 선택하고 시작하기를 누르면

        애니메이션이 동작하여 위에서 부터 차례대로 가장빠른 순서대로 나열된다.

1-4)   마지막으로 결과보기를 클릭 하면 해당 결과가 나오게 된다.

 

2) 코드확인

1-1) 인원수 선택 화면

인원수 선택 화면

// 인원 선택을 저장할 수 있는 state
const [number,setNumber]=useState(2);
// 처음 인원수 선정 후 시작하기
const [ready,setReady]=useState(false);


// 인원을 선택하고 setNumber를 통해 상태를 변경함
<Container>
        <ContentContainer ready={ready}>
                {/* // 초반에 인원 수 선정하는 component  */}
                {!ready && 
                <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
                    <NumberTouch number={number} onPress={()=>{
                    if(number>=3){
                        setNumber(prev=>prev-1)
                    }else{
                        Alert.alert("최소 인원은 2명부터 입니다.")
                    }
                    }}>
                     <FontAwesome5 name="minus" size={24} color="#6c5ce7" />  
                </NumberTouch>
                
                <Number>{number}</Number>
                
                <NumberTouch number={number} onPress={()=>{
                    if(number<=5){
                        setNumber(prev=>prev+1)
                    }else{
                        Alert.alert("최대 인원은 6명 입니다.")
                    }
                    }}>
                     <FontAwesome5 name="plus" size={24} color="#6c5ce7" />
                </NumberTouch>
                
                </View>}
          </ContentContainer>    
 </Container>

1-2) 캐릭터 입력페이지

사용자 이름 입력 화면

 // 각 input에 대한 값을 받아옴
const [contentText0,setContentText0]=useState("");
const [contentText1,setContentText1]=useState("");
const [contentText2,setContentText2]=useState("");
const [contentText3,setContentText3]=useState("");
const [contentText4,setContentText4]=useState("");
const [contentText5,setContentText5]=useState("");


{   OrderdMember.length==0 &&
                    ready && 
                    <>
                    // 여기서 number 숫자에 맞게 Array를 생성하기 위해서 
                    // [...Array(number)]를 사용한다. 
                    // ex) number가 3이면, [undefined,undefined,undefined] 이렇게 길이가3개인
                    // 배열이 생성된다.
                    
                    {[...Array(number)].map((n, index) => {
                        return(
                            <View 
                                key={index} 
                                style={{
                                    flexDirection:"row",
                                    justifyContent:"center",
                                    alignItems:"center",
                                    backgroundColor:"white",
                                    flex:1
                                }}>
                                // index에 따라서 이미지를 다르게 불러온다.
                                <ImageBackground source={index==0?require('../assets/back1.png'):index==1?require('../assets/back2.png'):index==2?require('../assets/back3.png'):index==3?require('../assets/back4.png'):index==4?require('../assets/back5.png'):require('../assets/back6.png')} style={{width: '100%', height: '100%'}} 
                                                imageStyle={{width:"100%",height:"100%",borderTopLeftRadius:index==0?30:0,borderTopRightRadius:index==0?30:0,opacity:0.5,position:"relative"}}
                                                resizeMode= 'cover'
                                            >       
                                </ImageBackground>
                                <GameInputComponent 
                                   style={{position:"absolute"}}
                                   >
                                   // index에 따라서 이미지를 다르게 불러온다.
                                    <Image 
                                        source={index==0?require('../assets/alla.png'):index==1?require('../assets/alla2.png'):index==2?require('../assets/alla3.png'):index==3?require('../assets/alla4.png'):index==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                        style={{
                                            resizeMode: 'contain',
                                            width:80,
                                            height:80
                                        }}
                                        >
                                    </Image>
                                   
                                   // 사용자가 입력하는 text가 바로 state로 변경하기 위해서
                                   // Textinput을 사용한다.
                                    <TextInput onChangeText={index==0?(txt)=>{setContentText0(txt)}:index==1?(txt)=>{setContentText1(txt)}:index==2?(txt)=>{setContentText2(txt)}:index==3?(txt)=>{setContentText3(txt)}:index==4?(txt)=>{setContentText4(txt)}:(txt)=>{setContentText5(txt)}}
                                            value={index==0?contentText0:index==1?contentText1:index==2?contentText2:index==3?contentText3:index==4?contentText4:contentText5}
                                    ></TextInput>
                                </GameInputComponent>
                                
                            </View>
                        )
                    })}
                    
                    
  // 하단의 선택버튼을 누르면 onsubmit 함수가 작동한다.
  
  <View
    style={{
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:"white",
    }}>
        <ImageBackground source={require('../assets/back_bottom.png')} style={{width: '100%', height: '100%'}} 
            imageStyle={{width:"100%",height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30,position:"relative",opacity:0.5}}
            resizeMode= 'cover'
            >       
        </ImageBackground>
        <Btn onPress={onSubmit} style={{position:"absolute"}}>
            <BtnText>START</BtnText>
        </Btn>
    </View>

onSubmit 함수

-> 여기서 전체적으로 사람인원과 애니메이션 timer를 위한 random 숫자를 가진 object가 생성된다.

전체적인 순서를 보면

1) 인원수를 입력 받는다  , number 변수에 저장

2) number의 수에 맞게 빈배열을 만들고, 빈배열에 내에 

   {  index(입력받은순서),   사용자 이름 ,   랜덤숫자 }  를 전달받는다. 

   이 떄 랜덤숫자는 animation이 될 때 화면 끝까지 움직이는 시간을 의미하며, sort를 통해서 랜덤숫자대로 

   배열을 정렬한다.

3) 정렬된 배열을 setOrderedMember ( members) 를 통해서 OrderedMembers에 넣는다.

OrderedMembers 확인

    const random_obj=(contentArray)=>{
        // member에 담을 array를 만듦
        {[...Array(number)].map((n, index) => {
            const timer=10*Math.floor(Math.random() * 100 + 100)
            members.push({order:index,name:contentArray[index],val:timer})
        })}

        //sort
        members.sort(function(a,b) {
            return a.val - b.val;
        });

        setOrderedMember(members)
        // const maxTimer = members.reduce(function (prev, current) {
        //     return (prev.val > current.val) ? prev.val : current.val
        //  });

        return members
    }
    

    const onSubmit=()=>{
        if(number===2){
            if(contentText0==="" || contentText1===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray = [contentText0,contentText1]
            random_obj(contentArray);

        }else if(number===3){
            if(contentText0==="" || contentText1==="" ||contentText2===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2]
            random_obj(contentArray);

        }else if(number===4){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3]
            random_obj(contentArray);

        }else if(number===5){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3==="" || contentText4===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3,contentText4]
            random_obj(contentArray);

        }else if(number===6){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3==="" || contentText4==="" || contentText5===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3,contentText4,contentText5]
            random_obj(contentArray);

        }
        setContentText0("");
        setContentText1("");
        setContentText2("");
        setContentText3("");
        setContentText4("");
        setContentText5("");

    }

 

1-3) Animation 화면

애니메이션 화면

const CarComponents=({member,clicked,SCREEN_WIDTH,order,timer})=>{
    
    // useRef를 통해서 상태가 바껴서 UI가 재렌더링 되더라도 포지션이 변경되지않게
    // 설정한다.
    const POSITION = useRef(
        new Animated.ValueXY({
          x: 0,
          y: 0,
        })
      ).current;

	// Animation을 사용하여 SCREEN_WIDTH에 알맞는 길이 정도로 최종 이동할 목적지를 선정한다
    const goMove = (timer)=>{
        Animated.timing(POSITION, {
          toValue: {
            x: SCREEN_WIDTH / 2 + 90,
            y: 0,
          },duration:timer,
          useNativeDriver: false,
        }).start();
      }
    
    const Reset=()=>{
        return(
            POSITION.setValue(
                {x:0,y:0}
            )
        )

    }
    
    // 여기서 click은 props로 받아오며
    // clicked={OrderdMember?true:false} 로 OrderdMember가 생성되면 true로 애니메이션이
    // 동작하도록 한다.
    
    useEffect(()=>{
        // click 했을 때 
        if(clicked){
            goMove(timer);
            // console.log("시작")
        }
        // click하고 나서 
        else{
            Reset();
            // console.log("reset")

        }
    },[clicked])
    
    return(
        <GamePath style={{position:"absolute"}}>
            <Box style={{
                transform:[...POSITION.getTranslateTransform()],
                flexDirection:"row"
                }}>
                <Image 
                    source={parseInt(order)==0?require('../assets/alla.png'):parseInt(order)==1?require('../assets/alla2.png'):parseInt(order)==2?require('../assets/alla3.png'):parseInt(order)==3?require('../assets/alla4.png'):parseInt(order)==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                    style={{
                        resizeMode: 'contain',
                        width:70,
                        height:70,
                    }}
                    />
                {/* <Name>{member}</Name> */}
            </Box>
                
        </GamePath>
    )

}

1-4) 결과화면

결과화면

-> Modal을 활용하여 결과 화면이 나오도록 한다.

 <Modal isVisible={isModalVisible}>
                <View style={styles.modal_style}>
                    {OrderdMember.length!=0 && 
                                <AwardContainer>
                                <Result_Tile>게임결과</Result_Tile>
                                <AwardRowFirst>
                                    <Circle rank={1}>
                                            <Image 
                                                    source={OrderdMember[0].order==0?require('../assets/alla.png'):OrderdMember[0].order==1?require('../assets/alla2.png'):OrderdMember[0].order==2?require('../assets/alla3.png'):OrderdMember[0].order==3?require('../assets/alla4.png'):OrderdMember[0].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                    style={{
                                                        resizeMode: 'contain',
                                                        width:50,
                                                        height:50
                                                    }}
                                                >
                                            </Image>
                                            <MedalText>🥇</MedalText>
                                    </Circle>
                                </AwardRowFirst>
                                <AwardRowSecond>
                                    <Circle rank={2}>
                                         <Image 
                                                source={OrderdMember[1].order==0?require('../assets/alla.png'):OrderdMember[1].order==1?require('../assets/alla2.png'):OrderdMember[1].order==2?require('../assets/alla3.png'):OrderdMember[1].order==3?require('../assets/alla4.png'):OrderdMember[1].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                    style={{
                                                        resizeMode: 'contain',
                                                        width:50,
                                                        height:50
                                                    }}
                                                >
                                            </Image>
                                            <MedalText>🥈</MedalText>
                                    </Circle>
                                    <Circle rank={3}>
                                        {OrderdMember.length>2 &&
                                            <>
                                                <Image 
                                                    source={OrderdMember[2].order==0?require('../assets/alla.png'):OrderdMember[2].order==1?require('../assets/alla2.png'):OrderdMember[2].order==2?require('../assets/alla3.png'):OrderdMember[2].order==3?require('../assets/alla4.png'):OrderdMember[2].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                        style={{
                                                            resizeMode: 'contain',
                                                            width:50,
                                                            height:50
                                                        }}
                                                    >
                                                </Image>
                                                <MedalText>🥉</MedalText>
                                            </>
                                        }
                                    </Circle>
                                </AwardRowSecond>
                            </AwardContainer>
                    }
                    <Reulst_Container>
                            { OrderdMember.length!=0 ? 
                            OrderdMember.map((arr,index)=>{
                            return(
                                <Result key={index}>
                                    <Result_left rank={index}>
                                        <Result_ComponentText>{index+1}</Result_ComponentText>
                                    </Result_left>
                                    <Result_right>
                                        <Result_ComponentText>{arr.name}</Result_ComponentText>
                                        <Image 
                                            source={arr.order==0?require('../assets/alla.png'):arr.order==1?require('../assets/alla2.png'):arr.order==2?require('../assets/alla3.png'):arr.order==3?require('../assets/alla4.png'):arr.order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                            style={{
                                                resizeMode: 'contain',
                                                width:40,
                                                height:40
                                            }}
                                        >
                                    </Image>
                                    </Result_right>
                                </Result>
                            )
                            }):null}
                            <Result_Footer>
                                <Btn onPress={()=>{
                                    toggleModal()
                                    setOrderedMember([])
                                    setReady(prev=>!prev)
                                    }}>
                                <BtnText>다시하기</BtnText>
                                </Btn>
                        </Result_Footer>
                    </Reulst_Container>
                   
                
                </View>
            </Modal>

 

* 내기하기페이지 전체코드

import React,{useState,useEffect} from 'react'
import {Alert,View,Dimensions,StyleSheet,Image,ImageBackground } from 'react-native';
import styled from 'styled-components/native'
import { FontAwesome5 } from '@expo/vector-icons';
import Modal from "react-native-modal";
import colors from './../colors';
import CarComponents from './../components/CarComponent';

const {width:SCREEN_WIDTH,height:SCREEN_HEIGHT}=Dimensions.get("window")

const Container=styled.View`
  flex:1;
  align-items:center;
  background-color:white;
  padding:10px 10px;
`;

const Title=styled.Text`
    color:#17c0eb;
    font-size:30px;
    font-weight:900;
`;

const PeronChooseTitle=styled.Text`
    color:white;
    font-size:30px;
    font-weight:bold;
`;


const ContentContainer=styled.View`
    flex:5;
    justify-content:center;
    align-items:center;
    background-color: ${(props)=>props.ready?"white":"#a29bfe"};
    /* border-radius:60px; */
    width:100%;
`;

const FooterContainer=styled.View`
    flex:1;
    justify-content:center;
    align-items:center;
`;

const NumberTouch=styled.TouchableOpacity`
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    border-radius:25px;
    background-color:white;
    margin:0px 30px;
    margin-top:40px;
`;

const Number=styled.Text`
    color:black;
    font-size:200px;
    font-weight:900;
`
const GameInputComponent=styled.View`
    flex-direction:row;
    /* border-width:2px;
    border-color:red; */
    width:100%;
    flex:1;
    justify-content:center;
    align-items:center;
`;

const TextInput=styled.TextInput`
    background-color:#ffcccc;
    height:40px;
    width:30%;
    padding:10px 10px;
    border-radius:10px;
    margin-bottom:10px;
`;

const Btn=styled.TouchableOpacity`
    background-color:${colors.btnColor};
    padding:10px 20px;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    width:70%;
    margin-left:5px;
    margin-right:5px;
`;

const BtnBack=styled.TouchableOpacity`
    background-color:#757575;
    padding:10px 20px;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    width:70%;
    margin-left:5px;
    margin-right:5px;
`;


const BtnText=styled.Text`
    color:white;
    font-size:15px;
    font-weight:600;
`;

const Result_Tile=styled(Title)`
  font-size:25px;
  font-weight:bold;
  color:white;
  text-align:center;
`;

const Reulst_Container=styled.View`
  flex:3;
  justify-content:center;
  align-items:center;
  /* border-width:2px;
  border-color:green; */
  padding:10px 10px;
  width:100%;
`;

const Result=styled.View`
  width:100%;
  flex-direction:row;
  flex:1;
  margin-bottom:5px;
`;

const Result_left=styled.View`
  background-color:${props=>props.rank==0?"#fedd33":props.rank==1?"#d9d9d9":props.rank==2?"#9d9050":"#aaa69d"};
  justify-content:center;
  align-items:center;
  flex:2;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
`;

const Result_right=styled.View`
  background-color:white;
  justify-content:space-around;
  align-items:center;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  flex:8;
  flex-direction:row;
`;
const Result_ComponentText=styled.Text`
  color:black;
  font-size:27px;
  font-weight:bold; 
`;

const Result_Footer=styled.View`
  width:100%;
  flex:1.2;
  justify-content:center;
  align-items:center;
`;

const AwardContainer=styled.View`
  flex:2;
  width:100%;
  height:100%;
`;
const AwardRowFirst=styled.View`
  flex:1;
  justify-content:center;
  align-items:center;
  flex-direction:row;
`;

const AwardRowSecond=styled.View`
  flex:1;
  justify-content:space-evenly;
  align-items:center;
  flex-direction:row;
`;


const Circle=styled.View`
  width:80px;
  height:80px;
  border-radius:40px;
  border-width:3px;
  border-color:${props=>props.rank==1?"#fedd33":props.rank==2?"#d9d9d9":"#9d9050"};
  background-color:white;
  justify-content:flex-start;
  align-items:center;
`;

const MedalText=styled.Text`
    font-size:30px;
    position:relative;
    top:-7px;
`;

const Game = () => {
    members=[]
    const [number,setNumber]=useState(2);
    // 처음 인원수 선정 후 시작하기
    const [ready,setReady]=useState(false);

    const [OrderdMember,setOrderedMember]=useState([])

     // 각 input에 대한 값을 받아옴
    const [contentText0,setContentText0]=useState("");
    const [contentText1,setContentText1]=useState("");
    const [contentText2,setContentText2]=useState("");
    const [contentText3,setContentText3]=useState("");
    const [contentText4,setContentText4]=useState("");
    const [contentText5,setContentText5]=useState("");

    // modal handler
    const [isModalVisible, setModalVisible] = useState(false);

    const toggleModal = () => {
        return(
          setModalVisible(prev=>!prev)
        )
      }
    

    const random_obj=(contentArray)=>{
        // member에 담을 array를 만듦
        {[...Array(number)].map((n, index) => {
            const timer=10*Math.floor(Math.random() * 100 + 100)
            members.push({order:index,name:contentArray[index],val:timer})
        })}

        //sort
        members.sort(function(a,b) {
            return a.val - b.val;
        });

        setOrderedMember(members)
        // const maxTimer = members.reduce(function (prev, current) {
        //     return (prev.val > current.val) ? prev.val : current.val
        //  });

        return members
    }
    

    const onSubmit=()=>{
        if(number===2){
            if(contentText0==="" || contentText1===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray = [contentText0,contentText1]
            random_obj(contentArray);

        }else if(number===3){
            if(contentText0==="" || contentText1==="" ||contentText2===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2]
            random_obj(contentArray);

        }else if(number===4){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3]
            random_obj(contentArray);

        }else if(number===5){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3==="" || contentText4===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3,contentText4]
            random_obj(contentArray);

        }else if(number===6){
            if(contentText0==="" || contentText1==="" || contentText2==="" || contentText3==="" || contentText4==="" || contentText5===""){
                return Alert.alert("이름을 입력하세요!")
            }
            const contentArray =[contentText0,contentText1,contentText2,contentText3,contentText4,contentText5]
            random_obj(contentArray);

        }
        setContentText0("");
        setContentText1("");
        setContentText2("");
        setContentText3("");
        setContentText4("");
        setContentText5("");

    }

    return (
        <Container>
            <ContentContainer ready={ready}>
                {/* // 초반에 인원 수 선정하는 component  */}

                {!ready && <>
                <PeronChooseTitle>인원설정</PeronChooseTitle>
                    <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
                        <NumberTouch number={number} onPress={()=>{
                        if(number>=3){
                            setNumber(prev=>prev-1)
                        }else{
                            Alert.alert("최소 인원은 2명부터 입니다.")
                        }
                        }}>
                        <FontAwesome5 name="minus" size={24} color="#6c5ce7" />  
                        </NumberTouch>
                        <Number>{number}</Number>
                        <NumberTouch number={number} onPress={()=>{
                            if(number<=5){
                                setNumber(prev=>prev+1)
                            }else{
                                Alert.alert("최대 인원은 6명 입니다.")
                            }
                            }}>
                        <FontAwesome5 name="plus" size={24} color="#6c5ce7" />
                    </NumberTouch>
                </View>
                </>
                }

                {/* // OrderedMember가 없을 때 , 초기 상태에서는 사용자 이름을 입력받음  */}
                
                {   OrderdMember.length==0 &&
                    ready && 
                    <>
                    {[...Array(number)].map((n, index) => {
                        return(
                            <View 
                                key={index} 
                                style={{
                                    flexDirection:"row",
                                    justifyContent:"center",
                                    alignItems:"center",
                                    backgroundColor:"white",
                                    flex:1
                                }}>
                                <ImageBackground source={index==0?require('../assets/back1.png'):index==1?require('../assets/back2.png'):index==2?require('../assets/back3.png'):index==3?require('../assets/back4.png'):index==4?require('../assets/back5.png'):require('../assets/back6.png')} style={{width: '100%', height: '100%'}} 
                                                imageStyle={{width:"100%",height:"100%",borderTopLeftRadius:index==0?30:0,borderTopRightRadius:index==0?30:0,opacity:0.4,position:"relative"}}
                                                resizeMode= 'cover'
                                            >       
                                </ImageBackground>
                                <GameInputComponent 
                                   style={{position:"absolute"}}
                                   >
                                    <Image 
                                        source={index==0?require('../assets/alla.png'):index==1?require('../assets/alla2.png'):index==2?require('../assets/alla3.png'):index==3?require('../assets/alla4.png'):index==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                        style={{
                                            resizeMode: 'contain',
                                            width:80,
                                            height:80
                                        }}
                                        >
                                    </Image>
                                    <TextInput onChangeText={index==0?(txt)=>{setContentText0(txt)}:index==1?(txt)=>{setContentText1(txt)}:index==2?(txt)=>{setContentText2(txt)}:index==3?(txt)=>{setContentText3(txt)}:index==4?(txt)=>{setContentText4(txt)}:(txt)=>{setContentText5(txt)}}
                                            value={index==0?contentText0:index==1?contentText1:index==2?contentText2:index==3?contentText3:index==4?contentText4:contentText5}
                                    ></TextInput>
                                </GameInputComponent>
                                
                            </View>
                        )
                    })}
                    </>
                }

                {/* //OrderMember가 생성된 상태에서 애니메이션 화면을 불러옴  */}

                {ready && OrderdMember && OrderdMember.map((member,index)=>{
                    return(
                        <View 
                            key={index} 
                            style={{
                                flexDirection:"row",
                                justifyContent:"center",
                                alignItems:"center",
                                backgroundColor:"white",
                                flex:1
                            }}>
                            <ImageBackground source={index==0?require('../assets/back1.png'):index==1?require('../assets/back2.png'):index==2?require('../assets/back3.png'):index==3?require('../assets/back4.png'):index==4?require('../assets/back5.png'):require('../assets/back6.png')} style={{width: '100%', height: '100%'}} 
                                            imageStyle={{width:"100%",height:"100%",borderTopLeftRadius:index==0?30:0,borderTopRightRadius:index==0?30:0,opacity:0.4,position:"relative"}}
                                            resizeMode= 'cover'
                                        >       
                            </ImageBackground>
                            <CarComponents key={index} order={member.order} member={member.name} clicked={OrderdMember?true:false} SCREEN_WIDTH={SCREEN_WIDTH} timer={member.val}>
                            </CarComponents>
                     </View>
                    )
                } )}
            </ContentContainer>
            <FooterContainer>
            {/* 1단계 ready 인 지 아닌 지 판별
                2단계 OrderdMember 가 있는 지 없는 지 판별  
                      있으면 START 버튼을 누른 상태이므로 결과보기로 바껴야함. 
            */}

            {!ready?<>
                <Btn onPress={()=>{setReady(prev=>!prev)}}>
                    <BtnText>시작하기</BtnText>
                </Btn>
            </>:
                OrderdMember.length!=0?
                <View
                    style={{
                        flexDirection:"row",
                        justifyContent:"center",
                        alignItems:"center",
                        backgroundColor:"white",
                    }}>
                    <ImageBackground source={require('../assets/back_bottom.png')} style={{width: '100%', height: '100%'}} 
                        imageStyle={{width:"100%",height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30,position:"relative",opacity:0.5}}
                        resizeMode= 'cover'
                        >       
                    </ImageBackground>
                    <Btn onPress={toggleModal} style={{position:"absolute"}}>
                        <BtnText>결과보기</BtnText>
                    </Btn>
                </View>
                :<View
                style={{
                    flexDirection:"row",
                    justifyContent:"center",
                    alignItems:"center",
                    backgroundColor:"white",
                }}>
                    <ImageBackground source={require('../assets/back_bottom.png')} style={{width: '100%', height: '100%'}} 
                        imageStyle={{width:"100%",height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30,position:"relative",opacity:0.5}}
                        resizeMode= 'cover'
                        >       
                    </ImageBackground>
                    <View style={{position:"absolute",justifyContent:"center",alignItems:"center",flexDirection:"row"}}>
                        <BtnBack onPress={()=>{setReady(prev=>!prev)}} >
                            <BtnText>Back</BtnText>
                        </BtnBack>
                        <Btn onPress={onSubmit} >
                            <BtnText>START</BtnText>
                        </Btn>
                    </View>

                </View>

            }
            <Modal isVisible={isModalVisible}>
                <View style={styles.modal_style}>
                    {OrderdMember.length!=0 && 
                                <AwardContainer>
                                <Result_Tile>게임결과</Result_Tile>
                                <AwardRowFirst>
                                    <Circle rank={1}>
                                            <Image 
                                                    source={OrderdMember[0].order==0?require('../assets/alla.png'):OrderdMember[0].order==1?require('../assets/alla2.png'):OrderdMember[0].order==2?require('../assets/alla3.png'):OrderdMember[0].order==3?require('../assets/alla4.png'):OrderdMember[0].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                    style={{
                                                        resizeMode: 'contain',
                                                        width:50,
                                                        height:50
                                                    }}
                                                >
                                            </Image>
                                            <MedalText>🥇</MedalText>
                                    </Circle>
                                </AwardRowFirst>
                                <AwardRowSecond>
                                    <Circle rank={2}>
                                         <Image 
                                                source={OrderdMember[1].order==0?require('../assets/alla.png'):OrderdMember[1].order==1?require('../assets/alla2.png'):OrderdMember[1].order==2?require('../assets/alla3.png'):OrderdMember[1].order==3?require('../assets/alla4.png'):OrderdMember[1].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                    style={{
                                                        resizeMode: 'contain',
                                                        width:50,
                                                        height:50
                                                    }}
                                                >
                                            </Image>
                                            <MedalText>🥈</MedalText>
                                    </Circle>
                                    <Circle rank={3}>
                                        {OrderdMember.length>2 &&
                                            <>
                                                <Image 
                                                    source={OrderdMember[2].order==0?require('../assets/alla.png'):OrderdMember[2].order==1?require('../assets/alla2.png'):OrderdMember[2].order==2?require('../assets/alla3.png'):OrderdMember[2].order==3?require('../assets/alla4.png'):OrderdMember[2].order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                                        style={{
                                                            resizeMode: 'contain',
                                                            width:50,
                                                            height:50
                                                        }}
                                                    >
                                                </Image>
                                                <MedalText>🥉</MedalText>
                                            </>
                                        }
                                    </Circle>
                                </AwardRowSecond>
                            </AwardContainer>
                    }
                    <Reulst_Container>
                            { OrderdMember.length!=0 ? 
                            OrderdMember.map((arr,index)=>{
                            return(
                                <Result key={index}>
                                    <Result_left rank={index}>
                                        <Result_ComponentText>{index+1}</Result_ComponentText>
                                    </Result_left>
                                    <Result_right>
                                        <Result_ComponentText>{arr.name}</Result_ComponentText>
                                        <Image 
                                            source={arr.order==0?require('../assets/alla.png'):arr.order==1?require('../assets/alla2.png'):arr.order==2?require('../assets/alla3.png'):arr.order==3?require('../assets/alla4.png'):arr.order==4?require('../assets/alla5.png'):require('../assets/alla6.png')}
                                            style={{
                                                resizeMode: 'contain',
                                                width:40,
                                                height:40
                                            }}
                                        >
                                    </Image>
                                    </Result_right>
                                </Result>
                            )
                            }):null}
                            <Result_Footer>
                                <Btn onPress={()=>{
                                    toggleModal()
                                    setOrderedMember([])
                                    setReady(prev=>!prev)
                                    }}>
                                <BtnText>다시하기</BtnText>
                                </Btn>
                        </Result_Footer>
                    </Reulst_Container>
                   
                
                </View>
            </Modal>
            </FooterContainer>
        </Container>
    )
}

const styles=StyleSheet.create({
    modal_style:{
      flex:1,
      backgroundColor:"rgba(209, 204, 192,0.5)",
      alignItems:"center",
      borderRadius:20,
      paddingVertical:5
      // borderWidth:3,
      // borderColor:"red"
      // justifyContent:"center"
    }
  
  })
  

export default Game