Merge pull request #12 from sadnessOjisan/develop

サーバーとの疎通機能を完成

README.md

@@ -1,2 +1,20 @@
 # MarqueeBreakout
 マーキータグでブロック崩し
+
+## 環境
+
+```
+$ node -v
+v10.13.0
+
+$ yarn -v
+v1.12.3
+```
+
+## 開発環境の実行
+
+```
+$ yarn install
+
+$ yarn run start:local
+```

package.json

@@ -6,15 +6,25 @@
   "author": "sadness_ojisan <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@atlaskit/button": "^10.1.0",
+    "@atlaskit/field-text": "^7.0.17",
+    "@atlaskit/select": "^6.1.12",
     "@types/lodash": "^4.14.118",
     "@types/lodash.throttle": "^4.1.4",
     "@types/react": "^16.7.6",
     "@types/react-dom": "^16.0.9",
     "@types/styled-components": "^4.1.0",
+    "auth0-js": "^9.8.2",
+    "axios": "^0.18.0",
+    "bluebird": "^3.5.3",
+    "jwt-decode": "^2.2.0",
     "lodash.throttle": "^4.1.1",
     "react": "^16.6.3",
+    "react-confetti": "^2.3.0",
     "react-dom": "^16.6.3",
-    "styled-components": "^4.1.1"
+    "react-dom-confetti": "^0.0.10",
+    "styled-components": "^4.1.1",
+    "styled-spinkit": "^0.4.0"
   },
   "devDependencies": {
     "awesome-typescript-loader": "^5.2.1",

src/components/Block.tsx

@@ -1,12 +1,11 @@
 import * as React from "react";
 import styled from "styled-components";
-import Re from '../assets/react.svg';
-import Vu from '../assets/vue.svg';
-import Ng from '../assets/angular.svg';
-import Gu from '../assets/gulp.svg';
-import Gr from '../assets/GraphQL.svg';
-import Br from '../assets/browserify.svg'
-
+import Re from "../assets/react.svg";
+import Vu from "../assets/vue.svg";
+import Ng from "../assets/angular.svg";
+import Gu from "../assets/gulp.svg";
+import Gr from "../assets/GraphQL.svg";
+import Br from "../assets/browserify.svg";
 
 interface State {
   id: number | null;
@@ -15,7 +14,7 @@ interface State {
   right: number | null;
   bottom: number | null;
   isCollapsed: boolean;
-  img: string | null
+  img: string | null;
 }
 
 interface Position {
@@ -27,7 +26,7 @@ interface Position {
 
 interface Props {
   ballPosition: Position;
-  idx: number
+  idx: number;
 }
 
 class Block extends React.Component<Props, State> {
@@ -41,39 +40,39 @@ class Block extends React.Component<Props, State> {
       left: null,
       right: null,
       bottom: null,
-      isCollapsed: false, 
+      isCollapsed: false,
       img: null
     };
   }
 
   componentDidMount() {
-    const{idx} = this.props;
-    let img:string;
+    const { idx } = this.props;
+    let img: string;
     const amari = idx % 6;
-    switch(amari){
-      case 0: 
+    switch (amari) {
+      case 0:
         img = Re;
         break;
-      case 1: 
+      case 1:
         img = Vu;
         break;
-      case 2: 
+      case 2:
         img = Ng;
         break;
-        case 3: 
+      case 3:
         img = Gu;
         break;
-        case 4: 
+      case 4:
         img = Gr;
         break;
-        case 5: 
+      case 5:
         img = Br;
         break;
-      default: 
-        img = Re
+      default:
+        img = Re;
         break;
     }
-    
+
     if (this.block.current) {
       const blockPosition = this.block.current.getBoundingClientRect();
       const blockLeftPosition = blockPosition.left;
@@ -85,7 +84,7 @@ class Block extends React.Component<Props, State> {
         top: blockTopPosition,
         left: blockLeftPosition,
         right: blockRightPosition,
-        bottom: blockBottomPosition, 
+        bottom: blockBottomPosition,
         img: img
       });
     }
@@ -121,8 +120,8 @@ class Block extends React.Component<Props, State> {
 
 const BlockOutline = styled.div`
   visibility: ${(props: any) => (props.isCollapsed ? "hidden" : "initial")};
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
 `;
 
 export default Block;

src/components/Home.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import styled from "styled-components";
+import color from "../constants/color";
+import Mode from "../constants/mode";
+interface Props {}
+
+const Home = (props: Props) => {
+  const {
+    handleLogin,
+    handleLogout,
+    handleOpenRanking,
+    handleOpenHow2Use,
+    isLogin
+  } = props;
+  return (
+    <Wrapper>
+      <Container>
+        <Title>
+          <marquee width="100%" scrollamount={30} behavior="alternate">
+            marqueeタグでブロック崩し
+          </marquee>
+        </Title>
+        <Description>
+          こちらはクソアプリアドベンドカレンダー13日目の成果物です。サインアップしなくても最下部のコンソールからゲームを始められますが、サインアップすると全国のライバルと競えます。
+        </Description>
+      </Container>
+      <StyledButton onClick={handleOpenHow2Use}>遊び方をみる</StyledButton>
+      {!isLogin && (
+        <StyledButton onClick={handleLogin}>ログインする</StyledButton>
+      )}
+      {isLogin && (
+        <StyledButton onClick={handleLogout}>ログアウトする</StyledButton>
+      )}
+      <StyledButton onClick={() => handleOpenRanking()} align="center">
+        ランキングを確認する
+      </StyledButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Title = styled.p`
+  text-align: center;
+  font-size: 48px;
+  padding-top: 24px;
+  color: ${color.black};
+  width: 100%;
+  padding: 0px 24px;
+`;
+
+const Description = styled.p`
+  text-align: center;
+  font-size: 20px;
+  color: ${color.black};
+  width: 100%;
+  margin-bottom: 24px;
+`;
+
+const Container = styled.div`
+  　position: absolute;
+  top: 0;
+`;
+
+const StyledButton = styled.div`
+  height: 36px;
+  cursor: pointer;
+  font-size: 28px;
+  color: ${color.black};
+  margin-bottom: 24px;
+  border: solid 1px ${color.black};
+  background-color: ${color.black};
+  padding: 12px;
+  border-radius: 36px;
+  color: white;
+  :hover {
+    border: solid 1px ${color.gray};
+    background-color: ${color.gray};
+    color: ${color.black};
+  }
+`;
+
+export default Home;

src/components/How2Use.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import styled from "styled-components";
+import zIndex from "../constants/zIndex";
+import { Score } from "../typedef/Score";
+import color from "../constants/color";
+
+interface Props {
+  onClose(): void;
+}
+
+const How2Use = props => {
+  const { onClose } = props;
+  return (
+    <ModalWrapper>
+      <InnterContainer>
+        <ModalHeader>
+          <ModalTitle>遊び方</ModalTitle>
+          <CloseLink onClick={onClose}>閉じる</CloseLink>
+        </ModalHeader>
+        <ContentsWrapper>
+          <p>marqueeタグのプロパティを制御することで、ブロック崩しをしよう</p>
+          <p>プロパティは最下部のコンソールから触れるよ</p>
+          <p>数値を変更するだけでプロパティが反映されるよ</p>
+          <p>ブロックを崩すと点数がもらえるよ</p>
+          <p>ログインしていると点数で全国ランクを競えるよ</p>
+        </ContentsWrapper>
+      </InnterContainer>
+    </ModalWrapper>
+  );
+};
+
+const ModalWrapper = styled.div`
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: ${zIndex.modal};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  color: ${color.black};
+`;
+
+const InnterContainer = styled.div`
+  background-color: white;
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  border-radius: 8px;
+`;
+
+const ModalHeader = styled.div`
+  position: relative;
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0px;
+`;
+
+const ModalTitle = styled.h3`
+  text-align: center;
+  font-size: 20px;
+`;
+
+const CloseLink = styled.span`
+  position: absolute;
+  right: 12px;
+  cursor: pointer;
+  font-size: 20px;
+  color: ${color.blue};
+`;
+
+const ContentsWrapper = styled.div`
+  overflow-y: scroll;
+  height: calc(100% - 56px);
+  overflow-y: scroll;
+`;
+
+export default How2Use;