JS files reorg

assets/js/app.js

@@ -16,24 +16,24 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import 'phoenix_html';
+import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from 'phoenix';
-import {LiveSocket} from 'phoenix_live_view';
-import topbar from '../vendor/topbar';
+import {Socket} from "phoenix";
+import {LiveSocket} from "phoenix_live_view";
+import topbar from "../vendor/topbar";
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
-  .getAttribute('content');
-let liveSocket = new LiveSocket('/live', Socket, {
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
 });
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: '#29d'}, shadowColor: 'rgba(0, 0, 0, .3)'});
-window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300));
-window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"});
+window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
+window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
 liveSocket.connect();
@@ -44,9 +44,9 @@ liveSocket.connect();
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket;
 
-import React from 'react';
-import {createRoot} from 'react-dom/client';
-import AppRoot from './app-root';
-const reactAppContainer = document.getElementById('react-app-container');
+import React from "react";
+import {createRoot} from "react-dom/client";
+import AppRoot from "./components/app-root";
+const reactAppContainer = document.getElementById("react-app-container");
 const root = createRoot(reactAppContainer);
 root.render(<AppRoot />);

assets/js/app-root.tsx → assets/js/components/app-root.tsx

@@ -1,10 +1,10 @@
 // src/App.tsx
 import React, {useEffect} from "react";
-import {MapView} from "./map-view";
+import {MapView} from "../map/map-view";
 import {Menu} from "./menu";
 import {ColorSelector} from "./color-selector";
 import {HexSizeSelector} from "./hex-size-selector";
