Skip to content
Permalink
Browse files

Keyboard and Navigation Events

  • Loading branch information...
alexjstubbs committed Apr 12, 2018
1 parent 3d9234a commit d991880c7cab03322c652c46c8b4d79822c8c102
@@ -26,15 +26,6 @@
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->

</body>
</html>
@@ -1,51 +1,42 @@
import React, { Component } from 'react';
import Avatar from './components/Avatar';
import NavBlockExplorer from './components/NavBlockExplorer';
import NavBlockHistory from './components/NavBlockHistory';
import NavBlockAddGames from './components/NavBlockAddGames';
import NavBlockAchievements from './components/NavBlockAchievements';
import NavBlockUpdates from './components/NavBlockUpdates';
import MenuList from './components/MenuList';
import Header from './components/Header';
import ScreenDashboard from './components/ScreenDashboard';
import ScreenCommunity from './components/ScreenCommunity';
import ScreenNext from './components/ScreenNext';
import './client/io-init.js';
import './assets/themes/neon_moon.css';

class App extends Component {
render() {
return (
<div className="App container">
<div className="twelve columns">

<header className="App-header">

constructor(props) {
super(props);
this.state = {first: true};
}

<div className="ten columns">
<MenuList></MenuList>
</div>

<div className="two columns">
<Avatar></Avatar>
</div>
render() {
const first = this.state.first;

</header>
const navScreen = first ? (
<ScreenDashboard />
) : (
<ScreenCommunity />
);

<div className="twelve columns nopadding-nomargin">
<br />
</div>
return (

<div className="content">
<div className="App container">

<div className="six columns">
<NavBlockExplorer></NavBlockExplorer>
<NavBlockHistory></NavBlockHistory>
</div>
<Header />

<div className="six columns">
<NavBlockAddGames></NavBlockAddGames>
<NavBlockAchievements></NavBlockAchievements>
<NavBlockUpdates></NavBlockUpdates>
</div>
<div className="eleven columns nopadding-nomargin">
{navScreen}
</div>

<div className="one column nopadding-nomargin">
<ScreenNext />
</div>

</div>
</div>
);
}
@@ -41,6 +41,9 @@
.h-15-vh {
height: 15vh; }

.h-16-3-vh {
height: 16.3vh; }

.h-20-vh {
height: 20vh; }

@@ -50,6 +53,9 @@
.h-30-vh {
height: 30vh; }

.h-35-vh {
height: 35vh; }

.h-40-vh {
height: 40vh; }

@@ -88,7 +94,8 @@ body {

.App {
margin: 0 auto;
padding: 20px; }
padding: 20px;
overflow: hidden; }

/*
* Avatar
@@ -141,6 +148,15 @@ ul.console-list {
background-position-y: 130%;
background-position-x: 110%; }

.navigation-button:last-child {
border-bottom: 8px solid #404040; }

.right-screen {
position: absolute;
right: -90px;
top: 120px;
opacity: 0.5; }

/*
* Profile/Avatar/Indicators
*/
@@ -200,7 +216,9 @@ ul.console-list {
100% {
outline: #1f80ed ridge 1px; } }

/* Color Utilities */
/*
* Color Utilities
*/
.bg-green {
background-color: #1EFB58; }

@@ -63,6 +63,10 @@ $green: #1EFB58;
height: 15vh;
}

.h-16-3-vh {
height: 16.3vh;
}

.h-20-vh {
height: 20vh;
}
@@ -75,6 +79,11 @@ $green: #1EFB58;
height: 30vh;
}

.h-35-vh {
height: 35vh;
}


.h-40-vh {
height: 40vh;
}
@@ -125,6 +134,7 @@ body {
.App {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}

/*
@@ -194,6 +204,17 @@ ul.console-list {
background-position-x: 110%;
}

.navigation-button:last-child {
border-bottom: 8px solid lighten($black, 25%);
}

.right-screen {
position: absolute;
right: -90px;
top: 120px;
opacity: 0.5;
}

/*
* Profile/Avatar/Indicators
*/
@@ -247,13 +268,14 @@ ul.console-list {
100% { outline:$blue ridge 1px; }
}

/* Color Utilities */
.bg-green {
/*
* Color Utilities
*/

.bg-green {
background-color: $green;
}
.color-green {
color: $green;
}



@@ -0,0 +1,7 @@
let navigationBindings = require("./io-keyboard-events");

/* Bind local Navigation
-------------------------------------------------- */
navigationBindings
.navigationEventListeners
.bindEventNavigation();
@@ -0,0 +1,25 @@
/* Exposed Navigation Event Listener(s)
-------------------------------------------------- */

var navigationEventListeners = {

/* Key Bindings
-------------------------------------------------- */
bindEventNavigation: function() {
window.addEventListener("keydown", navigationEventListeners.passKeyEvent);
},

passKeyEvent: function(e) {
if (e) {

console.log("Key Event", e);
// navigationEvent(e);
}
}

};


/* Exports
-------------------------------------------------- */
exports.navigationEventListeners = navigationEventListeners;
@@ -8,7 +8,7 @@ const Components = {
<div className="five columns u-pull-right">

<div className="avatar container">
<OnlineIndicator></OnlineIndicator>
<OnlineIndicator />
</div>

</div>
@@ -22,13 +22,13 @@ class GameExplorer extends Component {

<div className="content">

<ConsoleList></ConsoleList>
<ConsoleList />

<br />

<div className="u-cf"></div>

<FileList></FileList>
<FileList />

</div>

@@ -0,0 +1,34 @@

import React from 'react';
import Avatar from './Avatar';
import MenuList from './MenuList';


const Components = {
Header: function Header(props) {
return (

<header className="App-header">

<div className="ten columns">
<MenuList />
</div>

<div className="two columns">
<Avatar />
</div>

</header>


);

}
}


function Header() {
return <Components.Header />;
}

export default Header;
@@ -6,7 +6,7 @@ const Components = {

<div className="console-list twelve columns">
<ul className="no-bullets nopadding-nomargin console-list">
<li class="active">Dashboard</li>
<li className="active">Dashboard</li>
<li>Community</li>
<li>Tools</li>
<li>Settings</li>
@@ -4,7 +4,7 @@ const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (

<div className="navigation-button h-25-vh twelve columns">
<div className="navigation-button h-30-vh twelve columns">
<h4 className="nopadding-nomargin">History</h4>
<span className="mute nopadding-nomargin">View your play history</span>
</div>
@@ -4,7 +4,7 @@ const Components = {
NavBlockUpdates: function NavBlockUpdates(props) {
return (

<div className="navigation-button h-15-vh twelve columns">
<div className="navigation-button h-16-3-vh twelve columns">
<h4 className="nopadding-nomargin">Updates</h4>
<span className="mute nopadding-nomargin">Get the latest version</span>
</div>
@@ -4,8 +4,8 @@ const Components = {
OnlineIndicator: function OnlineIndicator(props) {
return (

<div class="onlineIcon">
<i class="icon ion-record color-green"></i>
<div className="onlineIcon">
<i className="icon ion-record color-green"></i>
</div>

);
@@ -0,0 +1,36 @@
import React, { Component } from 'react';
import NavBlockExplorer from './NavBlockExplorer';
import NavBlockHistory from './NavBlockHistory';
import NavBlockAddGames from './NavBlockAddGames';
import NavBlockAchievements from './NavBlockAchievements';
import NavBlockUpdates from './NavBlockUpdates';

class ScreenDashboard extends Component {
render() {
return (

<div>

<div className="twelve columns nopadding-nomargin">
<br />
</div>

<div className="content">

<div className="six columns h-80-vh">
<NavBlockHistory />
</div>

<div className="six columns h-80-vh">
<NavBlockAchievements />
<NavBlockUpdates />
</div>

</div>

</div>
);
}
}

export default ScreenDashboard;
Oops, something went wrong.

0 comments on commit d991880

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.