improve new game form

client/cryps.css

@@ -309,27 +309,28 @@ header {
 
     display: flex;
     flex-flow: row wrap;
-    justify-content: space-between;
-    align-items: flex-start;
     border: 1px solid whitesmoke;
     padding: 1em;
     margin-bottom: 1.5em;
 }
 
+.create-form form {
+    margin: 0;
+    flex: 1 1 50%;
+}
+
 .create-form.disabled {
     border: 1px solid #333;
     color: #333;
 }
 
-.create-form select, .create-form input, .create-form label {
+/*.create-form select, .create-form input, .create-form label {
     margin: 0;
 }
-
+*/
 .create-form button {
     flex: 0 1 25%;
     font-size: 1.5em;
-    display: block;
-    margin-bottom: 0;
 }
 
 /*
@@ -869,7 +870,6 @@ CRYP DAMAGE
     }
 
     .menu-instance-list {
-        order: -1;
         flex: unset;
         width: 100%;
     }

client/src/components/instance.create.form.jsx

@@ -55,27 +55,29 @@ class InstanceCreateForm extends Component {
         const classes = `create-form ${disabled ? 'disabled' : ''}`;
         return (
             <div className={classes}>
-                <label>instance name</label>
-                <input
-                    className="login-input"
-                    type="text"
-                    disabled={disabled}
-                    value={this.state.name}
-                    placeholder="name"
-                    onChange={this.nameChange}
-                />
-                <label htmlFor="playerSelect">players</label>
-                <select id="playerSelect"
-                    disabled={disabled}
-                    value={this.state.players}
-                    onChange={this.playersChange}
-                    >
-                    <option value={1}>pve</option>
-                    <option value={2}>2</option>
-                    <option value={4}>4</option>
-                    <option value={8}>8</option>
-                    <option value={16}>16</option>
-                </select>
+                <form>
+                    <label>instance name</label>
+                    <input
+                        className="login-input"
+                        type="text"
+                        disabled={disabled}
+                        value={this.state.name}
+                        placeholder="name"
+                        onChange={this.nameChange}
+                    />
+                    <label htmlFor="playerSelect">players</label>
+                    <select id="playerSelect"
+                        disabled={disabled}
+                        value={this.state.players}
+                        onChange={this.playersChange}
+                        >
+                        <option value={1}>pve</option>
+                        <option value={2}>2</option>
+                        <option value={4}>4</option>
+                        <option value={8}>8</option>
+                        <option value={16}>16</option>
+                    </select>
+                </form>
                 <button
                     onClick={this.handleSubmit}
                     disabled={disabled}

client/src/events.jsx

@@ -26,7 +26,7 @@ function registerEvents(store) {
             targets: 'img',
             translateX: () => anime.random(-20, 20),
             translateY: () => anime.random(-20, 20),
-            rotate: () => anime.random(-90, 90),
+            rotate: () => anime.random(-35, 35),
             duration: () => anime.random(5000, 6000),
             direction: 'alternate',
             easing: 'linear',