desck 0.4.4 → 0.4.6

package/{server.cjs → server.mjs}

@@ -1,62 +1,76 @@
-const express = require("express");
-const http = require("http");
-const socketIo = require("socket.io");
-const path = require("path");
-const fs = require("fs");
+import express from "express";
+import http from "http";
+import { Server } from "socket.io";
+import path from "node:path";
+import fs from "node:fs";
+import { parseArgs } from "node:util";
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const parseConfig = (argv) => {
+  const { values, positionals } = parseArgs({
+    argv: argv.slice(2), // Skip 'node' and script name
+    options: {
+      input: { type: "string", short: "i" },
+      output: { type: "string", short: "o" },
+      settings: { type: "string" },
+      port: { type: "string", short: "p" },
+      png: { type: "boolean" },
+      svg: { type: "boolean" },
+      symbols: { type: "boolean" },
+    },
+    allowPositionals: true,
+  });
 
-const app = express();
-const server = http.createServer(app);
-const io = socketIo(server, { maxHttpBufferSize: 1e8 });
-
-const parseConfig = (args) => {
-  let flags = args.filter((a) => a.substr(0, 2) === "--");
-  args = args.filter((a) => a.substr(0, 2) !== "--");
-  let c = {
-    port: 3000,
-    mode: "dev",
+  const parsePath = (value, def) => {
+    return value ? path.join(process.cwd(), value) : path.join(__dirname, def);
+  };
+
+  const parseMode = (value) => {
+    if (["dev", "watch", "export"].includes(value)) return value;
+    else return null;
+  };
+
+  const mode = parseMode(positionals[0]);
+
+  if (!mode) {
+    console.error(`unrecognized mode "${positionals[0]}"`);
+    process.exit();
+  }
+
+  const c = {
+    port: parseInt(values.port) || 6354,
+    mode: mode,
     formats: [],
-    symbols: false,
-    input: null,
-    output: null,
+    symbols: values.symbols || false,
+    input: parsePath(values.input, "public/projects"),
+    output: parsePath(values.output, "exports"),
     settings: null,
   };
 
-  c.port = 8000;
-
-  c.mode = flags.includes("--watch")
-    ? "watch"
-    : flags.includes("--export")
-      ? "export"
-      : "dev";
-
-  c.formats = [];
-  if (flags.includes("--svg")) c.formats.push("svg");
-  if (flags.includes("--png")) c.formats.push("png");
-  c.symbols = flags.includes("--symbols");
-
-  c.input = args[2]
-    ? path.join(process.cwd(), args[2])
-    : path.join(__dirname, "public/projects");
-
-  c.output = args[3]
-    ? path.join(process.cwd(), args[3])
-    : path.join(__dirname, "exports");
-
-  c.settings = JSON.parse(
-    fs.readFileSync(
-      args[4]
-        ? path.join(process.cwd(), args[4])
-        : path.join(__dirname, "settings.json"),
-    ),
-  );
+  if (values.svg) c.formats.push("svg");
+  if (values.png) c.formats.push("png");
+
+  const defaultSettings = "settings.json";
+  const settingsPath = values.settings
+    ? path.join(process.cwd(), values.settings)
+    : fs.existsSync(path.join(c.input, defaultSettings))
+      ? path.join(c.input, defaultSettings)
+      : path.join(__dirname, defaultSettings);
+
+  c.settings = JSON.parse(fs.readFileSync(settingsPath));
+
+  c.verbose = c.mode == "dev";
+
   return c;
 };
 
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, { maxHttpBufferSize: 1e8 });
+
 let config = parseConfig(process.argv);
 console.log(config);
 
-const verbose = !["watch", "export"].includes(config.mode);
-
 const ensureDir = (dir) => {
   if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir, { recursive: true });
@@ -108,10 +122,10 @@ io.on("connection", (socket) => {
   const readProjects = () => {
     return readFiles(config.input);
   };
-  if (verbose) {
+  if (config.verbose) {
     logMessage("connect", "gui");
   }
-  let files = readProjects();
+  // let files = readProjects();
   // logMessage("files", files);
   const emitList = () => {
     const projects = readProjects();
@@ -129,7 +143,7 @@ io.on("connection", (socket) => {
     emitList();
   });
   socket.onAny((message, data) => {
-    if (verbose) {
+    if (config.verbose) {
       logMessage(message, data);
     }
   });
@@ -142,7 +156,7 @@ io.on("connection", (socket) => {
   socket.on("import", (name) => {
     const filepath = inputFile(`${name}.json`);
     if (fs.existsSync(filepath)) {
-      if (verbose) {
+      if (config.verbose) {
         logMessage("load", `${name}`);
       }
       const json = fs.readFileSync(filepath, "utf-8");
@@ -154,7 +168,7 @@ io.on("connection", (socket) => {
   });
 
   socket.on("disconnect", () => {
-    if (verbose) {
+    if (config.verbose) {
       logMessage("disconnect", "gui");
     }
   });
@@ -209,7 +223,7 @@ const exportProject = async (browser, config, jsonData, format) => {
   }
 };
 
-const puppeteer = require("puppeteer");
+import puppeteer from "puppeteer";
 
 const withBrowser = async (fun) => {
   try {
@@ -287,10 +301,10 @@ switch (config.mode) {
         throw new Error("input to watch should be a directory!");
       }
       logMessage("watch", `${config.input} -> ${config.output}`);
-      const runExports = async (file) => {
-        await exportAll();
-        logMessage("export", file);
-      };
+      // const runExports = async (file) => {
+      //   await exportAll();
+      //   logMessage("export", file);
+      // };
       fs.readdirSync(config.input).map((file) =>
         fs.watchFile(
           inputFile(file),

package/src/DeckView.elm

@@ -1,4 +1,4 @@
-module DeckView exposing (backface, cardSize, cornerRadius, frontface, includes)
+module DeckView exposing (backface, cardSize, cornerRadius, disabledMask, frontface, includes)
 
 import Deck exposing (..)
 import Svg exposing (Svg)
@@ -413,3 +413,23 @@ frontface w h model =
     , pipIcons
     , cornerLabels
     ]
+
+
+disabledMask : Float -> Float -> Svg msg
+disabledMask w h =
+    let
+        fill =
+            var "disabled"
+    in
+    Svg.rect
+        [ num A.width <| w
+        , num A.height <| h
+        , A.rx cornerRadius
+        , A.class "card-disabled-rect"
+        , A.ry cornerRadius
+        , A.fill fill
+        , A.opacity "0.65"
+        , A.stroke fill
+        , A.strokeWidth borderWidth
+        ]
+        []

package/src/Main.elm

@@ -3,7 +3,7 @@ port module Main exposing (main)
 import Browser
 import Card exposing (Card, makeCard)
 import Deck exposing (modelUsing, parseDeck)
-import DeckView exposing (backface, cardSize, cornerRadius, frontface, includes)
+import DeckView exposing (backface, cardSize, cornerRadius, disabledMask, frontface, includes)
 import Draggable
 import Draggable.Events exposing (onDragBy, onDragEnd)
 import File exposing (File)
@@ -16,7 +16,7 @@ import Json.Encode exposing (Value, encode, list, string)
 import Layout exposing (Spread(..), defaultSpread, spreadAsString, updateSpreadValue, validateSpreadValue)
 import Markdown
 import Palette exposing (Color(..), Palette, colorAsString, colorFromString, colorPicker, colorPickerWithTransparent, setPaletteColor)
-import Project exposing (Project, Shape, Shapes(..), Zorder(..), arrowEnds, arrowPoints, arrowPointsToPos, arrowTransform, getHighestShapeByPos, getLastId, getSelectedCardModels, getShapeById, mergeAll, positionCards, selectWithCovering, shapeId, shapeRect, shapeTransform, splitAll, stampRect)
+import Project exposing (Project, Shape, Shapes(..), Zorder(..), arrowEnds, arrowPoints, arrowPointsToPos, arrowTransform, getHighestShapeByPos, getLastId, getSelectedCardModels, getShapeById, mergeAll, positionCards, selectWithCovering, shapeId, shapeRect, shapeTransform, splitAll)
 import Rect exposing (..)
 import SaveFile exposing (Settings, decodeSaveFile, encodePalette, encodeSaveFile)
 import Svg exposing (Svg)
@@ -300,7 +300,7 @@ init flags =
                     decodeSaveFileIntoModel False
                         model
                         s
-                        (\m_ ->
+                        (\_ ->
                             Cmd.batch []
                         )
             in
@@ -1952,16 +1952,14 @@ snapPos model pos =
         { x = snapFloat xs pos.x, y = snapFloat ys pos.y }
 
 
-snapAngle : Model -> Float -> Float
-snapAngle _ angle =
-    -- if model.snap == 0 then
-    --     angle
-    -- else
-    --     snapFloat (360.0 / (toFloat model.snap * 4)) angle
-    angle
-
-
 
+-- snapAngle : Model -> Float -> Float
+-- snapAngle _ angle =
+--     -- if model.snap == 0 then
+--     --     angle
+--     -- else
+--     --     snapFloat (360.0 / (toFloat model.snap * 4)) angle
+--     angle
 ---------------------------------------- ⡄⠀⡄⠠⡤⠀⡤⠤⠄⡄⠀⡄⡠⠤⡀
 ---------------------------------------- ⢱⢰⠁⠀⡇⠀⡗⠒⠀⡇⡄⡇⠑⠒⡄
 ---------------------------------------- ⠀⠃⠀⠐⠓⠀⠓⠒⠂⠋⠈⠃⠑⠒⠁
@@ -3083,6 +3081,15 @@ arrowDefs =
         h =
             1.5
 
+        h2 =
+            h * 2
+
+        h3 =
+            h * 3
+
+        h4 =
+            h * 4
+
         w2 =
             w / 2.0
     in
@@ -3103,6 +3110,35 @@ arrowDefs =
                 ]
                 []
             ]
+        , Svg.marker
+            [ Attr.id "cross"
+            , num Attr.markerWidth h4
+            , num Attr.markerHeight h4
+            , num Attr.refX h2
+            , num Attr.refY h2
+            , Attr.orient "auto"
+            , Attr.markerUnits "strokeWidth"
+            , Attr.stroke "context-stroke"
+            ]
+            [ Svg.line
+                [ num Attr.x1 h
+                , num Attr.y1 h
+                , num Attr.x2 h3
+                , num Attr.y2 h3
+                , Attr.stroke "context-stroke"
+                , Attr.strokeLinecap "butt"
+                ]
+                []
+            , Svg.line
+                [ num Attr.x1 h3
+                , num Attr.y1 h
+                , num Attr.x2 h
+                , num Attr.y2 h3
+                , Attr.stroke "context-stroke"
+                , Attr.strokeLinecap "butt"
+                ]
+                []
+            ]
 
         -- , Svg.filter
         --     [ Attr.id "shadow" ]
@@ -3125,29 +3161,25 @@ dragEvent id =
 
 -- TODO customize arrow cap or distance?
 -- TODO respond to pivot and angle
-
-
-arcPath : Float -> ( Vec2, Vec2 ) -> String
-arcPath f ( a, b ) =
-    let
-        p v =
-            String.fromFloat v.x ++ " " ++ String.fromFloat v.y
-
-        m =
-            Vec.sub b a
-                |> Vec.scale 0.5
-
-        c =
-            Vec.vec2 0.0 f
-                |> Vec.rotate pi
-    in
-    "M " ++ p a ++ " Q " ++ p c ++ " " ++ p b
+-- arcPath : Float -> ( Vec2, Vec2 ) -> String
+-- arcPath f ( a, b ) =
+--     let
+--         p v =
+--             String.fromFloat v.x ++ " " ++ String.fromFloat v.y
+--         m =
+--             Vec.sub b a
+--                 |> Vec.scale 0.5
+--         c =
+--             Vec.vec2 0.0 f
+--                 |> Vec.rotate pi
+--     in
+--     "M " ++ p a ++ " Q " ++ p c ++ " " ++ p b
 
 
 arrowView : Model -> ( Vec2, Vec2 ) -> Arrow -> ( String, Svg Msg )
 arrowView model ( from, to ) a =
     let
-        ( rect, pivot, angle ) =
+        ( rect, _, angle ) =
             arrowTransform a ( from, to )
 
         c =
@@ -3185,6 +3217,9 @@ arrowView model ( from, to ) a =
                         Triangle ->
                             [ Attr.markerEnd (url "arrow") ]
 
+                        Cross ->
+                            [ Attr.markerEnd (url "cross") ]
+
                         -- TODO Arrow - cross head!
                         _ ->
                             []
@@ -3321,7 +3356,7 @@ incompleteArrow model =
 
 
 getColor : Model -> Color -> String
-getColor m c =
+getColor _ c =
     case c of
         Transparent ->
             "transparent"
@@ -3519,11 +3554,6 @@ zonesView model =
         |> Svg.Keyed.node "g" [ viewportAttr model ]
 
 
-inactiveFilter : String
-inactiveFilter =
-    "filter: brightness(50%)"
-
-
 draggedLeaderTransform : Model -> Shape -> ( Rect, Vec2, Float )
 draggedLeaderTransform m s =
     let
@@ -3667,13 +3697,6 @@ cardView m card =
                 ""
             )
         , HA.attribute "data-using" (encode 0 (list string (modelUsing model)))
-        , Attr.style
-            (if highlight then
-                ""
-
-             else
-                inactiveFilter
-            )
         , Attr.transform <|
             pivotRotate pivot rect.pos rect.size angle
                 ++ translateXY rect.pos
@@ -3688,6 +3711,12 @@ cardView m card =
             , [ Svg.text_ [ HA.style "font-size" "32px", Attr.fill "magenta" ] [ Svg.text <| card.id ]
                     |> maybeHtml m.debug
               ]
+            , if highlight then
+                []
+
+              else
+                [ disabledMask rect.size.x rect.size.y
+                ]
             ]
     )
 

package/src/Palette.elm

@@ -20,6 +20,7 @@ type Color
     | MidGray
     | LightGray
     | Transparent
+    | Disabled
 
 
 colorAsString : Color -> String
@@ -67,6 +68,9 @@ colorAsString c =
         Transparent ->
             "transparent"
 
+        Disabled ->
+            "disabled"
+
 
 colorFromString : String -> Color
 colorFromString s =
@@ -131,6 +135,7 @@ type alias Palette =
     , darkGray : String
     , midGray : String
     , lightGray : String
+    , disabled : String
     }
 
 
@@ -149,6 +154,7 @@ paletteAsList palette =
     , ( Blue, palette.blue )
     , ( Violet, palette.violet )
     , ( Pink, palette.pink )
+    , ( Disabled, palette.disabled )
     ]
 
 
@@ -197,6 +203,9 @@ getColor palette color =
         Transparent ->
             "#00000000"
 
+        Disabled ->
+            palette.disabled
+
 
 setPaletteColor : Palette -> Color -> String -> Palette
 setPaletteColor p c v =
@@ -240,6 +249,9 @@ setPaletteColor p c v =
         LightGray ->
             { p | lightGray = v }
 
+        Disabled ->
+            { p | disabled = v }
+
         Transparent ->
             p
 
@@ -255,7 +267,7 @@ colorPicker addTransparent palette message current =
                 |> List.map (\s -> List.map (\c -> ( c, getColor palette c )) s)
 
         colorButton : Int -> ( Color, String ) -> Html msg
-        colorButton i ( color, c ) =
+        colorButton _ ( color, c ) =
             let
                 name =
                     colorAsString color

package/src/Project.elm

@@ -1,14 +1,12 @@
 module Project exposing (..)
 
 import Card exposing (Card, defaultCard)
-import Deck exposing (modelAsShort, rankAsChar)
+import Deck exposing (modelAsShort)
 import DeckView exposing (cardSize)
-import Html.Attributes exposing (maxlength)
 import Layout exposing (Spread, spreadTransforms)
 import Palette exposing (Color(..), colorFromString)
-import Random exposing (initialSeed)
 import Rect exposing (Rect, RectCoordinate, center, enlarge, fromPoints, includeRect, modifyRect, normalizeRect, rect2, toPoints)
-import Util exposing (Id, mapNothing, moveTowardsLast, randf, randomFloat, randomOffset, shuffleList)
+import Util exposing (Id, mapNothing, randomOffset, shuffleList)
 import Vec exposing (Vec2)
 import Zone exposing (Arrow, Stamp, Zone)
 
@@ -90,7 +88,7 @@ selectWithCovering p id =
                                 [ ( id, shape ) ]
                                 all
 
-                        Zone zone ->
+                        Zone _ ->
                             [ ( id, shape ) ]
 
                         _ ->
@@ -712,7 +710,7 @@ arrowPoints ( ( fr, _, _ ), ( tr, _, _ ) ) =
         tc =
             Rect.center tr
 
-        d =
+        _ =
             0.42
 
         -- v1 =
@@ -761,13 +759,13 @@ arrowRect m a =
                 r =
                     normalizeRect from to
 
-                c =
+                _ =
                     center r
 
                 dir =
                     Vec.sub from to
 
-                l =
+                _ =
                     Vec.length dir
                         * 0.5
 
@@ -775,7 +773,7 @@ arrowRect m a =
                     atan2 dir.y dir.x
                         / (pi * 2.0)
 
-                angle =
+                _ =
                     rad
                         * 360.0
             in

package/src/SaveFile.elm

@@ -83,6 +83,7 @@ paletteDecoder =
         |> required "darkGray" D.string
         |> required "midGray" D.string
         |> required "lightGray" D.string
+        |> optional "disabled" D.string Theme.defaultDisabled
 
 
 
@@ -115,6 +116,7 @@ encodePalette p =
         , ( "darkGray", string p.darkGray )
         , ( "midGray", string p.midGray )
         , ( "lightGray", string p.lightGray )
+        , ( "disabled", string p.disabled )
         ]
 
 

package/src/Theme.elm

@@ -18,6 +18,7 @@ defaultPalette =
     , darkGray = "#333333"
     , midGray = "#666666"
     , lightGray = "#aaaaaa"
+    , disabled = "#dddddd"
     }
 
 
@@ -44,44 +45,49 @@ dark =
     }
 
 
+defaultDisabled : String
+defaultDisabled =
+    "#dddddd"
+
+
 ink : Palette
 ink =
-    { black = "#000000", white = "#ffffff", red = "#ff5252", orange = "#d64d00", yellow = "#eede4f", green = "#db6039", cyan = "#ff2305", blue = "#450b8e", violet = "#841010", pink = "#c70c00", darkGray = "#333333", midGray = "#737373", lightGray = "#cccccc" }
+    { black = "#000000", white = "#ffffff", red = "#ff5252", orange = "#d64d00", yellow = "#eede4f", green = "#db6039", cyan = "#ff2305", blue = "#450b8e", violet = "#841010", pink = "#c70c00", darkGray = "#333333", midGray = "#737373", lightGray = "#cccccc", disabled = defaultDisabled }
 
 
 earth : Palette
 earth =
-    { black = "#303419", white = "#ffffff", red = "#d65f1f", orange = "#868a5c", yellow = "#ccc47f", green = "#677a48", cyan = "#222a2a", blue = "#587a1f", violet = "#412a2a", pink = "#f1bab6", darkGray = "#000000", midGray = "#758264", lightGray = "#ccdfb9" }
+    { black = "#303419", white = "#ffffff", red = "#d65f1f", orange = "#868a5c", yellow = "#ccc47f", green = "#677a48", cyan = "#222a2a", blue = "#587a1f", violet = "#412a2a", pink = "#f1bab6", darkGray = "#000000", midGray = "#758264", lightGray = "#ccdfb9", disabled = defaultDisabled }
 
 
 gem : Palette
 gem =
-    { black = "#191d34", white = "#ffffff", red = "#ff4292", orange = "#e5e4c8", yellow = "#b69aa4", green = "#152c47", cyan = "#02435f", blue = "#00648f", violet = "#602f46", pink = "#f8afc5", darkGray = "#000000", midGray = "#81cedf", lightGray = "#bcebf5" }
+    { black = "#191d34", white = "#ffffff", red = "#ff4292", orange = "#e5e4c8", yellow = "#b69aa4", green = "#152c47", cyan = "#02435f", blue = "#00648f", violet = "#602f46", pink = "#f8afc5", darkGray = "#000000", midGray = "#81cedf", lightGray = "#bcebf5", disabled = defaultDisabled }
 
 
 royal : Palette
 royal =
-    { black = "#003e52", white = "#ffffff", red = "#ff4d00", orange = "#ff7629", yellow = "#ff9900", green = "#3aa68c", cyan = "#1c5959", blue = "#008bc7", violet = "#a30000", pink = "#db4343", darkGray = "#0076a8", midGray = "#188686", lightGray = "#adfbdf" }
+    { black = "#003e52", white = "#ffffff", red = "#ff4d00", orange = "#ff7629", yellow = "#ff9900", green = "#3aa68c", cyan = "#1c5959", blue = "#008bc7", violet = "#a30000", pink = "#db4343", darkGray = "#0076a8", midGray = "#188686", lightGray = "#adfbdf", disabled = defaultDisabled }
 
 
 mono : Palette
 mono =
-    { black = "#000000", white = "#ffffff", red = "#cc2e2e", orange = "#949494", yellow = "#b8b8b8", green = "#c4c4c4", cyan = "#e6e6e6", blue = "#2b2b2b", violet = "#3b3b3b", pink = "#4f4f4f", darkGray = "#141414", midGray = "#737373", lightGray = "#cccccc" }
+    { black = "#000000", white = "#ffffff", red = "#cc2e2e", orange = "#949494", yellow = "#b8b8b8", green = "#c4c4c4", cyan = "#e6e6e6", blue = "#2b2b2b", violet = "#3b3b3b", pink = "#4f4f4f", darkGray = "#141414", midGray = "#737373", lightGray = "#cccccc", disabled = defaultDisabled }
 
 
 aqua : Palette
 aqua =
-    { black = "#000000", white = "#ffffff", red = "#21a198", orange = "#6f88b8", yellow = "#a5b7e3", green = "#8a9cff", cyan = "#ccddff", blue = "#0d2344", violet = "#002175", pink = "#2b3691", darkGray = "#010042", midGray = "#3852ad", lightGray = "#99afff" }
+    { black = "#000000", white = "#ffffff", red = "#21a198", orange = "#6f88b8", yellow = "#a5b7e3", green = "#8a9cff", cyan = "#ccddff", blue = "#0d2344", violet = "#002175", pink = "#2b3691", darkGray = "#010042", midGray = "#3852ad", lightGray = "#99afff", disabled = defaultDisabled }
 
 
 gold : Palette
 gold =
-    { black = "#3d1d10", white = "#7d7d7d", red = "#ddab64", orange = "#dc7138", yellow = "#d0a27c", green = "#3db872", cyan = "#5bb2be", blue = "#000000", violet = "#ad53c6", pink = "#ee8bb6", darkGray = "#141414", midGray = "#424242", lightGray = "#f5f5f5" }
+    { black = "#3d1d10", white = "#7d7d7d", red = "#ddab64", orange = "#dc7138", yellow = "#d0a27c", green = "#3db872", cyan = "#5bb2be", blue = "#000000", violet = "#ad53c6", pink = "#ee8bb6", darkGray = "#141414", midGray = "#424242", lightGray = "#f5f5f5", disabled = defaultDisabled }
 
 
 old : Palette
 old =
-    { black = "#4a5440", white = "#fde6c4", red = "#e34a4a", orange = "#d6ad71", yellow = "#b58712", green = "#3b5450", cyan = "#527575", blue = "#43637a", violet = "#698996", pink = "#c48787", darkGray = "#2c2321", midGray = "#3f3631", lightGray = "#c5ac96" }
+    { black = "#4a5440", white = "#fde6c4", red = "#e34a4a", orange = "#d6ad71", yellow = "#b58712", green = "#3b5450", cyan = "#527575", blue = "#43637a", violet = "#698996", pink = "#c48787", darkGray = "#2c2321", midGray = "#3f3631", lightGray = "#c5ac96", disabled = defaultDisabled }
 
 
 themes : List ( String, Palette )