ArnoldSmith86 / virtualtabletop

a virtual surface in the browser on which you can play board, dice and card games
https://virtualtabletop.io
GNU General Public License v3.0
166 stars 31 forks source link

Easier way to add icons to buttons #1268

Open 96LawDawg opened 2 years ago

96LawDawg commented 2 years ago

@ArnoldSmith86's idea from Discord.

Instead of

{
  "type": "button",
  "classes": "symbols",
  "css": "font-size: 60px",
  "text": "[arrow_left]"
}

Do this for VTT-Symbols:

{
  "type": "button",
  "symbol": "[arrow_left]"
}

And instead of

{
  "type": "button",
  "classes": "material-icons",
  "css": "font-size: 60px; display:flex",
  "text": "east"
}

Do this for Material Icons:

{
  "type": "button",
  "symbol": "east"
}

Use [ to distinguish between VTT symbols and Material Icons. For both fonts it would automatically center the icon and make it as big as the button can fit.

mousewax commented 2 years ago

Eventually I want to integrate VTT Symbols into Robot so that you can use both letters and symbols in one widget. That's why the VTT Symbols have the square brackets so it doesn't mistakenly replace words with glyphs. I have not been able to quite get there yet as I have not had time. I am currently looking at scripts used by https://www.nerdfonts.com/ to combine the symbols fonts with the regular fonts.