A Twitch tabletop roleplay broadcaster had an overlay but it was hard to know which character is talking as new viewer.\nThis program embeds a micro web server, a Discord bot and a file-based datastore for managing player/character profiles and animating their portraits while a player is speaking.
","frontmatter":{"title":"Tabletop Roleplay Overlay","date":"May 2017","headline":"Tool suite for tabletop roleplay game overlays","tags":["CSS","HTML","JavaScript","Node.js"],"links":null,"medias":[{"publicURL":"/static/01-00ab5e0ad6d23f1afec02470001b7dba.mp4","internal":{"mediaType":"video/mp4"},"childImageSharp":null},{"publicURL":"/static/02-cf84d8061392b28763dfdbd60d429e1d.mp4","internal":{"mediaType":"video/mp4"},"childImageSharp":null}]},"fields":{"slug":"/projects/tabletop-roleplay-stream-overlay","sourceInstanceName":"projects","cover":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAACRklEQVQozx1RSUuyYRR9/4mb/oBRIpjYKtEEs8RSRJyIVFIpKcTMREUUc0AESw2UcgizFKKMhCJRKP0g1KSgpAKlEFvp+jt4Fxee4Qz3XGJqaorD4XC53Lm5OfS1tbX5+fmZmRkKhSISiahU6uHh4c3NTSKROD09zWazsVhscXFRIpHw+XzC4XDweLylpaXJycnp6WmAV1ZWZmdnJyYmwAV8JpMJhUJardbpdIbD4f39fYvFIhQK8UTc39/ncrlAIIA3tVqtVCrpdDqZTKbRaEwmU6PRXF5exuNxYPx+PwDJZPLi4mJ1dRV6xL9xVSqVWq3WarWazSbo9/b2ZDIZLLBYLI/HA2U2m221WmHz7u7ObrcvLCzAF/H+/v76+tpoND4+Pn5+fr6/v//GVa/XbTabclzr6+tSqRQCoD45OfF6vaBjMBhEt9t9fn5+eXmB7O/vb6/XA1en0ykWi/AmEAgODg6Wl5dhEm6vr6/Pzs7QzWYziUQiBoMBYAAA1u/3h8Ph5+cnwEdHR8fHx5gWacPwxsaGSqXa2trCFOl0GlxyuZyAE2SGSerjwvz5fB5TRCIRiF9dXQFgNBrdbrdCoRCLxdAEFy63t7cJZIizy+Xy+XzecW1ubhoMBuSs1+vRcUTC+IoUsRHEDi9vb2+3t7cEUgE4GAymUqlCoQAp9Gq1Cs+7u7s7OzvYKjzrdDr8gQZuyuXyaDQCnsD24Qo7QDC4fXx8RB5I4enpCf+i0WipVDo/P8ec7XYbaZlMpoeHB+zo6+vrPxnSeXqB893NAAAAAElFTkSuQmCC","aspectRatio":1.7777777777777777,"src":"/static/2859938a868cf24a571fa44c42e7954a/6c350/cover.png","srcSet":"/static/2859938a868cf24a571fa44c42e7954a/28fac/cover.png 480w,\n/static/2859938a868cf24a571fa44c42e7954a/641d1/cover.png 960w,\n/static/2859938a868cf24a571fa44c42e7954a/6c350/cover.png 1280w","srcWebp":"/static/2859938a868cf24a571fa44c42e7954a/7ecdd/cover.webp","srcSetWebp":"/static/2859938a868cf24a571fa44c42e7954a/eb699/cover.webp 480w,\n/static/2859938a868cf24a571fa44c42e7954a/23769/cover.webp 960w,\n/static/2859938a868cf24a571fa44c42e7954a/7ecdd/cover.webp 1280w","sizes":"(max-width: 1280px) 100vw, 1280px"},"resize":{"src":"/static/2859938a868cf24a571fa44c42e7954a/4f3c3/cover.png"}}}}}},"pageContext":{"slug":"/projects/tabletop-roleplay-stream-overlay"}}