Click events now rely shift key properly and add to selection. Progre…

…ss towards #13, still needs shift-deselect Also disabled shift panning
bananu7 · Oct 8, 2022 · 4a7e2ee · 4a7e2ee
1 parent 94d2894
commit 4a7e2ee
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -95,7 +95,7 @@ function App() {
   }, [selectedAction, selectedUnits]);
 
   // TODO it feels like it shouldn't be be here, maybe GameController component?
-  const unitClick = useCallback((targetId: UnitId, button: number) => {
+  const unitClick = useCallback((targetId: UnitId, button: number, shift: boolean) => {
     if (!lastUpdatePacket)
       return;
 
@@ -112,7 +112,13 @@ function App() {
     switch (button) {
     case 0:
       if (!selectedAction) {
-        setSelectedUnits(new Set([targetId]));
+        if (shift) {
+          console.log("shift")
+          setSelectedUnits(units => units.add(targetId));
+        } else {
+          console.log("no shift")
+          setSelectedUnits(new Set([targetId]));
+        }
         break;
       }
 
@@ -142,9 +148,14 @@ function App() {
     }
   }, [lastUpdatePacket, selectedAction, selectedUnits]);
 
-  const boardSelectUnits = (units: Set<UnitId>) => {
+  const boardSelectUnits = (newUnits: Set<UnitId>, shift: boolean) => {
+    console.log("boardSelectUnits", newUnits)
     setSelectedAction(undefined);
-    setSelectedUnits(units);
+    if (shift) {
+      setSelectedUnits(units => new Set([...units, ...newUnits]));
+    } else {
+      setSelectedUnits(newUnits);
+    }
   };
 
   // TODO track key down state for stuff like a-move clicks

diff --git a/packages/client/src/gfx/Board3D.tsx b/packages/client/src/gfx/Board3D.tsx
@@ -38,11 +38,12 @@ export interface Props {
     board: Board;
     playerIndex: number;
     unitStates: UnitState[];
-    select: (ids: Set<UnitId>) => void;
     selectedUnits: Set<UnitId>;
     selectedAction: SelectedAction | undefined;
+
+    select: (ids: Set<UnitId>, shift: boolean) => void;
     mapClick: (p: Position, button: number) => void;
-    unitClick: (u: UnitId, button: number) => void;
+    unitClick: (u: UnitId, button: number, shift: boolean) => void;
 }
 
 export function Board3D(props: Props) {
@@ -59,7 +60,7 @@ export function Board3D(props: Props) {
 
     const groupRef = useRef<THREE.Group>(null);
 
-    const selectInBox = (box: Box) => {
+    const selectInBox = (box: Box, shift: boolean) => {
         // TODO - this is a hotfix; Board shouldn't make those decisions...
         if (props.selectedAction)
             return;
@@ -77,7 +78,8 @@ export function Board3D(props: Props) {
             .filter(u => u.owner === props.playerIndex)
             .map(u => u.id);
 
-        props.select(new Set(selection));
+        console.log("select in box");
+        props.select(new Set(selection), shift);
     };
 
     useEffect(() => {

diff --git a/packages/client/src/gfx/Map3D.tsx b/packages/client/src/gfx/Map3D.tsx
@@ -16,7 +16,7 @@ export type Box = { x1: number, y1: number, x2: number, y2: number };
 type Map3DProps = {
     map: GameMap,
     click: Click,
-    selectInBox: (box: Box) => void;
+    selectInBox: (box: Box, shift: boolean) => void;
 
     pointerMove: (p: {x: number, y: number}) => void;
 }
@@ -44,7 +44,7 @@ export function Map3D(props: Map3DProps) {
         // TODO - only do select if no action?
         // maybe send drag up instead of handling it here
         if (drag && e.nativeEvent.button === 0) {
-            props.selectInBox({x1: drag.x, y1: drag.y, x2: e.point.x, y2: e.point.z});
+            props.selectInBox({x1: drag.x, y1: drag.y, x2: e.point.x, y2: e.point.z}, e.nativeEvent.shiftKey);
         }
         setDrag(undefined);
         setPointer(undefined);

diff --git a/packages/client/src/gfx/OrbitControls.js b/packages/client/src/gfx/OrbitControls.js
@@ -916,15 +916,15 @@ class OrbitControls extends EventDispatcher {
 					break;
 
 				case MOUSE.ROTATE:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+					// for RTS - shift/ctrl click is used for selection
+					if (event.metaKey) {
 
 						if ( scope.enablePan === false ) return;
 
 						handleMouseDownPan( event );
 
 						state = STATE.PAN;
-
+					
 					} else {
 
 						if ( scope.enableRotate === false ) return;

diff --git a/packages/client/src/gfx/Unit3D.tsx b/packages/client/src/gfx/Unit3D.tsx
@@ -41,7 +41,7 @@ function ConeIndicator(props: {unit: UnitState, smoothing: boolean}) {
 type Unit3DProps = {
     unit: UnitState,
     selected: boolean,
-    click?: (id: UnitId, button: number) => void,
+    click?: (id: UnitId, button: number, shift: boolean) => void,
     enemy: boolean,
 }
 export function Unit3D(props: Unit3DProps) {
@@ -52,7 +52,7 @@ export function Unit3D(props: Unit3DProps) {
         e.stopPropagation();
 
         if (props.click)
-            props.click(props.unit.id, e.nativeEvent.button);
+            props.click(props.unit.id, e.nativeEvent.button, e.nativeEvent.shiftKey);
     }
 
     // TODO better color choices