304_add2-PlayerPKStudy

component/2-PlayerPKHome/index.js → component/OnlineStudy/2-PlayerPKHome/index.js

@@ -5,10 +5,10 @@ import {
   StyleSheet,
   Dimensions,
   Image,
-  TouchableOpacity,
 } from 'react-native';
 import Img1 from './img/img1.png';
 import Img2 from './img/img2.png';
+import MyButton from '../MyButton';
 
 const {width, height} = Dimensions.get('window');
 
@@ -36,13 +36,13 @@ class TwoPlayerPKHome extends Component {
     return (
       <View style={styles.container}>
         <Image source={isChanged ? Img2 : Img1} style={styles.image} />
-        <TouchableOpacity
-          style={styles.buttonStyle}
+        <MyButton
+          style={styles.myButton}
+          title="开始"
           onPressIn={this.in}
           onPressOut={this.out}
-          onPress={this.start}>
-          <Text style={styles.textInButton}>开始</Text>
-        </TouchableOpacity>
+          onPress={this.start}
+        />
       </View>
     );
   }
@@ -54,26 +54,12 @@ const styles = StyleSheet.create({
     //opacity: 0.5,
     flex: 1,
   },
-  textInButton: {
-    fontSize: parseInt(height) / 22,
-    color: '#592202',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    top: parseInt(height) / 38,
-  },
-  buttonStyle: {
-    backgroundColor: '#CE9561',
-    height: parseInt(height) / 8,
-    width: parseInt(width) / 2,
-    marginHorizontal: parseInt(width) / 4,
-    marginVertical: parseInt(width) / 4,
-    borderRadius: 40,
-    borderWidth: 4,
-    borderColor: '#BF7636',
-  },
   image: {
     width: null,
     height: null,
+    flex: 3,
+  },
+  myButton: {
     flex: 1,
   },
 });

component/OnlineStudy/2-PlayerPKStudy/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions, Pressable} from 'react-native';
+import {Button} from 'react-native-elements';
+import MyButton from '../MyButton';
+import MyStatistics from '../MyStatistics';
+import MyTitle from "../MyTitle";
+
+const {width, height} = Dimensions.get('window');
+
+class TwoPlayerPKMode extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <MyTitle
+          title={'您已战胜' + '1' + '人'}
+          style={styles.containerTitle}
+        />
+        <View style={styles.containerMain}>
+          <MyStatistics />
+          <View style={styles.containerInCentre}>
+            <Text style={styles.text}>Study自习模块</Text>
+          </View>
+          <MyStatistics
+            containerStyle={styles.containerOnRight}
+            insideStyle={styles.containerInRightColumn}
+            textStyle={styles.textOnRight}
+          />
+        </View>
+        <View style={styles.containerTimer}>
+          <Text style={styles.textTimer}>09:15</Text>
+        </View>
+        <MyButton style={styles.myButton} title={'结算'} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  containerTitle: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  containerMain: {
+    flex: 3,
+    flexDirection: 'row',
+  },
+  containerTimer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  containerOnRight: {
+    borderColor: '#f4cb8c',
+    backgroundColor: '#BF7636',
+  },
+  containerInRightColumn: {
+    borderColor: '#f4cb8c',
+    backgroundColor: '#BF7636',
+  },
+  textOnRight: {
+    color: '#f4cb8c',
+  },
+  containerInCentre: {
+    borderWidth: 3,
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  textTimer: {
+    textAlignVertical: 'center',
+    flex: 1,
+    color: '#592202',
+    fontSize: parseInt(height) / 12,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  myButton: {
+    flex: 2,
+  },
+});
+
+export default TwoPlayerPKMode;

component/OnlineStudy/MyButton/index.js

