To make editing questions easier in Digital Icebreakers, I’ve added Bulk Edit functionality to question editing. Clicking the Bulk Edit button on the Questions page lets a user edit questions as lines of text in the following format:

- A question starts with a dash
Until the next dash, each line is an answer
* The correct answer starts with an asterix
- This is another question!
etc

This makes editing questions far easier even in a modal dialog, but, one could also copy/paste the text easily into something like vscode for increased manipulation.

Bulk Edit source | digitalicebreakers.com

I’ve updated the Poll feature of digitalicebreakers.com to support a Trivia mode. For any questions present, selecting an answer as the correct answer will cause this new Trivia mode to be active. Once active, Trivia mode includes the following new features:

• Questions may have a correct answer configured
• Correct answer is displayed on the Presenter’s Responses view
• New scoreboard view. Points calculated based on Players selecting correct answers
• Player’s ability to answer is blocked whenever the Presenter is displaying the answer or scoreboard
• Players can now see the question on their device along with the answers

More info

I wanted to add a feature to digitalicebreakers.com that would let the presenter randomly select a member of the audience. I came up with the idea of the audience member’s names floating around the screen and gradually fading out, leaving only the winner.

Initially I thought this would only take me an hour to implement, but a number of edge cases meant I wrote a bit more than I was expecting.

Never-the-less, it’s complete now and includes the following features:

• Audience names appear in random colours and bounce around the screen
• When the presenter selects Pick, the names that weren’t picked are faded out over five seconds, leaving only the winner
• After the five seconds, the audience’s devices update to show a green background and a winning message in the case of a win, and a red background in the case of a loss
• If the audience joins, or leaves, while the game is running, they will appear/disappear on the presenter’s screen immediately.
• The pick is cached on the backend, so if an audience member refreshes their device, it will update with their current pick status
• Refreshing an audience device changes their random cololour on the presenter’s screen
• If an audience member’s name is too long, it will appear smaller than other names on the presenter’s screen

digitalicebreakers.com | source

First there was BagsOnSale but, after an amount of refactoring, now there’s also DressFwrd. Where the former is a generated edit focusing on discounted items from multiple sources, the latter is a both a single source of content and specifically international designer brand dresses only.

I hope to add another which will be specific to Australian-based dress designers, and another which will be specific to international non-discounted bag brands. At some stage I’d like to look into having the bots engage with each other…

DressFwrd | BagsOnSale

I started playing around with hashtags on twitter.com/bagsonsale and posts there each have two hashtags, but I’ll look into expanding it the future. Also, after running for a couple of months the bot is starting to run out of content, I’ll have to find it some more sources.

I implemented a full reskin of the website view of the feed and most importantly it now works on mobile. To achieve the design I had to override the styling on strikethrough text which is not available natively. The approach I’ve used to have orange strikethrough is detailed here.

When using material-ui/makeStyles in React (JSS?) you can’t set content: '' as it produces an invalid style. Instead wrap in quotes: content: "''".

bagsonsale | bags

I need to build out some supporting mechanics, like a tech tree. I want to procedurally generate it, but it’s difficult with no visualisation. Instead rolling my own, I found one already existed for the graph library I’ve integrated. A couple of PRs later and I can pass my own instance of PIXI to the visualiser.

To demonstrate this I’ve passed the underlying graph that represents the garage’s floor plan to the visualiser. It also supports zooming & dragging.

Play garage v0.6

I needed stacking toasts/snackbars for a bit more interaction so I turned to notistack and orders enroute are now displayed with a progress bar - they disappear when the order arrives. Visibility of the cash a player has to spend is now visible via App Bar.

Play garage v0.5

I had told Meligy only last Thursday that Digital Icebreakers included front-end tests only to find out this weekend that in fact, it did not. Fixing bugs with tests by isolating logic often reduces the cognitive load it would otherwise take to fix a bug, so now there are tests.

I also solved a particularly nasty (render only) bug in recharts. I really like that library but it’s implementation is kinda like using reflection and it’s a nightmare trace.

digitalicebreakers.com | Source

After posting some updates on garage I realised that I often have content that sits somewhere between blogging and note taking but I don’t end up writing it because it sits in neither. The result of this is that I’ve integrated micro.blog into my site via a devlog section on the homepage.

Micro.blog takes care of twitter cross-posting and I’ve edited its theme to look similar to staffordwilliams.com. As the rest of my site is static generated, I pull the content into the homepage via RSSParser. You can see the code in the source for index.html.

I want to have people walking around the garage performing tasks, like collecting resources and building things. The player won’t have direct control of these people, but will be able to influence their priorities. I’ll need pathfinding and way to manage where things are on the screen. I’ve added nGraph to solve this which I find has a simple API that Just Works™. This also required a refactor to the drawing system so nodes could be drawn indepently from one another.

I implemented buying parts and, upon purchasing, the Orders screen is populated with the expected delivery and it’s arrival time. When the arrival time reaches zero, the parts ordered appear in the drop-off zone. The first idea of currency is implemented and the buy button is disabled when funds are not sufficient. Additionally, should a player cancel an incoming delivery, they’ll be refunded only 75% of it’s original cost.

I hit an issue in pixi.js where a single PIXI.Graphics I was drawing to was displaying the wrong color after a call to beginFill. The issue was sporadic and I was unable to isolate it outside of my code in an Minimum Working Example. The workaround was to split the draws up between PIXI.Graphics.

Play garage v0.4

A number of changes over the last couple of days increased the complexity of the project a bit. For one I hugely refactored an old shared library and converted it to a private npm package - this had no noticeable effect on the game but will either save me time in the future for this game or others. To hasten UI development I ninja’d Material-UI into the mix with a Speed Dial and animated Dialog offering the first real bit of user-interaction. I have fond memories of Street Rod and searching the local paper in that game for parts. Likewise, in garage, the player will be able to buy and sell in a similar fashion. Parts to purchase will refresh periodically and currently do so every 10 seconds for demonstration purposes. Even at this early stage, state became difficult to manage, so integrated redux, tho I’m not sure how suited it is to games.

Play garage v0.3

If you didn’t guess by the url already, the game (for now) is called garage. In this game, you’ll have a garage/shed, and you’re going to make stuff in it. For a while, you’re going to need your imagination. I’ve added pixi.js to the project and rendered our first garage. You can render a new one by refreshing the page. And look what happens to the cursor when you move it over the garage…

Play garage v0.2

It’s come around to that time where I feel I need to invest countless hours in writing a game again. I’m going to micro blog it as I go. It starts with create-react-app and a github workflow that will build it and push updates to S3. Here it is, it’s not much, but it had to start somewhere.

Play garage v0.1