flute-inc · mrskiro · May 26, 2020 · May 26, 2020 · May 26, 2020 · May 26, 2020
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,21 @@
+asset-manifest.json,1590403999302,de18bcf7568204aba96f6dbed34e73e7d7bc6d529f3c9be48a0bac2e9d890869
+index.html,1590403999302,db4034637cddb92e2a97f7e483e58ff7dfdd21b845294b01b6d4be0082e037a3
+precache-manifest.5b4385f555982a1b39345ceeeb7ae53f.js,1590403999302,deab397a0d74b6a3a9349e880eadf24a50d8e47e30d14c31524a6fe37d761edd
+service-worker.js,1590403999302,8780f7522821355905cb1be8a37e152face9dfc3b21dc776c612392bdcad8dc0
+images/batsu.png,1590403992984,99062f927ce75204eb3fefbdc6d8841449b1051bca903a155c698d7cf0e27487
+images/clock.png,1590403992984,f6652d2cdac219fea9316941f61408d86ab379247a8a3d4dbe505b34b07e0c2e
+images/close.png,1590403992984,7847bf11d3a09c79655fe0b11332d9a41d54d8d98129519aac130d7b3d5f5a23
+images/flag.png,1590403992985,515af886d5cf6b7027615e6d85ed54db78036816af94f06fd5e7d2537c5f3061
+images/gameClear.png,1590403992985,7bd0e0cb46283a150e0e41b7ae76d9d8d7f4be47827ca43d875c27ae5005842d
+images/gameOver.png,1590403992985,b4aeb9e15ded0e0883e400efcc5c7bca170a536ce9e72728b60fe446f35623cf
+images/retry.png,1590403992986,e1fdaddd9647fca220aa2d49d8ddbc5caa2574c05dab3be15710e948f83b3270
+images/sound.png,1590403992986,a816e58af3836d1f6608a556a79df03171b4ba04530657c86f22618a31c525cd
+static/js/2.9527352d.chunk.js.LICENSE.txt,1590403999306,ec6502953d07cebc9a38d542258aa53eb8a168f9764dfe0903377cc162b2e121
+images/trophy.png,1590403992986,b32fde74b0d5808129ace07986a00b950189abe56e59eae2a9db7346e3e8de35
+static/js/main.5f58896b.chunk.js,1590403999307,cb9c6c3e038c56866ce93973883f47298438830db405938ed630434f1638dfcc
+static/js/runtime-main.1c96a9e1.js,1590403999306,7fcb2b50c0cf56f98d1f011560574caed5e663cbab22e7b8ef2bf560ce6bd5a9
+static/js/runtime-main.1c96a9e1.js.map,1590403999307,850fda454374866194abedbdc45705e0b291204653ad0ca1c332e009652b767f
+static/js/main.5f58896b.chunk.js.map,1590403999307,8559e948ce570c6a848d5bb3576a4530a09826eabf641401a215c382a1a83219
+images/mine.png,1590403992985,c471a51dd9aa1c29f96a434b81639d3646385e8296ad567d7680571cfa203800
+static/js/2.9527352d.chunk.js,1590403999304,4d82c74c3fa5fedb641c7c9a368c19017f5874e493a8712e0cfc4eddb1abbfc7
+static/js/2.9527352d.chunk.js.map,1590403999307,4afe2a6367367ef85933304e1995a8669d2bd40f1b1c4df348092315653ecea8
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "minesweeeeeper"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

diff --git a/404.html b/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>
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -12,12 +12,17 @@
     "@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",
+    "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",
+    "react-table": "^7.1.0",
     "redux": "^4.0.5",
     "styled-components": "^5.1.0",
     "typescript": "^3.7.5"

