Migrating to CSE

Hi all

So the two sheets I maintain were impacted by the bug with the inline styles removed by Roll20 when deploying to the live servers. It looks like this bug impacted only the sheets with the "legacy": true setting in the sheet.json

When CSE came out in 2021, I did not pursue my migration efforts as I tried to enable it (putting "legacy": false in the json), saw that it was messing up the layout, found the Roll20 doc unhelpful, plus I did not have time to spare to revise the sheet and know I s*ck at CSS

After this legacy sheets panic, I thought I would try again. So I opened the wiki page on CSE and read it again and thought I understood what needed to be done :

• Remove the 'sheet-' prefix in front of class names in HTML and CSS
• But keep it in front on the col, row, 2colrow and 3colrow classes provided by R20
• And keep it in front of the rolltemplate classes as well

So that's what I did. I loaded the resulting HTML and CSS in a sandbox game

... And the character sheet does not display at all and I don't have the littlest idea why.

• Did I misread the Roll20 wiki ?
• Is the only way to move to CSE actually to disable legacy, and just inspect the result and fix whatever issue it creates with your sheet ?

I have uploaded the HTML and CSS files on my Github repo @ https://github.com/stephaned68/ChroniquesGalactiques

These are the files with a -cse suffix

If anyone have an idea of what I did wrong and any suggestions on how to actually migrate to CSE, I would appreciate any help

I think you might also need edit the sandbox sheet.json with
{
"legacy": false;
} I pasted your html and css into a custom game. Same issue; nothing loads. But I noticed that in the html file there may be something broken in the syntax. ie an unclosed tag(s) and/or typos. Easy enough to happen when you have to make lots of edits to be CSE compliant. See how the colorized formatting in the Custom editor seems to suddenly stop? IME, that usually indicates there is an issue with malformed code somewhere.

Hi vince

Thanks for the heads-up

The issue is on line 6166

input type=""hidden"

should be 

input type="hidden"

However fixing it does not resolve the issue with the sheet not being displayed :(

Just to troubleshoot things, I would try loading a little html at a time and see where it breaks.  Maybe there's in issue in the css?

Hi vince

Thanks for the suggestion

4 different sheets (PCs, NPCs, Starships, Mechas) with 2 to 5 tabs each, not easy to split. I'll see what I can do

It might be a good time to change the way you are doing tabs. A character sheet with those should be easy to split.

The thing you are doing now is a massive project, Yo should do one sheet at a time, and ideally just do part of the sheet at a time. Make sure the sheet is divided into divs, and just copy small groups of div at a time.

The main advantage of using the sandbox is the ability to use your own files, so you don't have to do the full sheet at a time.

I'm considering writing an article, maybe more than one, on this topic, so if there are any gotchas or pitfalls you come across, please post the,. I don't actually have much experience doing this.

Hi GiGs 

Thanks for your comment 

The sheet is obviously already splitted into divs (one for each type of sheet) which are in turn splitted into divs for each tab. Even on one of the tabs of one of the sheet, I have 4 subtabs.

I don’t see how splitting into divs makes it easier to paste only parts of the sheet.

All I see is that I believe I followed what Roll20 wrote on their wiki to try and make the sheet CSE, and it simply does not work. It may be docs written by software engineers for software engineers, and I may not be a top-notch web developer, but having written code for the last 35 years, I thought I would understand a few directives.

I’d absolutely love to redo all this with handlebars and distinct files merged together, using your great tutorials on your blog. I’d love to learn Vue to use the new Beacon system that will come one of these days.

Unfortunately I preserve my evenings for some rest and my weekends for my D&D sessions. Not to worry, only 7 years left before retirement ;-) 

I believe I am going to do it differently : disable legacy and correct whatever nonsensical layout issue it creates. Probably less work. Or not. Will post back here.

Thanks

Here's my simple(ish) guide to converting to cse:

• swap legacy flag to false
• If your classes in html don't have the sheet- prepend on them, remove it from your css file (except for anything that impacts roll templates)
• Add  .ui-dialog .tab-content .charsheet to the start of ALL your css that impacts the character sheet itself. This will ensure that your styling overrides the Roll20 styling while still operating from the same "base" specificity level.
• If you had any styling that affected both the rolltemplate and the sheet, make sure to do both of the above

That should resolve 99% of the issues.

I added these tips to the LCS page: https://wiki.roll20.net/LCS#Migrating_from_LCS_to_CSE

So...

• I set legacy to false
• All the classes in both  HTML and CSS had the sheet- prefix, so I did not change anything
• For some mysterious reasons, textarea's default height was not honoured, and roll buttons with overriden icons showed 2 icons instead (Roll20's default and mine)
• So I preprended the CSS class of the main div in these sheets to make some CSS selectors more specific for a few classes - I don't want to have Roll20-specific CSS classes if I can avoid them. IMHO I shouldn't even have to bother about Roll20 internals, but that's just me being grumpy

Something along the lines of 

.sheet-mainBg textarea {
  border: none;
  box-shadow: none;
  padding: 1px;
  margin: 0px;
  height: 1.5em;
  resize: vertical;
  vertical-align: top;
}

.sheet-mainBg button[type='roll'].sheet-iconbtn::before {
  content: '';
}

And a few others

And that was it... Sheets converted to CSE :)

Now details/summary elements are replacing the old CSS trick for collapsing/expanding areas, wherever possible.

Some more testing and new PRs will follow

Thanks all for the help and hints, which I did not use :)