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 ();
+ }
+});
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;
+ }
+ }
+}