new: usr: add mineseeker game to the symfony 4 project #3

2019-10-27 13:35:33 +01:00
parent 6caf340302
commit 3bbc96c76c
160 changed files with 49951 additions and 602 deletions
--- a/assets/js/mine-seeker/user/user.js
+++ b/assets/js/mine-seeker/user/user.js
@@ -0,0 +1,90 @@
+import React from 'react';
+
+class User extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            name: "...",
+            desc: "",
+            active: props.active,
+            color: props.color === 'blue' ? 1 : 0,
+            mines: 0,
+            srcRoot: '/images/',
+            haveBomb: true,
+            enabledBomb: true
+        };
+    }
+
+    setColor(color) {
+        return 'user-container user-' + color;
+    }
+
+    getSrc(color) {
+        return this.state.srcRoot + 'bg-flag-' + color + '-outbg.png';
+    }
+
+    getBombBuzzClass(webPlayer) {
+        let activePlayer = this.state.color === 1 ? 'blue' : 'red';
+
+        return "bomb-container" +
+            (
+                this.state.active && (activePlayer === webPlayer) && this.state.haveBomb && this.state.enabledBomb
+                    ? ' buzz'
+                    : ''
+            );
+    }
+
+    getBomb() {
+        let src = this.state.srcRoot;
+
+        if (this.state.haveBomb) {
+            src += this.state.enabledBomb && this.state.active
+                ? 'bg-bomb-outbg.png'
+                : 'bg-bomb-disabled-outbg.png';
+        } else {
+            src += 'bg-bomb-exploded-outbg.png';
+        }
+
+        return src;
+    }
+
+    getFigure(color) {
+        return this.state.srcRoot + 'bg-figure-' + color + '-outbg.png';
+    }
+
+    getCursor(state, color) {
+        return state
+            ? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/>
+            : '';
+    }
+
+    render() {
+        return (
+            <div className={this.setColor(this.props.color)}>
+                <div className="user-header">
+                    <div className="user-color">{this.props.color}</div>
+                    {this.getCursor(this.props.active, this.props.color)}
+                    <img src={this.getFigure(this.props.color)} alt="figure"/>
+                </div>
+                <div className="user-name"> {this.state.name} </div>
+                <div className="user-caret"><i className="fa fa-caret-down"></i></div>
+                <div className="user-desc"> {this.state.desc} </div>
+                <div className="user-control">
+                    <img src={this.getSrc(this.props.color)} alt="flag"/>
+                    <div className="user-control-mines">
+                        {this.state.mines}
+                    </div>
+                    <div className={this.getBombBuzzClass(this.props.webPlayer)} onClick={this.props.onClickBombSelector}>
+                        <div className="bomb">
+                            <img src={this.getBomb()} alt="bomb"/>
+                        </div>
+                    </div>
+                    <div className="clear"></div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default User;