move winows on resize

src/actions/index.js

@@ -169,6 +169,14 @@ export function setMobile(mobile: boolean): Action {
   };
 }
 
+export function windowResize(width: number, height: number): Action {
+  return {
+    type: 'WINDOW_RESIZE',
+    width,
+    height,
+  };
+}
+
 export function selectColor(color: ColorIndex): Action {
   return {
     type: 'SELECT_COLOR',

src/actions/types.js

@@ -35,6 +35,7 @@ export type Action =
   | { type: 'SET_WAIT', wait: ?number }
   | { type: 'RECEIVE_COOLDOWN', wait: number }
   | { type: 'SET_MOBILE', mobile: boolean }
+  | { type: 'WINDOW_RESIZE', width: number, height: number }
   | { type: 'COOLDOWN_END' }
   | { type: 'COOLDOWN_SET', coolDown: number }
   | { type: 'COOLDOWN_DELTA', delta: number }

src/client.js

@@ -17,6 +17,7 @@ import {
   addChatChannel,
   removeChatChannel,
   setMobile,
+  windowResize,
 } from './actions';
 import {
   receivePixelUpdate,
@@ -93,6 +94,14 @@ function init() {
   }
   document.addEventListener('touchstart', checkMobile, { once: true });
 
+  // listen for resize
+  //
+  function onWindowResize() {
+    store.dispatch(windowResize(window.innerWidth, window.innerHeight));
+  }
+  window.addEventListener('resize', onWindowResize);
+  onWindowResize();
+
   store.dispatch(initTimer());
 
   store.dispatch(fetchMe());

src/components/ChannelContextMenu.jsx

@@ -36,14 +36,11 @@ const ChannelContextMenu = ({
         close();
       }
     };
-    const handleWindowResize = () => close();
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
-    window.addEventListener('resize', handleWindowResize);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
-      window.removeEventListener('resize', handleWindowResize);
     };
   }, [wrapperRef]);
 

src/components/UserContextMenu.jsx

@@ -37,14 +37,11 @@ const UserContextMenu = ({
         close();
       }
     };
-    const handleWindowResize = () => close();
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
-    window.addEventListener('resize', handleWindowResize);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
-      window.removeEventListener('resize', handleWindowResize);
     };
   }, [wrapperRef]);
 

src/components/Window.jsx

@@ -42,7 +42,6 @@ const Window = ({ id }) => {
       document.removeEventListener('mousemove', move);
     };
     document.addEventListener('mouseup', stopMove, { once: true });
-    document.addEventListener('mouseleave', stopMove, { once: true });
   }, []);
 
   const startResize = useCallback((event) => {
@@ -65,7 +64,6 @@ const Window = ({ id }) => {
       document.removeEventListener('mousemove', resize);
     };
     document.addEventListener('mouseup', stopResize, { once: true });
-    document.addEventListener('mouseleave', stopResize, { once: true });
   }, []);
 
   if (!win) {

src/reducers/contextMenu.js

@@ -44,6 +44,7 @@ export default function contextMenu(
       };
     }
 
+    case 'WINDOW_RESIZE':
     case 'HIDE_CONTEXT_MENU': {
       return {
         ...state,

src/reducers/windows.js

@@ -6,6 +6,8 @@
 
 import type { Action } from '../actions/types';
 
+import { clamp } from '../core/utils';
+
 function generateWindowId(state) {
   let windowId = Math.floor(Math.random() * 99999) + 1;
   while (state.args[windowId]) {
@@ -254,12 +256,16 @@ export default function windows(
         xDiff,
         yDiff,
       } = action;
+      const {
+        innerWidth: width,
+        innerHeight: height,
+      } = window;
       const newWindows = state.windows.map((win) => {
         if (win.windowId !== windowId) return win;
         return {
           ...win,
-          xPos: win.xPos + xDiff,
+          xPos: clamp(win.xPos + xDiff, -win.width + 70, width - 30),
-          yPos: win.yPos + yDiff,
+          yPos: clamp(win.yPos + yDiff, 0, height - 30),
         };
       });
       return {
@@ -278,8 +284,8 @@ export default function windows(
         if (win.windowId !== windowId) return win;
         return {
           ...win,
-          width: win.width + xDiff,
+          width: Math.max(win.width + xDiff, 70, 70 - win.xPos),
-          height: win.height + yDiff,
+          height: Math.max(win.height + yDiff, 50),
         };
       });
       return {
@@ -288,6 +294,39 @@ export default function windows(
       };
     }
 
+    case 'WINDOW_RESIZE': {
+      const {
+        width,
+        height,
+      } = action;
+      const xMax = width - 30;
+      const yMax = height - 30;
+      let modified = false;
+
+      const newWindows = [];
+      for (let i = 0; i < state.windows.length; i += 1) {
+        const win = state.windows[i];
+        let { xPos, yPos } = win;
+        if (xPos > xMax || yPos > yMax) {
+          modified = true;
+          newWindows.push({
+            ...win,
+            xPos: Math.min(xMax, xPos),
+            yPos: Math.min(yMax, yPos),
+          });
+        } else {
+          newWindows.push(win);
+        }
+      }
+
+      if (!modified) return state;
+
+      return {
+        ...state,
+        windows: newWindows,
+      };
+    }
+
     case 'CLOSE_ALL_WINDOWS': {
       return initialState;
     }

src/styles/default.css

@@ -140,6 +140,7 @@ tr:nth-child(even) {
   border: solid black;
   border-width: thin;
   overflow: hidden;
+  z-index: 3;
 }
 
 .win-topbar {