ad light-grid option

src/actions/index.js

@@ -66,6 +66,12 @@ export function togglePotatoMode(): Action {
   };
 }
 
+export function toggleLightGrid(): Action {
+  return {
+    type: 'TOGGLE_LIGHT_GRID',
+  };
+}
+
 export function toggleOpenPalette(): Action {
   return {
     type: 'TOGGLE_OPEN_PALETTE',
@@ -244,7 +250,7 @@ export function requestPlacePixel(
 
       if (response.status === 422) {
         window.pixel = { canvasId, coordinates, color };
-        grecaptcha.execute();
+        window.grecaptcha.execute();
         return;
       }
 
@@ -255,8 +261,6 @@ export function requestPlacePixel(
         icon: 'error',
         confirmButtonText: 'OK',
       });
-    } catch (e) {
-      throw e;
     } finally {
       dispatch(setPlaceAllowed(true));
     }

src/actions/types.js

@@ -16,6 +16,7 @@ export type Action =
   | { type: 'TOGGLE_COMPACT_PALETTE' }
   | { type: 'TOGGLE_CHAT_NOTIFY' }
   | { type: 'TOGGLE_POTATO_MODE' }
+  | { type: 'TOGGLE_LIGHT_GRID' }
   | { type: 'TOGGLE_OPEN_MENU' }
   | { type: 'SET_NOTIFICATION', notification: string }
   | { type: 'UNSET_NOTIFICATION' }
@@ -54,6 +55,6 @@ export type Action =
   | { type: 'RELOAD_URL' }
   | { type: 'ON_VIEW_FINISH_CHANGE' };
 export type PromiseAction = Promise<Action>;
-export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
 export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;
 export type GetState = () => State;
+export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;

src/components/SettingsModal.jsx

@@ -16,6 +16,7 @@ import {
   toggleCompactPalette,
   toggleChatNotify,
   togglePotatoMode,
+  toggleLightGrid,
 } from '../actions';
 
 import type { State } from '../reducers';
@@ -92,6 +93,7 @@ function SettingsModal({
   isGridShown,
   isPixelNotifyShown,
   isPotato,
+  isLightGrid,
   onMute,
   autoZoomIn,
   compactPalette,
@@ -101,6 +103,7 @@ function SettingsModal({
   onToggleCompactPalette,
   onToggleChatNotify,
   onTogglePotatoMode,
+  onToggleLightGrid,
   chatNotify,
 }) {
   return (
@@ -150,6 +153,12 @@ function SettingsModal({
         value={isPotato}
         onToggle={onTogglePotatoMode}
       />
+      <SettingsItem
+        title="lightGrid"
+        description="Show Grid in white instead of black."
+        value={isLightGrid}
+        onToggle={onToggleLightGrid}
+      />
     </Modal>
   );
 }
@@ -157,13 +166,25 @@ function SettingsModal({
 function mapStateToProps(state: State) {
   const { mute, chatNotify } = state.audio;
   const {
-    showGrid, showPixelNotify, autoZoomIn, compactPalette, isPotato,
+    showGrid,
+    showPixelNotify,
+    autoZoomIn,
+    compactPalette,
+    isPotato,
+    isLightGrid,
   } = state.gui;
   const isMuted = mute;
   const isGridShown = showGrid;
   const isPixelNotifyShown = showPixelNotify;
   return {
-    isMuted, isGridShown, isPixelNotifyShown, autoZoomIn, compactPalette, chatNotify, isPotato,
+    isMuted,
+    isGridShown,
+    isPixelNotifyShown,
+    autoZoomIn,
+    compactPalette,
+    chatNotify,
+    isPotato,
+    isLightGrid,
   };
 }
 
@@ -190,6 +211,9 @@ function mapDispatchToProps(dispatch) {
     onTogglePotatoMode() {
       dispatch(togglePotatoMode());
     },
+    onToggleLightGrid() {
+      dispatch(toggleLightGrid());
+    },
   };
 }
 

src/reducers/gui.js

@@ -14,6 +14,7 @@ export type GUIState = {
   autoZoomIn: boolean,
   notification: string,
   isPotato: boolean,
+  isLightGrid: boolean,
   compactPalette: boolean,
   paletteOpen: boolean,
   menuOpen: boolean,
@@ -28,6 +29,7 @@ const initialState: GUIState = {
   autoZoomIn: false,
   notification: null,
   isPotato: false,
+  isLightGrid: false,
   compactPalette: false,
   paletteOpen: true,
   menuOpen: false,
@@ -67,6 +69,13 @@ export default function gui(
       };
     }
 
+    case 'TOGGLE_LIGHT_GRID': {
+      return {
+        ...state,
+        isLightGrid: !state.isLightGrid,
+      };
+    }
+
     case 'TOGGLE_COMPACT_PALETTE': {
       return {
         ...state,

src/ui/Renderer.js

@@ -241,6 +241,7 @@ class Renderer {
       showPixelNotify,
       hover,
       isPotato,
+      isLightGrid,
     } = state.gui;
     const {
       placeAllowed,
@@ -340,7 +341,7 @@ class Renderer {
         Math.floor(height / 2 - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE / this.tiledScale - canvasCenter - y) * viewscale));
     }
 
-    if (showGrid && viewscale >= 8) renderGrid(state, viewport, viewscale);
+    if (showGrid && viewscale >= 8) renderGrid(state, viewport, viewscale, isLightGrid);
 
     if (doRenderPixelnotify) pixelNotify.render(state, viewport);
 

src/ui/renderelements.js

@@ -77,6 +77,7 @@ export function renderGrid(
   state: State,
   $viewport: HTMLCanvasElement,
   scale: number,
+  isLightGrid: boolean,
 ) {
   const { width, height } = $viewport;
 
@@ -84,7 +85,7 @@ export function renderGrid(
   if (!viewportCtx) return;
 
   viewportCtx.globalAlpha = 0.5;
-  viewportCtx.fillStyle = '#222222';
+  viewportCtx.fillStyle = (isLightGrid) ? '#222222' : '#DDDDDD';
 
   let [xoff, yoff] = screenToWorld(state, $viewport, [0, 0]);
   let [x, y] = worldToScreen(state, $viewport, [xoff, yoff]);