desck 0.4.3 → 0.4.5

package/desck.cjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require("./server.cjs");
+require(`${__dirname}/server.mjs`);

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "desck",
-  "version": "0.4.3",
+  "author": "Akos Plesznivy",
+  "version": "0.4.5",
   "description": "A card layout editor made for creating example images for our card games using the standard deck.",
-  "main": "server.cjs",
+  "main": "server.mjs",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "elm make src/Main.elm --output=public/main.js --optimize && cp README.md public/",
-    "prepare": "npm run build",
     "prepack": "npm run build",
-    "postinstall": "npm run build",
     "start": "node server.cjs"
   },
-  "author": "Akos Plesznivy",
   "license": "ISC",
   "dependencies": {
     "express": "^4.21.1",
@@ -22,7 +20,8 @@
   "files": [
     "./public/",
     "./src/",
-    "./server.cjs",
+    "./server.mjs",
+    "./settings.json",
     "./desck.cjs"
   ],
   "bin": {

package/public/main.js

@@ -17393,6 +17393,7 @@ var $author$project$Project$Zoom = function (a) {
 var $elm$svg$Svg$trustedNode = _VirtualDom_nodeNS('http://www.w3.org/2000/svg');
 var $elm$svg$Svg$defs = $elm$svg$Svg$trustedNode('defs');
 var $elm$svg$Svg$Attributes$fill = _VirtualDom_attribute('fill');
+var $elm$svg$Svg$line = $elm$svg$Svg$trustedNode('line');
 var $elm$svg$Svg$marker = $elm$svg$Svg$trustedNode('marker');
 var $elm$svg$Svg$Attributes$markerHeight = _VirtualDom_attribute('markerHeight');
 var $elm$svg$Svg$Attributes$markerUnits = _VirtualDom_attribute('markerUnits');
@@ -17407,10 +17408,19 @@ var $elm$svg$Svg$Attributes$points = _VirtualDom_attribute('points');
 var $elm$svg$Svg$polygon = $elm$svg$Svg$trustedNode('polygon');
 var $elm$svg$Svg$Attributes$refX = _VirtualDom_attribute('refX');
 var $elm$svg$Svg$Attributes$refY = _VirtualDom_attribute('refY');
+var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
+var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
+var $elm$svg$Svg$Attributes$x1 = _VirtualDom_attribute('x1');
+var $elm$svg$Svg$Attributes$x2 = _VirtualDom_attribute('x2');
+var $elm$svg$Svg$Attributes$y1 = _VirtualDom_attribute('y1');
+var $elm$svg$Svg$Attributes$y2 = _VirtualDom_attribute('y2');
 var $author$project$Main$arrowDefs = function () {
 	var w = 3.0;
 	var w2 = w / 2.0;
 	var h = 1.5;
+	var h2 = h * 2;
+	var h3 = h * 3;
+	var h4 = h * 4;
 	return A2(
 		$elm$svg$Svg$defs,
 		_List_Nil,
@@ -17440,6 +17450,46 @@ var $author$project$Main$arrowDefs = function () {
 								'0,0 0,' + ($elm$core$String$fromFloat(w) + (' ' + ($elm$core$String$fromFloat(h) + (',' + $elm$core$String$fromFloat(w2))))))
 							]),
 						_List_Nil)
+					])),
+				A2(
+				$elm$svg$Svg$marker,
+				_List_fromArray(
+					[
+						$elm$svg$Svg$Attributes$id('cross'),
+						A2($author$project$Util$num, $elm$svg$Svg$Attributes$markerWidth, h4),
+						A2($author$project$Util$num, $elm$svg$Svg$Attributes$markerHeight, h4),
+						A2($author$project$Util$num, $elm$svg$Svg$Attributes$refX, h2),
+						A2($author$project$Util$num, $elm$svg$Svg$Attributes$refY, h2),
+						$elm$svg$Svg$Attributes$orient('auto'),
+						$elm$svg$Svg$Attributes$markerUnits('strokeWidth'),
+						$elm$svg$Svg$Attributes$stroke('context-stroke')
+					]),
+				_List_fromArray(
+					[
+						A2(
+						$elm$svg$Svg$line,
+						_List_fromArray(
+							[
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$x1, h),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$y1, h),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$x2, h3),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$y2, h3),
+								$elm$svg$Svg$Attributes$stroke('context-stroke'),
+								$elm$svg$Svg$Attributes$strokeLinecap('butt')
+							]),
+						_List_Nil),
+						A2(
+						$elm$svg$Svg$line,
+						_List_fromArray(
+							[
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$x1, h3),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$y1, h),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$x2, h),
+								A2($author$project$Util$num, $elm$svg$Svg$Attributes$y2, h3),
+								$elm$svg$Svg$Attributes$stroke('context-stroke'),
+								$elm$svg$Svg$Attributes$strokeLinecap('butt')
+							]),
+						_List_Nil)
 					]))
 			]));
 }();
