I have almost no CSS or HTML, just copy people and try and learn. I've done some simplistic sheets for Epic 40K and a work-in-progress Flames of War. It all stemmed out of COVID and not being able to meet and play in person, plus people having moved away etc. My first character sheet (Epic40k, still used) looks awful, but is readable. I don't understand repeating sections, so I just used weapon1, weapon2 etc for the attributes. Its basic HTML, mostly table, columns etc. I started more recently on a Flames of War (a WW2 game) adaptation, and read up a bit more, asking questions here. This time I made 2 tabs, clicking one hides the other, and one tab (below) is for display/reading, the other (which looks like the above sheet) is for entry of the data. The flag and background are selectable (nation basically) and the picture is the character avatar. I then redid the Epic 40K sheet somewhat like the above - haven't finished it enough yet with backgrounds etc. but its prettier than the 1st 40k Sheet. I'll be finishing it over the Xmas break I hope. Admittedly I spend little time on the sheet, mostly working on the API as I enjoy the coding more than the fiddly HTML/CSS stuff. And redoing the 40k sheet caused me to drop the Flames of War API for now and start to re-write my Epic40K APIs (both to match the new sheet and to improve my coding). I'd be happy to send my HTML/CSS for either, keep in mind I know little, and so there are likely some issues. For developing your own, I would suggest first pick a game system or rules system. Then base your sheet off that. Both of mine are basically copies of the ones from the games or similar enough. I figured out what attributes I wanted to display and track and went from there. My initial one for 40K has all sorts of checkboxes as I had distinct variables for every ability, eg. Fearless, Walker etc. As my javascript got better, I've just incorporated most of these into the "Notes" attribute, as a comma-separated string, then just use code like: If (notes.includes("Fearless")) { } If the sheet is for display only - ie. your rolling dice by hand rather than by API, then you won't need to give as much thought to things like that. Or you can go whole hog if you know or learn some javascript. For my Epic40k game, I went with hexes rather than free form. I initially tried free form - sort of mimicking the tabletop, but found moving units and measuring distances a pain. So I used the Hex Grid built into Roll20 (Hex(V) I think) and learned some Hex math from this website - <a href="https://www.redblobgames.com/grids/hexagons/" rel="nofollow">https://www.redblobgames.com/grids/hexagons/</a> . Distances in the game were originally all cm, but again, easy to convert it so that 1 hex = 2.5cm = 1 inch and a typical infantry 'base' takes up 1 hex. I also used some 'collision detection' algorithms I learned from <a href="https://www.crhallberg.com/CollisionDetection/Website/table_of_contents.html" rel="nofollow">https://www.crhallberg.com/CollisionDetection/Website/table_of_contents.html</a> I have api snippets for almost everything and have incorporated some element of 3d into the game. To do this, I use the GM Layer to draw lines around terrain features, each line being a certain colour - so green for woods, black for a level 1 hill, red for a level 1 building etc. Then when a formation fires (in Epic the group of units, say 5 tanks fire all together) the API looks at each token's position (in this game each token is a tank, squad, air unit etc) and then calculates LOS - using the algorithms above for things like Line - point intersection or line/square intersection (most units are 1 hex in size, so you use their point, larger units I use their bounding box to make a square) or circle-point intersections for artillery fire. Here's some pics from a game tonight - where an army of Chaos Marines took on an army of Titans. This is the start of the game. The Chaos Marines are the yellow guys at the top half, the Titans are more visible at the bottom. The grey area to the side is for offboard units - planes, reserves and in the Titans case an orbiting Spaceship - basically akin to the side of the table where you have the minis before you place them.The Skulls and such you might make out are objectives that we fight over. I've made up over a dozen maps, representing different terrain. Here's a closer in pic, my one Titan has control of a hill and an objective, facing off agains some infantry squads (the yellow circles - if you could zoom up each black mark on the circle is a small chaos marine) and some hard to make out black Tanks. You can make out the black polygon drawn around the hill - it is possible to minimize this using the GM layer slider, but we've just gotten used to it, plus it tells us where the hill starts and stops. You have to imagine the hill as all being one level mind you... Some of the infantry is in a ruined building (which has a purple line around it) and so get cover. I'm using Token markers to track certain conditions and the gmnotes to track formation name, but again thats all based on the individual system. The Flames of War API (still WIP) I am mainly using the state variable to track stuff. And in that system, where turns are more rigid, I use the turn counter to track the phases (so Player 1 - Movement, Player 2 - Shooting etc), while in Epic40k I don't need the turn counter, its back and forth basically. At the bottom left you can make out some templates - these are used for artillery. When a barrage weapon is 'fired' the player places his template where he wants the fire to land, then the API uses its location ("top" and "left") and figures out which units are under the template and could be hit, rolling to hit, saves etc. and (assuming the API isnt lagging) placing little explosions and playing exploding sounds. Similarly when a unit fires the API shoots out little bolts of fire, lightning or whatever based on the weapon (and often horribly lags lol). Anyways, hope the above gives you more ideas, pm me if you want the html/css files.
