mobile styling

client/assets/styles/game.css

@@ -27,7 +27,6 @@
 
 .opponent {
     grid-area: opponent;
-    transform: perspective(23rem);
 }
 
 .opponent .combat-text {
@@ -38,10 +37,10 @@
 
 .opponent .game-construct {
     align-items: flex-start;
-    grid-template-rows: min-content min-content min-content 2fr;
+    grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
-        "stats  stats"
+        "stats  ."
         "name   ."
         "effects ."
         "avatar target";
@@ -59,14 +58,14 @@
     justify-items: start;
     /*align-items: flex-end;*/
 
-    grid-template-rows: 1fr 2fr 1fr min-content;
+    grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "skills     ."
         "avatar     target"
         "effects    ."
         "name       ."
-        "stats      stats ";
+        "stats      .";
 
     transition-property: all;
     transition-duration: 0.25s;
@@ -99,12 +98,20 @@
     grid-area: stats;
     display: flex;
     flex-flow: row;
+    width: 100%;
 }
 
-.game-construct figure {
+.game-construct .stats div {
     padding: 0 0.5em;
     display: flex;
     flex-flow: column;
+    flex: 1;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.game-construct .stats .value {
+    display: none;
 }
 
 .game-construct figcaption {
@@ -139,7 +146,6 @@
 
 .game-construct .effects {
     grid-area: effects;
-    font-size: 1.5em;
     white-space: nowrap;
     width: 100%;
     text-align: center;
@@ -378,4 +384,23 @@ CONSTRUCT DAMAGE
     opacity: 1;
   }
 }
-*/
+*/
+
+
+@media (max-height: 800px), (max-width: 1000px) {
+    .game .stats div {
+        padding: 0;
+    }
+
+    .game .stats .max {
+        display: none;
+    }
+
+    .game .stats .value {
+        display: flex;
+    }
+
+    .game .stats svg {
+        height: 1em;
+    }
+}

client/assets/styles/styles.css

@@ -2,7 +2,7 @@
     GLOBAL
 */
 
-html, body, #constructs {
+html, body, #mnml {
     /*width: 100%;*/
     margin: 0;
 
@@ -61,7 +61,7 @@ figure {
     text-align: center;
 }
 
-#constructs {
+#mnml {
     padding: 0 2em;
     display: grid;
     grid-template-columns: 1fr 8fr;
@@ -111,8 +111,9 @@ nav button[disabled], nav button[disabled]:hover {
     text-decoration: line-through
 }
 
-nav button:hover {
+nav button:hover, nav button:focus {
     color: whitesmoke;
+    text-decoration: underline;
 }
 
 main {
@@ -282,13 +283,13 @@ button[disabled] {
     flex-flow: column;
 }
 
-#constructs input, #constructs select {
+#mnml input, #mnml select {
     border-color: #444;
     background-color: #333;
     border-radius: 0;
 }
 
-#constructs input:focus {
+#mnml input:focus, #mnml select:focus {
     border-color: whitesmoke;
 }
 
@@ -396,7 +397,8 @@ header {
 
 .spawn-btn button {
     flex: 1;
-    margin: 0.5em 2em;
+    margin: 0.5em 1em;
+    padding: 0 0.5em;
     border-color: #333
 }
 
@@ -459,6 +461,13 @@ header {
 .create-form button {
     flex: 0 1 25%;
     font-size: 1.5em;
+    border-color: #444;
+    background-color: #333;
+}
+
+.create-form button:hover, .create-form button:focus {
+    border-color: whitesmoke;
+    text-decoration: none;
 }
 
 figure.gray {
@@ -517,7 +526,7 @@ main .top {
 }
 
 @media (max-height: 900px), (max-width: 1500px) {
-    #constructs {
+    #mnml {
         font-size: 75%;
     }
 

client/assets/styles/styles.mobile.css

@@ -1,5 +1,5 @@
 @media (max-height: 800px), (max-width: 1000px) {
-    #constructs {
+    #mnml {
         font-size: 8pt;
         padding: 0;
         grid-template-columns: min-content 1fr;
@@ -17,11 +17,6 @@
         height: 2.5em;
     }
 
-    svg {
-        width: 5em;
-    }
-
-
     nav {
         opacity: 0;
         position: fixed;

client/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
-    "name": "constructs.gg - mnml pvp atbs",
+    "name": "mnml",
-    "description": "constructs.gg - mnml pvp atbs",
+    "description": "mnml pvp atbs",
-    "short_name": "constructs.gg",
+    "short_name": "mnml",
     "icons": [
         {
             "src": "./assets/icons/726.png",

client/src/app.jsx

@@ -28,8 +28,8 @@ document.fonts.load('16pt "Jura"').then(() => {
     store.dispatch(actions.setWs(ws));
     ws.connect();
 
-    const Constructs = () => (
+    const Mnml = () => (
-        <div id="constructs" >
+        <div id="mnml" >
             <input type="checkbox" id="toggle-nav"/>
             <label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
             <Header />
@@ -40,7 +40,7 @@ document.fonts.load('16pt "Jura"').then(() => {
 
     const App = () => (
         <Provider store={store}>
-            <Constructs />
+            <Mnml />
         </Provider>
     );
 

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) => (
+        const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
-            <figure key={j} alt={s.stat}>
+            <div key={j} alt={s.stat}>
                 {s.svg(`stat-icon ${s.colour}`)}
-                <figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
+                <div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
-            </figure>
+                <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 = (
+        // const anim = (
-            <div className="anim-container">
+        //     <div className="anim-container">
-                {animationDivs(combatClass)}
+        //         {animationDivs(combatClass)}
-            </div>
+        //     </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) => {
+    const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
-        // i've seen this happen ;/
+        <div key={j} alt={s.stat}>
-        if (construct[s.stat].value < 0) console.warn(construct);
-        return <figure key={j} alt={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
-            <figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
+            <div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
-        </figure>
+            <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 {
+function SpawnButton({ i }) {
-    constructor(props) {
+    const [name, setName] = useState('');
-        super(props);
+    const [enabled, setEnabled] = useState(false);
 
-        this.state = { value: null, enabled: false };
+    function nameInput(e) {
-
+        e.stopPropagation();
-        this.handleInput = this.handleInput.bind(this);
+        setName(e.target.value);
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.enable = this.enable.bind(this);
     }
 
-    handleInput(event) {
+    function enabledToggle(e) {
-        this.setState({ value: event.target.value });
+        e.stopPropagation();
+        setEnabled(!enabled);
     }
 
-    handleSubmit(event) {
+    return (
-        event.preventDefault();
+        <div
-        this.props.spawn(this.state.value);
+            key={i}
-        this.setState({ value: null, enabled: false });
+            className="menu-construct-ctr spawn-btn">
-    }
-
-    enable() {
-        this.setState({ enabled: true });
-    }
-
-    render() {
-        return (
             <div
-                key={this.props.i}
+                className="menu-construct"
-                className="menu-construct-ctr spawn-btn">
+                onClick={e => enabledToggle(e)} >
-                <div
+                <h2>+</h2>
-                    className="menu-construct"
+                <input
-                    onClick={() => this.enable()} >
+                    className="login-input"
-                    <h2>+</h2>
+                    type="text"
-                    <input
+                    disabled={!enabled}
-                        className="login-input"
+                    value={name}
-                        type="text"
+                    placeholder="name"
-                        disabled={!this.state.enabled}
+                    onInput={e => nameInput(e)}
-                        value={this.state.value}
+                />
-                        placeholder="name"
+                <button
-                        onInput={this.handleInput}
+                    className="login-btn"
-                    />
+                    disabled={!enabled}
-                    <button
+                    onClick={e => enabledToggle(e)}
-                        className="login-btn"
+                    type="submit">
-                        disabled={!this.state.enabled}
+                    spawn
-                        onClick={this.handleSubmit}
+                </button>
-                        type="submit">
-                        spawn
-                    </button>
-                </div>
             </div>
-        );
+        </div>
-    }
+    );
 }
 
 module.exports = SpawnButton;

client/src/utils.jsx

@@ -110,6 +110,23 @@ function instanceConstruct(name, id) {
     );
 }
 
+function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
+    useEffect(() => {
+        animateConstruct(id);
+        return () => clearAnimation(id);
+    });
+
+    return (
+        <div
+            className="avatar"
+            id={id}
+            onClick={() => selectSkillTarget(id)}
+            style={{ 'background-image': `url(/molecules/${genAvatar(name)}.svg)` }} >
+            {combatTextEl}
+        </div>
+    );
+}
+
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
@@ -574,6 +591,7 @@ module.exports = {
     genAvatar,
     constructAvatar,
     instanceConstruct,
+    gameConstructImg,
     requestAvatar,
     eventClasses,
     getCombatSequence,