@@ -17518,7 +17568,6 @@ var $author$project$Main$getColor = F2(
 			return 'var(--' + ($author$project$Palette$colorAsString(c) + ')');
 		}
 	});
-var $elm$svg$Svg$line = $elm$svg$Svg$trustedNode('line');
 var $elm$svg$Svg$Attributes$markerEnd = _VirtualDom_attribute('marker-end');
 var $author$project$Util$transform = F3(
 	function (op, ls, sep) {
@@ -17563,8 +17612,6 @@ var $author$project$Main$preventContextMenu = A2(
 		_Utils_Tuple2(
 			$author$project$Main$Noop(''),
 			true)));
-var $elm$svg$Svg$Attributes$stroke = _VirtualDom_attribute('stroke');
-var $elm$svg$Svg$Attributes$strokeLinecap = _VirtualDom_attribute('stroke-linecap');
 var $elm$svg$Svg$Attributes$strokeWidth = _VirtualDom_attribute('stroke-width');
 var $elm$svg$Svg$text = $elm$virtual_dom$VirtualDom$text;
 var $elm$svg$Svg$text_ = $elm$svg$Svg$trustedNode('text');
@@ -17584,10 +17631,6 @@ var $author$project$Util$translateXY = function (pos) {
 var $author$project$Util$url = function (s) {
 	return 'url(#' + (s + ')');
 };
-var $elm$svg$Svg$Attributes$x1 = _VirtualDom_attribute('x1');
-var $elm$svg$Svg$Attributes$x2 = _VirtualDom_attribute('x2');
-var $elm$svg$Svg$Attributes$y1 = _VirtualDom_attribute('y1');
-var $elm$svg$Svg$Attributes$y2 = _VirtualDom_attribute('y2');
 var $author$project$Main$arrowView = F3(
 	function (model, _v0, a) {
 		var from = _v0.a;
@@ -17640,14 +17683,21 @@ var $author$project$Main$arrowView = F3(
 								]),
 							function () {
 								var _v2 = a.bt;
-								if (_v2 === 1) {
-									return _List_fromArray(
-										[
-											$elm$svg$Svg$Attributes$markerEnd(
-											$author$project$Util$url('arrow'))
-										]);
-								} else {
-									return _List_Nil;
+								switch (_v2) {
+									case 1:
+										return _List_fromArray(
+											[
+												$elm$svg$Svg$Attributes$markerEnd(
+												$author$project$Util$url('arrow'))
+											]);
+									case 2:
+										return _List_fromArray(
+											[
+												$elm$svg$Svg$Attributes$markerEnd(
+												$author$project$Util$url('cross'))
+											]);
+									default:
+										return _List_Nil;
 								}
 							}()),
 						_List_Nil),

package/public/script.js

@@ -134,13 +134,13 @@ function exportSymbols(settings) {
 
   const backface = svg.querySelector("#backface");
 
-  if (settings.stripBackface) {
+  if (backface && settings.stripBackface) {
     backface.id = null;
   }
 
   let data = new XMLSerializer().serializeToString(svg.querySelector("#defs"));
 
-  if (settings.stripBackface) {
+  if (backface && settings.stripBackface) {
     backface.id = "backface";
   }
 
@@ -453,6 +453,10 @@ async function init() {
   //   "./svg/backface.svg",
   //   document.querySelector(symbol_container),
   // );
+  // loadSymbolsInto(
+  //   "./svg/backface.svg",
+  //   document.querySelector(symbol_container),
+  // );
 
   let mods = {
     ctrl: false,

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) || 8000,
+    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,7 +122,7 @@ io.on("connection", (socket) => {
   const readProjects = () => {
     return readFiles(config.input);
   };
-  if (verbose) {
+  if (config.verbose) {
     logMessage("connect", "gui");
   }
   let files = 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 {

package/settings.json

@@ -0,0 +1,10 @@
+{
+  "stripData": true,
+  "embedSymbols": false,
+  "mapColors": false,
+  "mapFont": false,
+  "stripBackface": true,
+  "primaryFont": null,
+  "secondaryFont": null,
+  "heightPixels": 128
+}

package/src/Main.elm

@@ -3083,6 +3083,15 @@ arrowDefs =
         h =
             1.5
 
+        h2 =
+            h * 2
+
+        h3 =
+            h * 3
+
+        h4 =
+            h * 4
+
         w2 =
             w / 2.0
     in
@@ -3103,6 +3112,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" ]
@@ -3185,6 +3223,9 @@ arrowView model ( from, to ) a =
                         Triangle ->
                             [ Attr.markerEnd (url "arrow") ]
 
+                        Cross ->
+                            [ Attr.markerEnd (url "cross") ]
+
                         -- TODO Arrow - cross head!
                         _ ->
                             []