diff --git a/public/images/soundOff.png b/public/images/soundOff.png
diff --git a/public/images/tutorial_dig.png b/public/images/tutorial_dig.png
diff --git a/public/images/tutorial_flag.png b/public/images/tutorial_flag.png
diff --git a/public/pastelHouse.mp3 b/public/pastelHouse.mp3
diff --git a/src/components/Board.tsx → src/components/Board/Board.tsx b/src/components/Board.tsx → src/components/Board/Board.tsx
@@ -1,10 +1,10 @@
 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;
   grid-template-columns: repeat(
@@ -15,6 +15,7 @@ const StyledBoard = styled.span<{ width: number; height: number }>`
     ${(props) => props.height},
     ${(props) => cellSize(props.width)}px
   );
+  background-image: url("/images/gameClear.png");
 `;
 
 type BoardProps = {
@@ -34,8 +35,9 @@ const Board: React.FC<BoardProps> = ({
         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)}
@@ -46,4 +48,5 @@ const Board: React.FC<BoardProps> = ({
     </StyledBoard>
   );
 };
+
 export default Board;
diff --git a/src/components/Cell.tsx → src/components/Board/Cell.tsx b/src/components/Cell.tsx → src/components/Board/Cell.tsx
@@ -1,9 +1,9 @@
 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;
@@ -62,6 +62,7 @@ const Batsu = () => {
 
 type CellProps = {
   cell: CellState;
+  boardWidth: number;
   colorNumber: number;
   x: number;
   y: number;
@@ -71,19 +72,19 @@ type CellProps = {
 
 const Cell: React.FC<CellProps> = ({
   cell,
+  boardWidth,
   colorNumber,
   onClick,
   onContextMenu,
 }) => {
   const game = useSelector((state: RootState) => state.game);
-  const board = useSelector((state: RootState) => state.board);
   return (
     <StyledCell
       onClick={(e) => onClick(e)}
       onContextMenu={(e) => onContextMenu(e)}
       styleIsOpened={cell.isOpened}
       cellColor={colorNumber}
-      boardWidth={board.width}
+      boardWidth={boardWidth}
     >
       {cell.isOpened ? (
         cell.hasMine ? (

diff --git a/src/components/FlagCount.tsx → src/components/Board/FlagCount.tsx b/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;

diff --git a/src/components/Board/GameHeader.tsx b/src/components/Board/GameHeader.tsx
@@ -0,0 +1,34 @@
+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 "./SoundButton";
+import RankingButton from "./RankingButton";
+import { RootState } from "../../rootReducer";
+import { cellSize } from "../../config";
+
+const StyledHeader = styled.header<{ boardWidth: number }>`
+  width: ${(props) => cellSize(props.boardWidth) * props.boardWidth}px;
+  background-color: #4a752c;
+  display: grid;
+  grid-template-rows: 60px;
+  grid-template-columns: 1fr 2fr 2fr 1fr 0px 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;
diff --git a/src/components/Board/RankingButton.tsx b/src/components/Board/RankingButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const StyledImg = styled.img<{ right?: boolean }>`
+  width: 40px;
+  height: 40px;
+  align-self: center;
+  justify-self: ${({ right }) => (right ? "right" : "center")};
+  z-index: 1111;
+`;
+
+const StyledLink = StyledImg.withComponent(Link);
+
+const RankingButton = () => {
+  return (
+    <StyledLink to="/ranking">
+      <StyledImg src="/images/trophy.png" alt="ranking" />
+    </StyledLink>
+  );
+};
+
+export default RankingButton;
diff --git a/src/components/Board/SoundButton.tsx b/src/components/Board/SoundButton.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import ReactPlayer from "react-player";
+import { RootState } from "../../rootReducer";
+
+const StyledImg = styled.img<{ right?: boolean }>`
+  width: 25px;
+  height: 25px;
+  align-self: center;
+  justify-self: ${({ right }) => (right ? "right" : "center")};
+  z-index: 1111;
+  cursor: pointer;
+`;
+
+const SoundButton = () => {
+  const [playing, setPlaying] = useState(true);
+  const user = useSelector((state: RootState) => state.user);
+  const handleOnclick = () => {
+    setPlaying(!playing);
+  };
+
+  return (
+    <>
+      <StyledImg
+        right
+        src={playing ? "/images/sound.png" : "/images/soundOff.png"}
+        alt="sound"
+        onClick={handleOnclick}
+      />
+      <ReactPlayer
+        url={`${process.env.PUBLIC_URL}/pastelHouse.mp3`}
+        playing={playing && user.name !== ""}
+        loop
+        volume={0.5}
+        width="0"
+        height="0"
+      />
+    </>
+  );
+};
+
+export default SoundButton;
diff --git a/src/components/TimeHistory.tsx → src/components/Board/TimeHistory.tsx b/src/components/TimeHistory.tsx → src/components/Board/TimeHistory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
-import { RootState } from "../rootReducer";
+import { RootState } from "../../rootReducer";
 
 const StyledTimeHistory = styled.div`
   display: grid;

diff --git a/src/components/Timer.tsx → src/components/Board/Timer.tsx b/src/components/Timer.tsx → src/components/Board/Timer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { GameState } from "../reducers/Game/types";
+import { GameState } from "../../reducers/Game/types";
 
 const StyledTimer = styled.div<{ isResult?: boolean }>`
   display: grid;

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledButton = styled.button<{ isStart?: boolean }>`
+  border: none;
+  width: 300px;
+  height: 64px;
+  background-color: ${({ isStart }) => (isStart ? "salmon" : "#4a752c")};
+  border-radius: 8px;
+  margin-top: 12px;
+  cursor: pointer;
+  span {
+    color: #fff;
+    font-size: 21px;
+    ${({ isStart }) => (isStart ? null : "margin-left: 20px")};
+  }
+`;
+
+const StyledImg = styled.img`
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  left: 50px;
+`;
+
+type RetryButtonProps = {
+  text: string;
+  retry?: boolean;
+  onClick: () => void;
+  isStart?: boolean;
+};
+
+const RetryButton: React.FC<RetryButtonProps> = ({
+  text,
+  retry,
+  onClick,
+  isStart,
+}) => {
+  return (
+    <StyledButton onClick={onClick} isStart={isStart}>
+      {retry ? <StyledImg src="/images/retry.png" alt="retry" /> : null}
+      <span>{text}</span>
+    </StyledButton>
+  );
+};
+
+export default RetryButton;
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
     /build
     # misc
+    .env
     .DS_Store
     .env.local
     .env.development.local
@@ Expand Down @@