diff --git a/package-lock.json b/package-lock.json index b0c0a48..60f9452 100644 --- a/package-lock.json +++ b/package-lock.json @@ -335,7 +335,7 @@ "resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz", "integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==", "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "async-each": { @@ -412,7 +412,7 @@ "convert-source-map": "1.5.0", "debug": "2.6.9", "json5": "0.5.1", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4", "path-is-absolute": "1.0.1", "private": "0.1.8", @@ -448,7 +448,7 @@ "babel-types": "6.26.0", "detect-indent": "4.0.0", "jsesc": "1.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "source-map": "0.5.7", "trim-right": "1.0.1" }, @@ -499,7 +499,7 @@ "babel-helper-function-name": "6.24.1", "babel-runtime": "6.26.0", "babel-types": "6.26.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-helper-explode-assignable-expression": { @@ -558,7 +558,7 @@ "requires": { "babel-runtime": "6.26.0", "babel-types": "6.26.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-helper-remap-async-to-generator": { @@ -742,7 +742,7 @@ "babel-template": "6.26.0", "babel-traverse": "6.26.0", "babel-types": "6.26.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-plugin-transform-es2015-classes": { @@ -1120,7 +1120,7 @@ "babel-runtime": "6.26.0", "core-js": "2.5.1", "home-or-tmp": "2.0.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "mkdirp": "0.5.1", "source-map-support": "0.4.18" }, @@ -1143,7 +1143,7 @@ "convert-source-map": "1.5.0", "debug": "2.6.9", "json5": "0.5.1", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4", "path-is-absolute": "1.0.1", "private": "0.1.8", @@ -1188,7 +1188,7 @@ "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-traverse": { @@ -1204,7 +1204,7 @@ "debug": "2.6.9", "globals": "9.18.0", "invariant": "2.2.2", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-types": { @@ -1214,7 +1214,7 @@ "requires": { "babel-runtime": "6.26.0", "esutils": "2.0.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "to-fast-properties": "1.0.3" } }, @@ -2838,7 +2838,7 @@ "js-yaml": "3.10.0", "json-stable-stringify": "1.0.1", "levn": "0.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4", "mkdirp": "0.5.1", "natural-compare": "1.4.0", @@ -2936,7 +2936,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.35.0.tgz", "integrity": "sha512-zjXGjOsHds8b84C0Ad3VViKh+sUA9PeXKHwPRlSLwwSX0v1iUJf/6IX7wxc+w2T2tnDH8PT6B/YgtcEuNI3ssA==", "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "eslint-plugin-import": { @@ -4438,7 +4438,7 @@ "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", "requires": { "glob": "7.1.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4" } }, @@ -4714,7 +4714,7 @@ "bluebird": "3.5.1", "html-minifier": "3.5.6", "loader-utils": "0.2.17", - "lodash": "4.17.4", + "lodash": "4.17.5", "pretty-error": "2.1.1", "toposort": "1.0.6" }, @@ -4818,7 +4818,7 @@ "requires": { "http-proxy": "1.16.2", "is-glob": "3.1.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "micromatch": "2.3.11" }, "dependencies": { @@ -4938,7 +4938,7 @@ "cli-width": "2.2.0", "external-editor": "2.0.5", "figures": "2.0.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "mute-stream": "0.0.7", "run-async": "2.3.0", "rx-lite": "4.0.8", @@ -5926,9 +5926,9 @@ } }, "lodash": { - "version": "4.17.4", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + "version": "4.17.5", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", + "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -8445,7 +8445,7 @@ "cli-width": "2.2.0", "external-editor": "2.0.5", "figures": "2.0.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "mute-stream": "0.0.7", "run-async": "2.3.0", "rx-lite": "4.0.8", @@ -9009,7 +9009,7 @@ "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", "requires": { "glob": "7.1.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "scss-tokenizer": "0.2.3", "yargs": "7.1.0" } @@ -9582,7 +9582,7 @@ "ajv": "5.2.4", "ajv-keywords": "2.1.0", "chalk": "2.2.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "slice-ansi": "1.0.0", "string-width": "2.1.1" }, @@ -10340,7 +10340,7 @@ "integrity": "sha512-9oLMhGlez5JSRv0dWCoxGHHdrYWrDJa8gIHeMFVuY8Fp4noQebXyFlE3fFE/BCYC4C1rG3RyEBPz0aWq1dtYDw==", "requires": { "fs-extra": "0.30.0", - "lodash": "4.17.4" + "lodash": "4.17.5" }, "dependencies": { "fs-extra": { diff --git a/package.json b/package.json index 6e00c5e..02ce671 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "devDependencies": { + "lodash": "^4.17.5" } } diff --git a/src/App.js b/src/App.js index 84f4c8e..4698235 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Header from './components/Header'; import ScreenDashboard from './components/ScreenDashboard'; import ScreenCommunity from './components/ScreenCommunity'; import ScreenNext from './components/ScreenNext'; +import navigation from './client/io-keyboard-events.js'; import './client/io-init.js'; import './assets/themes/neon_moon.css'; @@ -13,6 +14,10 @@ class App extends Component { this.state = {first: true}; } + componentDidMount() { + console.log("moutned") + navigation.navigationInit(); + } render() { const first = this.state.first; diff --git a/src/assets/themes/neon_moon.css b/src/assets/themes/neon_moon.css index fd96636..f95021a 100644 --- a/src/assets/themes/neon_moon.css +++ b/src/assets/themes/neon_moon.css @@ -169,12 +169,12 @@ ul.console-list { /* * Animation */ -.selectedNav { +.nav-selected { -moz-animation: outlineAnimation 0.9s infinite; -webkit-animation: outlineAnimation 0.9s infinite; animation: outlineAnimation 0.9s infinite; } -.selectedNav.muted { +.nav-selected.muted { -moz-animation: none; -webkit-animation: none; animation: none; diff --git a/src/assets/themes/neon_moon.scss b/src/assets/themes/neon_moon.scss index eb0e87b..a404eb2 100644 --- a/src/assets/themes/neon_moon.scss +++ b/src/assets/themes/neon_moon.scss @@ -231,13 +231,13 @@ ul.console-list { */ -.selectedNav { +.nav-selected { -moz-animation: outlineAnimation 0.9s infinite; -webkit-animation: outlineAnimation 0.9s infinite; animation: outlineAnimation 0.9s infinite; } -.selectedNav.muted { +.nav-selected.muted { -moz-animation: none; -webkit-animation:none; animation: none; diff --git a/src/client/io-init.js b/src/client/io-init.js index 4cdff87..1d701bf 100644 --- a/src/client/io-init.js +++ b/src/client/io-init.js @@ -1,7 +1,8 @@ let navigationBindings = require("./io-keyboard-events"); - /* Bind local Navigation - -------------------------------------------------- */ - navigationBindings - .navigationEventListeners - .bindEventNavigation(); +/* + * Bind Navigation Events + */ +navigationBindings + .navigationEventListeners + .bindEventNavigation(); diff --git a/src/client/io-keyboard-events.js b/src/client/io-keyboard-events.js index 7fa8264..80e7822 100644 --- a/src/client/io-keyboard-events.js +++ b/src/client/io-keyboard-events.js @@ -1,7 +1,131 @@ +let _ = require("lodash"); + + /* Exposed Navigation Event Listener(s) -------------------------------------------------- */ -var navigationEventListeners = { + +let getNavigationItems = function() { + + // TODO: Just create map of cols/rows on re/init + let navItems = document.getElementsByClassName("nav-item"), + navSelected = document.getElementsByClassName("nav-selected")[0], + navSelectedColumn = navSelected.getAttribute("data-nav-column"), + navSelectedRow = navSelected.getAttribute("data-nav-row"), + navMap = { + navItems: navItems, + navSelected: navSelected, + navSelectedColumn: navSelectedColumn, + navSelectedRow: navSelectedRow + } + + return navMap; +} +let navigationEvent = { + + // TODO: If switching columns on > 0 row, find the closest row in previous column to select instead of defaulting to top of nav items + + // Next Nav Item (COLUMN) -> + nextNavItemColumn: function() { + + let navItemsObj = getNavigationItems(); + + navItemsObj.navSelectedColumn++; + + let navNextItemColumn = document.querySelectorAll('[data-nav-column="'+navItemsObj.navSelectedColumn+'"]')[0]; + + if (navNextItemColumn) { + navItemsObj.navSelected.classList.remove("nav-selected"); + navNextItemColumn.classList.add("nav-selected"); + } + + else { + console.log("[!] >> No Next Item (COL)"); + } + + }, + + // Previous Nav Item (COLUMN) <- + prevNavItemColumn: function() { + let navItemsObj = getNavigationItems(); + + navItemsObj.navSelectedColumn--; + + let navPrevItemColumn = document.querySelectorAll('[data-nav-column="'+navItemsObj.navSelectedColumn+'"]')[0]; + + if (navPrevItemColumn) { + navItemsObj.navSelected.classList.remove("nav-selected"); + navPrevItemColumn.classList.add("nav-selected"); + } + + else { + console.log("[!] >> No Prev Item (COL)"); + } + }, + + // Next Nav Item (ROW) _ + nextNavItemRow: function() { + + let navItemsObj = getNavigationItems(); + + navItemsObj.navSelectedRow++; + + let navNextItemRow = document.querySelectorAll('[data-nav-row="'+navItemsObj.navSelectedRow+'"][data-nav-column="'+navItemsObj.navSelectedColumn+'"]')[0]; + + if (navNextItemRow) { + navItemsObj.navSelected.classList.remove("nav-selected"); + navNextItemRow.classList.add("nav-selected"); + } + + else { + console.log("[!] >> No Next Item (ROW)"); + } + + }, + + // Prev Nav Item (ROW) - + prevNavItemRow: function() { + + let navItemsObj = getNavigationItems(); + + navItemsObj.navSelectedRow--; + + let navPrevItemRow = document.querySelectorAll('[data-nav-row="'+navItemsObj.navSelectedRow+'"][data-nav-column="'+navItemsObj.navSelectedColumn+'"]')[0]; + + if (navPrevItemRow) { + navItemsObj.navSelected.classList.remove("nav-selected"); + navPrevItemRow.classList.add("nav-selected"); + } + + else { + console.log("[!] >> No Prev Item (ROW)"); + } + + }, + +} + + +let keyMapping = { + 37: { + name: "leftArrow", + event: navigationEvent.prevNavItemColumn + }, + 38: { + name: "upArrow", + event: navigationEvent.prevNavItemRow + }, + 39: { + name: "rightArrow", + event: navigationEvent.nextNavItemColumn + }, + 40: { + name: "downArrow", + event: navigationEvent.nextNavItemRow + }, +} + +let navigationEventListeners = { /* Key Bindings -------------------------------------------------- */ @@ -10,16 +134,22 @@ var navigationEventListeners = { }, passKeyEvent: function(e) { - if (e) { - console.log("Key Event", e); - // navigationEvent(e); + console.log(e); + + if (e && keyMapping[e.keyCode]) { + keyMapping[e.keyCode].event(); } } + }; +let navigationInit = function() { + _.first(document.getElementsByClassName("nav-item")).classList.add("nav-selected"); +} /* Exports -------------------------------------------------- */ exports.navigationEventListeners = navigationEventListeners; +exports.navigationInit = navigationInit; diff --git a/src/components/NavBlockAchievements.jsx b/src/components/NavBlockAchievements.jsx index 4aa8390..2d1b0d4 100644 --- a/src/components/NavBlockAchievements.jsx +++ b/src/components/NavBlockAchievements.jsx @@ -4,7 +4,7 @@ const Components = { NavBlockAchievements: function NavBlockAchievements(props) { return ( -
+

Achievements

View / Edit / Add game achievements
diff --git a/src/components/NavBlockAddGames.jsx b/src/components/NavBlockAddGames.jsx index 696c07b..15ce001 100644 --- a/src/components/NavBlockAddGames.jsx +++ b/src/components/NavBlockAddGames.jsx @@ -4,7 +4,7 @@ const Components = { NavBlockExplorer: function NavBlockExplorer(props) { return ( -
+

Add New Games

Add games to your library
diff --git a/src/components/NavBlockExplorer.jsx b/src/components/NavBlockExplorer.jsx index 305a424..d272144 100644 --- a/src/components/NavBlockExplorer.jsx +++ b/src/components/NavBlockExplorer.jsx @@ -4,7 +4,7 @@ const Components = { NavBlockExplorer: function NavBlockExplorer(props) { return ( -
+

Game Explorer

Browse your game collection
diff --git a/src/components/NavBlockHistory.jsx b/src/components/NavBlockHistory.jsx index 0df6464..58476a9 100644 --- a/src/components/NavBlockHistory.jsx +++ b/src/components/NavBlockHistory.jsx @@ -4,7 +4,7 @@ const Components = { NavBlockExplorer: function NavBlockExplorer(props) { return ( -
+

History

View your play history
diff --git a/src/components/NavBlockUpdates.jsx b/src/components/NavBlockUpdates.jsx index 736597e..aad473a 100644 --- a/src/components/NavBlockUpdates.jsx +++ b/src/components/NavBlockUpdates.jsx @@ -4,7 +4,7 @@ const Components = { NavBlockUpdates: function NavBlockUpdates(props) { return ( -
+

Updates

Get the latest version