init template

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env

@@ -0,0 +1,2 @@
+BROWSER=none
+ESLINT=1

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-umi"
+}

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production

.prettierignore

@@ -0,0 +1,7 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.ts

@@ -0,0 +1,53 @@
+import * as path from 'path';
+import { IConfig } from 'umi-types';
+
+// ref: https://umijs.org/config/
+const config: IConfig =  {
+  history: 'hash',
+  treeShaking: true,
+  disableGlobalVariables: true,
+  "define": {
+    "process.env.API_ENV": "development"
+  },
+  devtool: 'cheap-module-eval-source-map',
+  plugins: [
+    // ref: https://umijs.org/plugin/umi-plugin-react.html
+    ['umi-plugin-react', {
+      antd: true,
+      dva: {
+        immer: true
+      },
+      dynamicImport: false,
+      title: 'game_name',
+      dll: false,
+      locale: {
+        default: 'zh-CN', //默认语言 zh-CN
+        baseNavigator: true, // 为true时，用navigator.language的值作为默认语言
+        antd: true, // 是否启用antd的<LocaleProvider />
+      },
+      routes: {
+        exclude: [
+          /models\//,
+          /services\//,
+          /model\.(t|j)sx?$/,
+          /service\.(t|j)sx?$/,
+          /components\//,
+        ],
+      },
+    }],
+  ],
+  routes: [
+    {
+      path: '/',
+      component: '../layouts/index',
+      routes: [
+        { path: '/', component: './main' },
+        { path: '/main', component: './main' },
+        { path: '/game', component: './game' },
+        { path: '/rank', component: './rank' },
+      ],
+    },
+  ],
+}
+
+export default config;

package.json

@@ -0,0 +1,60 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "cross-env API_ENV=development umi dev",
+    "startTest": "cross-env API_ENV=startTest umi dev",
+    "build": "cross-env API_ENV=production umi build",
+    "buildTest": "cross-env API_ENV=buildTest umi build",
+    "test": "umi test",
+    "lint:es": "eslint --ext .js src mock tests",
+    "lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "precommit": "lint-staged"
+  },
+  "dependencies": {
+    "antd": "^3.19.5",
+    "dva": "^2.6.0-beta.6",
+    "lodash": "^4.17.15",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/jest": "^23.3.12",
+    "@types/lodash": "^4.14.136",
+    "@types/node": "^12.0.10",
+    "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-test-renderer": "^16.0.3",
+    "babel-eslint": "^9.0.0",
+    "classnames": "^2.2.6",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.4.0",
+    "eslint-config-umi": "^1.4.0",
+    "eslint-plugin-flowtype": "^2.50.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.2",
+    "react-test-renderer": "^16.7.0",
+    "tslint": "^5.12.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^3.6.0",
+    "umi": "^2.8.0",
+    "umi-plugin-react": "^1.8.0",
+    "umi-types": "^0.3.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "tslint --fix",
+      "git add"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

src/app.ts

@@ -0,0 +1,10 @@
+import '@babel/polyfill'
+
+export const dva = {
+  config: {
+    onError(err: ErrorEvent) {
+      err.preventDefault();
+      console.error(err.message);
+    },
+  },
+};

src/global.css

@@ -0,0 +1,8 @@
+html, body, #root {
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  width: auto;
+}

src/layouts/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import BasicLayout from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+describe('Layout: BasicLayout', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<BasicLayout />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    const title = outerLayer.children[0] as ReactTestInstance;
+    expect(title.type).toBe('h1');
+    expect(title.children[0]).toBe('Yay! Welcome to umi!');
+  });
+});

src/layouts/index.less

