Mafia game discussion thread.

[Danner]

I may be able to support more than 8.

QT supports:
b, i, u, big, small, font, sub, sup, cite, code, h1, h2, h3, h4, h5, h6, em, s, strike, strong, tt, center, blockquote, ol, ul, dl.

Notably: No IMG, no DIV, no SPAN.

Whenever I want to use a div tag, I have to use one of these tags instead, with custom styles to reset the style to a div tag. And since tags in QT doesn't nest, I cannot use the same tag more than once in a hierarchy.

I want to leave the first three tags to the user to play with, so I cannot use these in the engine (I could, but that starts to get messy quick). Preferrably also the list tags, center tag and s or strike tag should be available to end users. I might be able to emulate some tags using others though, so it's possible to optimize this.

The rest I can use as I wish, but the HTML standard puts some limitations as to which tags can be used inside which tags. I do not have the full view here, but I found out the very hard way that h1 through h6 doesn't work well inside each other (even if you reset the CSS style) due to HTML validation reasons. I don't really care if I write some invalid HTML, but my browser literally threw a fit about it.

So that leaves me with (in order)
- blockquote
- h1
- cite
- code
- sup
- em
- pre

Which isn't really giving me legal HTML, but it seemed to work on all browsers I tried, and that was good enough. I may use the remaining tags (big, small, sub, tt, strong), I just haven't seen if they fit in the list somewhere yet. Figuring out how to nest the <h2>..<h6> tags inside each other would help a lot (I don't think it can be done, but it would rock if it could be). But even if not, there likely are room for about 10-12 tags total. Which would be more than enough if indenting was the only reason to use nested tags here.

But once we start with stuff like multiple icons after each other, each nested as in example 2, then you see where we run out of tags quickly
I am doing some rewrites to ensure we do not need multiple "insert" div tags. That should solve a lot of the headaches.

[Reticence]

That's what the top: 50% and margin-top: -16px are meant to fix, Anakso. They vertically align the boxes.

While this works, I'm not sure that it will adapt if you end up with a box that is bigger than 32px, which is possible with the size being set via min-height.

Whenever I want to use a div tag, I have to use one of these tags instead, with custom styles to reset the style to a div tag. And since tags in QT doesn't nest, I cannot use the same tag more than once in a hierarchy.

Can you clarify this? Does using a div tag at least once require one of those tags to be repurposed? Or does using each div tag require another of those tags to be repurposed? If the former, I think it would be safe to repurpose one of the least-used tags and control everything through div tags and CSS styling. If the obstacle to doing this is CSS fluency, I can dust off my web-dev skills and help with that.

[Danner]

Can you clarify this? Does using a div tag at least once require one of those tags to be repurposed? Or does using each div tag require another of those tags to be repurposed? If the former, I think it would be safe to repurpose one of the least-used tags and control everything through div tags and CSS styling. If the obstacle to doing this is CSS fluency, I can dust off my web-dev skills and help with that.

QT doesn't support <div>. If you type <div> into a QT message you only get text. Only a subset of the HTML tags (see list above) are actually supported in QT. There is a regex going on when visualizing QT messages, swapping all tags to text, and then swapping some of that text back to HTML tags for a subset of the tags. Everything else turns into pure text. So if you want a tag that looks and acts like a div, you need to use some alternative tag that actually is supported, using some stylesheets. You used <blockquote> tag in the rolecards you made.

QT also doesn't support nested tags of the same type.

<blockquote><blockquote>This simply doesn't work</blockquote></blockquote>

The regex matcher that QT uses to replace text with HTML tags doesn't quite match the right pairs of tags in ways HTML expects (it matches the first start and end tag found). For that reason, any nested tags cannot be used. At all.

I can however use different nested tags. Like

<h1><blockquote>This works fine</blockquote></h1>

But there is a limited amount of tags we can use. And that limits the number of nested tags it is possible to use.
And the rules of HTML limits which tags can be placed inside others. If you f.ex place one H2 tag inside a H1 tag, the result isn't what you expect, no matter what you do with stylesheets to undo the damage.

So right now I have a list of 8 tags that work inside eachother. I violate some HTML rules along the way, but it seems to work. I might be able to expand that list to 10-12ish.

I do not think there is much to do about it, short of making my own QT service sorting out these issues. And then obviously I couldn't be trusted as a player. So ... yeah.

[Reticence]

Stuff.

Ah, so if you have nested divs you would have to set up a system wherein it repurposed one tag, and then repurposed a different one for the next layer, and so on? That's cumbersome, for sure.

Have you considered parsing normal HTML on your own server, then stamping the result as an image like you do for your countdown clock? It would be subject to server downtimes, of course, but it might allow you more formatting freedom.

In the meantime, I'll try to look at finagling some CSS that'll get the tags you do have to work like I would expect DIVs to. The idea that came to me for your icon issue was to put them inside a scaling wrapper and have them vertically-align to it, but I typically do that with DIVs, so I'm not sure how well they'll work with the QT limitations.

[Danner]

I did the nesting part. That's the core of the engine, really

I also did consider the image solution. But one of these days, we are going to encounter a mafia player with sight impediment, using text-to-speech synthesis. And that solution would suck for him!

[Reticence]

Ah, cool.

So you can support 7 nested DIVs (counting the parent) at this time?

[Danner]

*nod nod*

I'll see if I can't expand that to 10-12... That should solve all headaches

- - - Updated - - -
@Reticence:

If you really want a challenge...

https://jsfiddle.net/qdayw5nd/

I try to use H1 through H6 tags as div tags. But they have a major difference from div tags, as seen in this example. What stylesheet property need to be overridden to get the correct answer? I have no clue at this point

[Dendrek]

Danner, having a cap of 8 nested tags honestly shouldn't be an issue. Would you really need that many nests?

<div id="container" class="nest1">
    <img class="nest2">
        <a class="nest3">
            text
        </a>
    </img>
    <div id="subcontainer" class="nest2">
        text <span class="nest3"><a class="nest4">link</a></span> text
        <li class="nest3">text <span class="nest4"><a class="nest5">link</a></span></li>
        <table class="nest3"><tr class="nest4"><td class="nest5"><span class="nest6"><i class="nest7"><a class="nest8">text</a></i></span></td></tr></table>
    </div>
</div>

Like I really had to try to get 8 nests in there. I doubt you're even able to put a table into your code if it's not one of the supported elements, so how are you going to manage to use 8 nests?

[Danner]

Like I really had to try to get 8 nests in there. I doubt you're even able to put a table into your code if it's not one of the supported elements, so how are you going to manage to use 8 nests?

### SERIAL KILLER (tag 1)
 *Bob the Serial Killer*
  <i>You are Bob, from the Andy and Casey Webcomic. You have a special power "being there too". Whenever something happened, you were there too. Killing them. </i>
  <br>
 [? This ability is used at night] (tag 2+3)
  [✋ This ability is an action<br>It must be explicitly used<br>You can only use one action per night] (tag 4+5)
   [1 This ability can only be used once] (tag  6+7)
    *Night Kill* (tag 8)
     Kill a player of choice. (tag 9)

With the engine I had implemented today that uses two tags per icon indent, that card went to 9 tags. Gimme one more icon on that line and we'd be at 11. Sure, I wrote that rolecard particularly awkward way to really use up layers, but it's a limit all right.

Currently working on lowering the amount of tag here. This is my intended result:

### SERIAL KILLER (tag 1)
 *Bob the Serial Killer*
  <i>You are Bob, from the Andy and Casey Webcomic. You have a special power "being there too". Whenever something happened, you were there too. Killing them. </i>
  <br>
 [? This ability is used at night] (tag 2)
  [✋ This ability is an action<br>It must be explicitly used<br>You can only use one action per night] (tag 2, despite being a child of a tag 2 - i'll move it out)
   [1 This ability can only be used once] (tag 2 as well, plus tag 3 for the added div tag I mentioned earlier since one of the children are not icons/images)
    *Night Kill* (tag 4)
     Kill a player of choice. (tag 5, possibly 4 if I apply some clever logic moving this tag up a level)

At that point it doesn't matter much whether the engine supports 8 or 12 nested tags. But right now, it's a pain.

[Reticence]

With the engine I had implemented today that uses two tags per icon indent, that card went to 9 tags. Gimme one more icon on that line and we'd be at 11. Sure, I wrote that rolecard particularly awkward way to really use up layers, but it's a limit all right.

Interesting. They weren't nested inside each other, though; they can't they reuse the same repurposed tag?

[Danner]

Interesting. They weren't nested inside each other, though; they can't they reuse the same repurposed tag?

Since they're not nested, they absolutely can. Coding it is a bit of work though

Of course... that behaviour is really depending on the stylesheet. We could make a stylsehset that supported nested icons someday, maybe, which would use a completely different scheme for inset tags. So I'd have to encode that kind of behaviour into the stylesheet. It already doesn't really look like a stylesheet, this complicates it. Ah well

[Dendrek]

Danner, I don't see why icons would need to be nested. You could easily put them all in a single flex div if you want them horizontally (or even vertically -- for that, just change the direction of the flex) aligned.

[Danner]

Indeed, they do not have to. The example I gave was deliberately a bit obtuse. In practice, the current supported nesting levels will suffice.

[Reticence]

Since they're not nested, they absolutely can. Coding it is a bit of work though

Of course... that behaviour is really depending on the stylesheet. We could make a stylsehset that supported nested icons someday, maybe, which would use a completely different scheme for inset tags. So I'd have to encode that kind of behaviour into the stylesheet. It already doesn't really look like a stylesheet, this complicates it. Ah well

With that in mind, I should be able to come up with something fairly easily, actually. Do you have a light mockup/sketch of what you would want as an end result?

* Retrieves his web-dev hat out of the closet. Smacking it against the wall, he fills the room with a cloud of dust and subsequently hacks up a lung.

[Dendrek]

I'm honestly really disappointed that you guys did not play in your DnD game. That game needed some proper RP wars.

[Danner]

@Reticence:
I hope you aren't too scared of PHP.

So this is the messy part. I want to rewrite this into a proper stylesheet and just parse it instead of the current scheme. Sadly, Quicktopic doesn't allow us for adding proper stylesheets, inline styles is all we get.

So this is it. On the bottom of this mess is a list of rules, plus what to do with those rules.

/***
 * IMAGE style
 *  Syntax: |filename.png|
 ***/

$IMAGE_STYLE = <<<EOD
display: flex;
display: -webkit-flex;
display: -moz-box;
align-items: center;
EOD;

$IMAGE_ATTRIB = <<<EOD

EOD;

$IMAGE_REPLACE = function ($match)
{
  $image = $match[1];
  $imageDim = getImageSize($image) or array(0,0);
  $retval = <<<EOD
<b style=
        "
	 display:block;
         background-size: contain;
	 background-repeat: no-repeat;
	 width: {$imageDim[0]}px;
	 height: {$imageDim[1]}px;
	 background-image: url('{$image}');
	"
></b>
EOD;
  return $retval; 
};

/***
 * SECTION style
 *  Syntax: ### Headertext
 ***/

$SECTION_STYLE = <<<EOD
border: 1px solid black; 
background-color: #D3D3FC; 
padding: 1em; 
margin-bottom: 5px;
width:700px; 
font-family:'Verdana'
EOD;

$SECTION_ATTRIB = <<<EOD
onmouseover= "this.style.backgroundColor='#E3E3FE';" 
onmouseout= "this.style.backgroundColor='#D3D3FC';"
EOD;

$SECTION_REPLACE = <<<EOD
<b style="float:right; color:gray">$1</b>
EOD;

/***
 * ICON style
 *  Syntax: [symbol tooltip]
 *  The symbol may be a character or an image. 
 ***/

$ICON_STYLE = <<<EOD
display: flex;
display: -webkit-flex;
display: -moz-box;
align-items: center;
EOD;

$ICON_ATTRIB = <<<EOD
EOD;

$ICON_REPLACE = function($match)
{
  $image_or_symbol = $match[1];
  $tooltip = trim($match[2]) or "";

  if(preg_match("/http[s]?:\/\//", $image_or_symbol)) 
  {
      // it's an image.
      $tooltiplevel = 0;
      $imageDim = getImageSize($image_or_symbol) or array(0,0);
      $retval = <<<EOD
<u style=
        "
	 display:block;
         background-size: contain;
	 background-repeat: no-repeat;
	 width: {$imageDim[0]}px;
	 height: {$imageDim[1]}px;
	 background-image: url('{$image_or_symbol}');
	 margin-bottom: 2px;
	 margin-right: 4px;
	 border-radius: 6px; 
	 border: 3px solid gray; 
	 color:white; 
	 background-color:black; 
	 text-decoration:none; 
	 text-align: center;

	"
EOD;
  } else {
      // it is text
      $tooltiplevel = 1;
      $retval = <<<EOD
<u style=  
        "
	 display: block; 
	 width: 32px; 
	 height: 32px;
	 margin-bottom: 2px;
	 margin-right: 4px;
	 border-radius: 6px; 
	 border: 3px solid gray; 
	 color:white; 
	 background-color:black; 
	 text-decoration:none; 
	 text-align: center;
	"
EOD;
  }

  // add tooltip mouseover if supported
  if($tooltip != "")
  {
     $retval .=  <<<EOD
onmouseover= "this.getElementsByTagName('b')[$tooltiplevel].style.display='block';"
onmouseout= "this.getElementsByTagName('b')[$tooltiplevel].style.display='none';"
EOD;
  }

  $retval .= ">";

  if(!preg_match("/http[s]?:\/\//", $image_or_symbol))
  {
    // add a content box. This is only used if symbol mode, but made anyway. Deal. 
    $retval .= <<<EOD
<b style= 
          "
	   font-size: 180%; 
	   font-weight: normal;
	  "
>
$image_or_symbol
</b>
EOD;
  }

// add tooltip box 
  if($tooltip != "")
  {
     $retval .=  <<<EOD
<b style=
          "
	   position: absolute; 
	   margin-top: 35px; 
	   border-radius: 6px; 
	   border: 3px solid gray;
	   padding:0.4em; 
	   background-color: black; 
	   color:#cfcfcf; 
	   display:none; 
	   text-align:left; 
	   z-index:1
	  "
>
$tooltip
</b>
EOD;
  }
  $retval .= "</u>";
  return $retval;

};


/***
 * HEADLINE: 
 *  Style: *Bold text*
 ***/

$HEADLINE_STYLE = <<<EOD
EOD;

$HEADLINE_ATTRIB = <<<EOD
EOD;

$HEADLINE_REPLACE = <<<EOD
<b style="display: block; font-size: 130%; margin-bottom: 4px;">$1</b>
EOD;

/***
 * DEFAULT TEXT
 *  Style: Anything that didn't match anything else 
 ***/

$DEFAULT_TEXT_STYLE = <<<EOD
margin-top: 5px; 
margin-bottom: 5px; 
EOD;

// These are the transformation rules imposed by the parse() function. 
// Technically not part of the stylesheet themselves, but to show how this hangs together. 
// The first element is a regex. It works alongside second and fourth parameters but doesn't do anything alone. 
// The second element is a style. If present, the matching container (preg_match) will be sybject to this style. 
// The third element is an attribute. If present, it will be added to the container tag. Useful for JS event triggers. 
// The fourth element is a replacement string OR closure. If present, tags matching (preg_replace/preg_replace_callback) will be substituted. 
//  - This replacement string is usually used to add additional tags before or around the actual content. 
// The fifth parameter is whether the engine should inset an additional DIV tag to hold the content. 
//  - Ideally (but not currently) merged for several nested layers of inset divs so that only the innermost one is added. 
$ruleset = array
  (
    array("/###(.*)/u", $SECTION_STYLE, $SECTION_ATTRIB, $SECTION_REPLACE, 0),
    array("/\*(.+)\*/u", $HEADLINE_STYLE, $HEADLINE_ATTRIB, $HEADLINE_REPLACE,0),
    array("/\[([^ \]]*)(.*?)\]/u", $ICON_STYLE, $ICON_ATTRIB, $ICON_REPLACE, 1),
    array("/(?<!url\(')(http[s]?:\/\/.*?\.(?:png|gif|jpg|jpeg|PNG|GIF|JPG))/u", $IMAGE_STYLE, $IMAGE_ATTRIB, $IMAGE_REPLACE, 1),
  );

[Reticence]

I'm honestly really disappointed that you guys did not play in your DnD game. That game needed some proper RP wars.

Indeed. The reality that I likely will not ever play in my own D&D game does have me a little sad.

@Reticence:
I hope you aren't too scared of PHP.

PHP does not scare me, although I was hoping for something more... visual.

/takes a look.

[Dendrek]

I don't know PHP, though I imagine it's not hard to learn. Why choose specifically to write it in PHP? I understand you're having a server do the encoding (if I'm not mistaken), but if you wrote this in javascript, the encoding could be done locally and you wouldn't need to worry about server downtime. Added benefit of writing it in javascript: you can actually write it in proper CSS format and parse it.

Although, now that I think about it, why couldn't you write it in CSS format and then have PHP parse it as plain text?

[Graeham]

Dendrek.

[Crackleslap]

Lol Dendrek banned! xD