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/grid/grid-field.js
+++ b/assets/js/mine-seeker/grid/grid-field.js
@@ -0,0 +1,145 @@
+import React from 'react';
+
+class GridField extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentObj: 'w',
+            currentImage: null,
+            active: false,
+            lastClickedRed: false,
+            lastClickedBlue: false,
+            bombTargetArea: null,
+            icons: {
+                root: '/images/',
+                water: {
+                    1: 'bg-wave-1-outbg.png',
+                    2: 'bg-wave-1-outbg.png',
+                    3: 'bg-wave-2-outbg.png'
+                },
+                flag: {
+                    red: 'bg-flag-red-outbg.png',
+                    blue: 'bg-flag-blue-outbg.png'
+                },
+                target: {
+                    lastBlue: 'bg-last-blue-outbg.png',
+                    lastRed: 'bg-last-red-outbg.png',
+                    crosshair: 'bg-target-outbg.png',
+                    crosshairBomb: 'bg-target-bomb-outbg.png'
+                },
+                left: 'bg-left-mine-outbg.png'
+            }
+        };
+    }
+
+    componentWillMount() {
+        var wave = Math.floor(Math.random() * 3) + 1;
+
+        this.setState({
+            currentImage: this.state.icons.root + this.state.icons.water[wave]
+        });
+    }
+
+    classNameWhenActive() {
+        return 'field'
+            + (this.state.active === true ? ' active' : '')
+            + (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
+            + ' color-' + this.state.currentObj;
+    }
+
+    currentImage() {
+        return isNaN(this.state.currentImage)
+            ?
+            <div className="flag-mine">
+                <img src={this.state.currentImage}/>
+                <div className="flag-mine-base"></div>
+            </div>
+            : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
+    }
+
+    lastClickedClass() {
+        return 'field-'
+            + (this.state.lastClickedRed ? 'red' : '')
+            + (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
+    }
+
+    lastClickedSrc() {
+        return this.state.lastClickedRed
+            ? "/images/bg-last-red-outbg.png"
+            : "/images/bg-last-blue-outbg.png";
+    }
+
+    currentLastClicked() {
+        return this.state.lastClickedRed || this.state.lastClickedBlue
+            ? <img className={this.lastClickedClass()}
+                   src={this.lastClickedSrc()}
+                   alt="blue last"/>
+            : '';
+    }
+
+    createBombTarget() {
+        if (this.state.bombTargetArea !== null) {
+            var vert = '', hor = '';
+
+            switch (this.state.bombTargetArea[0]) {
+                case 0:
+                    vert = 'left';
+                    break;
+                case 1:
+                    vert = 'center';
+                    break;
+                case 2:
+                    vert = 'right';
+                    break;
+                default:
+                    vert = null;
+                    break;
+            }
+
+            switch (this.state.bombTargetArea[1]) {
+                case 0:
+                    hor = 'top';
+                    break;
+                case 1:
+                    hor = 'middle';
+                    break;
+                case 2:
+                    hor = 'bottom';
+                    break;
+                default:
+                    vert = null;
+                    break;
+            }
+
+            var src = vert === null
+                ? '/images/bg-bomb-empty-outbg.png'
+                : '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
+
+            return <img className="field-bomb-target"
+                        src={src}
+                        alt="bomb target"/>
+        }
+    }
+
+    render() {
+        return (
+            <div className="field-wrapper"
+                 onClick={this.props.onClick}
+                 onMouseEnter={this.props.handleHoverOn}>
+                <img className="field-target"
+                     src="/images/bg-target-outbg.png"
+                     alt="target"/>
+                {this.createBombTarget()}
+                {this.currentLastClicked()}
+                <div className={this.classNameWhenActive()}>
+                    <div className="field-corner">
+                        {this.currentImage()}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default GridField;