gulix / geckos Goto Github PK

View Code? Open in Web Editor NEW

49.0 11.0 18.0 6.51 MB

An online Card Editor with Templates

Home Page: http://gulix.github.io/geckos/

License: Other

CSS 13.68% HTML 15.91% JavaScript 69.93% Visual Basic 0.49%

card gaming jquery fabricjs json generator

geckos's Introduction

geckos

Geckos Edit Cards ... kos ... ?

We don't know why Geckos edit cards, but this tool is aimed to create your own template and cards for gaming. Kinda like the Magic Set Editor, but full web.

Where to Start ?

You can test the software
You can go the first tutorial and create a template card from scratch.
You can see the list of existing templates
You can see if I need some help
You can check if any Question is waiting for Answers / Insights

The Why

I'm a player. Roleplaying, boardgames, miniatures. And I've found that having cards to store information is great around the table. The spells of my D&D bard, the profiles of my Pulp City heroes, my Pulp Alley league, ...

I've been using Magic Set Editor to create my cards. But some dead-ends keep coming. So, beginning to play with web development, I started to thought of a way to make my own 'Magic Set Editor', to edit my cards. And here's what I've come to.

The What

Geckos is a web application, built with the javascript technology. No server-side code, so that it's easy to deploy and not related to some server configuration. The goal is to get a web page that anyone can use, loading his own template, and editing his cards. With those templates being shared.

It's free, open-source, and you can get it, modify it, enhance it. Feel free to propose upgrades. Geckos is on github for this reason.

Geckos will not work without those libraries, that I use inside the project :

Geckos main engine
- JQuery
- KnockoutJS
- FabricJS
- RequireJS
Geckos UI
Widgets
Helpers & others libraries
- FileSaver.js
- TinyColor
- AJV
- Cropper
- Typekit Web Font Loader
- Lodash
- JsZip
- Moment.js
- PdfMake

The How

Since the first Alpha release, Geckos have its own page. You can also download the source code and launch the index.html page to test it locally (works with Firefox, with other browsers, you need to put up a web server).

The wiki will provide guides on how to create a template, to use it to make cards, and how in general Geckos is working. Something is missing ? Feel free to use the Issues to ask for an explanation.

The Who

I'm Nicolas, a French gamer (that can explain some bad english) and developer, I like fun games, not so the heavy ones. I also like sports, craft beer (that software is a BeerWare), comics and many other things.

geckos's People

Contributors

Stargazers

Watchers

Forkers

metimi dreimert etiennecoumont dorgann95 folkevil rogues-gallery vilgrid fkinguy omarceaux armaklan youss786 dnalob mantxi ahrkano dnicolle r1zla benbouret mfrank2016

geckos's Issues

From Kitchensink to Geckos

Adding an entry in the wiki explaining how to push a design from kitchensink (FabricJS editor) to Geckos.

Template chooses the "Name" field

In a template, a field should be set to be the "Name" field, used in the list of cards.
Default is the "name" field (if exists), or the first one.
This functionality should be then used to have an "ID" field, as a better list will not need a "Name" field (see #19)

Textbox field in Canvas linked to a void Input Text variable

To test :
A template with an Input Text field, with no default value, and a Textbox Canvas Field, with text linked to this variable.
When setting the template, an error occurs in the javascript.

Options field with multi-selection

A field with multi-selection.
Reminder : a way to display this selection (string with separator ?), a function to know if a value / list of values / value inside a list is selected, a limit to the number of items selected.

Loading / Editing the template

One can edit or upload a new template file to the UI.
The list of cards can then be processed to this new template.

Saving / Loading a list of cards

A list of cards can be Loaded / Saved (JSON Format ?).
Independent to the Template

Color-picker field to set a color to a canvas element

Export a "finished" card

FabricJS have export actions to JSON / Svg and Image formats.

When loading a list of cards, none are selected by default

The first one should be selected

Better Image input

A better image input should be provided, with the image adjusted to the field (ratio / scale), and a selector of the part of the image used.

Having a Multi-line text field

Refreshing a Template : the Image field content is not kept

Symbols used inside text

When writing a text to be added to a card, some symbols (defined by the template) could be added to the text via some mechanism : Constants, Special format (like bold & italic), copy / paste, ...

Maybe looking how it's done in Magic Set Editor

In the canvas fields, allow the Array type objects

For example, a canvas object can have a property "paths" that is an Array. This type of data is not resolved when generating the Canvas json.

Better Options field

The "Options" field should allow the user to get the value / text of the options on the canvas.
Right now, only the value is put on the card.

Maube a third value (text on card) could be added top options.

"List of cards" or "Template" displayed first when opening page ?

Well, that"s the question ...
Should the page open on the template part, so that the user can set its own template ?
Or is the Cards'List more important ?

Text Replacement in template more flexible

Currently, the text replacement in a template is made with a variable like this :

"text" : "$myVariable

The variable replaces all the text, and it's not possible to create a field with the concatenation of two variables

"text" : "$myName + $myLevel"

or with a variable following / preceding some text

"text" : "$myName [$myRole]"

Some regexp should be used to get a better system than pure text replace. Maybe having the format of the variable changed : $myVariable$

Custom fonts for Canvas elements

Some links related to this issue :

http://sosweetcreative.com/2613/font-face-and-base64-data-uri
http://stackoverflow.com/questions/17894842/how-to-apply-custom-font-in-fabric-text-object

Having a Numeric-only field

What about the KnockoutJS components ?

It could be good to use the components of KnockoutJS to ensure a better code architecture.
The fields, the different parts of the UI (fields, canvas, list, ...) could all be divided into component.

Need to think about it.

Displaying / Hiding fields depending on other fields

Some fields don't need to be displayed in every card. A boolean field "Show more fields" should be able to hide / display those other fields.
To be set in the template.

Setting a new Template : existing cards are still linked to the old one

How to reproduce :

Open the demo file.
Replace the template with a void one (should work also with a complete one)

{
  "fields": [
    { "name": "name", "label": "Name", "default": "Morg N Thorg" }
  ],
  "canvasFields": [

  ],
  "canvasBackground": "#FF0000",
  "canvasWidth": 536,
  "canvasHeight": 750
}

Set the template.

The old card is still in the list, and the fields are the ones from the previous template.
2 solutions :

keep the card and update it to the new fields. If some have the same name, values is kept.
remove all the old cards

Maybe related to #23

Repeating group of fields

Some group of fields (see #16) could be used as an Array.

For exemple, a table of weapons, with each the same values / fields (Range, Power, Name, Special rules). Instead of having each of these fields repeated from Weapon 1 to Weapon X (with X needed to be static), having those fields registered as a Group in an Array could be a good idea.

How to get this to work with the generation of the Canvas should be well thought.