Front second commit

frontend/public/index.html

@@ -13,6 +13,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script type='text/javascript' src="./bls/bls_c.js"></script>
+    <script type='text/javascript' src="./bls/bls.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/App.js

@@ -31,8 +31,19 @@ class App extends Component {
         // create a session between client and backend application
         fluence.connect(contractAddress, appId, ethUrl).then((session) => {
             console.log("Session created");
+            let bls = window.bls;
+            bls.init().then(() => {
+                const sec = new bls.SecretKey();
+                sec.setByCSPRNG();
+                const pub = sec.getPublicKey();
                 this.setState({
-                fluence: {instance: fluence, session: session}
+                    fluence: {
+                        instance: fluence,
+                        session: session,
+                        privateKey: sec.serializeToHexStr(),
+                        publicKey: pub.serializeToHexStr(),
+                    }
+                });
             });
         });
     }

frontend/src/component/betbuttonsgrid/BetButtonsGrid.js

@@ -1,19 +1,20 @@
 import React, {Component} from 'react';
 import './BetButtonsGrid.css';
 import Button from "@material-ui/core/Button";
+import Fab from "@material-ui/core/es/Fab/Fab";
 
 class BetButtonsGrid extends Component {
 
     getButton = (n) => {
         return (
-            <Button variant={"fab"} color={"primary"} key={n} mini style={{
+            <Fab disabled={this.props.selected} color={"primary"} key={n} size={"small"} style={{
                 margin: 5
             }} onClick={() => {
                 if (this.props.onClick)
                     this.props.onClick(n);
             }}>
                 {n}
-            </Button>
+            </Fab>
         );
     };
 

frontend/src/component/game/Game.js

@@ -3,33 +3,71 @@ import './Game.css';
 import Wheel from "../wheel/Wheel";
 import BetButtonsGrid from "../betbuttonsgrid/BetButtonsGrid";
 import {withFluence} from "../../model/withFluence";
+import PlayersList from "../playerslist/PlayersList";
 
 class Game extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            wheelSelected: -1
+            wheelSelected: -1,
-        }
+            selected: undefined,
+            players: [],
+            game_status: 0,
+        };
+        this.session = null;
+        this.updater = null;
     }
 
-    componentDidMount() {
+    getPlayersList = () => {
-        // setInterval(() => {
+        // this.session = this.props.fluence.session;
+        // this.session.request("participants").then(r => {
         //     this.setState({
-        //         wheelRotation: this.state.wheelRotation + 0.1
+        //         players: JSON.parse(r)
-        //     })
+        //     });
-        // }, 10);
+        // });
-    }
+        // this.updater = setInterval(() => {
+        //     this.session.request("game_status").then(r => {
+        //         this.setState({
+        //             game_status: r
+        //         });
+        //         switch (r) {
+        //             case 0:
+        //                 break;
+        //             case 1:
+        //                 break;
+        //             case 2:
+        //                 break;
+        //         }
+        //     });
+        // },1000);
+    };
 
     render() {
+        if (!this.props.fluence)
+            return null;
+        if (!this.session) {
+            this.getPlayersList();
+        }
         let {wheelSelected} = this.state;
+        let publicKey = this.props.fluence.publicKey;
         return (
             <div className={"Game"}>
-                <div className={"GameGrid"}>
+                <div className={"GameGrid"} style={{
-                    <div className={"GameGrid"}>
+                    flexDirection: "row"
+                }}>
+                    <div className={"GameGrid"} style={{
+                        flexDirection: "column",
+                        justifyContent: "start"
+                    }}>
                         <Wheel selected={wheelSelected}/>
+                        <PlayersList players={this.state.players}/>
                     </div>
-                    <BetButtonsGrid/>
+                    <BetButtonsGrid selected={this.state.selected} onClick={(n) => {
+                        this.setState({selected: n});
+                        // this.session.request(`add_stake n ${publicKey}`).then(r => {
+                        // });
+                    }}/>
                 </div>
             </div>
         );

frontend/src/component/playerslist/PlayersList.css

@@ -1,3 +1,3 @@
 .PlayersList {
-
+    padding: 20px;
 }

frontend/src/component/playerslist/PlayersList.js

@@ -1,11 +1,46 @@
 import React, {Component} from 'react';
 import './PlayersList.css';
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+import ListItemSecondaryAction from "@material-ui/core/es/ListItemSecondaryAction/ListItemSecondaryAction";
+import Typography from "@material-ui/core/es/Typography/Typography";
+import Paper from "@material-ui/core/es/Paper/Paper";
 
 class PlayersList extends Component {
     render() {
         return (
             <div className={"PlayersList"}>
-
+                <Paper style={{
+                    backgroundColor: "#f44336"
+                }}>
+                    <List color={"primary"}>
+                        {this.props.players.map(player => {
+                            return (
+                                <div key={player.pk}>
+                                    <ListItem>
+                                        <Typography style={{
+                                            color: "white"
+                                        }}>
+                                            {player.pk}
+                                        </Typography>
+                                        {player.selected !== undefined &&
+                                        <ListItemSecondaryAction>
+                                            <Typography style={{
+                                                color: "white"
+                                            }}>
+                                                {player.selected}
+                                            </Typography>
+                                        </ListItemSecondaryAction>
+                                        }
+                                    </ListItem>
+                                    <Divider/>
+                                </div>
+                            );
+                        })}
+                    </List>
+                </Paper>
             </div>
         );
     }

frontend/src/model/RouletteTheme.js

@@ -4,6 +4,7 @@ import {red} from "@material-ui/core/colors";
 export default createMuiTheme({
     palette: {
         primary: red,
+
     },
     typography: {
         useNextVariants: true,