Feature/ranking

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,52 @@
+asset-manifest.json,1591338483217,24423b5a6545fe99ae596ad040b41fce8b24f5b4265d7f405b121a33c0b8ef55
+index.html,1591338483217,4245886bbe16c1312455974cfbf9011b42ad166a30e14e748aa6646129d011e4
+precache-manifest.d4d70ddb2a70c340c635dd18398a632c.js,1591338483217,cd2c2a91b3ba3a24c19904c2530c4b12463e400594639ec2a378c17528193b59
+service-worker.js,1591338483217,8141eec1d5594e66c6ab0898dd04a064b5d3f0583407c4863327184979cae352
+images/batsu.png,1591338471365,c696266182d5c9096fae50d031f6e464104f6bbbf8f9b730aa2b40a797f32ba0
+images/btn_google_signin_light_normal_web@2x.png,1591338471366,c27410dcf29016f958663e41cddf4d2ccb6fe5f65b12f97ad841337f436727f2
+images/clock.png,1591338471367,8a667e8b0466597b2aca387b8c9dd48a8fe19b1db7261246d6873dbfe81c7b4a
+images/close.png,1591338471368,a0d03d36e7f0831aa5d098655655bd5533de0be4ba8d801afab21577eef995cc
+images/flag.png,1591338471369,515af886d5cf6b7027615e6d85ed54db78036816af94f06fd5e7d2537c5f3061
+images/gameOver.png,1591338471371,b4aeb9e15ded0e0883e400efcc5c7bca170a536ce9e72728b60fe446f35623cf
+images/retry.png,1591338471383,e1fdaddd9647fca220aa2d49d8ddbc5caa2574c05dab3be15710e948f83b3270
+images/gameClear.png,1591338471370,ceae640e398269ea61c36ae77285c1598cb06bd5393897d4a89bd116528999cf
+images/sound.png,1591338471384,172524a57e64edee59de77e1a24c8dd9f050c13ca5fc4e3eee655f15063c6828
+images/trophy.png,1591338471386,660a7a2f1fbd5c47bfc2bd82bab0e7b7916934fc86beab8486b011f7b30f620c
+images/soundOff.png,1591338471385,bf44ee13546cbe032c1d81ecc528d95208d43c88444feaf79b97ca52783295b7
+images/tutorial_dig.png,1591338471387,4f4430c9b57617b8be5910a675890e11e01880199e1596e6599981af293dae3f
+images/tutorial_flag.png,1591338471388,869c917f4ff82244a6e57700fa91c2d77573a5acce63e832f7638b57cc474a70
+static/js/10.c5428a36.chunk.js,1591338483194,8eba5e74c9f53114d90f59ecea529899420a84ae19303f60e11d17d4c16d32c6
+static/js/11.511bb45a.chunk.js,1591338483194,233b2800a647454e9eab56401e312229aebeeded9bed52e5bf95d34728149be9
+static/js/10.c5428a36.chunk.js.map,1591338483215,0d8d90b693de112ea560224b7c04fe506691f3e5c7b20b18f80516198202e47e
+static/js/12.30d1f5b9.chunk.js,1591338483194,012fe1facada69038e3892ad8f325240a7c60bbf4a4838d0b8b92ed592557915
+static/js/11.511bb45a.chunk.js.map,1591338483215,14fb89fd6dc345f171c20fcb377d84a387961d85873ced2c05718de2ca23e899
+static/js/13.7c796970.chunk.js,1591338483195,6eecf21f3be862a7bad788d438bfabc356df9b41ec457abdfbf87ed4326b391b
+static/js/12.30d1f5b9.chunk.js.map,1591338483215,a58f35e424d6a1ad66557c0ca23bf4502f90b4400ed78b7346f32542c2caaae2
+static/js/13.7c796970.chunk.js.map,1591338483216,0181f30ba294201503ef1840e774f84f2b12744574391c764bf4be8d459a9883
+static/js/14.bc87c2e2.chunk.js,1591338483194,672968b8a23db3361396fd7cdcdbded082a7ca7fb25933a5cf991f1dc0b9e9d7
+static/js/2.a1c4bf25.chunk.js.LICENSE.txt,1591338483213,23bd8157cfb13e257efe0a2d1e58a694cd196ebeb3343697f84659a1ec36df57
+static/js/3.a1dbf8e4.chunk.js,1591338483194,034abc4c954f13ef0640329afeda9f192e4faf41e8dd17e440ef703c18608f45
+static/js/14.bc87c2e2.chunk.js.map,1591338483217,4e0f286067fb67af94a06dc75c85f74eda4aef5c693de7b4ac89b4b5126cfcc5
+static/js/4.0edf1327.chunk.js,1591338483194,62c5a8d207a250aba335d36463bc225d2ca1ee6890c70bd7f014690b6a23bef2
+static/js/5.dbce292f.chunk.js,1591338483194,6e1d14d3ae36a373fde953ea849e29a9500bb11bfceed93f3591e169aba05bfa
+static/js/4.0edf1327.chunk.js.map,1591338483215,1277ab93223413b0e15ffe42d6fd4cf5c22715d01aab3c48ea15d13f81bd686b
+static/js/6.b78bd92a.chunk.js,1591338483194,48b9799f8beabbdceeb129ea24cbec9d74207ed4fb4294ded89af31ef5d59611
+static/js/5.dbce292f.chunk.js.map,1591338483215,9d2f7612670e28f994bb9a07c3d1ed763aeb2fe08f341daa56c258613a357dbc
+static/js/7.d0c1f1c1.chunk.js,1591338483194,c3cd3545c8a9db24c77803aa546d3d75cdba1fe6ce4af0d60f3fda0931eec850
+static/js/7.d0c1f1c1.chunk.js.map,1591338483215,bbca5973f19eb2b1829234c6ee6a9ea01c522e904cec40fc88c27d2b82c18bfd
+static/js/8.d2a9f3d8.chunk.js,1591338483194,61b3c332ef6986b46169729ae973b8dae33512f0065cfe69c60b3b51910020cf
+static/js/6.b78bd92a.chunk.js.map,1591338483215,bd1d2faedb31b41b93161e2dd0e5e2d3e3f86d5792616d6d761aea0671241204
+static/js/3.a1dbf8e4.chunk.js.map,1591338483215,376276b196abe71be236af4bdc57ed4175ca791ab88032ef3cd38359b6e1bd6e
+static/js/9.2065d37e.chunk.js,1591338483194,1637f2435a00a9b5318b0ab2a70b9905524590e204b91ee6e2423f2294ea45d7
+static/js/9.2065d37e.chunk.js.map,1591338483216,ce85f71451b26f7ee1dd0c763c0b6a66adfb9e65412d448936a5e62a3c74fc13
+static/js/main.0db7881e.chunk.js,1591338483194,b3c2170612f4d7e6d1587253baf8aef887c4f3832a6a852ed62f45234893889e
+static/js/8.d2a9f3d8.chunk.js.map,1591338483215,16f8fbab898fb188406f743ebdeda8de6a4039c783122cd44a989b71e7521920
+images/mine.png,1591338471377,f32201c9d694f0a85c7a4c3e8f0fdda63de2453910c60bcef05258aa9c89b84f
+static/js/main.0db7881e.chunk.js.map,1591338483214,4645d15ac7a8e051ac44b5eb3a43e9a939b1abf9da35ea98619a723d1cd2ee1a
+static/js/runtime-main.766dfbc8.js,1591338483192,ec165e2e42aae95ce0e82732d38174dd667bd85eb3f259c45b8cd4f5560d01d6
+static/js/runtime-main.766dfbc8.js.map,1591338483215,f3c72e95a9f2d1eb4ce171ccf7b9256f113d973f27ad750a0a629c6cdbdbc7cf
+gameover.mp3,1591338471363,813c8bc694e7a6e380b3ff5bc9e9b6965306fb8e2d29a61f4bbd2c26b607d065
+static/js/2.a1c4bf25.chunk.js,1591338483194,bdd904bf92a549cb666f688259e2ce05f8d37500e613b311dd1acfdff3ba3c9c
+clear.mp3,1591338471353,3cc9ed76f44ccfd93e644f40f4dab4357a66c0a95ab445c909d834f9b1cd235f
+play.mp3,1591338471407,85a042420148aa9c6eb288949828c9d3feeb44df82e17644da410e15c53f26de
+static/js/2.a1c4bf25.chunk.js.map,1591338483215,5bcb4faba8ea0fec1f6d07b7b531ca78d1fd75dcbae672cb48f526f566861c00

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "minesweeeeeper"
+  }
+}

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

