seiyria/deck.zone

A board game creation tool.

deck.zone

Setup

• clone repo
• npm i
• npm start

Adding a New Plugin

• Create the .ne file in decklang/plugins
• Include the .ne file in decklang/_directives
• Add the new directive to the Directives -> line in decklang/_directives
• Add a definition file in src/decklang/plugins/
• Add the export for the definition file in src/decklang/plugins/_plugins.js

deck.zone's Issues

support if/ifnot statements

these would primarily be used in conjunction with google spreadsheet parsing (but don't have to be). thusly, their syntax is dependent on what the google spreadsheet parsing syntax looks like

for now, lets say:

check = <x> == 10
endcheck

check = <string> == "Mage"
endcheck

operators to support:

• == (translates to ===)
• != (translates to !==)

• =

• <=
• <

undefined variables should throw errors

if you use a variable that doesn't exist, errors should be thrown

export to thegamecrafter

this should be available

hashloop syntax

since jagged array support will need to be a thing (for making even a simple game like werewolf), I propose a hashloop. Take for example, a deck of cards:

loop = <suit> in { "Spade", "Diamond", "Club", "Heart"}
    loop = <card> in { "A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K" }

        text = <card_index + (card_length * suit_index)>, "<suit>", 0, 5, 6, 2, center

        text = <card_index + (card_length * suit_index)>, "<card>", 0, 2, 6, 4, center

    endloop
endloop

Let's instead make a game of werewolf:

loop = <type> in { "Seer": 1, "Defender": 1, "Werewolf": 2, "Villager": 7 }
    loop = <count = 0> to <type_value>
        text = <type_index + (count * type_index)>, "<type>", 0, 0, 6, 2, center
    endloop
endloop

(or something like that)

Additionally, for..to loops might need to support variables as a goal. TODO:

• hashloop syntax
• hashloop function
• verify for..to loop goal supports variables

print styles need to be addressed

• show print style on result page (page-break-*)
• unfloat divs,
• remove max-height
• support a4, etc page sizes
• support all TGC card sizes (poker, bridge, etc)

use @page to set margins and orientation and page size, remove them from the page style block

probably more.

add && and || to checks

right now, multiple checks that do the same thing might look like this:

        check = <suit> == "Diamond"
            font = [RedSuit]
        endcheck

        check = <suit> == "Heart"
            font = [RedSuit]
        endcheck

there should be and and or logical operators. they should probably also support parenthetical nesting.

image directive

there should be a directive to insert an image from either a resource (#26) or from a URL

drag & drop GUI tool

it should be possible to drag & drop various components to build cards. implementation and scope TBD

favicon

maybe some kinda cards or hand of cards or something

global directives to support

• page (page=29.7cm, 21cm)
• cardsize
• margin (margin=left, right, top, bottom)
• gap (gap=horizgap, vertgap)

run parser in realtime

show errors in the ace margin

firebase validations

project.name -> max length 30
project.script.name -> max length 20
project.resource.name -> max length 20

interpolated strings in Ace

when doing something like "Title <x>" the <x> should be a brighter color (similar to docstrings in languages) to show that it's being interpolated.

additionally, the same thing has to be done for variable expressions that contain actual variables (like [test]) in them.

collapsible zones

The script/resource panels should be collapsible to a sidebar (ie, all the way to the left). Additionally, the preview pane should be collapsible and auto-rendering should only happen if it is visible.

grammar for editor

for now, there should only be two directives, text, which takes, in order: index, text, x, y, width, height and font, which takes, in order: family, size, attributes, htmlcolor

Examples:

font=Arial, 16, BU, #f0f0f0
text=1, "test", 0, 0, 1, 1

investigate using nearley to generate the grammar, and attempt to make an ace edit mode that is compatible with one generation step.

This should ultimately compile down to some javascript that looks like this:

text({ index: 1, x: 0, y: 0, width: 1, height: 1, string: 'test' });

Variables

shortly after, variables will need to be supported. variables are simply string substitution, so:

[TitleFont]=Arial, 16, BB, #000000
font=[TitleFont]

... would compile to:

font=Arial, 16, BB, #000000

• write a regex to rip out every variable and value
• go through each variable and splitjoin it in the source file
• remove variable declarations

Loops

Basic loop:

loop = <x = 0> to 10
text = <x>, "Test<x>", 0, <x>, 1, 2
endloop

More advanced loop:

loop = <x = 3> to 13
text = <x + 1>, "Test<x - 1>", 0, <x * 2>, 1, 2
endloop

Loop with vars (should be taken care of):

[Max] = 20
loop = <x = 0> to [Max]
text = <x>, "Test<x>", 0, <x>, 1, 2
endloop

Use math.js for evaluating these loops

It should also support looping over arbitrary values:

loop = <x>, <i> in { "Mage", "Thief", "Warrior", "Cleric" }
text= <i>, <x>, 0, 0, 1, 1
endloop

In this case, there's an index variable. It would also have to support nested loops so you can loop over a list of classes and then loop over a spreadsheet.

all variable types will have to be written like so (where appropriate):

rule_decimal -> null | decimal | loopvar

when postprocessing the loop, iterate through the contents of the loop and go through every property of each resulting object. if it is the string then it should be replaced with a number, but if it's a string like "data" then it should be still a string, but instead look like "data1"

Important

When looping over a spreadsheet, how is the data accessed?

TODO:

• basic ace theme
• basic nearley grammar
• comments
• variables
• loops
• update nearley

make a theme for decklang

no ace theme, by default, covers the things used by decklang very well

add autocomplete for snippets

one for each function type (it should show the zones and placeholder the arguments if possible)

additionally, when hitting enter after a loop line, it should insert an endloop afterwards.

forking projects

you should be able to fork a project if it's public. this would copy the project and set you as the owner

onbeforeunload warning

flag the editor as dirty before save and not dirty after a successful save

if the editor is dirty, closing the page should result in a warning

toggle page styles

basically, you would toggle them to get a full view or a printable view. it should start in full view by default

include script

include the contents of another script (by name) at the current position. this should probably be preprocessed so it doesn't interfere with the compilation step

eslint

should be present on webpack builds somehow and also should be part of the project going to travis-ci

integrated help

there should be helpful tips like:

• a status bar notification when saving happens
• a status bar line showing the current function and what the arguments are
• intellisense (#10)

improve rendering performance

this can run ops outside of angular: https://angular.io/docs/js/latest/api/core/NgZone-class.html

it didn't seem to have any effect though, so there might be other things at play.

this might be better: https://www.npmjs.com/package/angular2-web-worker

virtual deck testing

just to test the decks made here

Issue with NPM Start

Installed and ran NPM Start. Looks like it tried to fire:

1. npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot
2. mkdir -p src/decklang && npm run build:lang:map && nearleyc decklang/decklang.ne -o src/decklang/decklang.js

but the second command threw: The syntax of the command is incorrect.

npm-debug.log dump below:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 silly lifecycle [email protected]prestart: no script for prestart, continuing
7 info lifecycle [email protected]start: [email protected]
8 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\John Vandivier\Documents\GitHub\deck.zone\node_modules.bin;C:\Program Files (x86)\ConEmu;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\nodejs;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Git\cmd;C:\Users\John Vandivier\AppData\Local\Programs\Python\Python35-32\Scripts;C:\Users\John Vandivier\AppData\Local\Programs\Python\Python35-32;C:\Users\John Vandivier\AppData\Roaming\npm;C:\Program Files\R\R-3.2.3\bin\x64;
10 verbose lifecycle [email protected]start: CWD: C:\Users\John Vandivier\Documents\GitHub\deck.zone
11 silly lifecycle [email protected]start: Args: [ '/d /s /c',
11 silly lifecycle 'npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot' ]
12 silly lifecycle [email protected]start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:818:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users\John Vandivier\Documents\GitHub\deck.zone
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
19 error node v5.3.0
20 error npm v3.3.12
21 error code ELIFECYCLE
22 error [email protected] start: npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot
22 error Exit status 1
23 error Failed at the [email protected] start script 'npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the deck.zone package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build:lang && webpack-dev-server --open --content-base src/ --inline --hot
23 error You can get their info via:
23 error npm owner ls deck.zone
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

any statement after a check is on a new card

that's broken

change cardsperpage to cardsperrow and rowsperpage

this would allow for math to reverse or insert empty cards so when printing double-sided, it would actually print correctly.

deck rendering

There should be a small zone that renders a given deck (basically, give the component an id, and it grabs the project and renders it).

There will need to be a class associated with this component that handles project state, as well (since there can only be one active font, there are project constants like DPI, page size, etc).

As part of the spec for this, each plugin will need to be supported. Each plugin needs to be its name, kept in a map of its name (lowercase) to the plugin. Each plugin will need to export help and syntax info, as well.

Cards will also have to be rendered virtually: https://github.com/kamilkp/ng2-vs-for

Base supported plugins:

• text (this needs to be adjusted to support decimal instead of integers)
• font
• rectangle
• border
• unit

fix height of editor components

use calc(~"100vh - 54px"); - it says it doesn't compile but it does

project privacy settings

either public, private, or unlisted

only people that pay can have private projects (eventually)

external deck rendering

there should be multiple ways to render a deck externally:

• show a tab with code and a tab with results (a la plnkr), which can be used to demo the software and embed the results in, say, a demo.
• show just the results (this would be used for printing, and should use some, if not all, of the same code base as the result pane)
• the tabs should be optional (?tabs=code,render) and only having one of them should make it so the title bar only shows the deck name
• css for the title bar should hide itself when printing so only the cards are visible (possibly, even a print button should be added to the left of code and results)
• the title bar should be like plnkr - "tabs" (if applicable) on the right, logo (and deck name) on the left
• embed should embed the current script (?script=scriptId)
• should default to the result tab unless the result tab isn't available
• should have a "copy url" button if it's not in an iframe
• dropdown should be:
  • default button: open just the result (with both tabs) in an external view
  • code only
  • result only

support spreadsheet parsing

this will first require #26 to be done. afterwards, a syntax for iterating over the rows in a google spreadsheet will need to be thought of. that depends entirely on the format of the data.

possibly:

• publish to the web as xslx
• use js-xslx (https://github.com/SheetJS/js-xlsx)
• take the xslx link
• use papa parse to parse the resulting csv data (http://papaparse.com/)

or:

• use tabletop
• store the data whenever the resource is added (or on page load) and have a promise for when all resources are loaded
• add a refresh button for resources like this that can force a hard refresh
• store data in firebase?

Also, add a loading indicator for loading resources.

possibly require a for-in loop with the sheet names to parse?

loop =  <sheet> in { "Mage", "Cleric", "Warrior", "Thief" }
  loop = <row> in <<resourceId>>:<sheet>
    loop = <card> to <row_Quantity>
      text = <card_index>, "<row_Name>", 0, 0, 0, 0
    endloop
  endloop
endloop

add a new directive that lets you set a new card index and use it by binding a variable to the scope because math is hard and dumb

lastUpdated on files and the project

when updating a project for any reason, it should set a lastUpdated. additionally, each script should have a lastUpdated stored on them whenever their contents or name changes.

proper documentation

it should be autogenerated, and all of the directives should have something to go along with them. maybe use doks? idk.

possibly look at using the nearley grammar to generate docs?

shape directives

• gradient (id, type [radial, linear] - support N colors, positions, sizes, directions)
• rectangle (index, x, y, width, height, [color, innercolor | gradientId, thickness])
• ellipse (index, x, y, width, height, [color, innercolor | gradientId, thickness])
• generic polygon
• pie (?)
• line

Important features right now are line and rectangle.

gradients will also need to be figured out - they should be as flexible as css gradients and support all of the features of them

actually vertically center text

currently it doesn't

possibly try putting a sub-element of the game-text and have that have the innerHTML binding

support resources

for google drive sheets, use https://github.com/jsoma/tabletop

people on a premium plan could upload resources (to firebase storage) such as csvs and images.

for now, only google sheets and images will be supported as resources (although it would be preferable to use urls to reference images, so this will mostly just be a test)

a resource could be a variable and all resources could just be brought into scope

possibly when using sheets, load the data once per page load and allow for a forced refresh. not sure how that will work with the embed view though.

debounce saving

saving should only happen once every 10 seconds or so. also, there should be an indicator to show if it's saved recently and also the page should warn you if you leave before saving

download as...

it should be possible to download your project as:

• pdf (of all cards) [done]
• zip of jpgs (this would be your cards) [#76]
• nanDECK project (this would adjust the code to be nandeck-compatible)
• deckzone project (this would be a local copy of the project that does no special transforms) [done]

spam mitigation

when a new project is created and left untouched, any time a new project hit via "create" is visited, it should go to that project.

additionally, if the page is closed and the project is entirely untouched, the project should be removed

something should also happen to make fork spam more stoppable

drag & drop resources

It should be possible to drag & drop resources to the resource pane to import them. possible resource types:

• csv (copy the file)
• google drive spreadsheet (hold the link)
• image (jpg, svg, etc)

unicode

deckzone should support unicode. it probably already does, but this is a reminder to make sure it works.

downloadable client

the deckzone client should be downloadable and usable. it would probably have a few deviations (ie, it wouldn't be just the web app embedded, but it would probably go straight to the application... this is probably easily doable with some global variable / routing magic to make sure the base routes can't be visited if a certain global variable is set)

highlight each zone to debug placement

basically how nandeck highlights stuff

See here for an example:

basically:

• auto-generate css classes (with opacity) based on a set of colors (there will probably be a max)
• store line numbers somewhere so they can be referenced and associated with certain directives
• create a background color per directive if debug mode is toggled on
• use ace Range (example) to highlight lines

case insensitive directive names?

should these be case sensitive?

show parser/syntax errors

they're caught in the results component but not displayed in the margin at all

cardfront and cardback

probably need a new cardside directive, and if it's set to back (it's set to front by default), then it will keep track of card fronts and backs separately. in print mode, it will zipper them X at a time (where X = cardsPerPage). Otherwise, it will show them front:back front:back.

show controls for results window

it should be toggleable (as the component will be reused) and have first, next, previous, and last card buttons for navigation, plus showing the current and total number of cards in the center.

revision storage

It should be possible to store revisions of your project (basically, a snapshot of it at a certain point in time). Premium users get unlimited revisions, standard users get 3 (with the oldest ones being phased out as new ones come in).