tmp

server.py

@@ -8,36 +8,57 @@
 import io
 import cv2
 import numpy as np
+import random
 from detect import Eye_Detector
 
 app = Flask(__name__)
 socketio = SocketIO(app)
-id_list = []
+player_list = []
 detector = Eye_Detector()
 
+def find_by_id(_id):
+    filt = [i for (i, item) in enumerate(player_list) if item['id'] == _id]
+    index = None if len(filt) == 0 else filt[0]
+    return index
+
+def find_random_waiting(_id):
+    filt = [i for (i, item) in enumerate(player_list) if (item['status'] == 'waiting' and item['id'] != _id )]
+    if len(filt):
+      index = random.choice(filt)
+    else:
+      index = None
+    return index
 
 @socketio.on('connect')
 def on_connect():
-    # print(request)
     client_id = request.args['id']
-    if client_id not in id_list:
-        id_list.append(client_id)
+    index = find_by_id(client_id)
+    if not index:
+        player_list.append({'id': client_id, 'status': 'idle', 'ear': 0, 'rival': None})
     print(client_id, 'connected !')
-    # broadcast
-    socketio.emit('get_id_list', {'id_list': id_list})
-
 
 @socketio.on('disconnect')
 def _disconnect():
-    print('disconnect!')
+    pass
 
 @socketio.on('_disconnect')
 def on_disconnect(message):
     client_id = message['id']
-    id_list.remove(client_id)
+    index = find_by_id(client_id)
+    del player_list[index]
     print(client_id, 'disconnected !')
-    # broadcast
-    socketio.emit('get_id_list', {'id_list': id_list})
+
+@socketio.on('set_player')
+def set_player(message):
+    client_id = message['id']
+    curr_index = find_by_id(client_id)
+    player_list[index]['status'] = 'waiting'
+    rival_index = find_random_waiting(client_id)
+    print('rival_index', rival_index)
+    player_list[curr_index]['rival'] = rival_index
+    player_list[rival_index]['rival'] = curr_index
+
+    print(client_id, 'set to waiting...')
 
 @socketio.on('send_image')
 def handle_message(message):

src/app.jsx

@@ -11,6 +11,7 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Start from './start';
 import Play from './play';
+import uuidv4 from 'uuid/v4';
 
 const styles = () => ({
     root: {
@@ -28,15 +29,16 @@ class App extends React.Component {
     constructor(props) {
         super();
         this.props = props;
-        this.id = `${Date.now()}`;
+        this.id = uuidv4();
         this.peer = new Peer(this.id); 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleOnClick = this.handleOnClick.bind(this);
         this.onUnload = this.onUnload.bind(this);
 
-        this.state = {value: '', id_list: []}
+        this.state = {value: '', id_list: []};
+        this.socket = io(document.URL, {query: {id: this.id}});
         this.revRef = React.createRef();
-        this.socket = io(document.URL, {query: {id: this.id}})
         console.log('id', this.id);
     }
 
@@ -78,12 +80,16 @@ class App extends React.Component {
 
     handleChange(event) {
         this.setState({value: event.target.value});
-    }  
+    }
+    handleOnClick() {
+        console.log('handleOnClick!')
+        this.socket.emit('set_player', {'id': this.id})
+    }
     render() {
         const { classes } = this.props;
         return (
             <div>
-                <Start/>
+                <Start onClick={this.handleOnClick}/>
                 {/*
                 <Grid container justify="center" alignItems="center" className={classes.root}>
                     <Grid item>

src/start.jsx

@@ -33,10 +33,10 @@ class Start extends React.Component {
             <Typography variant="h5" component="h3" color="textPrimary">
                 Blink Contest
             </Typography>
-            <Typography variant="body" component="p" color="textSecondary">
+            <Typography variant="body1" component="p" color="textSecondary">
                 Challenge a random player around the world.
             </Typography>
-            <Button variant="contained" color="primary">
+            <Button variant="contained" color="primary" onClick={this.props.onClick}>
                 Connect
             </Button> 
             </Paper>