| OLD | NEW |
| 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 /** Base class for all views. */ | 5 /** Base class for all views. */ |
| 6 class View { | 6 class View { |
| 7 Document doc; | 7 Document doc; |
| 8 View(this.doc) {} | 8 View(this.doc) {} |
| 9 } | 9 } |
| 10 | 10 |
| 11 /** The view displayed to the player for its own grid. */ | 11 /** The view displayed to the player for its own grid. */ |
| (...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 83 PlayerState this.state, Element rootNode) | 83 PlayerState this.state, Element rootNode) |
| 84 : super(rootNode.document), _rootNode = rootNode {} | 84 : super(rootNode.document), _rootNode = rootNode {} |
| 85 | 85 |
| 86 void attach() { | 86 void attach() { |
| 87 _rootNode.on.mouseDown.add(handleMouseDown); | 87 _rootNode.on.mouseDown.add(handleMouseDown); |
| 88 _rootNode.on.mouseUp.add(handleMouseUp); | 88 _rootNode.on.mouseUp.add(handleMouseUp); |
| 89 } | 89 } |
| 90 | 90 |
| 91 void handleMouseDown(e) { | 91 void handleMouseDown(e) { |
| 92 e.preventDefault(); | 92 e.preventDefault(); |
| 93 window.requestMeasurementFrame(() { | 93 ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) { |
| 94 final pos = ViewUtil.positionFromEvent(_rootNode, e); | |
| 95 _boatStartX = pos[0]; | 94 _boatStartX = pos[0]; |
| 96 _boatStartY = pos[1]; | 95 _boatStartY = pos[1]; |
| 97 return () { | 96 // error case when the mouse was released out of the boat-placing area |
| 98 // error case when the mouse was released out of the boat-placing area | 97 if (_moveListener != null) { |
| 99 if (_moveListener != null) { | 98 _rootNode.on.mouseMove.remove(_moveListener, false); |
| 100 _rootNode.on.mouseMove.remove(_moveListener, false); | 99 _possibleBoat.remove(); |
| 101 _possibleBoat.remove(); | 100 _moveListener = null; |
| 102 _moveListener = null; | 101 } |
| 103 } | 102 _possibleBoat = ViewUtil.createDiv("icons boat2"); |
| 104 _possibleBoat = ViewUtil.createDiv("icons boat2"); | 103 ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY); |
| 105 ViewUtil.placeNodeAt(_possibleBoat, _boatStartX, _boatStartY); | 104 _rootNode.nodes.add(_possibleBoat); |
| 106 _rootNode.nodes.add(_possibleBoat); | 105 _moveListener = handleMouseMove; |
| 107 _moveListener = handleMouseMove; | 106 _rootNode.on.mouseMove.add(_moveListener); |
| 108 _rootNode.on.mouseMove.add(_moveListener); | |
| 109 }; | |
| 110 }); | 107 }); |
| 111 } | 108 } |
| 112 | 109 |
| 113 void handleMouseMove(e) { | 110 void handleMouseMove(e) { |
| 114 e.preventDefault(); | 111 e.preventDefault(); |
| 115 window.requestMeasurementFrame(() { | 112 ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) { |
| 116 final pos = ViewUtil.positionFromEvent(_rootNode, e); | |
| 117 if (_boatLastX == pos[0] && _boatLastY == pos[1]) { | 113 if (_boatLastX == pos[0] && _boatLastY == pos[1]) { |
| 118 return; | 114 return; |
| 119 } | 115 } |
| 120 _boatLastX = pos[0]; | 116 _boatLastX = pos[0]; |
| 121 _boatLastY = pos[1]; | 117 _boatLastY = pos[1]; |
| 122 int deltaX = _boatLastX - _boatStartX; | 118 int deltaX = _boatLastX - _boatStartX; |
| 123 int deltaY = _boatLastY - _boatStartY; | 119 int deltaY = _boatLastY - _boatStartY; |
| 124 | 120 |
| 125 String dir; | 121 String dir; |
| 126 bool flip = false; | 122 bool flip = false; |
| 127 int boatSize = 2; | 123 int boatSize = 2; |
| 128 if (deltaX.abs() >= deltaY.abs()) { | 124 if (deltaX.abs() >= deltaY.abs()) { |
| 129 dir = deltaX < 0 ? "right" : "left"; | 125 dir = deltaX < 0 ? "right" : "left"; |
| 130 boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1)); | 126 boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1)); |
| 131 } else { | 127 } else { |
| 132 dir = deltaY < 0 ? "up" : "down"; | 128 dir = deltaY < 0 ? "up" : "down"; |
| 133 boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1)); | 129 boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1)); |
| 134 } | 130 } |
| 135 | 131 |
| 136 return () { | 132 _possibleBoat.attributes["class"] = "icons boat${boatSize} boatdir-${dir}"
; |
| 137 _possibleBoat.attributes["class"] = | |
| 138 "icons boat${boatSize} boatdir-${dir}"; | |
| 139 }; | |
| 140 }); | 133 }); |
| 141 } | 134 } |
| 142 | 135 |
| 143 /** Handle end of positioning of a boat. */ | 136 /** Handle end of positioning of a boat. */ |
| 144 void handleMouseUp(e) { | 137 void handleMouseUp(e) { |
| 145 _rootNode.on.mouseMove.remove(_moveListener, false); | 138 _rootNode.on.mouseMove.remove(_moveListener, false); |
| 146 _moveListener = null; | 139 _moveListener = null; |
| 147 window.requestMeasurementFrame(() { | 140 ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) { |
| 148 final pos = ViewUtil.positionFromEvent(_rootNode, e); | |
| 149 int _boatEndX = pos[0]; | 141 int _boatEndX = pos[0]; |
| 150 int _boatEndY = pos[1]; | 142 int _boatEndY = pos[1]; |
| 151 | 143 |
| 152 int deltaX = _boatEndX - _boatStartX; | 144 int deltaX = _boatEndX - _boatStartX; |
| 153 int deltaY = _boatEndY - _boatStartY; | 145 int deltaY = _boatEndY - _boatStartY; |
| 154 return () { | 146 Boat boat; |
| 155 Boat boat; | |
| 156 if (deltaX.abs() >= deltaY.abs()) { | |
| 157 int boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1)); | |
| 158 boat = new Boat(deltaX < 0 ? (_boatStartX - boatSize + 1) : _boatStart
X, | |
| 159 _boatStartY, true, boatSize); | |
| 160 } else { | |
| 161 int boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1)); | |
| 162 boat = new Boat(_boatStartX, | |
| 163 deltaY < 0 ? (_boatStartY - boatSize + 1) : _boatStartY, | |
| 164 false, boatSize); | |
| 165 } | |
| 166 | 147 |
| 167 state.addBoat(boat); | 148 if (deltaX.abs() >= deltaY.abs()) { |
| 168 }; | 149 int boatSize = Math.max(2, Math.min(5, deltaX.abs() + 1)); |
| 150 boat = new Boat(deltaX < 0 ? (_boatStartX - boatSize + 1) : _boatStartX, |
| 151 _boatStartY, true, boatSize); |
| 152 } else { |
| 153 int boatSize = Math.max(2, Math.min(5, deltaY.abs() + 1)); |
| 154 boat = new Boat(_boatStartX, |
| 155 deltaY < 0 ? (_boatStartY - boatSize + 1) : _boatStartY, |
| 156 false, boatSize); |
| 157 } |
| 158 |
| 159 state.addBoat(boat); |
| 169 }); | 160 }); |
| 170 } | 161 } |
| 171 } | 162 } |
| 172 | 163 |
| 173 /** The view displayed to the player for its enemy's grid. */ | 164 /** The view displayed to the player for its enemy's grid. */ |
| 174 class EnemyGridView extends View { | 165 class EnemyGridView extends View { |
| 175 PlayerState state; | 166 PlayerState state; |
| 176 bool _enemyReady; | 167 bool _enemyReady; |
| 177 Element _rootNode; | 168 Element _rootNode; |
| 178 ShootingStatusView statusBar; | 169 ShootingStatusView statusBar; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 201 statusBar = new ShootingStatusView(state, doc); | 192 statusBar = new ShootingStatusView(state, doc); |
| 202 _rootNode.nodes.add(statusBar._rootNode); | 193 _rootNode.nodes.add(statusBar._rootNode); |
| 203 _rootNode.on.click.add((Event e) { | 194 _rootNode.on.click.add((Event e) { |
| 204 MouseEvent mouseEvent = e; | 195 MouseEvent mouseEvent = e; |
| 205 handleClick(mouseEvent); | 196 handleClick(mouseEvent); |
| 206 }, false); | 197 }, false); |
| 207 } | 198 } |
| 208 | 199 |
| 209 /** Interpret clicks as a shooting action. */ | 200 /** Interpret clicks as a shooting action. */ |
| 210 void handleClick(MouseEvent e) { | 201 void handleClick(MouseEvent e) { |
| 211 window.requestMeasurementFrame(() { | 202 ViewUtil.positionFromEvent(_rootNode, e).then((List<int> pos) { |
| 212 final pos = ViewUtil.positionFromEvent(_rootNode, e); | 203 state.shoot(pos[0], pos[1]); |
| 213 return () { state.shoot(pos[0], pos[1]); }; | |
| 214 }); | 204 }); |
| 215 } | 205 } |
| 216 | 206 |
| 217 /** Update the view to indicate the enemy is ready. */ | 207 /** Update the view to indicate the enemy is ready. */ |
| 218 void setEnemyReady() { | 208 void setEnemyReady() { |
| 219 if (!_enemyReady) { | 209 if (!_enemyReady) { |
| 220 _enemyReady = true; | 210 _enemyReady = true; |
| 221 _rootNode.query(".notready").remove(); | 211 _rootNode.query(".notready").remove(); |
| 222 } | 212 } |
| 223 } | 213 } |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 279 final accounted = hit + miss; | 269 final accounted = hit + miss; |
| 280 final sunk = state.boatsSunk; | 270 final sunk = state.boatsSunk; |
| 281 _rootNode.innerHTML = | 271 _rootNode.innerHTML = |
| 282 "${total} <= ${accounted} (${hit} + ${miss}); ${sunk}"; | 272 "${total} <= ${accounted} (${hit} + ${miss}); ${sunk}"; |
| 283 } | 273 } |
| 284 } | 274 } |
| 285 | 275 |
| 286 /** Utility methods used by the views above. */ | 276 /** Utility methods used by the views above. */ |
| 287 class ViewUtil { | 277 class ViewUtil { |
| 288 | 278 |
| 289 /** | 279 /** Extract the position of a mouse event in a containing 500x500 grid. */ |
| 290 * Extract the position of a mouse event in a containing 500x500 grid. | 280 static Future<List<int>> positionFromEvent(Element gridNode, MouseEvent e) { |
| 291 * Must be run from within a measurement frame. | 281 final completer = new Completer<List<int>>(); |
| 292 */ | 282 gridNode.rect.then((ElementRect rect) { |
| 293 static List<int> positionFromEvent(Element gridNode, MouseEvent e) { | 283 int x = (e.pageX - rect.offset.left) ~/ 50; |
| 294 assert(window.inMeasurementFrame); | 284 int y = (e.pageY - rect.offset.top) ~/ 50; |
| 295 int x = (e.pageX - gridNode.rect.offset.left) ~/ 50; | 285 completer.complete([x, y]); |
| 296 int y = (e.pageY - gridNode.rect.offset.top) ~/ 50; | 286 }); |
| 297 return [x, y]; | 287 return completer.future; |
| 298 } | 288 } |
| 299 | 289 |
| 300 /** Given a grid node (square or boat) place it at a grid coordinate. */ | 290 /** Given a grid node (square or boat) place it at a grid coordinate. */ |
| 301 static void placeNodeAt(Element node, int x, int y) { | 291 static void placeNodeAt(Element node, int x, int y) { |
| 302 int xoffset = x * 50; | 292 int xoffset = x * 50; |
| 303 int yoffset = y * 50; | 293 int yoffset = y * 50; |
| 304 node.style.setProperty("top", yoffset.toString() + "px"); | 294 node.style.setProperty("top", yoffset.toString() + "px"); |
| 305 node.style.setProperty("left", xoffset.toString() + "px"); | 295 node.style.setProperty("left", xoffset.toString() + "px"); |
| 306 } | 296 } |
| 307 | 297 |
| 308 /** Create a div node with a given class name. */ | 298 /** Create a div node with a given class name. */ |
| 309 static Element createDiv(String className) { | 299 static Element createDiv(String className) { |
| 310 Element node = new Element.tag("div"); | 300 Element node = new Element.tag("div"); |
| 311 node.attributes["class"] = className; | 301 node.attributes["class"] = className; |
| 312 return node; | 302 return node; |
| 313 } | 303 } |
| 314 } | 304 } |
| OLD | NEW |