Welcome screen built.

10 years ago · 0b962aaad6
parent cf4ff04e40
commit 0b962aaad6
17 changed files with 198 additions and 65 deletions
--- a/index.html
+++ b/index.html
@ -2,70 +2,14 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Document</title>
+    <title>Number Munchers</title>
    <script src="https://fb.me/react-0.14.7.js"></script>
    <script src="https://fb.me/react-dom-0.14.7.js"></script>
    <link rel="stylesheet" href="style.css"></link>
-
-    <style>
-        * {
-            box-sizing:border-box;
-            font-family:Emulogic;
-        }
-
-        .ourhero {
-            height:100px;
-            position:absolute;
-            width:100px;
-        }
-
-        .active {
-            border:10px solid purple;
-        }
-
-        .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; }
-
-        .cell {
-            border:1px solid purple;
-            height:100px;
-            line-height:100px;
-            position:absolute;
-            text-align:center;
-            width:100px;
-        }
-
-        #grid {
-            height:500px;
-            overflow:hidden;
-            position:relative;
-            width:600px;
-        }
-    </style>
 </head>
-<body>
-    <!-- AAA 8973<br>
-    ASS 2389<br>
-    BOB 1100<br>

-    Press Spacebar -->
-
-    <div id="grid"></div>
+<body>
+    <div id="app"></div>
    <script src='http://localhost:8080/bundle.js'></script>
 </body>
 </html>
--- a/js/App.js
+++ 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 (<div><Grid width='6' height='5' /></div>);
+        return (<Welcome />);
+    }
+});
--- 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++;
        }
--- 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');
--- a/js/HighScores.js
+++ b/js/HighScores.js
@ -0,0 +1,30 @@
+var React = require('react');
+
+var Entry = React.createClass({
+    render() {
+        return (
+            <div className='entry'>
+                <div className='rank'>{this.props.rank}</div>
+                <div className='initials'>{this.props.initials}</div>
+                <div className='score'>{this.props.score}</div>
+            </div>
+        );
+    }
+});
+
+
+module.exports = React.createClass({
+    render() {
+        var entries = [];
+        entries.push(<Entry initials="ABA" score="219283" rank="1" key="0" />);
+        entries.push(<Entry initials="ABA" score="107112" rank="2" key="1" />);
+        entries.push(<Entry initials="ABA" score="81091" rank="3" key="2" />);
+        entries.push(<Entry initials="ABA" score="67747" rank="4" key="3" />);
+        entries.push(<Entry initials="ABA" score="9283" rank="5" key="4" />);
+        entries.push(<Entry initials="ABA" score="928" rank="6" key="5" />);
+        
+        return (
+            <div className='highscores'>{entries}</div>
+        );
+    }
+});
--- a/js/Input.js
+++ b/js/Input.js
@ -1,5 +1,3 @@
-var Grid = require('./Grid');
-
 module.exports = {

    keydown: function(e) {
--- a/js/Welcome.js
+++ 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 (
+            <div className={classname.join(' ')}>Press Space Bar To Play</div>
+        );
+    }
+});
+
+module.exports = React.createClass({
+    render() {
+        return (
+            <div className='welcome'>
+                <img src="res/title.png" />
+                <NewGame />
+                <HighScores />
+            </div>
+        );
+    }
+});
--- 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(<Grid width="6" height="5" />, document.getElementById('grid'));
+ReactDom.render(<App />, document.getElementById('app'));
--- a/raw/spacebar.xcf
+++ b/raw/spacebar.xcf
--- a/raw/title.xcf
+++ b/raw/title.xcf
--- a/res/spacebar.png
+++ b/res/spacebar.png
--- a/res/title.png
+++ b/res/title.png
--- a/sass/cell.scss
+++ 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;
+}
--- 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;
+    }
 }
--- a/sass/grid.scss
+++ b/sass/grid.scss
@ -0,0 +1,6 @@
+#grid {
+    height:500px;
+    overflow:hidden;
+    position:relative;
+    width:600px;
+}
--- a/sass/reset.scss
+++ b/sass/reset.scss
@ -0,0 +1,6 @@
+* {
+    box-sizing:border-box;
+    font-family:Emulogic;
+    margin: 0;
+    padding: 0;
+}
--- a/sass/welcome.scss
+++ 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;
+        }
+    }
+}