transition

WORKLOG.md

@@ -4,6 +4,7 @@
 * serde serialize privatise
 * stripe prod
 * mobile styles
+* pct based translates for combat animation
 * info fix
 * account page
 * graphs n shit

client/assets/styles/controls.less

@@ -30,6 +30,6 @@ aside {
 .ready {
     color: forestgreen;
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-timing-function: ease;
 }

client/assets/styles/instance.less

@@ -351,6 +351,10 @@
 
 .equipping, .receiving {
     transition: border-color 0.5s ease-in;
+    transition-duration: 0.25s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+
     border: 2px dashed @gray-hint;
 }
 

client/assets/styles/instance.mobile.css

@@ -101,7 +101,7 @@
         padding: 0;
 
         transition-property: all;
-        transition-duration: 0.5s;
+        transition-duration: 0.25s;
         transition-delay: 0;
         transition-timing-function: ease;
     }

client/assets/styles/styles.less

@@ -144,7 +144,7 @@ tr.right:focus, tr.right:hover {
 
 tr {
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
@@ -163,7 +163,7 @@ button, input {
 
     /*the transitions */
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
@@ -360,7 +360,7 @@ header {
     animation: saw 2s infinite linear;
 
     transition-property: stroke-color;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-timing-function: ease;
 }
 
@@ -400,7 +400,7 @@ header {
 
     border: 1px solid black;
     transition-property: border;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 
@@ -604,7 +604,7 @@ main .top button {
 .timer {
     background: whitesmoke;
     transition-property: all;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }

client/src/components/controls.jsx

@@ -30,8 +30,8 @@ function Controls(args) {
         sendGameReady,
     } = args;
 
-    if (instance) return <InstanceCtrl />;
     if (game) return <GameCtrl />;
+    if (instance) return <InstanceCtrl />;
     if (nav === 'play' || !nav) return <PlayCtrl />
 
     return false;

client/src/components/game.ctrl.jsx

@@ -1,8 +1,6 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const InstanceCtrl = require('./instance.ctrl');
-
 const addState = connect(
     function receiveState(state) {
         const {

client/src/components/main.jsx

@@ -35,6 +35,7 @@ function Main(props) {
         return <Instance />;
     }
 
+    if (nav === 'transition') return false;
     if (nav === 'play') return <Play />;
     if (nav === 'team') return <Team />;
 

client/src/components/nav.jsx

@@ -74,8 +74,8 @@ function Nav(args) {
     }
 
     function joinInstance(i) {
-        if (game) navTo(null);
         sendInstanceState(i);
+        if (game) navTo('transition');
         return true;
     }
 

client/src/components/play.ctrl.jsx

@@ -29,13 +29,13 @@ function JoinButtons(args) {
     return (
         <aside>
             <button
-                class='pvp'
+                class='pvp ready'
                 onClick={() => sendInstanceQueue()}
                 type="submit">
                 PVP
             </button>
             <button
-                class='practice'
+                class='practice ready'
                 onClick={() => sendInstancePractice()}
                 type="submit">
                 Practice