desck 0.4.2

package/.gitlab-ci.yml

@@ -0,0 +1,21 @@
+# The Docker image that will be used to build your app
+image: node:lts
+# Functions that should be executed before the build script is run
+
+before_script:
+  - npm install -g elm
+pages:
+  cache:
+    paths:
+    - elm-stuff/
+  script:
+    - elm make src/Main.elm --output=public/main.js --optimize
+    - cp README.md public/
+  artifacts:
+    paths:
+      # The folder that contains the files to be exposed at the Page URL
+      - public
+  rules:
+    # This ensures that only pushes to the default branch will trigger
+    # a pages deploy
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

package/README.md

@@ -0,0 +1,176 @@
+# Desck
+
+A card layout editor made for creating example images for card games using the standard deck.
+
+[live demo](https://unlessgames.gitlab.io/desck)
+
+If you enjoy this tool, consider [donating♥](https://ko-fi.com/unlessgames)!
+
+## Install
+
+```bash
+npm install
+```
+
+## Build
+
+```bash
+elm make src/Main.elm --output=public/main.js --optimize
+npm link
+```
+
+## Run
+
+```bash
+desck
+```
+
+## Help
+
+There are four main layers in Desck
+
+* `Zones ⌧` where you can have rectangles with optional text labels for showing discard piles and other areas of your layout
+* `Cards 🂠` to contain all the cards in examples
+* `Arrows ↣` can have arrows pointing from cards to other cards or zones to illustrate things that can be played and so on
+* `Stamps ✪` are colored circles with a symbol or text inside, useful for referencing from rulebooks for example
+
+### Cards
+
+* Select cards by clicking them or dragging a selection box around them
+* Add cards to the selection by holding down `Ctrl` while clicking on a new card
+* `Click+Drag` selected cards to move them
+* `Alt+Drag` rotate card freely
+* `Alt-click` on a card to rotate sideways
+* `Right-click` to flip between back and front
+* `Alt+Right-click` to toggle highlighting the card
+
+#### Spawning
+
+At the bottom, you can type in what card(s) you want into the first input field and spawn them by pressing enter
+* Specify cards via `rank + suit` syntax
+	- `3s` is the 3 of Spades
+	- `ac` is the Ace of Clubs
+	- `0h` is the 10 of Hearts
+	- `jd` is the Jack of Diamonds
+	- `q` will spawn all 4 Queens
+	- `s` will spawn all Spades
+	- `xr` is the red Joker (black is `xb`)
+	- spawn multiple cards by separating with space like `as 2d 3c 4h`
+
+#### Modification
+
+You can change the rank and suit of selected cards by rewriting their codes at the bottom and pressing `Enter`. For example, if you select the Ace of Spades, `as` will appear in the bottom, if you change it to `2s` and press the `Enter` key, the card will change to the Two of Spades.
+
+#### Ordering
+
+* Toggle between `move to top` and `keep order` behaviours, the former will bring whatever card you pick up to the top
+
+#### Spread
+
+If you have multiple cards selected you can automatically spread them using different methods and spread amount.
+* Select multiple cards
+* Choose a spread type via the `🠚 🠛 ➘ ⇉ ⇊ 🂠 ⌓` buttons
+* Adjust the spread amount at the end to customize the spread like how far cards should be offset or how many columns to use
+* Hover the spread type buttons to see their names
+
+#### Shuffle
+* Click `shuffle` to randomly swap cards inside a selection
+
+### Zones
+
+* Lock the zones layer by pressing `⌧`, when locked, you will not be able to accidently interact with already created zones
+* `Right-click+Drag` to select a rectangle as a new zone
+* `Alt+Drag` on the background also works
+* Click on existing zones to edit their values
+* Change label, fill color, border stroke width, font size, border dashes and so on
+* You can pick transparent in color pickers (empty shape) to create text labels without background or border
+
+### Arrows
+
+* `Right-click+Drag` from a card or a zone to start an arrow
+* Let go of the drag over another card or zone
+* An arrow will be created pointing from the first shape to the second
+* `Shift+Drag` also works
+* Click on an existing arrow to change it's color and other settings
+
+### Stamps
+
+Similar to spawning cards, you can use the second input field at the bottom to spawn a stamp with some text inside, you can select spawned stamps to change their content, the stamp menu has some useful unicode symbols for quick addition but you can use any UTF-8 character you want
+
+### Removal
+
+* Select the shapes you want to remove and click `Remove`
+* `Shift+Right-click` will also work
+* Press `↺` to `Undo` your last change
+
+
+### Palette
+
+* In the `◍ Settings` menu you can modify the color palette used for everything
+* Pick a built-in theme 
+* Slect colors to configure
+* The changes apply to any existing element
+
+
+### Viewport
+
+Set the position and size of the viewport. The coordinates are in "card space", a size of 3x2 will mean that the view will spawn 3 times the width of cards and 2 times their height.
+* Scroll to zoom in and out
+* `Middle-click+Drag` to `Pan` around
+
+
+### Files
+
+You can export three different formats from Desck:
+* `⤓ SVG` - will download the image as scalable vector graphics
+* `⤓ PNG` - will render a `.png` image with a size corresponding to the number you've set next to this button. The value sets the height of a card in pixels. This lets you maintain the same card size regardless of the zoom of your project.
+* `⤓ JSON` - will export a `.json` file that contains the project's data without the visuals
+* `load` - can import a `.json` file to continue working on a previous project
+
+There are a few other buttons in the top left corner
+* `save` will store your current project in your browser's cache (make sure to export files to avoid losing progress when you clear your browser history)
+* `clone` will start a new project based on the current one, you will be prompted to give it a new name
+
+> If you download the [Desck source](https://gitlab.com/unlessgames/desck) you can run the project locally using `node`, in this case Desck will be able to save and load files from it's export folder instead of having to rely on browser cache. If you are comfortable with git and using node and npm, this is the intended way of working with Desck. The online version is mainly for trying the program out.
+
+## Automated Exporting
+
+When running locally via the node server, you can batch convert all your project files into `.svg` or `.png` images at once and save into the `exports` folder inside the project (useful for updating a rulebook on a git repo with continuous integration enabled [link to our rulebook needed](TODO implement build in deck))
+* `desck <SOURCE_FOLDER> <OUTPUT_FOLDER> --export --svg` - exports all files as `.svg`
+* `desck <SOURCE_FOLDER> <OUTPUT_FOLDER> --export --svg` - exports all files as `.png` (resolution will be decided based on the project file's settings)
+
+<!-- ### Title -->
+
+<!-- * Click `🖹` -->
+<!-- * Add a short description to the exported SVG -->
+<!-- * This text will be written to the `title` attribute and can be used to render a description (or just keep as a hover tooltip) -->
+
+<!-- ## Extending -->
+
+<!-- While this isn't well supported yet, you could replace the set that makes up the deck by supplying your own CardModel type and graphics and exposing a handful of functions (see `Deck.elm` and `DeckView.elm` for the built-in standard deck) -->
+
+<!-- Currently, these are the things that are expected to exist -->
+
+<!-- * `type CardModel` - represents a single card, for example `type CardModel = Int` would represent cards that only have an integer property -->
+<!-- * `modelAsShort : CardModel -> String` - used for spawning and modifying selected cards -->
+<!-- * `parseCards : String -> List CardModel` - used for parsing the spawn query and modifications, if the conversion fails an empty list is expected, this is a list instead of a `Maybe CardModel` - so that shorthands for sets (like `j` for all `Jacks`) is possible when spawning -->
+<!-- * `encodeModel : CardModel -> Json.Encode.Value` - used to serialize cards when saving as JSON -->
+<!-- * `modelDecoder : Json.Decode.Decoder CardModel` - used to decode a saved project -->
+<!-- * `modelUsing : CardModel -> List String` - returns a list of symbol ids that the card is using to filter out unneeded symbols from the svg export -->
+<!-- * `defaulModel : CardModel` - a default card -->
+
+<!-- And a few more that are used to show the cards, these should return `Svg` elements -->
+
+<!-- * `backface : CardModel -> Svg msg` - shows the back-side of a card -->
+<!-- * `frontface : CardModel -> Svg msg` - shows the front-side of a card -->
+<!-- * `corderRadius : String` - sets the corner radius of every card shown (for example `"8"`) -->
+<!-- * `includes : List (Svg msg)` - this is added to the main SVG element before anything else, useful for reusable `def` symbols -->
+
+## Acknowledments
+
+* images for royal cards and the card font were converted from [Total Nonsense - Open Source Vector Playing Cards](https://totalnonsense.com/open-source-vector-playing-cards/) licensed under [LGPL-3.0](https://www.gnu.org/licenses/lgpl-3.0.html)
+* suit symbols were designed by Petra Hahn
+
+## Support
+
+If you enjoy this tool, consider [donating♥](https://ko-fi.com/unlessgames)!

package/desck.cjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("./server.cjs");

package/elm.json

@@ -0,0 +1,39 @@
+{
+  "type": "application",
+  "source-directories": [
+    "src"
+  ],
+  "elm-version": "0.19.2",
+  "dependencies": {
+    "direct": {
+      "NoRedInk/elm-json-decode-pipeline": "1.0.1",
+      "avh4/elm-color": "1.0.0",
+      "elm/browser": "1.0.2",
+      "elm/core": "1.0.5",
+      "elm/file": "1.0.5",
+      "elm/html": "1.0.0",
+      "elm/json": "1.1.3",
+      "elm/random": "1.0.0",
+      "elm/svg": "1.0.1",
+      "elm-community/list-extra": "8.7.0",
+      "elm-community/random-extra": "3.2.0",
+      "elm-explorations/linear-algebra": "1.0.3",
+      "matthewsj/elm-ordering": "2.0.0",
+      "pablohirafuji/elm-markdown": "2.0.5",
+      "rtfeldman/elm-hex": "1.0.0",
+      "zaboco/elm-draggable": "5.0.0"
+    },
+    "indirect": {
+      "elm/bytes": "1.0.8",
+      "elm/regex": "1.0.0",
+      "elm/time": "1.0.0",
+      "elm/url": "1.0.0",
+      "elm/virtual-dom": "1.0.3",
+      "mpizenberg/elm-pointer-events": "4.0.2"
+    }
+  },
+  "test-dependencies": {
+    "direct": {},
+    "indirect": {}
+  }
+}

package/justfile

@@ -0,0 +1,13 @@
+set shell := ["bash", "-c"]
+
+build:
+	elm make src/Main.elm --output=public/main.js --optimize
+
+run:
+	node server.cjs
+
+build-debug:
+	elm make src/Main.elm --output=public/main.js --debug
+		
+dev:
+	node server.cjs & ls src/* | entr just build-debug

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "desck",
+  "version": "0.4.2",
+  "description": "A card layout editor made for creating example images for our card games using the standard deck.",
+  "main": "server.cjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx elm make src/Main.elm --output=public/main.js --optimize && cp README.md public/",
+    "prepare": "npm run build",
+    "start": "node server.cjs"
+  },
+  "author": "Akos Plesznivy",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "puppeteer": "^24.10.0",
+    "socket.io": "^4.8.0"
+  },
+  "bin": {
+    "desck": "./desck.cjs"
+  },
+  "devDependencies": {
+    "elm": "^0.19.2-0"
+  }
+}

package/public/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <!-- <meta name="theme-color" content="#000000"> -->
+    <!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" > -->
+    <!-- <link rel="manifest" href="manifest.json"> -->
+    <!-- <link rel="icon" href="favicon.ico"> -->
+    <link rel="stylesheet" href="style.css">
+    <title>desck</title>
+</head>
+
+<body>
+    <noscript>
+        You need to enable JavaScript to run this app.
+    </noscript>
+    <svg type="image/svg+xml" id="symbols"></svg>
+    <div id="main">
+        <div id="header"></div>
+        <div id="view"></div>
+        <div id="footer"></div>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+    <script type="text/javascript" src="script.js"></script>
+</body>
+
+</html>

package/public/palette.json

@@ -0,0 +1,16 @@
+{
+  "black": "#000000",
+  "white": "#dddddd",
+  "red": "#df0000",
+  "orange": "#df8200",
+  "yellow": "#e2d200",
+  "green": "#22da44",
+  "cyan": "#22ba99",
+  "blue": "#1156a1",
+  "violet": "#550099",
+  "pink": "#bb5599",
+  "darkGray": "#222222",
+  "midGray": "#555555",
+  "lightGray": "#aaaaaa",
+  "user": []
+}

package/public/projects/something.json

@@ -0,0 +1,139 @@
+{
+    "name": "something",
+    "project": {
+        "description": "",
+        "viewport": {
+            "pos": {
+                "x": 173.55371900826424,
+                "y": 91.11570247933878
+            },
+            "size": {
+                "x": 1652.8925619834715,
+                "y": 867.7685950413224
+            }
+        },
+        "cards": [
+            {
+                "model": "ac",
+                "rect": {
+                    "pos": {
+                        "x": 534.8591549295775,
+                        "y": 358.8732394366197
+                    },
+                    "size": {
+                        "x": 250,
+                        "y": 350
+                    }
+                },
+                "rot": {
+                    "angle": 0,
+                    "pivot": {
+                        "x": 0.5,
+                        "y": 0.5
+                    }
+                },
+                "front": true,
+                "highlight": true,
+                "id": "c3",
+                "z": 0
+            },
+            {
+                "model": "ad",
+                "rect": {
+                    "pos": {
+                        "x": 784.8591549295775,
+                        "y": 358.8732394366197
+                    },
+                    "size": {
+                        "x": 250,
+                        "y": 350
+                    }
+                },
+                "rot": {
+                    "angle": 0,
+                    "pivot": {
+                        "x": 0.5,
+                        "y": 0.5
+                    }
+                },
+                "front": true,
+                "highlight": true,
+                "id": "c2",
+                "z": 1
+            },
+            {
+                "model": "ah",
+                "rect": {
+                    "pos": {
+                        "x": 1034.8591549295775,
+                        "y": 358.8732394366197
+                    },
+                    "size": {
+                        "x": 250,
+                        "y": 350
+                    }
+                },
+                "rot": {
+                    "angle": 0,
+                    "pivot": {
+                        "x": 0.5,
+                        "y": 0.5
+                    }
+                },
+                "front": true,
+                "highlight": true,
+                "id": "c1",
+                "z": 2
+            },
+            {
+                "model": "as",
+                "rect": {
+                    "pos": {
+                        "x": 1284.8591549295775,
+                        "y": 358.8732394366197
+                    },
+                    "size": {
+                        "x": 250,
+                        "y": 350
+                    }
+                },
+                "rot": {
+                    "angle": 0,
+                    "pivot": {
+                        "x": 0.5,
+                        "y": 0.5
+                    }
+                },
+                "front": true,
+                "highlight": true,
+                "id": "c0",
+                "z": 3
+            }
+        ],
+        "zones": [],
+        "arrows": []
+    },
+    "palette": {
+        "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"
+    },
+    "settings": {
+        "embedSymbols": true,
+        "stripData": false,
+        "mapColors": true,
+        "mapFont": true,
+        "primaryFont": null,
+        "secondaryFont": null
+    }
+}

package/public/projects/template.json

@@ -0,0 +1,69 @@
+{
+    "name": "template",
+    "project": {
+        "description": "",
+        "background": "transparent",
+        "viewport": {
+            "pos": {
+                "x": -3468.624750374862,
+                "y": -56.49966716648288
+            },
+            "size": {
+                "x": 1139.2495007497241,
+                "y": 1518.9993343329659
+            }
+        },
+        "cards": [
+            {
+                "model": "ah",
+                "rect": {
+                    "pos": {
+                        "x": -3024,
+                        "y": 528
+                    },
+                    "size": {
+                        "x": 250,
+                        "y": 350
+                    }
+                },
+                "rot": {
+                    "angle": 360,
+                    "pivot": {
+                        "x": 0.5,
+                        "y": 0.5
+                    }
+                },
+                "front": true,
+                "highlight": true,
+                "id": "c40",
+                "z": 4
+            }
+        ],
+        "zones": [],
+        "arrows": [],
+        "stamps": []
+    },
+    "palette": {
+        "black": "#111111",
+        "white": "#eeeeee",
+        "red": "#df0000",
+        "orange": "#bb6600",
+        "yellow": "#ebeb0a",
+        "green": "#12be12",
+        "cyan": "#12be80",
+        "blue": "#1234de",
+        "violet": "#8212d3",
+        "pink": "#e212e2",
+        "darkGray": "#333333",
+        "midGray": "#666666",
+        "lightGray": "#aaaaaa"
+    },
+    "settings": {
+        "embedSymbols": false,
+        "stripData": false,
+        "mapColors": true,
+        "mapFont": true,
+        "primaryFont": null,
+        "secondaryFont": null
+    }
+}