@@ -12,11 +12,16 @@
     "@types/react-dom": "^16.9.7",
     "@types/react-modal": "^3.10.5",
     "@types/react-redux": "^7.1.8",
+    "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",
+    "dayjs": "^1.8.28",
+    "firebase": "^7.14.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-modal": "^3.11.2",
+    "react-player": "^2.1.0",
     "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "styled-components": "^5.1.0",

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>minesweeeeeper</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/components/Board.tsx → src/components/Board/Board.tsx

@@ -1,12 +1,22 @@
 import React from "react";
 import styled from "styled-components";
-import { BoardState } from "../reducers/Board/types";
+import { BoardState } from "../../reducers/Board/types";
 import Cell from "./Cell";
-import { cellSize } from "../config";
+import { cellSize } from "../../config";
 
-const StyledBoard = styled.span<{ width: number; height: number }>`
+const StyledBoard = styled.div<{ width: number; height: number }>`
   display: grid;
   grid-auto-flow: column;
+  @media screen and (max-width: 425px) {
+    grid-template-columns: repeat(
+      ${(props) => props.width},
+      ${(props) => cellSize(props.width) - 10}px
+    );
+    grid-template-rows: repeat(
+      ${(props) => props.height},
+      ${(props) => cellSize(props.width) - 10}px
+    );
+  }
   grid-template-columns: repeat(
     ${(props) => props.width},
     ${(props) => cellSize(props.width)}px
@@ -19,31 +29,39 @@ const StyledBoard = styled.span<{ width: number; height: number }>`
 
 type BoardProps = {
   board: BoardState;
-  handleOpenCell: (e: React.MouseEvent, x: number, height: number) => void;
-  handleToggleFlag: (e: React.MouseEvent, x: number, height: number) => void;
+  handleOpenCell: (e: React.MouseEvent, x: number, y: number) => void;
+  handleToggleFlag: (e: React.MouseEvent, x: number, y: number) => void;
+  touchStartToggleFlag: (e: React.TouchEvent, x: number, y: number) => void;
+  touchEndToggleFlag: (e: React.TouchEvent, x: number, y: number) => void;
 };
 
 const Board: React.FC<BoardProps> = ({
   board,
   handleOpenCell,
   handleToggleFlag,
+  touchStartToggleFlag,
+  touchEndToggleFlag,
 }) => {
   return (
     <StyledBoard width={board.width} height={board.height}>
       {board.cells.map((cols, x) =>
         cols.map((cell, y) => (
           <Cell
             key={y}
-            colorNumber={y % 2 === 0 ? y + x : y - x}
             cell={cell}
+            boardWidth={board.width}
+            colorNumber={y % 2 === 0 ? y + x : y - x}
             x={x}
             y={y}
             onClick={(e) => handleOpenCell(e, x, y)}
             onContextMenu={(e) => handleToggleFlag(e, x, y)}
+            onTouchStart={(e) => touchStartToggleFlag(e, x, y)}
+            onTouchEnd={(e) => touchEndToggleFlag(e, x, y)}
           />
         ))
       )}
     </StyledBoard>
   );
 };
+
 export default Board;

src/components/Cell.tsx → src/components/Board/Cell.tsx

@@ -1,19 +1,25 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { CellState } from "../reducers/Board/types";
-import { RootState } from "../rootReducer";
-import { cellSize } from "../config";
+import { CellState } from "../../reducers/Board/types";
+import { RootState } from "../../rootReducer";
+import { cellSize } from "../../config";
 
 const StyledCell = styled.div<{
   boardWidth: number;
   styleIsOpened: boolean;
   cellColor: number;
 }>`
+  @media screen and (max-width: 425px) {
+    width: ${({ boardWidth }) => cellSize(boardWidth) - 10}px;
+    height: ${({ boardWidth }) => cellSize(boardWidth) - 10}px;
+    line-height: ${({ boardWidth }) => cellSize(boardWidth) - 10}px;
+  }
   width: ${({ boardWidth }) => cellSize(boardWidth)}px;
   height: ${({ boardWidth }) => cellSize(boardWidth)}px;
   line-height: ${({ boardWidth }) => cellSize(boardWidth)}px;
   text-align: center;
+  user-select: none;
   background: ${(props) =>
     props.styleIsOpened
       ? props.styleIsOpened && props.cellColor % 2 === 0
@@ -27,6 +33,9 @@ const StyledCell = styled.div<{
 const StyledNumber = styled.span<{
   number: number;
 }>`
+  @media screen and (max-width: 425px) {
+    font-size: 16px;
+  }
   font-weight: bold;
   font-size: 20px;
   color: ${({ number }) =>
@@ -62,28 +71,35 @@ const Batsu = () => {
 
 type CellProps = {
   cell: CellState;
+  boardWidth: number;
   colorNumber: number;
   x: number;
   y: number;
   onClick: (e: React.MouseEvent) => void;
   onContextMenu: (e: React.MouseEvent) => void;
+  onTouchStart: (e: React.TouchEvent) => void;
+  onTouchEnd: (e: React.TouchEvent) => void;
 };
 
 const Cell: React.FC<CellProps> = ({
   cell,
+  boardWidth,
   colorNumber,
   onClick,
   onContextMenu,
+  onTouchStart,
+  onTouchEnd,
 }) => {
   const game = useSelector((state: RootState) => state.game);
-  const board = useSelector((state: RootState) => state.board);
   return (
     <StyledCell
       onClick={(e) => onClick(e)}
       onContextMenu={(e) => onContextMenu(e)}
+      onTouchStart={(e) => onTouchStart(e)}
+      onTouchEnd={(e) => onTouchEnd(e)}
       styleIsOpened={cell.isOpened}
       cellColor={colorNumber}
-      boardWidth={board.width}
+      boardWidth={boardWidth}
     >
       {cell.isOpened ? (
         cell.hasMine ? (

src/components/FlagCount.tsx → src/components/Board/FlagCount.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { BoardState } from "../reducers/Board/types";
+import { BoardState } from "../../reducers/Board/types";
 
 const StyledFlagCount = styled.div`
   display: grid;
@@ -11,6 +11,9 @@ const StyledFlagCount = styled.div`
 `;
 
 const StyledSpan = styled.span`
+  @media screen and (max-width: 425px) {
+    font-size: 16px;
+  }
   font-size: 20px;
   color: white;
   justify-self: left;

src/components/Board/GameHeader.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import SelectLevel from "../../containers/SelectLevel";
+import FlagCount from "../../containers/FlagCount";
+import Timer from "../../containers/Timer";
+import SoundButton from "../../containers/SoundButton";
+import RankingButton from "./RankingButton";
+import { RootState } from "../../rootReducer";
+import { cellSize } from "../../config";
+
+const StyledHeader = styled.header<{ boardWidth: number }>`
+  @media screen and (max-width: 425px) {
+    width: ${(props) => (cellSize(props.boardWidth) - 10) * props.boardWidth}px;
+  }
+  width: ${(props) => cellSize(props.boardWidth) * props.boardWidth}px;
+  background-color: #4a752c;
+  display: grid;
+  grid-template-columns: 2fr 2fr 2fr 1fr 1fr;
+  justify-content: center;
+`;
+
+const Header: React.FC = () => {
+  const board = useSelector((state: RootState) => state.board);
+  return (
+    <StyledHeader boardWidth={board.width}>
+      <SelectLevel />
+      <FlagCount />
+      <Timer />
+      <SoundButton />
+      <RankingButton />
+    </StyledHeader>
+  );
+};
+
+export default Header;

src/components/Board/RankingButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const StyledImg = styled.img`
+  width: 40px;
+  height: 40px;
+`;
+
+const StyledLink = styled(Link)`
+  width: 40px;
+  height: 40px;
+  align-self: center;
+  justify-self: center;
+  z-index: 999;
+`;
+
+const RankingButton = () => {
+  return (
+    <StyledLink to="/ranking/daily">
+      <StyledImg src="/images/trophy.png" alt="trophy" />
+    </StyledLink>
+  );
+};
+
+export default RankingButton;