hotkeys

client/src/components/game.jsx

@@ -1,6 +1,8 @@
 const preact = require('preact');
 const key = require('keymaster');
 
+const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
+
 function GamePanel(props) {
     const {
         game,
@@ -36,8 +38,23 @@ function GamePanel(props) {
     });
 
     function PlayerCrypCard(cryp) {
-        key.unbind('q');
+        const skills = cryp.skills.map((skill, i) => {
-        key('q', () => setActiveSkill(cryp.id, 'Attack'));
+            const hotkey = SKILL_HOT_KEYS[i];
+            key.unbind(hotkey);
+            key(hotkey, () => setActiveSkill(cryp.id, skill.skill));
+
+            return (
+                <button
+                    key={i}
+                    className="button is-dark"
+                    type="submit"
+                    onClick={() => setActiveSkill(cryp.id, skill.skill)}
+                >
+                    ({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
+                </button>
+            );
+        });
+
         if (activeIncoming) console.log('should be a pointer');
         return (
             <div
@@ -64,13 +81,7 @@ function GamePanel(props) {
                     <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
                     <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
                 </div>
-                <button
+                {skills}
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => setActiveSkill(cryp.id, 'Attack')}
-                >
-                    (Q) Attack
-                </button>
             </div>
         );
     }