Basic Quickey UI jsFiddle

by Udi Talias

HTML

<script src="https://unpkg.com/@quickey/core/umd/quickey.core.min.js"></script>
<script src="https://unpkg.com/@quickey/ui/umd/quickey.ui.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@quickey/ui/umd/quickey.css">
<div class="container">
</div>

CSS

.container {
  width: 600px;
}

JavaScript

/**
 * For documentations, Refer to:
 * https://github.com/quickey/quickey/tree/master/packages/ui
 */

const { createQuickey } = Quickey.core;
const { createQuickeyLegend } = Quickey.ui;

createQuickey({
	id:"cheats",
  title: "Cheat Codes"
})
		.addAction({
        keys: "I > D > D > Q > D",
        description: "Invulnerability",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "I > D > K > F > A",
        description: "Full health, ammo, weapons, armor and keys",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "I > D > F > A",
        description: "Full health, ammo, weapons, and armor",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "I > D > D > T",
        description: "Change map detail",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "I > D > C > H > O > P > P > E > R > S",
        description: "Gain chainsaw",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "I > D > C > L > I > P",
        description: "Walk through walls",
        callback: (_, target) => {

        }
    });
    
createQuickey({
    id: "game",
    title: "Game Play"
})
    .addAction({
        keys: "Ctrl + +",
        description: "Map zoom in",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "Ctrl + -",
        description: "Map zoom out",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "Ctrl + F1",
        description: "Show help screen",
        callback: (_, target) => {

        }
    })
    .addAction({
        keys: "Ctrl + Q",
        description: "Exit game",
        callback: (_, target) => {

        }
    });

const unmount = createQuickeyLegend({
	ids: ["cheats", "game"],
  el: document.querySelector(".container")
});