How can I merge two sheets and separate them by a tab?

I'll preface by saying that I'm a total noob when it comes to web developpement, I can't even code two lines. What I want to do is have a custom character sheet where there is both the GURPS Character sheet and the Mekton Zeta sheet, just separated by a tab at the top, cause I need both systems for a future game. I got the sheets on the github, but I just can't for the life of me find a way to add that tab, nor how to add the js and json files included with them. Any help is appreciated, thanks

Pro users can use/create custom sheets.  Although I'm not familiar with the code of the two sheets in question, I'm fairly positive you would need to drastically modify each sheet's code in order to make them coexist as a single sheet in such a manner.  I believe it would be easier to incorporate the features of one sheet into another.  Perhaps explain in a little more detail why you want/need both sheets merged.

You need to be a Pro user to have access to custom sheets. One you have that, combining the sheets might be simple, or extremely hard, depending on whether anything in each conflicts. In principle, the steps are as follows: create two divs, one after the other, all the html code for one in one div, all the html code from the other in the second div. Give each div a class name. Above the divs, create a dropdown or checkbox, linked to an attribute (named say, sheet).  Create a CSS rule that allows you to set which of the two divs is visible, and hides the other one.  Finally you need to add in all the css rules from the two sheets, and hope there are no name conflicts. In theory, this is simple. In practice, something is almost certainly going to go wrong, and you are going to have a very arduous time fixing everything. Here's the basic code you might use. Create a html page with just the code below, don't copy any of the mekton/gurps stuff into it. <select class="selector" name="attr_sheet">     <option value="gurps" selected>GURPS</option> <option value="mekton" selected>MEKTON ZETA</option> </select> <input type="hidden" class="selector" name="attr_sheet"</input> <div class="gurps"> GURPS SHEET </div> <div class="mekton"> MEKTOON SHEET </div> And in the CSS, add this and nothing else. input.sheet-selector:not([value="mekton"])~div .sheet-mekton, input.sheet-selector:not([value="gurps"])~div .sheet-gurps {     display:none; } Now save and test the sheet. Open up the campaign, create a character, see the drop down, change its value abd see if the displayed text changes. If that does't work, it's possible I may have made a typo or misremembered the syntax. if so, report back and we can fix it. If that works, you are set to do the rest: Copy the gurps html into the GURPS div above, and the mekton sheet into the div above, Cope the CSS for both sheets into the css tab. Now your troubles really begin. save it and see how messed up it is, and start trying to fix it. There's not a lot we can do to help you here - you'l need to figue out which css rules are conflicting, and which attribute names are conflicting. You might be lucky and have no conflicts. Miracles can happen! Good luck :)

Vince said: Pro users can use/create custom sheets.  Although I'm not familiar with the code of the two sheets in question, I'm fairly positive you would need to drastically modify each sheet's code in order to make them coexist as a single sheet in such a manner.  I believe it would be easier to incorporate the features of one sheet into another.  Perhaps explain in a little more detail why you want/need both sheets merged. I'm planning on making a Mecha game, ideally Mekton Zeta is perfect for it, but I really, really hate the ground combat rules, and I really like the degree of customization GURPS offer for the characters, and conversely, GURPS 4th Edition (Only one I got books for) Has little to nothing in term of rules for Mecha. So I planned to have GURPS for foot combat/general RP and use the Mekton Zeta combat rules for Mech Combat. So in reality, all I need are the parts relevant to mechs and one or two stats (Reflexes etc) incorporated in the GURPS sheet on a separate tab. GiGs said: You need to be a Pro user to have access to custom sheets. One you have that, combining the sheets might be simple, or extremely hard, depending on whether anything in each conflicts. In principle, the steps are as follows: create two divs, one after the other, all the html code for one in one div, all the html code from the other in the second div. Give each div a class name. Above the divs, create a dropdown or checkbox, linked to an attribute (named say, sheet).  Create a CSS rule that allows you to set which of the two divs is visible, and hides the other one.  Finally you need to add in all the css rules from the two sheets, and hope there are no name conflicts. In theory, this is simple. In practice, something is almost certainly going to go wrong, and you are going to have a very arduous time fixing everything. Here's the basic code you might use. Create a html page with just the code below, don't copy any of the mekton/gurps stuff into it. <select class="selector" name="attr_sheet">     <option value="gurps" selected>GURPS</option> <option value="mekton" selected>MEKTON ZETA</option> </select> <input type="hidden" class="selector" name="attr_sheet"</input> <div class="gurps"> GURPS SHEET </div> <div class="mekton"> MEKTOON SHEET </div> And in the CSS, add this and nothing else. input.sheet-selector:not([value="mekton"])~div .sheet-mekton, input.sheet-selector:not([value="gurps"])~div .sheet-gurps {     display:none; } Now save and test the sheet. Open up the campaign, create a character, see the drop down, change its value abd see if the displayed text changes. If that does't work, it's possible I may have made a typo or misremembered the syntax. if so, report back and we can fix it. If that works, you are set to do the rest: Copy the gurps html into the GURPS div above, and the mekton sheet into the div above, Cope the CSS for both sheets into the css tab. Now your troubles really begin. save it and see how messed up it is, and start trying to fix it. There's not a lot we can do to help you here - you'l need to figue out which css rules are conflicting, and which attribute names are conflicting. You might be lucky and have no conflicts. Miracles can happen! Good luck :) Yep, that works, thanks! I'll try and see if a miracle happens, if not I'll prepare for long arduous hours of changeing variable names it seems. Edit: Some tabs are kind of broken after I put the two sheets together, but I think I can manage to fix them, thanks again!

What might be a problem is the incidental sharing of attributes between the two combined sheets.  If the two sheets have a "attr_strength" attribute, for example, named exactly the same in the code, this won't be separate attributes in the game but the same value will apply. As I don't know the two game systems (nor the sheets obviously) you want to use, I don't know if it's a problem or not. Same goes for sheet workers (javascript code controlling the attributes depending on some changes). If the two have `on("change:strength" ...` events handling, both will fire every time one of the two strength attributes is modified etc. So you might have to modify the sheet workers code (if any), in the sheets, and/or the attributes, to have the two sheets function side by side.

Natha's comment reminded me to qualify something i said earlier: Copy the gurps html into the GURPS div above, and the mekton sheet into the div above, If those sheets have sheet workers (a script tag) and rolltemplates, you'll want to copy them out and add them to the bottom of the sheet, below the div tabs. You can combine all the sheet workers inside a single script tag.

Could you use a separate game for Mecha combat? Would Mecha and personal combat ever be combined on one map?

GiGs said: Natha's comment reminded me to qualify something i said earlier: Copy the gurps html into the GURPS div above, and the mekton sheet into the div above, If those sheets have sheet workers (a script tag) and rolltemplates, you'll want to copy them out and add them to the bottom of the sheet, below the div tabs. You can combine all the sheet workers inside a single script tag. I'm not sure how that works, I only copied the HTML in the divs and the sheet still allowed me to click on the stats to roll, despite the github having a js and json file for GURPS and Mekton respectively, so if it works I'll live with it. Rabulias said: Could you use a separate game for Mecha combat? Would Mecha and personal combat ever be combined on one map? That would be kinda bothersome to switch game all the time, Mekton has rules for every vehicles I would need, and I plan to rule that unless you are super lucky, a foot soldier has no chance against a 60ft Mecha, even with well placed anti-armor weapons. But in the end I don't really plan on mixing both, in my campaign, almost every conflicts in the open is solved with Mechs or other vehicles and people will only ever be on foot when inside.