test
11 | test
11 |
7 |
28 | `;
29 |
--------------------------------------------------------------------------------
/src/components/Firework/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import PropTypes from 'prop-types';
3 | import './firework.scss';
4 |
5 | // Display firework animation when game over
6 | export default class Firework extends React.Component {
7 | // Render once, as no props and state
8 | shouldComponentUpdate() {
9 | return false;
10 | }
11 |
12 | render() {
13 | return (
14 | 10 | SCORE 11 | 14 | 123 15 | 16 |
17 |20 | BEST 21 | 24 | 456 25 | 26 |
27 |
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/containers/WebApp/index.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { reset } from '../../reducers/board';
3 | import WebApp from './WebApp';
4 |
5 | const mapStateToProps = state => ({
6 | matrix: state.present.board.present.matrix,
7 | score: state.present.board.present.score,
8 | bestScore: state.present.board.present.bestScore,
9 | gameOver: state.present.board.present.gameOver
10 | });
11 |
12 | const mapDispatchToProps = {
13 | onReset: reset
14 | };
15 |
16 | export default connect(mapStateToProps, mapDispatchToProps)(WebApp);
17 |
--------------------------------------------------------------------------------
/src/components/Cell/__tests__/__snapshots__/Cell.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
8 |
14 |
11 | 32
12 |
13 |
22 |
28 |
25 | 2048
26 |
27 |
7 |
24 | `;
25 |
--------------------------------------------------------------------------------
/src/layouts/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from './Header';
3 | import Main from './Main';
4 | import Footer from '../components/Footer';
5 |
6 | export default function Layouts() {
7 | return (
8 |
10 |
18 |
22 |
23 |
9 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/containers/WebApp/webApp.scss:
--------------------------------------------------------------------------------
1 | @import '../../assets/styles/vars';
2 |
3 | .app {
4 | margin: 2vw auto;
5 | text-align: center;
6 | width: 80vw;
7 | }
8 |
9 | .title {
10 | color: $black;
11 | font-size: 3rem;
12 | margin: 0.67em 0;
13 | }
14 |
15 | .box {
16 | display: flex;
17 | justify-content: center;
18 | }
19 |
20 | .board {
21 | // flex: $flex;
22 | }
23 |
24 | .panel {
25 | align-items: flex-end;
26 | display: flex;
27 | flex-direction: column;
28 | justify-content: space-between;
29 | margin-bottom: 0.5vw;
30 | margin-left: 3vw;
31 | }
32 |
--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
13 | );
14 | }
15 |
16 | Modal.propTypes = {
17 | display: PropTypes.bool.isRequired,
18 | children: PropTypes.node.isRequired
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/Button/__tests__/Button.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import Button from '..';
4 |
5 | describe('{children}
12 |
21 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/containers/ControlPanel/controlPanel.scss:
--------------------------------------------------------------------------------
1 | @import '../../assets/styles/vars';
2 |
3 | .panel {
4 | align-items: center;
5 | display: flex;
6 | flex: 1;
7 | flex-direction: column;
8 |
9 | .row-btn {
10 | align-items: center;
11 | display: flex;
12 | flex-grow: 1;
13 | }
14 |
15 | .btn {
16 | margin-right: 0.77vw;
17 | margin-top: 0.77vw;
18 | }
19 |
20 | img {
21 | margin-bottom: -0.35vw;
22 | width: 2.1vw;
23 | }
24 |
25 | .arrows {
26 | display: flex;
27 | flex-direction: row;
28 | }
29 |
30 | .left {
31 | transform: rotate(270deg);
32 | }
33 |
34 | .right {
35 | transform: rotate(90deg);
36 | }
37 |
38 | .down {
39 | transform: rotate(180deg);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/Scores/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './scores.scss';
4 | import i18n from '../../utils/i18n';
5 |
6 | export default function Scores({ score, bestScore }) {
7 | const { index, text, best } = styles;
8 | return (
9 | {title}
22 |{content}
23 |
10 |
19 | );
20 | }
21 |
22 | Scores.propTypes = {
23 | score: PropTypes.number.isRequired,
24 | bestScore: PropTypes.number.isRequired
25 | };
26 |
--------------------------------------------------------------------------------
/src/assets/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './vars';
2 |
3 | // global styles
4 |
5 | :global {
6 | html {
7 | font-size: 1vw;
8 | touch-action: manipulation;
9 | }
10 |
11 | body {
12 | background: #fff;
13 | font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | @media all and (max-width: $break-point) {
19 | html {
20 | font-size: 4vw;
21 | }
22 | }
23 |
24 | input,
25 | button,
26 | submit {
27 | border: 0;
28 | }
29 |
30 | h1,
31 | h2,
32 | h3,
33 | h4,
34 | h5,
35 | h6,
36 | p {
37 | margin: 0;
38 | }
39 |
40 | img {
41 | max-width: 100%;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Footer/__tests__/__snapshots__/Footer.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` component render 1`] = `
4 | 11 | {i18n.score} 12 | {score} 13 |
14 |15 | {i18n.best} 16 | {bestScore} 17 |
18 |
7 |
36 |
37 | `;
38 |
--------------------------------------------------------------------------------
/src/containers/MobileApp/mobileApp.scss:
--------------------------------------------------------------------------------
1 | .mobile-app {
2 | padding: 8vw 4vw 0;
3 | text-align: center;
4 |
5 | .head {
6 | display: flex;
7 | justify-content: space-around;
8 |
9 | .title {
10 | font-size: 3rem;
11 | // margin-top: -2.5vw;
12 | text-align: left;
13 | }
14 | }
15 |
16 | .row-btn {
17 | align-items: center;
18 | display: flex;
19 | flex-grow: 1;
20 | margin: 3vw 0 6vw;
21 |
22 | .btn {
23 | margin-right: 4vw;
24 | margin-top: 4vw;
25 | }
26 |
27 | img {
28 | margin-bottom: -1vw;
29 | // width: 2.1vw;
30 | }
31 |
32 | .last {
33 | margin-right: -1.5vw;
34 | }
35 | }
36 |
37 | .board {
38 | display: flex;
39 | justify-content: center;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/utils/gitalk.js:
--------------------------------------------------------------------------------
1 | import Gitalk from 'gitalk';
2 |
3 | // Local develop github auth callback url to localhost:300
4 | const config =
5 | process.env.NODE_ENV === 'production'
6 | ? {
7 | clientID: '9b0f4983f59838beb705',
8 | clientSecret: 'b7f0dc0adf6c423ae91f5087a380ea0b0d5cad6a'
9 | }
10 | : {
11 | clientID: '06745677c93217a4268e',
12 | clientSecret: '2cf6d8647b8fc33f9ba29f1edb76720cfea4ee68'
13 | };
14 |
15 | export default new Gitalk({
16 | ...config,
17 | repo: 'React-2048-game',
18 | owner: 'devrsi0n',
19 | admin: ['devrsi0n'],
20 | // facebook-like distraction free mode
21 | distractionFreeMode: false,
22 | createIssueManually: true,
23 | labels: ['Gitalk'],
24 | proxy: 'https://gh-oauth.imsun.net/'
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/Tips/__tests__/Tips.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import Enzyme, { shallow } from 'enzyme';
4 | import Adapter from 'enzyme-adapter-react-16';
5 | import Tips from '..';
6 |
7 | Enzyme.configure({ adapter: new Adapter() });
8 |
9 | describe('
20 |
10 | {/* Pass down external props */}
11 |
14 |
15 | );
16 | }
17 |
18 | WrapperButton.propTypes = {
19 | children: PropTypes.node.isRequired,
20 | onClick: PropTypes.func,
21 | cls: PropTypes.string
22 | };
23 |
24 | WrapperButton.defaultProps = {
25 | onClick() {},
26 | cls: ''
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Modal/modal.scss:
--------------------------------------------------------------------------------
1 | @import '../../assets/styles/vars';
2 |
3 | .hidden {
4 | display: none;
5 | }
6 |
7 | .overlay {
8 | background-color: rgba(0, 0, 0, 0.6);
9 | height: 100%;
10 | left: 0;
11 | position: fixed;
12 | top: 0;
13 | width: 100%;
14 | z-index: 10;
15 | }
16 |
17 | .modal {
18 | background-color: transparent;
19 | left: 50%;
20 | margin-left: -15vw;
21 | margin-top: -10vw;
22 | position: fixed;
23 | top: 50%;
24 | z-index: 11; /* 1px higher than the overlay layer */
25 | }
26 |
27 | @media #{$mobile} {
28 | .modal {
29 | margin-left: -37.5vw;
30 | margin-top: -15vw;
31 | }
32 | }
33 |
34 | .center {
35 | align-content: center;
36 | align-items: center;
37 | display: flex;
38 | flex-direction: column;
39 | justify-content: center;
40 | }
41 |
--------------------------------------------------------------------------------
/src/containers/ControlPanel/index.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { ActionCreators } from 'redux-undo';
3 | import {
4 | moveUp,
5 | moveDown,
6 | moveLeft,
7 | moveRight,
8 | placeRandom,
9 | reset
10 | } from '../../reducers/board';
11 | import ControlPanel from './ControlPanel';
12 |
13 | const mapStateToProps = state => ({
14 | isMoved: state.present.board.present.isMoved,
15 | pastLen: state.past.length
16 | });
17 | const mapDispatchToProps = {
18 | onPlaceRandom: placeRandom,
19 | onMoveUp: moveUp,
20 | onMoveDown: moveDown,
21 | onMoveLeft: moveLeft,
22 | onMoveRight: moveRight,
23 | onReset: reset,
24 | onUndo: ActionCreators.jump // Undo move and generated cell
25 | };
26 |
27 | export default connect(mapStateToProps, mapDispatchToProps)(ControlPanel);
28 |
--------------------------------------------------------------------------------
/src/layouts/Main/__tests__/Main.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import { MemoryRouter } from 'react-router';
4 | import { Provider } from 'react-redux';
5 | import Main from '..';
6 | import store from '../../../store';
7 |
8 | // Make random always return 0.5, so snapshot always same.
9 | const mockMath = Object.create(global.Math);
10 | mockMath.random = () => 0.5;
11 | global.Math = mockMath;
12 |
13 | describe('', () => {
14 | it('component render', () => {
15 | const main = renderer
16 | .create(
17 |
16 |
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/Speaker/__tests__/Speaker.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { mount } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import renderer from 'react-test-renderer';
5 | import Speaker from '..';
6 |
7 | Enzyme.configure({ adapter: new Adapter() });
8 |
9 | describe('
17 | {/* eslint-disable react/no-danger */}
18 |
22 |
23 |
24 |
29 |
31 | {value || null}
30 |
24 |
37 |
38 | );
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/Row/__tests__/Row.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import Enzyme, { mount } from 'enzyme';
4 | import Adapter from 'enzyme-adapter-react-16';
5 | import Row from '..';
6 |
7 | Enzyme.configure({ adapter: new Adapter() });
8 |
9 | describe('
24 |
25 | {score > 999 ?
40 |
41 | );
42 | }
43 | }
44 |
45 | GameOver.propTypes = {
46 | score: PropTypes.number,
47 | gameOver: PropTypes.bool,
48 | onReset: PropTypes.func,
49 | onGameOver: PropTypes.func
50 | };
51 |
52 | GameOver.defaultProps = {
53 | score: 0,
54 | gameOver: true,
55 | onReset() {},
56 | onGameOver() {}
57 | };
58 |
59 | const mapDispatchToProps = {
60 | onGameOver: gameover
61 | };
62 |
63 | export default (process.env.NODE_ENV !== 'test'
64 | ? connect(null, mapDispatchToProps)(GameOver)
65 | : GameOver);
66 |
--------------------------------------------------------------------------------
/src/layouts/Header/header.scss:
--------------------------------------------------------------------------------
1 | @import '../../assets/styles/vars';
2 | $web-height: 5vw;
3 |
4 | .header {
5 | background-color: #3f51b5;
6 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
7 | color: #fff;
8 | display: flex;
9 | flex-direction: column;
10 | flex-shrink: 0;
11 | flex-wrap: nowrap;
12 | font-size: 1.5rem;
13 | justify-content: flex-start;
14 | margin: 0;
15 | max-height: 50vh;
16 | min-height: $web-height;
17 | padding: 0;
18 | transition-duration: 0.2s;
19 | transition-property: max-height, box-shadow;
20 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
21 | width: 100%;
22 | z-index: 3;
23 |
24 | a {
25 | color: #fff;
26 | text-decoration: none;
27 | }
28 |
29 | li {
30 | list-style-type: none;
31 | }
32 |
33 | .row {
34 | align-items: center;
35 | align-self: stretch;
36 | box-sizing: border-box;
37 | display: flex;
38 | flex-direction: row;
39 | flex-shrink: 0;
40 | flex-wrap: nowrap;
41 | height: $web-height;
42 | margin: 0;
43 | padding: 0 3vw 0 5vw;
44 | }
45 |
46 | .row > * {
47 | flex-shrink: 0;
48 | }
49 |
50 | .title {
51 | box-sizing: border-box;
52 | display: block;
53 | font-weight: 400;
54 | letter-spacing: 0.02em;
55 | line-height: 1;
56 | padding-right: 1.5vw;
57 | position: relative;
58 | }
59 |
60 | .spacer {
61 | flex-grow: 1;
62 | }
63 |
64 | .link {
65 | letter-spacing: 0;
66 | // line-height: 64px;
67 | // opacity: 0.87;
68 | padding: 0 1.5vw;
69 | }
70 |
71 | .active {
72 | color: #ff4081;
73 | }
74 |
75 | .icon {
76 | width: 3vw;
77 | }
78 | }
79 | $mobile-height: 15vw;
80 |
81 | @media #{$mobile} {
82 | .header {
83 | font-size: 1.35rem;
84 | min-height: $mobile-height;
85 |
86 | .row {
87 | min-height: $mobile-height;
88 | }
89 |
90 | .icon {
91 | width: 8vw;
92 | }
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/sagas/index.js:
--------------------------------------------------------------------------------
1 | import { put, takeEvery, select, all } from 'redux-saga/effects';
2 | import {
3 | getRankingList,
4 | getUserInfo,
5 | updateRankingList as update
6 | } from '../apis';
7 | import { GAMEOVER } from '../reducers/ranking';
8 |
9 | export function* getThenSetRankingList() {
10 | const rsp = yield getRankingList();
11 | yield put({ type: 'SET_RANKING_LIST', data: rsp });
12 | }
13 |
14 | export function* watchGetRankingList() {
15 | yield takeEvery('GET_RANKLING_LIST', getThenSetRankingList);
16 | }
17 |
18 | const getScore = state => state.present.board.present.score;
19 | const getBestScore = state => state.present.board.present.bestScore;
20 |
21 | export function* updateRankingList() {
22 | const score = yield select(getScore);
23 | const bestScore = yield select(getBestScore);
24 | if (score < bestScore) {
25 | return;
26 | }
27 | const info = yield getUserInfo();
28 | if (!info) {
29 | return;
30 | }
31 | const { email, html_url, name, avatar_url } = info;
32 |
33 | // Get latest list
34 | const list = yield getRankingList();
35 | const newUser = {
36 | email,
37 | profile_url: html_url,
38 | name,
39 | avatar_url,
40 | score
41 | };
42 | const sameOne = list.find(item => item.name === name && item.email === email);
43 | if (sameOne) {
44 | // Update new record
45 | if (score > sameOne.score) sameOne.score = score;
46 | else return;
47 | } else if (list.length < 10) {
48 | // Push to array
49 | list.push(newUser);
50 | } else {
51 | // Insert into array
52 | const idx = list.findIndex(item => score > item.score);
53 | if (idx === -1) return; // Not break record
54 |
55 | list.splice(idx, 0, newUser);
56 | }
57 |
58 | const rsp = yield update(list.slice(0, 10).sort((a, b) => b.score - a.score));
59 | yield put({ type: 'SET_RANKING_LIST', data: rsp });
60 | }
61 |
62 | export function* watchGameOver() {
63 | yield takeEvery(GAMEOVER, updateRankingList);
64 | }
65 |
66 | export default function* rootSaga() {
67 | yield all([watchGetRankingList(), watchGameOver()]);
68 | }
69 |
--------------------------------------------------------------------------------
/src/containers/App/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import WebApp from '../WebApp';
4 | import MobileApp from '../MobileApp';
5 | import moveAudio from '../../assets/audio/move.mp3';
6 | import popupAudio from '../../assets/audio/popup.mp3';
7 | import i18n from '../../utils/i18n';
8 |
9 | // Application entry
10 | export default class App extends Component {
11 | static propTypes = {
12 | matrix: PropTypes.arrayOf(PropTypes.array).isRequired,
13 | onInit: PropTypes.func.isRequired
14 | };
15 |
16 | constructor(...args) {
17 | super(...args);
18 |
19 | this.state = {
20 | isMobile: window.innerWidth <= 768
21 | };
22 | // Control game audio
23 | this.audioMove = new Audio(moveAudio);
24 | this.audioPopup = new Audio(popupAudio);
25 | }
26 |
27 | componentWillMount() {
28 | window.addEventListener('resize', this.mobileDetect, false);
29 | this.boardInit();
30 | }
31 |
32 | componentDidMount() {
33 | document.title = i18n.title;
34 | }
35 |
36 | componentWillUnmount() {
37 | // Never forget remove event after component unmounted,
38 | // avoid memory leak
39 | window.removeEventListener('resize', this.mobileDetect, false);
40 | }
41 |
42 | mobileDetect = () => {
43 | this.setState({
44 | isMobile: window.innerWidth <= 768
45 | });
46 | };
47 |
48 | boardInit() {
49 | let isEmpty = true;
50 | for (const row of this.props.matrix) {
51 | for (const cell of row) {
52 | if (cell > 0) {
53 | isEmpty = false;
54 | break;
55 | }
56 | }
57 | }
58 | // Init empty matrix(add 2 random number to matrix)
59 | if (isEmpty) {
60 | this.props.onInit();
61 | }
62 | }
63 |
64 | render() {
65 | const { isMobile } = this.state;
66 | const { audioMove, audioPopup } = this;
67 | return (
68 |
27 |
39 |
28 |
33 | {i18n.score}
29 |
30 |
32 | {score}
31 |
34 |
37 |
38 |
69 | {isMobile ? (
70 |
75 | );
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/containers/WebApp/WebApp.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './webApp.scss';
4 | import Board from '../../components/Board';
5 | import Tips from '../../components/Tips';
6 | import ControlPanel from '../ControlPanel';
7 | import GameOverCard from '../GameOver';
8 | import Scores from '../../components/Scores';
9 | import i18n from '../../utils/i18n';
10 |
11 | // Desktop application entry
12 | export default class WebApp extends Component {
13 | static propTypes = {
14 | matrix: PropTypes.arrayOf(PropTypes.array).isRequired,
15 | audioMove: PropTypes.instanceOf(Audio).isRequired,
16 | audioPopup: PropTypes.instanceOf(Audio).isRequired,
17 | score: PropTypes.number,
18 | bestScore: PropTypes.number,
19 | gameOver: PropTypes.bool,
20 | onReset: PropTypes.func
21 | };
22 |
23 | static defaultProps = {
24 | score: 0,
25 | bestScore: 0,
26 | gameOver: false,
27 | onReset() {}
28 | };
29 |
30 | constructor(...args) {
31 | super(...args);
32 |
33 | // debounce delay in ms
34 | this.delay = process.env.NODE_ENV === 'production' ? 300 : 1;
35 | }
36 |
37 | render() {
38 | const { delay } = this;
39 | const {
40 | matrix,
41 | audioMove,
42 | audioPopup,
43 | bestScore,
44 | score,
45 | gameOver,
46 | onReset
47 | } = this.props;
48 |
49 | return (
50 |
51 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebookincubator/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(path, needsSlash) {
15 | const hasSlash = path.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return path.substr(path, path.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${path}/`;
20 | } else {
21 | return path;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right
7 |
13 |
14 | <% } %>
15 |
16 |
17 |
18 |
19 |
20 |
21 |
25 |
26 |
27 |
28 |
37 |
52 |
67 |
53 |
56 | 2048
54 |
57 |
66 |
58 |
60 |