release

src/components/App/App.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './App.scss';
 import Navbar from '../Navbar/Navbar';
 import GameContainer from '../GameContainer/GameContainer';
+import Footer from '../Footer/Footer';
 import { removeHash } from '../../data/helperFuncs';
 
 const options = {};
@@ -40,6 +41,7 @@ class App extends Component {
                         />
                     </div>
                 </div>
+                <Footer />
             </div>
         )
     }

src/components/Footer/Footer.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import './Footer.scss';
+
+class Footer extends Component {
+    render() {
+        return (
+            <div className="container footer">
+                <div className="col-xs-12">
+                    <h4>New version!</h4>
+                    <p>
+                        Here we are finally with a new version of Kana Quiz.
+                        This app doesn't require flash anymore, and should work great with mobile phones and tablets.
+                        Note that this is still a beta version, so there may be a few quirks. I would love to hear
+                        your thoughts, so if you'd like, be sure to shoot me some feedback using {' '}
+                        <a href="https://goo.gl/forms/BwtgpkYjT1iyH8uE3">this form</a>! {' '}
+                        If you for some reason want to use the old version, it's still available <a href="http://simplemedia.org/kana/flash/">here</a>.
+                    </p>
+
+                    <h4>How to use</h4>
+                    <p>Kana refers to the two syllabic writing systems used in Japanese: <a href="http://en.wikipedia.org/wiki/Kana" title="Read more at wikipedia">Hiragana and Katakana</a>.</p>
+                    <p>There is no "the right way" to use Kana Quiz.
+                    If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly. To learn the characters in the beginning just enter false answers and it'll tell you what the correct answer was.</p>
+                    <p>Have fun!</p>
+                    <div className="copyright">&copy; <a href="http://simplemedia.org/">Antti Pilto</a> 2016</div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Footer;

src/components/Footer/Footer.scss

@@ -0,0 +1,12 @@
+.footer {
+    color: #777;
+    font-size: 0.9em;
+    line-height: 1.8em;
+    h4 {
+        margin-top: 20px;
+        color: #d9534f;
+    }
+    a {
+        text-decoration: underline;
+    }
+}

src/components/Game/Game.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { kanaDictionary } from '../../data/kanaDictionary';
-import './Game.scss';
 import ShowStage from './ShowStage';
 import Question from './Question';
 

src/components/GameContainer/GameContainer.jsx

@@ -10,7 +10,7 @@ class GameContainer extends Component {
         this.state = {
             stage:1,
             isLocked: false,
-            decidedGroups: ['h_group3']
+            decidedGroups: ['h_group1']
         }
         this.stageUp = this.stageUp.bind(this);
         this.lockStage = this.lockStage.bind(this);

src/data/quizSettings.js

@@ -1,8 +1,8 @@
 export const quizSettings = {
     stageLength : {
-        1: 10,
+        1: 20,
-        2: 10,
+        2: 20,
-        3: 10,
+        3: 20,
-        4: 10
+        4: 20
     }
 };