-import {useAppStore} from "./store";
+import {useAppStore} from "../store/store";
 
 const AppRoot: React.FC = () => {
   const initialize = useAppStore((state) => state.initialize);

assets/js/color-selector.tsx → assets/js/components/color-selector.tsx

@@ -1,8 +1,8 @@
-import {FC} from 'react';
+import {FC} from "react";
 export type ColorSelectorProps = {};
-import {ColorPicker} from './ui/color-picker';
-import React from 'react';
-import {useAppStore} from './store';
+import {ColorPicker} from "../ui/color-picker";
+import React from "react";
+import {useAppStore} from "../store/store";
 
 export const ColorSelector: FC<ColorSelectorProps> = (props) => {
   const {} = props;

assets/js/hex-size-selector.tsx → assets/js/components/hex-size-selector.tsx

@@ -1,8 +1,8 @@
 import React, {FC} from "react";
-import {useAppStore} from "./store";
-import {Slider} from "./ui/slider";
-import {cn} from "./ui/utils";
-import {DrawingMode} from "./drawing/types";
+import {useAppStore} from "../store/store";
+import {Slider} from "../ui/slider";
+import {cn} from "../ui/utils";
+import {DrawingMode} from "../drawing/types";
 
 const MIN_HEX_RESOLUTION = 8;
 const MAX_HEX_RESOLUTION = 12;

assets/js/menu.tsx → assets/js/components/menu.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from "react";
-import {useAppStore} from "./store";
-import {Button} from "./ui/button";
+import {useAppStore} from "../store/store";
+import {Button} from "../ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,9 +10,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
+} from "../ui/dropdown-menu";
 import {HamburgerMenuIcon} from "@radix-ui/react-icons";
-import {DrawingMode, KEYSTROKES_BY_MODE} from "./drawing/types";
+import {DrawingMode, KEYSTROKES_BY_MODE} from "../drawing/types";
 export type ModeSelectorProps = {};
 
 export const Menu: FC<ModeSelectorProps> = (props) => {

assets/js/components/toolbar.tsx

@@ -0,0 +1,56 @@
+import React, {FC} from "react";
+import {useAppStore} from "../store/store";
+import {Button} from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {HamburgerMenuIcon} from "@radix-ui/react-icons";
+import {DrawingMode, KEYSTROKES_BY_MODE} from "../drawing/types";
+export type ModeSelectorProps = {};
+
+export const Toolbar: FC<ModeSelectorProps> = (props) => {
+  const drawingMode = useAppStore((state) => state.mode);
+  const setDrawingMode = useAppStore((state) => state.setDrawingMode);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex flex-row gap-2 items-center">
+          <Button variant="default">
+            <HamburgerMenuIcon />
+          </Button>
+          <div className="font-sm">{drawingMode}</div>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuLabel>Drawing Mode</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {Object.keys(DrawingMode).map((mode) => (
+            <DropdownMenuItem
+              key={mode}
+              onClick={() => setDrawingMode(DrawingMode[mode])}
+            >
+              {DrawingMode[mode]}
+              <DropdownMenuShortcut>
+                {KEYSTROKES_BY_MODE[DrawingMode[mode]]}
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem disabled>
+          Pan the map
+          <DropdownMenuShortcut>Space + Drag</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

assets/js/drawing/use-draw-handlers.ts

@@ -6,7 +6,7 @@ import {
   ViewMode,
 } from "@deck.gl-community/editable-layers";
 import {cellToBoundary, latLngToCell} from "h3-js";
-import {useAppStore} from "../store";
+import {useAppStore} from "../store/store";
 import {createId} from "@paralleldrive/cuid2";
 import {useEffect} from "react";
 

assets/js/drawing/use-mode-keystrokes.ts

@@ -1,6 +1,6 @@
 import {useState, useEffect} from "react";
 import {MapRef} from "react-map-gl/dist/esm/exports-maplibre";
-import {useAppStore} from "../store";
+import {useAppStore} from "../store/store";
 import {KEYSTROKES_BY_MODE, DrawingMode} from "./types";
 
 /**

assets/js/drawing/use-panning.ts

@@ -1,5 +1,5 @@
 import {useEffect} from "react";
-import {useAppStore} from "../store";
+import {useAppStore} from "../store/store";
 
 /**
  * Add space keyboard event listener

assets/js/map-view.tsx → assets/js/map/map-view.tsx

@@ -18,11 +18,11 @@ import React, {
   useState,
 } from "react";
 import {useControl} from "react-map-gl/maplibre";
-import {useDrawHandler} from "./drawing/use-draw-handlers";
-import {useAppStore} from "./store";
-import {colorToRGBA, findLastLabelLayerId} from "./utils";
-import {useModeKeyStrokes} from "./drawing/use-mode-keystrokes";
-import {usePanning} from "./drawing/use-panning";
+import {useDrawHandler} from "../drawing/use-draw-handlers";
+import {useAppStore} from "../store/store";
+import {colorToRGBA, findLastLabelLayerId} from "../store/utils";
+import {useModeKeyStrokes} from "../drawing/use-mode-keystrokes";
+import {usePanning} from "../drawing/use-panning";
 
 const defaultColor: [number, number, number, number] = [150, 150, 150, 200];
 

assets/js/store.ts → assets/js/store/store.ts

@@ -2,9 +2,10 @@
 import {FeatureOf, Polygon} from "@deck.gl-community/editable-layers";
 import {interpolateRainbow, rgb} from "d3";
 import {create} from "zustand";
-import {channel} from "./user_socket";
-import {DrawingMode} from "./drawing/types";
+
+import {DrawingMode} from "../drawing/types";
 import * as Y from "yjs";
+import {Socket} from "phoenix";
 
 export type PolygonFeature = FeatureOf<Polygon>;
 
@@ -30,6 +31,12 @@ export const useAppStore = create<DrawingState>((set, get) => {
   const ydoc = new Y.Doc();
   const yfeatures = ydoc.getMap<PolygonFeature>("features");
 
+  const socket = new Socket("/socket" /*{params: {token: window.userToken}}*/);
+  // @ts-ignore
+  socket.connect();
+
+  const channel = socket.channel("drawing:lobby", {});
+
   return {
     features: [], // Array of features extracted from yarray for local use (rendering)
     color: rgb(interpolateRainbow(Math.random())).formatHex(),

assets/package.json

@@ -17,7 +17,6 @@
     "h3-js": "^4.1.0",
     "maplibre-gl": "^4.4.0",
     "phoenix": "^1.7.12",
-    "phoenix-js": "^1.0.3",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",

assets/yarn.lock

@@ -4933,13 +4933,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"phoenix-js@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "phoenix-js@npm:1.0.3"
-  checksum: 10c0/a89ea0d5ffd4ae135b88c71aa6df6d3665d49fc07622b92cd923f05f26f20e92bcee58b3d23a9eb9788d900810322ba9c401aec66a8058b8411b193ae34e6815
-  languageName: node
-  linkType: hard
-
 "phoenix@npm:^1.7.12":
   version: 1.7.12
   resolution: "phoenix@npm:1.7.12"
@@ -5236,7 +5229,6 @@ __metadata:
     h3-js: "npm:^4.1.0"
     maplibre-gl: "npm:^4.4.0"
     phoenix: "npm:^1.7.12"
-    phoenix-js: "npm:^1.0.3"
     react: "npm:^18.3.1"
     react-colorful: "npm:^5.6.1"
     react-dom: "npm:^18.3.1"