add github stars and forks in game; change the title when game loads(…

…language)

i18n.json

@@ -6,9 +6,13 @@
       "cn": "俄罗斯方块",
       "en": "T E T R I S"
     },
-    "about": {
-      "cn": "关于\"我\"",
-      "en": "About ME"
+    "github": {
+      "cn": "GitHub",
+      "en": "GitHub"
+    },
+    "linkTitle": {
+      "cn": "查看源代码",
+      "en": "View data source"
     },
     "QRCode":{
       "cn": "二维码",
@@ -18,10 +22,6 @@
       "cn": "扫一扫用手机玩",
       "en": "Scan QR code to play with a mobile phone"
     },
-    "linkTitle": {
-      "cn": "使用React、Redux、Immutable编写「俄罗斯方块」",
-      "en": "Use Tetact, Redux, Immutable to coding \"Tetris\""
-    },
     "titleCenter": {
       "cn": "俄罗斯方块<br />TETRIS",
       "en": "TETRIS"

src/components/guide/index.js

@@ -14,6 +14,11 @@ export default class Guide extends React.Component {
     return false;
   }
   render() {
+    if (this.state.isMobile) {
+      return (
+        null
+      );
+    }
     return (
       <div style={{ display: this.state.isMobile ? 'none' : 'block' }}>
         <div className={`${style.guide} ${style.right}`}>
@@ -31,9 +36,24 @@ export default class Guide extends React.Component {
         </div>
         <div className={`${style.guide} ${style.left}`}>
           <p>
-            <a href="https://github.com/chvin/react-tetris" rel="noopener noreferrer" target="_blank" title={i18n.linkTitle[lan]}>
-              {i18n.about[lan]}
-            </a>
+            <a href="https://github.com/chvin/react-tetris" rel="noopener noreferrer" target="_blank" title={i18n.linkTitle[lan]}>{`${i18n.github[lan]}:`}</a><br />
+            <iframe
+              src="https://ghbtns.com/github-btn.html?user=chvin&repo=react-tetris&type=star&count=true"
+              frameBorder="0"
+              scrolling="0"
+              width="170px"
+              height="20px"
+              style={{ [transform]: 'scale(1.68)', [`${transform}Origin`]: 'center left' }}
+            />
+            <br />
+            <iframe
+              src="https://ghbtns.com/github-btn.html?user=chvin&repo=react-tetris&type=fork&count=true"
+              frameBorder="0"
+              scrolling="0"
+              width="170px"
+              height="20px"
+              style={{ [transform]: 'scale(1.68)', [`${transform}Origin`]: 'center left' }}
+            />
           </p>
           <div className={style.space}>SPACE</div>
         </div>

src/components/guide/index.less

@@ -22,8 +22,12 @@
     bottom: 5%;
   }
   p{
-    text-align: right;
+    text-align: left;
     margin-bottom: 350px;
+    opacity: .5;
+    iframe{
+      margin-top: 20px;
+    }
   }
 
   a{
@@ -32,32 +36,25 @@
     position:relative;
     z-index:1;
     cursor: alias;
+    text-decoration: none;
   }
   &.qr{
     left: auto;
     top: 5%;
     width: 190px;
     height:190px;
     opacity: .45;
-    float: right;
-    margin:0 0;
     padding:0 0 40px 40px;
+    text-align: right;
     &:hover{
       img{
-        transform: scale(1);
-        -moz-transform: scale(1);
-        -ms-transform: scale(1);
+        width: 100%;
+        height: 100%;
       }
     }
     img{
-      width: 100%;
-      height: 100%;
-      transform: scale(.2);
-      transform-origin: top right;
-      -moz-transform: scale(.2);
-      -moz-transform-origin: top right;
-      -ms-transform: scale(.2);
-      -ms-transform-origin: top right;
+      width: 38px;
+      height: 38px;
     }
   }
 

src/unit/const.js

@@ -105,6 +105,8 @@ const lan = (() => {
   return l;
 })();
 
+document.title = i18n.data.title[lan];
+
 module.exports = {
   blockShape,
   origin,