@@ -0,0 +1,31 @@
+
+.game_content {
+  font-family: Georgia, sans-serif;
+  text-align: center;
+}
+
+
+/* 2k以上分辨率 */
+@media screen and (min-width: 2560px) {
+}
+/* 正常分辨率 */
+@media only screen and (min-width: 1400px) and (max-width: 1920px) {
+}
+
+/* iPad Pro 分辨率 */
+@media only screen and (min-width: 1025px) and (max-width: 1399px) {
+}
+@media only screen and (min-width: 1024px) and (max-width: 1399px) and (orientation: portrait) {
+}
+/* iPad 分辨率 */
+@media only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) {
+}
+@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px) and (min-device-height: 768px) and (max-device-height: 1024px) {
+}
+/* 手机分辨率 */
+@media only screen and (max-device-width: 960px) and (max-device-height: 960px) {
+}
+@media only screen and (max-device-width: 960px) and (max-device-height: 960px) and (orientation: portrait) {
+}
+
+@import "../utils/logic_tools/GameModal/game_modal.less";

src/layouts/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './index.less';
+import classNames from 'classnames';
+import { game_container_id } from '@/utils/game_setting/game_config';
+
+const BasicLayout: React.FC = props => {
+  return (
+    <div id={game_container_id} className={classNames(styles.game_content, styles['override-ant-modal'])}>
+      {props.children}
+    </div>
+  );
+};
+
+export default BasicLayout;

src/locales/en-US.ts

@@ -0,0 +1,5 @@
+const en_US: any = {
+
+}
+
+export default en_US;

src/locales/zh-CN.ts

@@ -0,0 +1,5 @@
+const zh_CN: any = {
+
+}
+
+export default zh_CN;

src/models/global.ts

@@ -0,0 +1,10 @@
+export default {
+  state: {
+    count: 1,
+  },
+  reducers: {
+    add: (state: any, { payload }: any) => {
+      state.count += 1;
+    }
+  }
+}

src/pages/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import Index from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+
+describe('Page: index', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<Index />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    expect(outerLayer.children.length).toBe(2);
+    
+  });
+});

src/pages/game/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+export default function() {
+  return (
+    <div>
+      game
+    </div>
+  );
+}

src/pages/index.css

@@ -0,0 +1,5 @@
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 4em;
+  text-align: center;
+}

src/pages/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import router from 'umi/router';
+import styles from './index.css';
+
+export default function() {
+  return (
+    <div className={styles.normal}>
+      /
+    </div>
+  );
+}

src/pages/main/index.less

@@ -0,0 +1,3 @@
+.normal {
+  color: blue;
+}

