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 -->
+<body>
-
+    <div id="app"></div>
    <div id="grid"></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 ReactDom = require('react-dom');
-var Grid = require('./Grid.js');
+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;
        }
    }
 }