The Room Where It Happens

Dear Tim,

I went back to coding today/last night and had some fun building up the frontend some more. I’m still missing some pages but this one’s a big one – the parliament page.

So, let’s start with context. I’ve mentioned my plan for a project to simulate a political structure in a fictional country, but of course it’s not going to be go incredibly in-depth. There has to be layers of abstraction and simplifications. Rather than delve into the construction of the citizens, how they run for election, let’s forget all that and talk about the assembly. When my people have elected a member of parliament and then they can vote on policies to turn into law.

Each member is formed of a citizen (obviously) and then its afore-mentioned candidate data. There’s nothing special in the attributes of a member of parliament (an MP) compared to a candidate apart from the fact it is part of an assembly. However, the important qualities are the six statistics I drummed up for a candidate that are used when part of the assembly. Now get ready because these are going to seem progressively odd: Charisma, Loyalty, Tenacity, Baldness, Fear of Bears, and Socks. Then there are the policies that the candidate has part of his platform – a list of ten policies of which their preference is the highest. One of these is picked to go the assembly. Usually, it’s the highest one, but if the policy is already in the assembly thanks to another MP then they pick the next one in their list. And down the list they go if each of them are already up for discussion.

This information is something I want available to my site visitors, so when they visit the parliament page they’re going to get a nice graphic of all my assembly members gathered together as a grid of 6×4 icons, each with their constituency icons, each with the MP’s name and a link to their candidate page, and the policy they’ve brought to the assembly. Easy! Bulma was too cozy of a style to display this so I went and used the CSS grid layouts for that. In the future, the colours of each icon will change depending on the political party that candidate belongs to, but that functionality is for another day.

Now we come to how the policies get passed to law. Everything is done by votes, we love voting in our democracy loving world of Kalmany! But I need to simulate a discussion and that’s where our candidate attributes come into play.

I started with the attributes first to help burgeon my imagination. I knew I wasn’t going to be able to create a properly accurate political assembly so I wanted to make it almost like a battle, a video game, a turn-based game. Charisma is the instant winner for attributes in a discussion; good charisma means you can make a good argument! Tenacity is less so, but still usable – a feeling of determination. Loyalty, less so even still, but will likely go hand in hand with the political parties.

The way I styled it is first comes the policy the MPs will discuss. Then in a random circle, each MP will choose whether to make a case for or against the policy. This is using their charisma: a random integer is generated between 1 and 10, that then has to be lower than their charisma to be successful. If successful, the policy gets a boost of 1 or -1 depending on their opinion on the policy. Now, if they are arguing for or against, they can argue against the person who just successfully made a case. This takes into account their tenacity, and then measures against their fear of bears, or their baldness. This is a stylistic choice and not a clever, AI manipulated one, but gives the candidates a little flavour.

The socks I implemented in my usual fashion; the lore goes that any MP in the assembly can only speak if they throw a sock into a ring. In this regards, the socks are no longer a measurement of an attribute, they’re a count of how many times an MP can speak in an assembly. And so there’s some extra logic where an MP will evaluate if the policy is important enough (a measurement of their preference) and if they’ve enough socks. This also means that as the assembly goes on, less and less people will speak out for or against as they run out of socks.

Eventually, everyone votes on the policy discussed, using their own preference of the policy and including the boost gathered from everyone’s arguments. If more than a third of the MPs vote yes, and they outweigh the no, then the policy is passed! And we have one round of the assembly done. The cycle continues until each member has brought a policy to the table.

for defendant in assembly:
  policy_discuss = mp.policy
  for opposition in assembly:
    if mp.getPreference(policy_discuss) > 0:
      if mp.socks > 0:
        if random.int(0,9) < mp.socks + mp.getPreference:
          mp.socks--
          mp.argueFor()
     elif mp.getPreference(policy_discuss) < 0:
          // Repeat as above
     else:
          // mp as nothing to say

// This is a bunch of hooey pseudo code rather than the actual python I wrote - I realise now I can do away with my two elses by just checking preference isn't equal to zero and adding any additional logic necessary as and when its needed, as checking for socks and whether its important is in both sections. Basically I just wanted it so if the mp doesn't care about the policy, they don't say anything

So this is the next thing I want – gotta have the assembly transparent. So in my parliament page, I want to display a running feed of what the assembly is doing. This I originally had written to look like a simple log of text running down in a list, but after seeing that Bulma has the Media Content classes, I thought having it look almost like social media was an interesting idea. The tricky thing is that the media content classes use nesting of objects, and I mean proper nesting. That and I still want my list to be chronological.

The latter complication I fixed in the code – no arguments can be made unless the last case made for or against the policy was successful. That way, the argument is a continuous object and can’t be broken up. The former was a damn nuisance – if you have an array of objects where they may or may not rely on one another, then the rendering in React becomes disjointed as it can’t render a comment thread until all comments are found.

I made a go of it and got an initial set-up done. I added the CSS and felt I had a good starting point:

Nope! Something broke. It’s the flex attribute in the CSS messing this all up and nothing is causing it to break into a new row so its all bunching together. I tried to find a reason for this, be it the fact its in a column or perhaps it’s some other CSS messing it up.

But in the end, the obvious answer is to scrap trying to build my code around Media Content, and just spec up my own CSS to do the same thing. After all it’s just styling, which is another thing that will get passed up from my messages – a style attribute to embolden the successes, italicise the failures, green the positive moves, and red the negative ones. Basically make it relatively enjoyable to read.

The thing is, no one will read the whole feed unless they’re REALLY interested in seeing a lot of the same statements over and over again (I might randomise that a bit) so it doesn’t have to be perfect. Just good enough to be viewed in the corner of your eye and sense how the assembly is going. Which is why the parliamentary grid is going to need an upgrade too: embolden the successful members and display their carried motions, and italicise and downplay the failures (you can see where those will go). The trick will be to keep everything looking tight and pretty without too much noise.

But once done, we’ve have our pretty interface to see the room where it happens! I expect this and the constituency election pages will see the most traffic, but that’s a topic for another time.

Anyway, I heard you got into Switzerland. Remember the PIN code is not what you think it is – its reversed. Remember to ask for Stefan, but the right Stefan! If you get Stefan instead of Stefan, you’ll be in trouble, but Stefan will treat you well. Stay safe.

Yours,
Stan