src/pages/main/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'dva';
+import { PageProps } from '@/utils/types/interface';
+import { GameModalController } from '@/utils/logic_tools/GameModal/game_modal';
+import styles from './index.less';
+
+class Main extends React.Component<PageProps> {
+  state = {}
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'global/add'
+    })
+  }
+
+  getDerivedStateFromProps(props: PageProps, state: any) {
+
+  }
+
+  render() {
+    const { global } = this.props;
+    return (
+      <div className={styles.normal}>
+        <Link to="/rank">
+          main{global.count}
+        </Link>
+        <div
+          onClick={() => {
+            GameModalController.showPauseModal({
+              content: '123',
+              okText: 'ok',
+            });
+          }}
+        >
+          Modal
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(({ global }: any) => ({ global }))(Main);

src/pages/rank/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+export default function() {
+  return (
+    <div>
+      rank
+    </div>
+  );
+}

src/utils/game_setting/api_config.ts

@@ -0,0 +1,18 @@
+const protocol = document.location.protocol;
+
+const ExportURL = {
+  API_SERVER_URL: "",
+  AUDIO_BASE_URL: "",
+  SETTING_SERVER_URL: "",
+  STATIC_URL: ""
+};
+
+if (process.env.API_ENV === "development") {
+} else if (process.env.API_ENV === "startTest") {
+} else if (process.env.API_ENV === "buildTest") {
+} else {
+}
+
+export const { API_SERVER_URL, STATIC_URL, SETTING_SERVER_URL, AUDIO_BASE_URL } = ExportURL;
+
+export default ExportURL;

src/utils/game_setting/game_config.ts

@@ -0,0 +1,4 @@
+// 配置游戏参数
+// export const init_count_down = 20;
+// export const init_count_down_total = 20;
+export const game_container_id = "xxx_game_content";

src/utils/logic_tools/GameModal/CloseButton/index.tsx

@@ -0,0 +1,36 @@
+import React, { ReactHTMLElement } from "react";
+import PropTypes from "prop-types";
+
+import closeBtnPng from "./icon_quit.png";
+import closeBtn2xPng from "./icon_quit@2x.png";
+
+const ModalCloseBtn = (props: any): JSX.Element => (
+  <div
+    role="button"
+    tabIndex={0}
+    onKeyPress={() => {}}
+    onClick={() => props.onClick()}
+    style={{
+      position: "absolute",
+      cursor: "pointer",
+      top: "9px",
+      right: "9px",
+      width: "18px",
+      height: "18px",
+      outline: "none"
+    }}
+  >
+    <img
+      style={{ width: "100%", height: "100%" }}
+      src={closeBtnPng}
+      srcSet={`${closeBtnPng} 1400w, ${closeBtn2xPng} 2800w`}
+      alt="close_modal"
+    />
+  </div>
+);
+
+ModalCloseBtn.propTypes = {
+  onClick: PropTypes.oneOfType([PropTypes.any]).isRequired
+};
+
+export default ModalCloseBtn;

src/utils/logic_tools/GameModal/game_modal.less

@@ -0,0 +1,44 @@
+/* ant-modal 默认覆盖样式 */
+.override-ant-modal {
+  :global(.ant-modal):global(.game-status-modal) {
+    width: 290px !important;
+    height: 165px;
+    top: 50%;
+    left: 50%;
+    transform-origin: 0 0 0 !important;
+    margin: -82.5px 0 0 -145px;
+
+    :global(.ant-modal-content) {
+      position: relative;
+      background-color: rgba(255, 255, 255, 1) !important;
+      border-radius: 7px;
+      border: none;
+      background-clip: padding-box;
+      box-shadow: 0 10px 15px rgba(106, 113, 119, 0.17) !important;
+
+
+      :global(.ant-modal-body) {
+        :global(.ant-modal-confirm-body) {
+          & > :global(.ant-modal-confirm-content) {
+            margin-left: 0;
+          }
+        }
+      }
+
+      :global(.ant-modal-confirm-btns) {
+        display: flex;
+        justify-content: center;
+        float: none;
+      }
+    }
+
+    :global(.ant-btn-primary) {
+      background-color: #1A91EB;
+      border-color: #1A91EB;
+    }
+  }
+
+  :global(.ant-modal-mask), :global(.ant-modal-wrap) {
+    position: absolute;
+  }
+}

src/utils/logic_tools/GameModal/game_modal.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Modal } from "antd";
+import ModalCloseBtn from '@/utils/logic_tools/GameModal/CloseButton';
+import { game_container_id } from '@/utils/game_setting/game_config';
+import { intl_get } from '@/utils/tools/intl_helper';
+
+export interface ModalItem {
+  key: any,
+  type: string,
+}
+
+
+export class GameModalController {
+  public static modal_list: Array<ModalItem> = [];
+  constructor() {}
+
+  static destoryAll() {
+    Modal.destroyAll();
+  }
+
+  static recordModal(key: any, type: string) {
+    this.modal_list.push({
+      key,
+      type,
+    });
+  }
+
+  static checkBeforeModal(type: string) {
+    const target = this.findTypeModal(type);
+    target.map(item => this.closeTypeModal(item.key, type));
+  }
+
+  static findTypeModal(type: string) {
+    return this.modal_list.filter(item => item.type === type);
+  }
+
+  static closeTypeModal(key: any, type: string) {
+    const targetIndex = this.modal_list.findIndex(item => (item.key === key && item.type === type));
+    if (targetIndex || targetIndex === 0) {
+      const target = this.modal_list[targetIndex];
+      target.key.destroy();
+      this.modal_list.splice(targetIndex, 1);
+    }
+  }
+
+  static showPauseModal({
+    mount = document.getElementById(game_container_id),
+    className = "game-status-modal",
+    content = intl_get({ id: "pause_modal_tip_text" }),
+    okText = intl_get({ id: "pause_modal_ok_text" }),
+    onOk = () => {},
+    onCancel = () => {},
+  }: any = {}) {
+    this.checkBeforeModal("pause");
+    const result = Modal.info({
+      icon: null,
+      iconType: undefined,
+      title: null,
+      content: (
+        <div style={{ textAlign: 'center' }}>
+          <ModalCloseBtn onClick={() => { onCancel(); }} />
+          {content}
+        </div>
+      ),
+      okText,
+      width: 290,
+      className,
+      getContainer: () => mount || document.body,
+      onOk
+    });
+    this.recordModal(result, "pause");
+    if (document.body.style.overflow === "hidden") {
+      document.body.style.overflow = "";
+    }
+    return result;
+  }
+
+  static showErrorModal({
+    mount = document.getElementById(game_container_id),
+    className = "game-status-modal",
+    type = "common",
+    okText = intl_get({ id: "error_loading_ok_text" }),
+    onOk = () => {},
+    onCancel = () => {},
+  }: any = {}) {
+    this.checkBeforeModal("error");
+    let content = intl_get({ id: `error_loading_${type}_tip_text` });
+    const result = Modal.error({
+      icon: null,
+      iconType: undefined,
+      title: null,
+      content: (
+        <div style={{ textAlign: 'center' }}>
+          <ModalCloseBtn onClick={() => { onCancel(); }} />
+          {content}
+        </div>
+      ),
+      okText,
+      width: 290,
+      className,
+      getContainer: () => mount || document.body,
+      onOk
+    });
+    this.recordModal(result, "error");
+    if (document.body.style.overflow === "hidden") {
+      document.body.style.overflow = "";
+    }
+    return result;
+  }
+}

src/utils/logic_tools/count_down.ts

@@ -0,0 +1,73 @@
+
+import { init_count_down, init_count_interval } from '@/utils/game_config';
+
+const delay = (timeout: any) => new Promise(resolve => setTimeout(resolve, timeout));
+
+interface CountDownClockBase {
+  task_id: NodeJS.Timeout;
+  count: number;
+  record_start_time: Date|any;
+  record_stop_time: Date|any;
+  is_clock_stop: boolean;
+  is_restart_timeout: boolean;
+  render: Function;
+}
+
+export class CountDownClock<CountDownClockBase> {
+  static task_id: NodeJS.Timeout;
+  static count = init_count_down;
+  static record_start_time: Date|any;
+  static record_stop_time: Date|any;
+  static is_clock_stop: boolean = true;
+  static is_restart_timeout: boolean = false;
+  static render: Function = () => {};
+
+  static _check_is_end() {
+    if (this.count <= 0) {
+      this.count = 0;
+      this.render();
+      clearInterval(this.task_id);
+      return true;
+    }
+    return false;
+  }
+
+  static async start() {
+    if (!this.is_clock_stop || this.is_restart_timeout) return;
+    if (this.record_stop_time && this.record_start_time) {
+      // 是暂停的开始, 精确计算暂停时间。
+      const time_gap = (this.record_stop_time.getTime() - this.record_start_time.getTime()) % init_count_interval;
+      this.is_restart_timeout = true;
+      await delay(init_count_interval - time_gap);
+      this.is_restart_timeout = false;
+      if (this._check_is_end()) {
+        return ;
+      }
+      this.count--;
+      this.render();
+    }
+    this.is_clock_stop = false;
+    clearInterval(this.task_id);
+    this.task_id = setInterval(() => {
+      if (this._check_is_end()) {
+        return ;
+      }
+      this.count--;
+      this.render();
+    }, init_count_interval);
+    this.record_start_time = new Date();
+  }
+  static async stop() {
+    if (this.is_restart_timeout) { setTimeout(() => { this.stop() }, 1000); return; }
+    this.is_clock_stop = true;
+    clearInterval(this.task_id);
+    this.record_stop_time = new Date();
+  }
+  static destory() {
+    clearInterval(this.task_id);
+    this.is_clock_stop = true;
+    this.is_restart_timeout = false;
+    this.record_start_time = undefined;
+    this.record_stop_time = undefined;
+  }
+}

src/utils/logic_tools/question_reporter.ts

@@ -0,0 +1,13 @@
+export class QuestionReporter {
+  static error_question_list: Array<any> = [];
+  static error_count: number = 0;
+
+  static record_error(error_item: Object|Array<any>) {
+    if (Array.isArray(error_item)) {
+      this.error_question_list = [...this.error_question_list, ...error_item];
+    } else {
+      this.error_question_list.push(error_item);
+    }
+    // 检验有效错误
+  }
+}

src/utils/logic_tools/voice_play.ts

@@ -0,0 +1,99 @@
+import request from '../request';
+import { AUDIO_BASE_URL } from '@/api_config';
+let audio_url = "";
+
+export function* getAudioSrc({ word, language = "zh-CN", gender = "FEMALE" }: any): any {
+  if (audio_url === "") {
+    const req_data = yield request(AUDIO_BASE_URL);
+    if (!req_data || !req_data.audio_base_url) {
+      return false;
+    }
+    audio_url = req_data.audio_base_url;
+  }
+  const word_src = `${audio_url}?text=${word}&languageCode=${language}&gender=${gender}`;
+  return word_src;
+}
+
+class AudioPlayer {
+  public AudioInstance: HTMLAudioElement;
+  public play_list: Array<string>;
+  public play_word: Array<string>;
+  public play_index: number;
+  public is_pause: boolean;
+
+  constructor() {
+    this.AudioInstance = new Audio();
+    this.play_list = [];
+    this.play_word = [];
+    this.play_index = 0;
+    this.is_pause = false;
+    this.AudioInstance.addEventListener("ended", () => {
+      if (this.play_list[this.play_index + 1]) {
+        // 播放下一个音频
+        this.play_index += 1;
+        this.playAudio();
+      }
+    });
+  }
+
+  playAudio = () => {
+    if (this.is_pause) {
+      this.is_pause = false;
+      this.AudioInstance.src = this.play_list[this.play_index];
+      this.AudioInstance.play();
+      return;
+    }
+    this.AudioInstance.src = this.play_list[this.play_index];
+    this.AudioInstance.load();
+    this.AudioInstance.play();
+    return;
+  };
+
+  addAudio = (play_src: string, play_word: string) => {
+    this.play_word.push(play_word);
+    this.play_list.push(play_src);
+  };
+
+  pauseAudio = () => {
+    this.is_pause = true;
+    this.AudioInstance.pause();
+  };
+
+  preloadAudio = () => {
+    this.AudioInstance.src = "";
+    this.AudioInstance.load();
+  };
+
+  clearAudioInstance = () => {
+    this.is_pause = true;
+    this.AudioInstance.pause();
+    this.play_list = [];
+    this.play_word = [];
+    this.play_index = 0;
+  };
+
+}
+
+export const ExportAudioPlayer = new AudioPlayer();
+
+export function subscriptAudioCanPlay(action: any) {
+  if (typeof window !== "undefined") {
+    ExportAudioPlayer.AudioInstance.addEventListener("canplaythrough", () => {
+      action({
+        type: "can_play"
+      });
+    });
+    ExportAudioPlayer.AudioInstance.addEventListener("error", (err: any) => {
+      action({
+        type: "load_fail",
+      });
+      ExportAudioPlayer.clearAudioInstance();
+    });
+  }
+}
+
+export default {
+  ExportAudioPlayer,
+  getAudioSrc,
+  subscriptAudioCanPlay,
+}

src/utils/tools/cookie_helper.ts

@@ -0,0 +1,16 @@
+function getCookie(name: string): null|string {
+  if (typeof window !== "undefined") {
+    const reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`);
+    const arr = document && document.cookie.match(reg);
+    if (arr) {
+      return unescape(arr[2]);
+    }
+  }
+  return null;
+}
+
+export const ak = getCookie('ak');
+export const lnk_lang = getCookie('lnk_lang');
+export const authorizationHeaders = {
+  Authorization: ak ? `Bearer ${ak}` : null
+};

src/utils/tools/intl_helper.ts

@@ -0,0 +1,17 @@
+import zh_CN from '@/locales/zh-CN';
+import en_US from '@/locales/en-US';
+import { lnk_lang } from './cookie_helper';
+
+export const intl_get = ({ id }: { id: string }): any => {
+  if (lnk_lang) {
+    switch (lnk_lang) {
+      case "en-US":
+        return en_US[id];
+      case "zh-CN":
+      default:
+        return zh_CN[id];
+    }
+  } else {
+    return zh_CN[id];
+  }
+}

src/utils/tools/mobile_tool.ts

@@ -0,0 +1,8 @@
+export function is_mobile() {
+  if (window) {
+    return /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(
+      window.navigator.userAgent
+    );
+  }
+  return false;
+}

src/utils/tools/request_helper.ts

@@ -0,0 +1,48 @@
+function checkStatus(response: any) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  throw error;
+}
+
+export function parseUrl(obj: any): string {
+  let result:string = "?";
+  for (let key in obj) {
+    if (obj[key]) {
+      if (result === "?") {
+        result += `${key}=${obj[key]}`;
+      } else {
+        result += `&${key}=${obj[key]}`;
+      }
+    }
+  }
+  if (result === "?") return "";
+  return result;
+}
+
+/**
+ * Requests a URL, returning a promise.
+ *
+ * @param  {string} url       The URL we want to request
+ * @param  {object} [options] The options we want to pass to "fetch"
+ * @return {object}           An object containing either "data" or "err"
+ */
+export default async function request(url: string, options: any = {}): Promise<any> {
+  let data, response: any;
+  try {
+    response = await fetch(url, { credentials: 'include', ...options });
+
+    checkStatus(response);
+    if (!response.body) return true;
+    data = await response.clone().json();
+  } catch (err) {
+    if (response && response.clone) {
+      data = await response.clone().text();
+    }
+    return false;
+  }
+
+  return data;
+}

src/utils/tools/visiable_helper.ts

@@ -0,0 +1,28 @@
+const hiddenProperty: string =
+  "hidden" in document
+    ? "hidden"
+    : "webkitHidden" in document
+    ? "webkitHidden"
+    : "mozHidden" in document
+    ? "mozHidden"
+    : "";
+const visibilityChangeEvent = hiddenProperty.replace(
+  /hidden/i,
+  "visibilitychange"
+);
+
+export default function subscriptVisibility(action: any) {
+  if (typeof window !== "undefined" && visibilityChangeEvent) {
+    document.addEventListener(visibilityChangeEvent, () => {
+      if (!(document as any)[hiddenProperty]) {
+        action({
+          type: "show"
+        });
+      } else {
+        action({
+          type: "hide"
+        });
+      }
+    });
+  }
+}

src/utils/types/interface.ts

@@ -0,0 +1,16 @@
+export interface PageProps {
+  dispatch: any;
+  location: any;
+  message: any;
+  global: any;
+}
+
+export interface MainProps extends PageProps {
+  main: any;
+}
+export interface GameProps extends PageProps {
+  game: any;
+}
+export interface RankProps extends PageProps {
+  rank: any;
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  }
+}

tslint.yml

@@ -0,0 +1,11 @@
+defaultSeverity: error
+extends:
+  - tslint-react
+  - tslint-eslint-rules
+jsRules:
+rules:
+  eofline: true
+  no-console: true
+  no-construct: true
+  no-debugger: true
+  no-reference: true

typings.d.ts

@@ -0,0 +1,3 @@
+declare module '*.css';
+declare module '*.less';
+declare module "*.png";