diff --git a/index.html b/index.html index 44dabbf..455013d 100644 --- a/index.html +++ b/index.html @@ -2,70 +2,14 @@ - Document + Number Munchers - - - - - -
+ +
diff --git a/js/App.js b/js/App.js new file mode 100644 index 0000000..4b31413 --- /dev/null +++ b/js/App.js @@ -0,0 +1,10 @@ +var React = require('react'); +var Grid = require('./Grid'); +var Welcome = require('./Welcome'); + +module.exports = React.createClass({ + render() { + //return (
); + return (); + } +}); diff --git a/js/Game.js b/js/Game.js index 20086da..843f5b0 100644 --- a/js/Game.js +++ b/js/Game.js @@ -23,8 +23,12 @@ module.exports = { }, - // State machine mediator. + // State machine / mediator. state: { + newGame: function() { + + }, + nextLevel: function() { module.exports.level++; } diff --git a/js/Grid.js b/js/Grid.js index 7f3f066..0246551 100644 --- a/js/Grid.js +++ b/js/Grid.js @@ -1,3 +1,6 @@ +require('../sass/grid.scss'); +require('../sass/cell.scss'); + var React = require('react'); var Cell = require('./Cell'); var Character = require('./Character'); diff --git a/js/HighScores.js b/js/HighScores.js new file mode 100644 index 0000000..be25bf8 --- /dev/null +++ b/js/HighScores.js @@ -0,0 +1,30 @@ +var React = require('react'); + +var Entry = React.createClass({ + render() { + return ( +
+
{this.props.rank}
+
{this.props.initials}
+
{this.props.score}
+
+ ); + } +}); + + +module.exports = React.createClass({ + render() { + var entries = []; + entries.push(); + entries.push(); + entries.push(); + entries.push(); + entries.push(); + entries.push(); + + return ( +
{entries}
+ ); + } +}); diff --git a/js/Input.js b/js/Input.js index 6dbb58a..5a2c090 100644 --- a/js/Input.js +++ b/js/Input.js @@ -1,5 +1,3 @@ -var Grid = require('./Grid'); - module.exports = { keydown: function(e) { diff --git a/js/Welcome.js b/js/Welcome.js new file mode 100644 index 0000000..40fdcf1 --- /dev/null +++ b/js/Welcome.js @@ -0,0 +1,49 @@ +require('../sass/welcome.scss'); + +var React = require('react'); +var HighScores = require('./HighScores'); + +var toggleTimeout = function() { + var hidden = this.state.hidden; + + setTimeout(function() { + this.setState({ hidden: !hidden }); + toggleTimeout.call(this); + }.bind(this), 1000); +}; + +var NewGame = React.createClass({ + getInitialState() { + return { + hidden: false + } + }, + + componentDidMount() { + toggleTimeout.call(this); + }, + + render() { + var classname = ['newgame']; + + if (this.state.hidden === true) { + classname.push('hidden'); + } + + return ( +
Press Space Bar To Play
+ ); + } +}); + +module.exports = React.createClass({ + render() { + return ( +
+ + + +
+ ); + } +}); diff --git a/js/main.js b/js/main.js index 820d440..9a8b23d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,7 @@ +require('../sass/reset.scss'); + var React = require('react'); -var ReactDOM = require('react-dom'); -var Grid = require('./Grid.js'); +var ReactDom = require('react-dom'); +var App = require('./App'); -ReactDOM.render(, document.getElementById('grid')); +ReactDom.render(, document.getElementById('app')); diff --git a/raw/spacebar.xcf b/raw/spacebar.xcf new file mode 100644 index 0000000..2bdcfc8 Binary files /dev/null and b/raw/spacebar.xcf differ diff --git a/raw/title.xcf b/raw/title.xcf new file mode 100644 index 0000000..8526c1d Binary files /dev/null and b/raw/title.xcf differ diff --git a/res/spacebar.png b/res/spacebar.png new file mode 100644 index 0000000..053e58e Binary files /dev/null and b/res/spacebar.png differ diff --git a/res/title.png b/res/title.png new file mode 100644 index 0000000..cd64153 Binary files /dev/null and b/res/title.png differ diff --git a/sass/cell.scss b/sass/cell.scss new file mode 100644 index 0000000..22dc9b2 --- /dev/null +++ b/sass/cell.scss @@ -0,0 +1,29 @@ +.x-1 { left: -100px; } +.x0 { left: 0; } +.x1 { left: 100px; } +.x2 { left: 200px; } +.x3 { left: 300px; } +.x4 { left: 400px; } +.x5 { left: 500px; } +.x6 { left: 600px; } + +.y-1 { top: -100px; } +.y0 { top: 0; } +.y1 { top:100px; } +.y2 { top: 200px; } +.y3 { top: 300px; } +.y4 { top: 400px; } +.y5 { top: 500px; } +.y6 { top: 600px; } + +//$cellW: 100px; +//$cellH: 100px; + +.cell { + border:1px solid purple; + height:100px; + line-height:100px; + position:absolute; + text-align:center; + width:100px; +} diff --git a/sass/character.scss b/sass/character.scss index ac4c1d8..72a6edf 100644 --- a/sass/character.scss +++ b/sass/character.scss @@ -2,5 +2,12 @@ $bg: aqua; background: $bg; + height:100px; opacity: 0.5; + position:absolute; + width:100px; + + &.active { + border:10px solid purple; + } } diff --git a/sass/grid.scss b/sass/grid.scss new file mode 100644 index 0000000..00585b6 --- /dev/null +++ b/sass/grid.scss @@ -0,0 +1,6 @@ +#grid { + height:500px; + overflow:hidden; + position:relative; + width:600px; +} diff --git a/sass/reset.scss b/sass/reset.scss new file mode 100644 index 0000000..8c02784 --- /dev/null +++ b/sass/reset.scss @@ -0,0 +1,6 @@ +* { + box-sizing:border-box; + font-family:Emulogic; + margin: 0; + padding: 0; +} diff --git a/sass/welcome.scss b/sass/welcome.scss new file mode 100644 index 0000000..a846c8b --- /dev/null +++ b/sass/welcome.scss @@ -0,0 +1,45 @@ +.welcome { + padding:20px; + text-align:center; + + img { + width:350px; + } + + .highscores { + font-size: 0; + margin:0 auto; + width:350px; + + .entry { + font-size:16px; + line-height:40px; + } + + .rank { + display:inline-block; + text-align:left; + width:50px; + } + + .initials { + display:inline-block; + width:100px; + } + + .score { + display:inline-block; + text-align:right; + width:200px; + } + } + + .newgame { + margin:20px 0; + transition:opacity 0.4s ease; + + &.hidden { + opacity: 0.7; + } + } +}