Merge pull request #1 from sadnessOjisan/develop

ブロックを貫通させて消すことができる

.gitignore

@@ -0,0 +1,27 @@
+.DS_STORE
+node_modules
+scripts/flow/*/.flowconfig
+*~
+*.pyc
+.grunt
+_SpecRunner.html
+__benchmarks__
+build/
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+.cache
+dist
+!.gitkeep

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "MarqueeBreakout",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": "https://github.com/sadnessOjisan/MarqueeBreakout.git",
+  "author": "sadness_ojisan <sadness.ojisan@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@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",
+    "lodash.throttle": "^4.1.1",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "styled-components": "^4.1.1"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^5.2.1",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "source-map-loader": "^0.2.4",
+    "typescript": "^3.1.6",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "scripts": {
+    "build:local": "BUILD_MODE='development' REACT_APP_ENV=local webpack",
+    "build:dev": "BUILD_MODE='development' REACT_APP_ENV=development webpack",
+    "build:stg": "BUILD_MODE='production' REACT_APP_ENV='staging' webpack",
+    "build:prd": "BUILD_MODE='production' REACT_APP_ENV='production' webpack",
+    "start:local": "BUILD_MODE='development' REACT_APP_ENV=local webpack-dev-server",
+    "start:dev": "BUILD_MODE='development' REACT_APP_ENV=development webpack-dev-server",
+    "start:stg": "BUILD_MODE='production' REACT_APP_ENV='staging' webpack-dev-server",
+    "start:prd": "BUILD_MODE='production' REACT_APP_ENV='production' webpack-dev-server",
+    "format": "prettier --write '**/*.js'",
+    "lint": "eslint --fix 'src/**/*.js'",
+    "flow-typed": "flow-typed",
+    "flow:check": "flow",
+    "test": "jest",
+    "storybook": "start-storybook -p 9001 -c .storybook"
+  }
+}

src/components/Block.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import styled from "styled-components";
+
+interface State {
+  id: number | null;
+  top: number | null;
+  left: number | null;
+  right: number | null;
+  bottom: number | null;
+  isCollapsed: boolean;
+}
+
+interface Position {
+    top: number,
+    left: number,
+    bottom: number,
+    right: number,
+}
+
+interface Props {
+    ballPosition: Position
+}
+
+class Block extends React.Component<Props, State> {
+  private block = React.createRef<HTMLParagraphElement>();
+
+  constructor(props:Props) {
+    super(props);
+    this.state = {
+      id: null,
+      top: null,
+      left: null,
+      right: null,
+      bottom: null,
+      isCollapsed: false
+    };
+  }
+
+  componentDidMount() {
+    if (this.block.current) {
+      const blockPosition = this.block.current.getBoundingClientRect();
+      const blockLeftPosition = blockPosition.left;
+      const blockTopPosition = blockPosition.top;
+      const blockBottomPosition = blockPosition.bottom;
+      const blockRightPosition = blockPosition.right;
+      this.setState({
+        top: blockTopPosition,
+        left: blockLeftPosition,
+        right: blockRightPosition,
+        bottom: blockBottomPosition
+      });
+    }
+  }
+
+  static getDerivedStateFromProps(nextProps:Props, prevState:State){
+      const {onCollide} = nextProps;
+      const {left, right, top, bottom} = nextProps.ballPosition; 
+      if(left && right && top && !prevState.isCollapsed){
+        if(top <= prevState.bottom && right >= prevState.left && left <= prevState.right){
+            console.log(bottom)
+            onCollide(bottom);
+            return {isCollapsed : true}
+        }
+      }
+  }
+
+  render() {
+    const { isCollapsed, top, left } = this.state;
+    return <BlockOutline isCollapsed={isCollapsed} ref={this.block}>
+    top: {top} <br /> left: {left}
+    </BlockOutline>;
+  }
+}
+
+const BlockOutline = styled.div`
+  background-color: ${(props:any) => props.isCollapsed ? "red" : "blue"};
+  width: 50px;
+  height: 50px;
+  font-size: 6px;
+`;
+
+export default Block;

src/components/Component.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+const IMG = require('../assets/react.png');
+
+const Image = () => {
+    return <img src={IMG} />
+}
+
+export default Image;