+import React, {Component} from 'react';
+import {
+  Text,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+const {width, height} = Dimensions.get('window');
+
+class MyButton extends Component {
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    style: PropTypes.object,
+    title: PropTypes.string,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func,
+    onPress: PropTypes.func,
+  };
+
+  render() {
+    const {style, title, onPressIn, onPressOut, onPress} = this.props;
+    return (
+      <View style={{...styles.container, ...style}}>
+        <TouchableOpacity
+          style={styles.buttonStyle}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onPress={onPress}>
+          <Text style={styles.textInButton}>{title}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    flex: 1,
+  },
+  textInButton: {
+    flex: 1,
+    fontSize: parseInt(height) / 23,
+    color: '#592202',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
+  buttonStyle: {
+    alignSelf: 'center',
+    backgroundColor: '#e1c3a1',
+    height: parseInt(height) / 8,
+    width: '50%',
+    borderRadius: 40,
+    borderWidth: 4,
+    borderColor: '#BF7636',
+  },
+});
+
+export default MyButton;

component/OnlineStudy/MyStatistics/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions, Pressable} from 'react-native';
+import PropTypes from 'prop-types';
+
+const {width, height} = Dimensions.get('window');
+
+class MyStatistics extends Component {
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    containerStyle: PropTypes.object,
+    buttonStyle: PropTypes.object,
+    insideStyle: PropTypes.object,
+    textStyle: PropTypes.object,
+  };
+
+  render() {
+    const {containerStyle, buttonStyle, insideStyle, textStyle} = this.props;
+
+    return (
+      <View style={{...styles.container, ...containerStyle}}>
+        <Pressable style={{...styles.buttonStyle, ...buttonStyle}}>
+          <View style={{...styles.containerInside, ...insideStyle}}>
+            <Text style={{...styles.text, ...textStyle}}>user:{'\n'}self</Text>
+          </View>
+          <View style={{...styles.containerInside, ...insideStyle}}>
+            <Text style={{...styles.text, ...textStyle}}>level:{'\n'}gold</Text>
+          </View>
+          <View style={{...styles.containerInside, ...insideStyle}}>
+            <Text style={{...styles.text, ...textStyle}}>
+              this turn:{'\n'}1919min
+            </Text>
+          </View>
+          <View style={{...styles.containerInside, ...insideStyle}}>
+            <Text style={{...styles.text, ...textStyle}}>
+              this turn:{'\n'}1919min
+            </Text>
+          </View>
+        </Pressable>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 3,
+    borderColor: '#BF7636',
+    backgroundColor: '#f4cb8c',
+    //opacity: 0.5,
+    flex: 1,
+    margin: 3,
+  },
+  containerInside: {
+    borderWidth: 3,
+    borderColor: '#BF7636',
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    marginVertical: 5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 18,
+    color: '#BF7636',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  buttonStyle: {
+    borderRadius: 3,
+    flex: 1,
+    margin: 10,
+  },
+});
+
+export default MyStatistics;

component/2-PlayerPKStudy/index.js → component/OnlineStudy/MyTitle/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions} from 'react-native';
-import {Button} from 'react-native-elements';
+import {
+  Text,
+  StyleSheet,
+  Dimensions,
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
 
 const {width, height} = Dimensions.get('window');
 
-class TwoPlayerPKMode extends Component {
+class MyTitle extends Component {
   constructor() {
     super();
   }
 
+  static propTypes = {
+    style: PropTypes.object,
+    title: PropTypes.string,
+  };
+
   render() {
+    const {style, title} = this.props;
     return (
-      <View style={styles.container}>
-        <Text style={styles.text}>Study自习模块</Text>
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={this.onlineMode}
-        />
+      <View style={{...styles.container, ...style}}>
+        <View style={styles.titleStyle}>
+          <Text style={styles.textInButton}>{title}</Text>
+        </View>
       </View>
     );
   }
@@ -26,24 +33,25 @@ class TwoPlayerPKMode extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#F2E2CE',
-    //opacity: 0.5,
+    justifyContent: 'center',
     flex: 1,
   },
-  text: {
-    fontSize: 50,
+  textInButton: {
+    flex: 1,
+    marginHorizontal: '5%',
+    fontSize: parseInt(height) / 25,
+    color: '#592202',
     fontWeight: 'bold',
     textAlign: 'center',
+    textAlignVertical: 'center',
   },
-  buttonStyle: {
-    backgroundColor: '#BF7636',
-    borderRadius: 3,
-  },
-  button_containerStyle: {
-    width: parseInt(width) / 2,
-    marginHorizontal: parseInt(width) / 4,
-    marginVertical: parseInt(width) / 4,
+  titleStyle: {
+    alignSelf: 'center',
+    backgroundColor: '#F2E2CE',
+    height: '65%',
+    borderWidth: 3,
+    borderColor: '#BF7636',
   },
 });
 
-export default TwoPlayerPKMode;
+export default MyTitle;

component/OnlineStudy/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {Dimensions} from 'react-native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {NavigationContainer} from '@react-navigation/native';
-import OnlineStudyHome from '../OnlineStudyHome';
-import TwoPlayerPKHome from '../2-PlayerPKHome';
-import TwoPlayerPKMode from "../2-PlayerPKStudy";
+import OnlineStudyHome from './OnlineStudyHome';
+import TwoPlayerPKHome from './2-PlayerPKHome';
+import TwoPlayerPKMode from './2-PlayerPKStudy';
 
 const {width, height} = Dimensions.get('window');
 

package.json

@@ -14,6 +14,7 @@
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "axios": "^0.26.1",
+    "prop-types": "^15.8.1",
     "react": "17.0.2",
     "react-native": "0.68.1",
     "react-native-elements": "^3.4.2",

yarn.lock

@@ -5644,7 +5644,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.5.10, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5653,6 +5653,15 @@ prop-types@*, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.npmmirror.com/psl/-/psl-1.8.0.tgz"