Merge pull request #56 from BuddiX/add_destroy_animation

Add destroy animation
Motonary · Nov 2, 2018 · 1dea52a · 1dea52a
2 parents 481fb93 + cfdf794
commit 1dea52a
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 36 deletions.
diff --git a/frontend/src/javascripts/components/atoms/confirm-btn.js b/frontend/src/javascripts/components/atoms/confirm-btn.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import '../../../stylesheets/confirm_btn.scss'
+
+const ConfirmBtn = (message) => {
+  return(
+    <button className="confirm-btn">{ message.message }</button>
+  )
+}
+
+export default ConfirmBtn
diff --git a/frontend/src/javascripts/components/molecules/circle-orbit.js b/frontend/src/javascripts/components/molecules/circle-orbit.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { selectAssignment, disselectAssignment } from '../../actions/assignments'
-import { PlanetImgs } from '../../constants'
 import Planet from './planet'
 
 class CircleOrbit extends Component {

diff --git a/frontend/src/javascripts/components/molecules/modal.js b/frontend/src/javascripts/components/molecules/modal.js
@@ -1,46 +1,75 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-
 import Modal from 'react-modal'
 
+import ConfirmBtn from '../atoms/confirm-btn'
+
+import { nullifySelectedAssignment } from '../../actions/assignments'
 import { setModalStatus, resetModalStatus } from '../../actions/common'
 
+import '../../../stylesheets/modal.scss'
+
 const customStyles = {
+  overlay : {
+    zIndex                : '1000',
+    backgroundColor       : 'rgba(13, 25, 36, 0)'
+  },
   content : {
+    display               : 'flex',
+    justifyContent        : 'center',
+    flexWrap              : 'wrap',
+    width                 : '400px',
+    height                : '100px',
+    backgroundColor       : 'rgba(13, 25, 36, 0.7)',
     top                   : '50%',
     left                  : '50%',
     right                 : 'auto',
     bottom                : 'auto',
+    padding               : '10px',
     marginRight           : '-50%',
+    color                 : '#fff',
     transform             : 'translate(-50%, -50%)'
   }
 }
 
+Modal.setAppElement('#app')
+
 class ConfirmModal extends Component {
   constructor(props) {
     super(props)
-  }
-
-  openModal() {
-    this.props.setModalStatus(true)
-  }
 
-  afterOpenModal() {
-    //this.subtitle.style.color = '#f00';
+    this.state ={
+      destroy: "本当に選択タスクを破壊しますか？",
+      restore: "本当に選択したタスクを元の場所に戻しますか？"
+    }
   }
 
-  closeModal() {
+  closeModal(isDestroy) {
     this.props.resetModalStatus(false)
+    if(isDestroy) {
+      this.props.parentMethod(this.props.selectedAssignments)
+      this.props.nullifySelectedAssignment()
+    }
   }
 
   render(){
     return(
-      <div>TEST</div>
+      <Modal
+        isOpen={this.props.modalIsOpen}
+        style={customStyles}
+        contentLabel="Example Modal"
+        >
+        <div className="modal-warning">{this.state.destroy}</div>
+        <div className="modal-confirm-buttons">
+          <div onClick={this.closeModal.bind(this, false)}><ConfirmBtn message="いいえ" /></div>
+          <div onClick={this.closeModal.bind(this, true)}><ConfirmBtn message="はい" /></div>
+        </div>
+      </Modal>
     )
   }
 }
 
 export default connect(
-  ({modalIsOpen}) => ({modalIsOpen}),
-  { setModalStatus, resetModalStatus }
+  ({modalIsOpen, selectedAssignments}) => ({modalIsOpen, selectedAssignments}),
+  { nullifySelectedAssignment, setModalStatus, resetModalStatus }
 )(ConfirmModal)
diff --git a/frontend/src/javascripts/components/molecules/planet.js b/frontend/src/javascripts/components/molecules/planet.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { selectAssignment, disselectAssignment } from '../../actions/assignments'
@@ -27,8 +26,8 @@ class Planet extends Component {
     const target_img = e.target
     const selectedPlanetId = target.id
 
-    console.log(e.target, planet_type)
-    console.log(this.props)
+    //console.log(e.target, planet_type)
+    //console.log(this.props)
 
     if(selectedPlanetId) {
       target_img.src = PlanetCheckedImgs[planet_type]
@@ -40,7 +39,7 @@ class Planet extends Component {
     const pos = ['top', 'right', 'left', 'bottom']
     let i=-1
 
-    console.log(this.props, "planet")
+    //console.log(this.props, "planet")
 
     if(!this.props.revolvingAssignments) { return(<div>Loading...</div>) }
 

diff --git a/frontend/src/javascripts/components/users/footer.js b/frontend/src/javascripts/components/users/footer.js
@@ -19,8 +19,12 @@ class Footer extends Component {
     planet_list.style.display = 'none'
   }
 
-  onClickDestroyPlanets(e) {
-    const target_ids = this.props.selectedAssignments
+  onClickOpenModal() {
+    this.props.setModalStatus(true)
+  }
+
+  onClickDestroyPlanets(selectedAssignments) {
+    const target_ids = selectedAssignments
 
     var parent = []
     var canvasEl = []
@@ -33,7 +37,6 @@ class Footer extends Component {
         canvasEl.push(tar)
         ctx.push(tar.getContext('2d'))
       })
-      console.log(parent[0])
     }
 
     const numberOfParticules = 80
@@ -43,21 +46,26 @@ class Footer extends Component {
     var pointerX = 0
     var pointerY = 0
 
+    //console.log(parent, canvasEl, ctx)
+
     function setCanvasSize() {
-      var i = 0
+      let i = 0
       canvasEl.map((target) => {
-        target.style.display = ''
-        target.width = parent[i].clientWidth
-        target.height = parent[i].clientHeight
+        target.style.width = parent[i].parentNode.clientWidth + 'px'
+        target.style.height = parent[i].parentNode.clientHeight + 'px'
+        target.style.top = `-${parent[i].parentNode.clientWidth/2}px`
+        target.style.left = `-${parent[i].parentNode.clientHeight/2}px`
+        target.width = parent[i].parentNode.clientWidth
+        target.height = parent[i].parentNode.clientHeight
         target.style.zIndex = 500
         target.getContext('2d').scale(2, 2)
         i++
       })
     }
 
-    function updateCoords(e) {
-      pointerX = 50
-      pointerY = 50
+    function updateCoords() {
+      pointerX = 100
+      pointerY = 100
     }
 
     function removeImg() {
@@ -134,8 +142,7 @@ class Footer extends Component {
     updateCoords()
     removeImg()
     animateParticules(pointerX, pointerY)
-    this.props.nullifySelectedAssignment()
-
+    //this.props.nullifySelectedAssignment()
   }
 
   motionControll() {
@@ -188,7 +195,7 @@ class Footer extends Component {
   renderDeleteIcons(deleteButtonsclasses) {
     return DeleteIcons.map(deleteIcon => {
       return (
-        <li key={deleteIcon} className={deleteButtonsclasses} onClick={this.onClickDestroyPlanets.bind(this)}>
+        <li key={deleteIcon} className={deleteButtonsclasses} onClick={this.onClickOpenModal.bind(this)}>
           <img src={deleteIcon} className="delete-btn"/>
         </li>
       )
@@ -228,6 +235,7 @@ class Footer extends Component {
             {this.renderDeleteIcons(deleteButtonsclasses)}
           </ul>
         </div>
+        <ConfirmModal parentMethod={this.onClickDestroyPlanets} />
       </div>
     )
   }

diff --git a/frontend/src/javascripts/components/users/project-page.js b/frontend/src/javascripts/components/users/project-page.js
@@ -7,10 +7,9 @@ import { fetchRevolvingAssignments,
          selectAssignment,
          disselectAssignment } from '../../actions/assignments'
 import { fetchProjectsOnBar } from '../../actions/projects'
-import anime from 'animejs'
+
 import { PlanetImgs } from '../../constants'
 import CircleOrbit from '../molecules/circle-orbit'
-import Planet from '../molecules/planet'
 
 class ProjectPage extends Component {
   constructor(props) {
@@ -32,9 +31,10 @@ class ProjectPage extends Component {
     // TODO: タスク詳細のポップアップ実装,
   }
 
-  onClickFixedStarOnBar() {
+  /*onClickFixedStarOnBar() {
     this.props.changeCurrentProject(nextProjectId)
   }
+  */
 
   onDropPlanet(title, detail, deadline, planet_type, planet_size, orbit_pos) {
     this.props.createAssignment(
@@ -85,7 +85,7 @@ class ProjectPage extends Component {
       return <Redirect to={correctPath} />
     }
 
-    console.log(this.props.projectsOnBar)
+    //console.log(this.props.projectsOnBar)
     // this.props.projectsOnBarに、バーに表示されるべき恒星一覧が格納されてるのでmapとかでrenderして下さい
     // nextProjectIdを渡してthis.onClickFixedStarOnBarを発火すると動的にreducerが変化します
 

diff --git a/frontend/src/stylesheets/confirm_btn.scss b/frontend/src/stylesheets/confirm_btn.scss
@@ -0,0 +1,14 @@
+.confirm-btn {
+  display: block;
+  width: 100px;
+  height: 25px;
+  font-size: 14px;
+  font-family: inherit;
+  font-weight: lighter;
+  line-height: 25px;
+  border: 1px solid #fff;
+  border-radius: 10px;
+  background-color: inherit;
+  padding: 0 10px;
+  margin: 0 10px;
+}
diff --git a/frontend/src/stylesheets/modal.scss b/frontend/src/stylesheets/modal.scss
@@ -0,0 +1,14 @@
+.modal-warning {
+  width: 400px;
+  margin: 10px auto;
+  text-align: center;
+  font-size: 14px;
+  font-family: inherit;
+  font-weight: lighter;
+  letter-spacing: 2px;
+}
+.modal-confirm-buttons {
+  width: 400px;
+  display:flex;
+  justify-content: center;
+}
diff --git a/frontend/src/stylesheets/project_page.scss b/frontend/src/stylesheets/project_page.scss
@@ -186,10 +186,9 @@
 
 //canvas destroy animation
   .canvas {
-    display: none;
+    position: absolute;
     width: 0;
     height: 0;
-    position: absolute;
     top: 0;
     left: 0;
   }