MultiplayerRockPaperScissor/App.js at master · RBiswa787/MultiplayerRockPaperScissor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { useEffect, useState } from "react";
import { StyleSheet, Text, View,Image, TouchableOpacity } from "react-native";
import { Component } from "react/cjs/react.production.min";
import Game from "./Pages/Game";
import Open from "./Pages/Open";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// Replace this URL with your own socket-io host, or start the backend locally
const Stack = createNativeStackNavigator();
export default class App extends Component {
  render(){
    return(
      <NavigationContainer>
      <Stack.Navigator initialRouteName="Open" screenOptions={{
    headerShown: false
  }}>
        <Stack.Screen name="Open" component={Open} style={styles.screen}/>
        <Stack.Screen name="Game" component={Game} />
      </Stack.Navigator>
    </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  paragraph: {
    fontSize: 16,
  },
  footnote: {
    fontSize: 14,
    fontStyle: "italic",
  },
  gamespace:{
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop:"10%",
    width: "90%",
    aspectRatio: 0.75,
    borderColor: "black",
    borderWidth: 1,
    flexWrap: "wrap",
    alignItems: "center"
  },
  choices: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "90%",
    aspectRatio: 3.97,
    marginTop: "10%",
    borderWidth: 2,
    borderColor: "black",
    alignItems: "center"
  },
  rock: {
    height: "100%",
    aspectRatio: 1
  },
  pap:{
    height: "90%",
    aspectRatio: 0.50,
    alignSelf: "center",
    marginTop: "5%"

  },
  p1: {
    display: "flex",
    justifyContent: "center",
    width: "95%",
    height: "48.5%",
    borderWidth: 1,
    borderColor: "black",
    marginTop: "2%"
  },
  pap2:{
    height: "90%",
    aspectRatio: 0.50,
    alignSelf: "center",
    marginTop: "-5%",
    transform: [{rotate:"180deg"}]
  },
  score: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "90%",
    aspectRatio: 3.97,
    marginTop: "15%",
    borderWidth: 2,
    borderColor: "black",
    alignItems: "center"
  },
  click: {
    height: "90%",
    aspectRatio: 0.50,
    alignSelf: "center",
    marginTop: "5%"
  },
  button: {
    borderWidth: 1,
    borderColor: "black",
    width: "25%",
    aspectRatio: 1
  }
});