basic keybinds, fixed navbar hierarchy stuff

client/package.json

@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@use-it/event-listener": "^0.1.7",
     "clsx": "^1.1.1",
     "fuse.js": "^6.5.3",
     "fuzzysort": "^1.1.4",

client/src/App.js

@@ -100,7 +100,7 @@ function App(props) {
     }, [])
 
     useEffect(() => {
-        if(errorPage !== null){
+        if (errorPage !== null) {
             setLoading(false)
         }
     })
@@ -251,10 +251,10 @@ function App(props) {
                     </Route>
 
                     <Route path="/collection">
-                        {Config.ENABLED_PAGES.collection === true ? <CollectionHome /> : <Redirect to="/" />}
+                        <VIMMain target={"collection"} />
                     </Route>
                     <Route path="/buddies">
-                        {Config.ENABLED_PAGES.buddies === true ? <BuddiesHome /> : <Redirect to="/" />}
+                        <VIMMain target={"buddies"} />
                     </Route>
                 </HashRouter>
 
@@ -265,4 +265,23 @@ function App(props) {
     );
 }
 
+function VIMMain(props) {
+    const target = props.target
+
+    const routes = {
+        "collection": Config.ENABLED_PAGES.collection === true ? <CollectionHome /> : <Redirect to="/" />,
+        "buddies": Config.ENABLED_PAGES.buddies === true ? <BuddiesHome /> : <Redirect to="/" />,
+    }
+
+    return (
+        <>
+            <div style={{ height: "100vh", width: "100vw", display: "flex", overflow: "auto" }}>
+                <NavBar />
+                {routes[target]}
+            </div>
+
+        </>
+    )
+}
+
 export default App;

client/src/components/misc/Header.js

@@ -9,10 +9,11 @@ import { Grid, Grow, Typography, Toolbar, IconButton, Slide, Paper, Tooltip } fr
 //icons
 import { Settings, Shuffle, Autorenew, SportsEsports } from '@material-ui/icons';
 
-import socket from "../../services/Socket";
-import { useTypingEffect } from '../../services/TypingEffect';
 import BackdroppedConfig from "../config/BackdroppedConfig.js"
 
+import socket from "../../services/Socket";
+import useKeyboardListener from '../../services/useKeyboardListener.js';
+
 
 const useStyles = makeStyles((theme) => ({
 
@@ -72,6 +73,7 @@ function Header(props) {
     const [inGame, setInGame] = React.useState(false);
 
     const [openSettings, setOpenSettings] = React.useState(false);
+    const [keysDown] = useKeyboardListener();
 
     useEffect(() => {
         function ingameCallback(response){
@@ -81,6 +83,12 @@ function Header(props) {
         socket.send({"request": "force_update_game_state"})
     }, [])
 
+    useEffect(() => {
+        if (String(keysDown) === "r"){
+            randomize();
+        }
+    }, [keysDown])
+
     async function randomize() {
         setRandomizing(true);
         function callback(response) {

client/src/components/misc/Navigation.js

@@ -42,12 +42,14 @@ function NavBar() {
         {
             "name": "Skins",
             "icon": mdiPistol,
-            "path": "/collection"
+            "path": "/collection",
+            "enabled": Config.ENABLED_PAGES.collection,
         },
         {
             "name": "Buddies",
             "icon": mdiSpade,
-            "path": "/buddies"
+            "path": "/buddies",
+            "enabled": Config.ENABLED_PAGES.buddies,
         },
     ]
 
@@ -78,13 +80,15 @@ function NavBar() {
 
                             <div style={{ width: "100%", marginTop: "10px" }}>
                                 {tabs.map((tab, index) => (
-                                    <ListItem button key={tab.name} onClick={() => { selectPage(tab.path) }}>
-                                        <ListItemIcon><Icon
-                                            path={tab.icon}
-                                            size={iconSize}
-                                        /></ListItemIcon>
-                                        <ListItemText primary={tab.name} />
-                                    </ListItem>
+                                    (tab.enabled ? 
+                                        <ListItem button key={tab.name} onClick={() => { selectPage(tab.path) }}>
+                                            <ListItemIcon><Icon
+                                                path={tab.icon}
+                                                size={iconSize}
+                                            /></ListItemIcon>
+                                            <ListItemText primary={tab.name} />
+                                        </ListItem>
+                                    : null)
                                 ))}
                             </div>
 

client/src/components/weaponEditor/WeaponEditor.js

@@ -13,6 +13,8 @@ import WeaponHeader from './sub/WeaponHeader.js';
 import ActionsDrawer from './sub/ActionsDrawer.js';
 import WeightDialog from './sub/WeightDialog.js'
 
+import useKeyboardListener from '../../services/useKeyboardListener.js'
+
 
 const useStyles = makeStyles((theme) => ({
 
@@ -148,6 +150,9 @@ function WeaponEditor(props) {
     //weight dialog states
     const [weightDialogOpen, setWeightDialogOpen] = useState(false);
 
+    //keyboard state
+    const [keysDown] = useKeyboardListener();
+
 
     //effect listeners
     useEffect(() => {
@@ -169,6 +174,29 @@ function WeaponEditor(props) {
     }, [])
 
 
+    // keyboard listeners
+    useEffect(() => {
+        console.log(keysDown)
+
+        switch (keysDown.join(' ')){
+            case 'f':
+                toggleFavoritedSkin();
+                break;
+
+            case 'l':
+                toggleLock();
+                break;
+
+            case 'Escape':
+                save();
+                break; 
+
+            default:
+                break;
+        }
+
+    }, [keysDown])
+
     // functions
     function refresh() {
         updateAlternateMedia();

client/src/pages/BuddiesHome.js

@@ -6,7 +6,6 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 //components
 import Header from '../components/misc/Header.js'
 import Footer from '../components/misc/Footer.js'
-import NavBar from '../components/misc/Navigation.js'
 
 import Buddies from '../components/buddies/Buddies.js'
 
@@ -53,7 +52,6 @@ function CollectionHome(props) {
     return ( 
         <>
             <div style={{ height: "100vh", width: "100vw", display: "flex", overflow: "auto" }}>
-                <NavBar />
                 <div style={{ height: "100%", margin: "auto", display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "auto", flexGrow: 1 }}>
                     <Header />
                     <Container maxWidth={null} style={{ maxHeight: "calc(100% - 122px)", display: "flex", flexGrow: 1, }}>

client/src/pages/CollectionHome.js

@@ -9,8 +9,6 @@ import Footer from '../components/misc/Footer.js'
 import WeaponEditor from '../components/weaponEditor/WeaponEditor.js'
 import Collection from '../components/collection/Collection.js'
 
-import NavBar from '../components/misc/Navigation.js'
-
 import socket from "../services/Socket";
 
 import { Grid, Container, Typography } from '@material-ui/core'
@@ -113,18 +111,15 @@ function CollectionHome(props) {
     }
 
     return (
-        <div style={{ height: "100vh", width: "100vw", display: "flex", overflow: "auto" }}>
-            <NavBar />
-            <div style={{ height: "100%", margin: "auto", display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "auto", flexGrow: 1 }}>
-                <Header />
-                {inventoryData !== {} ?
-                    <Container maxWidth={false} style={{ display: "flex", height: "auto", flexGrow: 1, }}>
-                        {weaponEditor}
-                        <Collection style={{ padding: "20px 0px 20px 0px" }} weaponEditorCallback={modificationMenu} loadout={loadout} setLoadout={setLoadout} skinsOwned={uniqueSkinsOwned} />
-                    </Container>
-                    : null}
-                <Footer />
-            </div>
+        <div style={{ height: "100%", margin: "auto", display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "auto", flexGrow: 1 }}>
+            <Header />
+            {inventoryData !== {} ?
+                <Container maxWidth={false} style={{ display: "flex", height: "auto", flexGrow: 1, }}>
+                    {weaponEditor}
+                    <Collection style={{ padding: "20px 0px 20px 0px" }} weaponEditorCallback={modificationMenu} loadout={loadout} setLoadout={setLoadout} skinsOwned={uniqueSkinsOwned} />
+                </Container>
+                : null}
+            <Footer />
         </div>
     )
 }

client/src/services/ClientConfig.js

@@ -9,10 +9,10 @@ const Config = {
     WEIGHT_INTERVALS: 10,
     SKIN_CHANGER_WARNING_THRESHOLD: 5,
 
-    NAVIGATION_ENABLED: true,
+    NAVIGATION_ENABLED: false,
     ENABLED_PAGES: {
         "collection": true,
-        "buddies": true,
+        "buddies": false,
     }
 }
 

client/src/services/useKeyboardListener.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import useEventListener from '@use-it/event-listener'
+
+export default function useKeyboardListener() {
+    const [keysDown, setKeysDown] = useState([])
+
+    useEventListener("keydown", ({ key }) => {
+        var k = String(key)
+        if(!keysDown.includes(k)){
+            setKeysDown([...keysDown, k])
+        }
+    })
+    useEventListener("keyup", ({ key }) => {
+        var k = String(key)
+        setKeysDown(keysDown.filter(k2 => k2 !== k))
+    })
+
+    return [keysDown];
+}