diff --git a/js/App.js b/js/App.js deleted file mode 100644 index 4b31413..0000000 --- a/js/App.js +++ /dev/null @@ -1,10 +0,0 @@ -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 deleted file mode 100644 index 843f5b0..0000000 --- a/js/Game.js +++ /dev/null @@ -1,36 +0,0 @@ -var Values = require('./Values'); - -/** - * - */ -module.exports = { - level: 0, - - checkWin: function(values) { - var len = values.length; - var remaining = 0; - - for (var i = 0; i < len; i++) { - if (Values.validate(values[i], module.exports.level) === true) { - remaining++; - } - } - - return (remaining === 0); - }, - - checkLoss: function() { - - }, - - // State machine / mediator. - state: { - newGame: function() { - - }, - - nextLevel: function() { - module.exports.level++; - } - } -}; diff --git a/js/Grid.js b/js/Grid.js deleted file mode 100644 index 0246551..0000000 --- a/js/Grid.js +++ /dev/null @@ -1,61 +0,0 @@ -require('../sass/grid.scss'); -require('../sass/cell.scss'); - -var React = require('react'); -var Cell = require('./Cell'); -var Character = require('./Character'); -var UserInput = require('./Input'); -var Values = require('./Values'); -var Game = require('./Game'); - -module.exports = React.createClass({ - generateValues() { - return Values.generate(this.props.width * this.props.height, Game.level); - }, - - getInitialState() { - return { - values: this.generateValues() - }; - }, - - componentDidMount() { - window.addEventListener('keydown', UserInput.keydown.bind(this)); - }, - - munch(x, y) { - var i = y * this.props.width + x; - - if (this.state.values[i] === "") { - return; - } - - if (Values.validate(this.state.values[i], Game.level)) { - this.state.values[i] = ""; - this.setState({ values: this.state.values }); - } - - if (Game.checkWin(this.state.values) === true) { - Game.state.nextLevel(); - this.setState({ values: this.generateValues() }); - } - //Game.checkLoss(); - }, - - render() { - var cells = []; - var i; - - for (var x = 0; x < this.props.width; x++) { - for (var y = 0; y < this.props.height; y++) { - i = y * this.props.width + x; - cells.push(); - } - } - - return (
- {cells} - -
); - } -}); diff --git a/js/State.js b/js/State.js new file mode 100644 index 0000000..80a07c9 --- /dev/null +++ b/js/State.js @@ -0,0 +1,17 @@ +/** + * + */ +module.exports = { + level: 0, + + + /*state: { + newGame: function() { + + }, + + nextLevel: function() { + module.exports.level++; + } + }*/ +}; diff --git a/js/board/Board.js b/js/board/Board.js new file mode 100644 index 0000000..c710603 --- /dev/null +++ b/js/board/Board.js @@ -0,0 +1,47 @@ +require('../../sass/board/board.scss'); + +var React = require('react'); +var Scorebar = require('./Scorebar'); +var Grid = require('./Grid'); +var Message = require('./Message'); +var Muncher = require('./Muncher'); + +module.exports = React.createClass({ +/* + componentDidMount() { + window.addEventListener('keydown', UserInput.keydown.bind(this)); + }, + + componentWillUnmount() { + // remove event listener + }, + + munch(x, y) { + var i = y * this.props.width + x; + + if (this.state.values[i] === "") { + return; + } + + if (Values.validate(this.state.values[i], Game.level)) { + this.state.values[i] = ""; + this.setState({ values: this.state.values }); + } + + //if (Game.checkWin(this.state.values) === true) { + // Game.state.nextLevel(); + // this.setState({ values: this.generateValues() }); + //} + //Game.checkLoss(); + }, + +*/ + render() { + return (
+ + + + +
); + } +}); diff --git a/js/Cell.js b/js/board/Cell.js similarity index 100% rename from js/Cell.js rename to js/board/Cell.js diff --git a/js/board/Grid.js b/js/board/Grid.js new file mode 100644 index 0000000..50692de --- /dev/null +++ b/js/board/Grid.js @@ -0,0 +1,32 @@ +require('../../sass/board/grid.scss'); + +var React = require('react'); +var Cell = require('./Cell'); +var Values = require('./Values'); +var State = require('../State'); + +module.exports = React.createClass({ + generateValues() { + return Values.generate(this.props.width * this.props.height, State.level); + }, + + getInitialState() { + return { + values: this.generateValues() + }; + }, + + render() { + var cells = []; + var i; + + for (var x = 0; x < this.props.width; x++) { + for (var y = 0; y < this.props.height; y++) { + i = y * this.props.width + x; + cells.push(); + } + } + + return (
{cells}
); + } +}); diff --git a/js/Input.js b/js/board/Input.js similarity index 99% rename from js/Input.js rename to js/board/Input.js index 5a2c090..5e5cc53 100644 --- a/js/Input.js +++ b/js/board/Input.js @@ -1,5 +1,4 @@ module.exports = { - keydown: function(e) { var x = this.refs.ourhero1.state.x; var y = this.refs.ourhero1.state.y; diff --git a/js/board/Message.js b/js/board/Message.js new file mode 100644 index 0000000..1bbf9c5 --- /dev/null +++ b/js/board/Message.js @@ -0,0 +1,9 @@ +require('../../sass/board/message.scss'); + +var React = require('react'); + +module.exports = React.createClass({ + render() { + return (
Congratulations!
Get ready for level 4
); + } +}); diff --git a/js/Character.js b/js/board/Muncher.js similarity index 54% rename from js/Character.js rename to js/board/Muncher.js index 0b73434..9ec20b2 100644 --- a/js/Character.js +++ b/js/board/Muncher.js @@ -1,9 +1,8 @@ -var React = require('react'); -var Input = require('./Input'); +require('../../sass/board/muncher.scss'); -require('../sass/character.scss'); +var React = require('react'); -var character = React.createClass({ +module.exports = React.createClass({ getInitialState: function() { return { active: true, @@ -12,15 +11,8 @@ var character = React.createClass({ }; }, - move: function(x, y) { - - }, - - //componentWillUpdate(object nextProps, object nextState) -//componentDidUpdate(object prevProps, object prevState) - render: function() { - var classname = ['ourhero', 'x' + this.state.x, 'y' + this.state.y]; + var classname = ['muncher', 'x' + this.state.x, 'y' + this.state.y]; if (this.state.active === true) { classname.push('active'); @@ -33,5 +25,3 @@ var character = React.createClass({ ); } }); - -module.exports = character; diff --git a/js/board/Scorebar.js b/js/board/Scorebar.js new file mode 100644 index 0000000..78ac2fb --- /dev/null +++ b/js/board/Scorebar.js @@ -0,0 +1,17 @@ +require('../../sass/board/scorebar.scss'); + +var React = require('react'); + +module.exports = React.createClass({ + render() { + return (
+
9999999
+
9999999
+
+
+
+
+
+
); + } +}); diff --git a/js/Values.js b/js/board/Values.js similarity index 50% rename from js/Values.js rename to js/board/Values.js index 985afe3..3012df0 100644 --- a/js/Values.js +++ b/js/board/Values.js @@ -12,5 +12,22 @@ module.exports = { validate: function(value, level) { return ((value || -1) % (level + 2) === 0); + }, + + checkWin: function(values, level) { + var len = values.length; + var remaining = 0; + + for (var i = 0; i < len; i++) { + if (module.exports.validate(values[i], level) === true) { + remaining++; + } + } + + return (remaining === 0); + }, + + checkLoss: function() { + } }; diff --git a/js/main.js b/js/main.js index 9a8b23d..19d8211 100644 --- a/js/main.js +++ b/js/main.js @@ -2,6 +2,35 @@ require('../sass/reset.scss'); var React = require('react'); var ReactDom = require('react-dom'); -var App = require('./App'); +var Board = require('./board/Board'); +var Welcome = require('./welcome/Welcome'); +var State = require('./State'); + +var App = React.createClass({ + getInitialState() { + return { + screen: 'board' + }; + }, + + handleKeydown(e) { + if (this.state.screen === 'welcome' && e.keyCode === 32) { + this.setState({ screen: 'board' }); + } + }, + + componentDidMount() { + window.addEventListener('keydown', this.handleKeydown); + }, + + render() { + if (this.state.screen === 'welcome') { + return (); + } + else if (this.state.screen === 'board') { + return (); + } + } +}); ReactDom.render(, document.getElementById('app')); diff --git a/js/HighScores.js b/js/welcome/HighScores.js similarity index 95% rename from js/HighScores.js rename to js/welcome/HighScores.js index be25bf8..94c3769 100644 --- a/js/HighScores.js +++ b/js/welcome/HighScores.js @@ -1,3 +1,5 @@ +require('../../sass/welcome/highscores.scss'); + var React = require('react'); var Entry = React.createClass({ @@ -22,7 +24,7 @@ module.exports = React.createClass({ entries.push(); entries.push(); entries.push(); - + return (
{entries}
); diff --git a/js/Welcome.js b/js/welcome/Welcome.js similarity index 77% rename from js/Welcome.js rename to js/welcome/Welcome.js index 40fdcf1..a041540 100644 --- a/js/Welcome.js +++ b/js/welcome/Welcome.js @@ -1,15 +1,15 @@ -require('../sass/welcome.scss'); +require('../../sass/welcome/welcome.scss'); var React = require('react'); var HighScores = require('./HighScores'); +var blinkTimer = null; + var toggleTimeout = function() { var hidden = this.state.hidden; + this.setState({ hidden: !hidden }); - setTimeout(function() { - this.setState({ hidden: !hidden }); - toggleTimeout.call(this); - }.bind(this), 1000); + blinkTimer = setTimeout(toggleTimeout.bind(this), 600); }; var NewGame = React.createClass({ @@ -23,6 +23,10 @@ var NewGame = React.createClass({ toggleTimeout.call(this); }, + componentWillUnmount() { + clearTimeout(blinkTimer); + }, + render() { var classname = ['newgame']; diff --git a/sass/board/board.scss b/sass/board/board.scss new file mode 100644 index 0000000..25b93b9 --- /dev/null +++ b/sass/board/board.scss @@ -0,0 +1,5 @@ +.board { + margin:0 auto; + position:relative; + width:600px; +} diff --git a/sass/board/grid.scss b/sass/board/grid.scss new file mode 100644 index 0000000..9aefcdc --- /dev/null +++ b/sass/board/grid.scss @@ -0,0 +1,26 @@ +.grid { + height:500px; + overflow:hidden; + position:relative; + width:600px; + z-index:0; + + .cell { + border:1px solid purple; + height:100px; + line-height:100px; + position:absolute; + text-align:center; + width:100px; + } +} + +@for $i from 0 through 6 { + .x#{$i} { + left: #{$i * 100}px; + } + + .y#{$i} { + top: #{$i * 100}px; + } +} diff --git a/sass/board/message.scss b/sass/board/message.scss new file mode 100644 index 0000000..b32d2ff --- /dev/null +++ b/sass/board/message.scss @@ -0,0 +1,12 @@ +.message { + background:#fff; + border:1px solid #000; + font-size:14px; + line-height:40px; + margin:150px 5%; + padding:30px; + position:absolute; + text-align:center; + width:90%; + z-index:1000; +} diff --git a/sass/character.scss b/sass/board/muncher.scss similarity index 84% rename from sass/character.scss rename to sass/board/muncher.scss index 72a6edf..9652f45 100644 --- a/sass/character.scss +++ b/sass/board/muncher.scss @@ -1,8 +1,9 @@ -.ourhero { +.muncher { $bg: aqua; background: $bg; height:100px; + margin-top:70px; opacity: 0.5; position:absolute; width:100px; diff --git a/sass/board/scorebar.scss b/sass/board/scorebar.scss new file mode 100644 index 0000000..cea5df1 --- /dev/null +++ b/sass/board/scorebar.scss @@ -0,0 +1,42 @@ +.scorebar { + $fontsize: 13px; + $h: 70px; + $w: 600px; + + font-size:0px; + height:$h; + line-height:50px; + margin:0 auto; + width:$w; + + .item { + display:inline-block; + font-size:$fontsize; + height:$h; + line-height:$h; + vertical-align:top; + } + + .current-score { + width:30%; + } + + .high-score { + text-align:center; + width:40%; + } + + .lives { + text-align:right; + width:30%; + } + + .life { + background:lime; + display:inline-block; + height:36px; + margin-left:10px; + vertical-align:middle; + width:36px; + } +} diff --git a/sass/cell.scss b/sass/cell.scss deleted file mode 100644 index 22dc9b2..0000000 --- a/sass/cell.scss +++ /dev/null @@ -1,29 +0,0 @@ -.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/grid.scss b/sass/grid.scss deleted file mode 100644 index 00585b6..0000000 --- a/sass/grid.scss +++ /dev/null @@ -1,6 +0,0 @@ -#grid { - height:500px; - overflow:hidden; - position:relative; - width:600px; -} diff --git a/sass/welcome.scss b/sass/welcome.scss deleted file mode 100644 index a846c8b..0000000 --- a/sass/welcome.scss +++ /dev/null @@ -1,45 +0,0 @@ -.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; - } - } -} diff --git a/sass/welcome/highscores.scss b/sass/welcome/highscores.scss new file mode 100644 index 0000000..6434667 --- /dev/null +++ b/sass/welcome/highscores.scss @@ -0,0 +1,25 @@ +.highscores { + font-size: 0; + + .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; + } +} diff --git a/sass/welcome/welcome.scss b/sass/welcome/welcome.scss new file mode 100644 index 0000000..88cc3b0 --- /dev/null +++ b/sass/welcome/welcome.scss @@ -0,0 +1,22 @@ +.welcome { + padding:20px; + text-align:center; + + img { + width:350px; + } + + .highscores { + margin:0 auto; + width:350px; + } + + .newgame { + margin:20px 0; + transition:opacity 0.1s ease; + + &.hidden { + opacity: 0.5; + } + } +}