Playset creation and export

[JakobKallin]

We should be able to create brand-new playsets, and export them! Right now, we can sort of create a new playset by adding an existing playset and editing it, but we're still stuck with the original playset's cover. There should be a way to start from scratch, select your own cover, and finally export the result if you want to use it outside of Fiascomputer. While generating a PDF from the browser is probably too complex, it's certainly feasible to generate an HTML document with suitable formatting. A user could then turn it into a PDF manually, using the browser's "print to PDF" functionality if it's available.

[Gulix]

If you're interested, I'm currently working on this kind of tool : http://github.com/gulix/fiasco-mustache

[JakobKallin]

Yes, I checked it out earlier. Which formats does it currently export to? I tried saving as PDF but it wasn't formatted like a regular Fiasco playset so maybe I missed some setting.

[Gulix]

I'm currently working on the pdf output : (see Issue 3) For my own convenience, the first output will not be the classical layout of Fiasco playset. The "introduction" pages will be classic, but the "Relationships / Needs / ..." pages will be on landscape orientation, one column with 1-3 options, the other with 4-6. I plan to make other options available later on.

The current code (not on github.io, currently not updated) has this output.

[JakobKallin]

How does the PDF generation library work? How do you define formatting, fonts, and so on? I don't know much about PDF internals.

[Gulix]

My pdf generation code is there : https://github.com/Gulix/fiasco-mustache/blob/master/generator/scripts/pdf.js

I use pdfmake. You provide Json data with styling and blocks (texts, columns with blocks), and it generates a nice pdf, with various page orientation if you need it. All is in javascript, no server-side code needed.

[Gulix]

As I'm getting back on my software, I come back here. I've got a "stable" javascript object (JSON format) that can be used to define a template : title, description, subtitle, categories, details, insta-setup, ... Do you think it will be possible to "connect" it with your application ? In the "Import Playset", for example, in addition to importing a PDF, having an "Import from JSON / Fiasco-mustache". And same with a back action (from your app to mine, thus being able to easily extract pdf data).

I looked into your code to make it myself, but I'm a little lost with the technology behind right now ^^.

[JakobKallin]

I don't have time for this now but I might in the future. In the meantime, could you send me a complete example of your JSON format? You can add it with code formatting in a comment.

[Gulix]

Here's an example :

{
    "title": "Title",
    "subtitle": "Subtitle used before description",
    "teaser": "bottom of each section",
    "description": "#For title\nThen Description\n#Movie Night\nSome movies",
    "credits": "#Credits\nNames & Stuff\n#Boilerplate\nCopyright & such",
    "sections": [{
        "label": "Relationships",
        "categories": [
            { "label": "Family", 
              "details": [
                  { "label": "Family 1" }, { "label": "Family 2" }, { "label": "Family 3" }, { "label": "Family 4" }, { "label": "Family 5" }, { "label": "Family 6" }
              ]
            }, 
        ...     
        }, {
        "label": "Needs ...",
        ...
    }],
    "section1": "Relationships",
    "section1_category1": "Family",
    "section1_category1_detail1": "Family 1",
    "section1_category1_detail2": "Family 2",
    "section1_category1_detail3": "Family 3",
    "section1_category1_detail4": "Family 4",
    "section1_category1_detail5": "Family 5",
    "section1_category1_detail6": "Family 6",
    "section1_category2": "...",
    "section1_category2_detail1": "...",
    ...
}

I did not repeat all the sections, of course. As you can see, the data is repeated two times. In arrays and in direct properties. It's related to some exports methods but when I load a playset, I just look at the arrays part.

fiasco_template_La Coupe du Chaos.json.txt

Here's a complete file.

[JakobKallin]

If we're doing not just element tables but everything else including "Movie Night" etc., I would prefer an HTML-based format. This way we would receive a lot of things for free, perhaps the most significant one being the ability to view the playset as a regular website (using an appropriate stylesheet, which I already designed for a separate project a while back). That would also give us formatted PDF export for free, as the user can simply "Save as PDF" (at least in Chrome), as well as the ability to publish playsets in a search engine-friendly format and other benefits thanks to the flexibility of HTML.

Would it be a lot of work for you to export this to HTML instead? I'm thinking something similar to this:

<section id="relationships">
  <h2>Relationships</h2>
  <ol>
    <h3>Category 1</h3>
    <ol>
      <li>Element 1</li>
      ...
    </ol>
    ...
  </ol>
</section>
...

[Gulix]

That's doable. Easily, as I'm "offering" an export via Mustache. The import on my side can be a little bit tricky, but with good regex, I think it can be achieved.

[JakobKallin]

Regular expressions won't be necessary, as you can use DOM methods to navigate just like any other HTML. For instance, here's how you might get all 36 Needs in a playset:

var doc = new DOMParser().parseFromString('<html>...</html>', 'text/html');
Array.from(doc.querySelectorAll('#needs li li')).map(function(node) {
    return node.textContent;
});

[Gulix]

I'm still fresh in web development ^^. And I think that method will be easier, yeah ! I'll see what I can do this week.