mobile styling

client/src/components/game.component.jsx

@@ -82,7 +82,6 @@ function GamePanel(props) {
         return null;
     }
 
-
     const zero = Date.parse(game.phase_end) - (1000 * 60);
     const now = Date.now();
     const end = Date.parse(game.phase_end);
@@ -122,11 +121,12 @@ function GamePanel(props) {
         const ko = construct.green_life.value === 0 ? 'ko' : '';
         const classes = eventClasses(resolution, construct);
 
-        const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
-            <figure key={j} alt={s.stat}>
+        const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
+            <div key={j} alt={s.stat}>
                 {s.svg(`stat-icon ${s.colour}`)}
-                <figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
-            </figure>
+                <div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
+                <div className="value" >{construct[s.stat].value}</div>
+            </div>
         ));
 
         const [combatText, combatClass] = getCombatText(construct, resolution);
@@ -144,11 +144,11 @@ function GamePanel(props) {
             .filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
             .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
 
-        const anim = (
-            <div className="anim-container">
-                {animationDivs(combatClass)}
-            </div>
-        );
+        // const anim = (
+        //     <div className="anim-container">
+        //         {animationDivs(combatClass)}
+        //     </div>
+        // );
 
         return (
             <div
@@ -165,7 +165,6 @@ function GamePanel(props) {
                     onClick={() => selectSkillTarget(construct.id)} >
                     {constructAvatar(construct.name, construct.id)}
                     {combatTextEl}
-                    {anim}
                 </figure>
             </div>
         );

client/src/components/game.construct.jsx

@@ -57,15 +57,13 @@ function GameConstruct(props) {
     const skills = range(0, 3)
         .map(i => <SkillBtn key={i} construct={construct} i={i} />);
 
-    const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
-        // i've seen this happen ;/
-        if (construct[s.stat].value < 0) console.warn(construct);
-        return <figure key={j} alt={s.stat}>
+    const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
+        <div key={j} alt={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
-            <figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
-        </figure>
-    });
-
+            <div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
+            <div className="value" >{construct[s.stat].value}</div>
+        </div>
+    ));
 
     const [combatText, combatClass] = getCombatText(construct, resolution);
     const combatTextClass = `combat-text ${combatClass}`;

client/src/components/spawn.button.jsx

@@ -1,59 +1,46 @@
 const preact = require('preact');
-const { Component } = require('preact');
+const { useState } = require('preact/hooks');
 
-class SpawnButton extends Component {
-    constructor(props) {
-        super(props);
+function SpawnButton({ i }) {
+    const [name, setName] = useState('');
+    const [enabled, setEnabled] = useState(false);
 
-        this.state = { value: null, enabled: false };
-
-        this.handleInput = this.handleInput.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.enable = this.enable.bind(this);
+    function nameInput(e) {
+        e.stopPropagation();
+        setName(e.target.value);
     }
 
-    handleInput(event) {
-        this.setState({ value: event.target.value });
+    function enabledToggle(e) {
+        e.stopPropagation();
+        setEnabled(!enabled);
     }
 
-    handleSubmit(event) {
-        event.preventDefault();
-        this.props.spawn(this.state.value);
-        this.setState({ value: null, enabled: false });
-    }
-
-    enable() {
-        this.setState({ enabled: true });
-    }
-
-    render() {
-        return (
+    return (
+        <div
+            key={i}
+            className="menu-construct-ctr spawn-btn">
             <div
-                key={this.props.i}
-                className="menu-construct-ctr spawn-btn">
-                <div
-                    className="menu-construct"
-                    onClick={() => this.enable()} >
-                    <h2>+</h2>
-                    <input
-                        className="login-input"
-                        type="text"
-                        disabled={!this.state.enabled}
-                        value={this.state.value}
-                        placeholder="name"
-                        onInput={this.handleInput}
-                    />
-                    <button
-                        className="login-btn"
-                        disabled={!this.state.enabled}
-                        onClick={this.handleSubmit}
-                        type="submit">
-                        spawn
-                    </button>
-                </div>
+                className="menu-construct"
+                onClick={e => enabledToggle(e)} >
+                <h2>+</h2>
+                <input
+                    className="login-input"
+                    type="text"
+                    disabled={!enabled}
+                    value={name}
+                    placeholder="name"
+                    onInput={e => nameInput(e)}
+                />
+                <button
+                    className="login-btn"
+                    disabled={!enabled}
+                    onClick={e => enabledToggle(e)}
+                    type="submit">
+                    spawn
+                </button>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 module.exports = SpawnButton;