✔️ fix hero selection

src/App.js

@@ -7,7 +7,8 @@ import {
 import logo from './wu.png';
 import {
     Canvas,
-    Self
+    Self,
+    Enemy,
 } from './containers';
 import './App.css';
 import {default as hanwenc, store }from './hanwen'
@@ -29,6 +30,7 @@ class App extends Component {
         <div className="App-main">
           <Self />
           <Canvas/>
+          <Enemy/>
           <div className="App-enemy">
           </div>
         </div>

src/actions/index.js

@@ -24,7 +24,9 @@ const heroes = {
 }
 
 const context = {
-  setSize: (size) => ({type: types.context.setSize, size})
+  setSize: (size) => ({type: types.context.setSize, size}),
+  setSelection: (ids) => ({type: types.context.setSelection, ids}),
+  setHighlight: (id) => ({type: types.context.setHighlight, id})
 }
 
 export default {

src/basics/Info.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+import hanwenc from '../hanwen';
+
+const Info = (props) => {
+  return (
+    <div>
+    </div>
+  )
+}
+
+export default Info;

src/basics/index.js

@@ -1,3 +1,4 @@
 import HeroInput from './input'
+import Info from './Info'
 
-export { HeroInput }
+export { HeroInput, Info }

src/containers/Canvas.js

@@ -14,6 +14,10 @@ class Canvas extends Component {
     super(props);
   }
 
+  updateContextDimension = () => {
+    canvasUtil.setContextSize(this.props)
+  }
+
   componentDidMount(){
     var that = this;
     var p = loader.loadList(this.props.canvas.images, this.props.actions, sprites);
@@ -28,10 +32,16 @@ class Canvas extends Component {
     Promise.all(p).then(function (loaded) {
       console.log('loaded are', loaded)
       canvasUtil.initCanvas(that.props);
+      window.addEventListener("resize", that.updateContextDimension);
       window.requestAnimationFrame(tick);
     });
   }
 
+  componentWillUnmount(){
+    //window.cancelAnimationFrame(requestID);
+    window.removeEventListener("resize", this.updateContextDimension);
+  }
+
   render(){
 
     const onMouseMove = (event) => {

src/containers/Enemy.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import hanwenc from '../hanwen';
+import _ from 'lodash'
+
+const Enemy = (props) => {
+  let highLightId = props.canvas.context.highlight,
+      highLightSprite = highLightId ?
+        props.store.heroes.data[highLightId] : {};
+
+  return (
+    <div>
+      {_.map(highLightSprite, (value, key)=> (
+        <div>{key} : {value}</div>
+      ))}
+    </div>
+
+  )
+}
+
+export default hanwenc(Enemy);

src/containers/index.js

@@ -1,8 +1,9 @@
 import Canvas from './Canvas'
 import Self from './Self'
-
+import Enemy from './Enemy'
 
 export {
   Canvas,
-  Self
+  Self,
+  Enemy
 }

src/containers/starter.js

@@ -27,14 +27,16 @@ const _updateCanvas = () => {
   context.clearRect(0, 0, canvasSize, canvasSize);
 }
 
+const setContextSize = (props) => props.actions.context.setSize(canvasEl.getBoundingClientRect())
+
 const initCanvas = function (props) {
   canvasEl = document.getElementById('demo');
   context = canvasEl.getContext('2d');
   Keyboard.registerKey(
     [keyboard.LEFT, keyboard.RIGHT, keyboard.UP, keyboard.DOWN]);
   tileAtlas = loader.getImage(props.canvas.images, 'tiles');
   props.actions.camera.init(map, canvasSize, canvasSize)
-  props.actions.context.setSize(canvasEl.getBoundingClientRect());
+  setContextSize(props);
 };
 
 const updateCanvas = (props, elapsed) => {
@@ -61,10 +63,16 @@ const _getMousePosition = (canvasSize, evt) => ({
   y: evt.clientY - canvasSize.top,
 })
 
-const _isInSprite = (sprites, mousePosition) => {
-  const includeX = sprites.left <= mousePosition.x && mousePosition.x <= sprites.right;
-  const includeY = sprites.top <= mousePosition.y && mousePosition.y <= sprites.bottom;
-  return includeX && includeY;
+const _isInSprite = (sprites, mousePosition, camera) => {
+  console.log('camera.x ', mousePosition.x)
+  let relateX = mousePosition.x + camera.x;
+  let relateY = mousePosition.y + camera.y;
+  return (
+  sprites.left <= relateX &&
+  relateX <= sprites.right &&
+  sprites.top <= relateY &&
+  relateY <= sprites.bottom
+  )
 }
 
 const selectSprite = (evt, props) => {
@@ -74,18 +82,22 @@ const selectSprite = (evt, props) => {
   var found;
   for(let i = rectList.length - 1; i >= 0 ;i-- ){
     let rect = rectList[i];
-    if(_isInSprite(rect, mousePos)){
-      found = props.store.heroes.data[rect.id];
+    if(_isInSprite(rect, mousePos, props.canvas.camera)){
+      found = rect.id
       break;
     }
   }
   console.log('found is', found)
+  if ( found && props.canvas.context.highlight !== found){
+
+    props.actions.context.setHighlight(found);
+  }
   return found;
 };
 
 
 
 
 export {
-  updateCanvas, initCanvas, renderCanvas, selectSprite
+  updateCanvas, initCanvas, renderCanvas, selectSprite, setContextSize
 }

src/helper/DevTool.js

@@ -8,7 +8,8 @@ import types from '../reducer/actionTypes';
 
 export default createDevTools(
   <FilterMonitor blacklist={[
-    types.camera.move
+    types.camera.move,
+    types.context.highlight
   ]}>
   <DockMonitor toggleVisibilityKey='ctrl-h'
                changePositionKey='ctrl-q'

src/reducer/actionTypes.js

@@ -16,6 +16,8 @@ const heroes = {
 
 const context = {
   setSize: 'CONTEXT_setSize',
+  setSelection: 'CONTEXT_setSelection',
+  setHighlight: 'CONTEXT_setHighlight',
 }
 
 const actionTypes = {

src/reducer/context.js

@@ -5,13 +5,24 @@ const contextReducer = (state = {
   size: {
     top: 0, bottom: 0, height: 0, width: 0, right: 0, left: 0
   },
-  select: {}
+  highlight: null,
+  selection: []
 }, action) => {
   switch (action.type){
     case types.setSize:
       return {...state,
         size: action.size
       };
+
+    case types.setHighlight:
+      return {...state,
+        highlight: action.id
+      }
+
+    case types.setSelection:
+      return {...state,
+        selection: action.ids
+      }
     default:
       return state;
   }