Interactive Fiction Editor – AngularJS

The data for the Interactive Fiction game can get hard to follow when you have many dozens of rooms, objects and actions, add to that the annoyance if you miss a curly brace a square bracket or put an apostrophe in the wrong place.

So to make editing easier especially for people who aren’t used to looking at large json files I built an editor using AngularJS and Bootstrap3.

Interactive Fiction Editor


JavaScript or EcmaScript

I’ve just started looking for a new Job and after a few calls from the Agencies there’s one question which I’m finding hard to answer.

How many years of JavaScript experience do you have?

I think the question should really be.

How long have you been using EcmaScript and which versions?

So whilst I have been using JavaScript for 17 years and I could just say that, it’s changed a lot in that time and then for much of that time it wasn’t something I was using full time.

For years I was using Actionscript 3, you might know that it’s an ES4 language, which counter intuitively has much more in common with ES6 aka ES2015 aka Harmony, Typescript and Google Dart than it does with ES5!

But how could ES4 have those features if they weren’t in ES5? Well ES4 was ambitious it added Classes and more to JavaScript and it got bogged down politically. In 2007 it was abandoned and the standards committee went for a less radical update, however Adobe had the freedom to add whatever they liked to their own VM in the Flash Player and they went ahead, its only relatively recently that it’s features are appearing in the browsers thanks to ES6 and Babel.

And then just to confuse the agencies even more there’s TypeScript, which some refer to as ES2016+ or ES+!

But try explaining that to a recruiter and most would just glaze over.

This article explains what happened to ES4.
EcmaScript 4 was too far ahead of its time

Brendan Eich’s feelings about the abandonment of ES4, worth reading the comments if you’re curious about why it happened, but a lot of suspicion around it being a political move by Microsoft to hold the web back.

This shows where ES4 fits in.

And if you’ve never seen AS3 then here’s a link so you see the similarities with ES6.

John Papa’s thoughts on whether Typescript should be referred to as  ES+


Squirrel or Chicken – ReactJS & Clarifai

Ever wondered if you look more like a Chicken or are you a little more Squirrely? Can’t say I had until I came across Clarifai whilst thinking about a new ReactJS project.

Turns out it was incredibly easy to build an App to do this. Clarifai has a super simple dashboard where you can train it to identify almost anything. In fact I just had to show it three pictures of Chickens and three of Squirrels and it was pretty much there. I grabbed my free API which gives me a limited number of requests, created a single page React app, added some Progressive Web powers so I can run it App like on my phone and I was there.

I’m sorry this isn’t public as I can’t afford the unlimited request licence but here are the results.

Pretty definitively it knows that’s a Squirrel.

And clearly it knows that’s a Chicken…. but what happens if you give it a bigger challenge , say a ferret!

Seems about right to me. And of course the inevitable and something I’ve been trying out on any of my friends who are curious.

Interactive Fiction – Angular + Typescript

The Shivers

Over the Christmas holidays I played the game Firewatch ,it reminded me of the classic Interactive Fiction games of old, a genre I discovered that is still alive and well, it also led me to this documentary which whilst it might be a big long and nerdy for some I also really enjoyed

This all got me thinking that creating my own Text based Adventure game would be an excellent project for learning Angular 2+ and Typescript, so I started work on “The Shivers”. It’s a short game, but has enough in it to encompass several core Angular / Typescript concepts, manipulating dom, data and incorporating Dependency Injection, Services, Components and Directives. The game is entirely driven from a model so multiple games can be built without needing to touch the code. At the core of this is what I’ve started to call a decision engine, here’s a snippet.

"action":"Insert mouthpiece into the horn",
"results":{"message":"You now have a playable hunting horn.","take":["PLAYABLE_HORN"],"destroys":["MUSICAL_MOUTH_PIECE","HUNTING_HORN"]}
Actions are the commands available to the user as i didn’t want the annoying verb noun guessing of some adventure games.
There are several condition types, such as are carrying, room contains, location and have talors( Money ).
The results will always have a message and will perform a number of result actions:
message, change score, change location, destroy object, take object, drop object, change room description, add talors, remove talors, create exit and close exit.
These options are enough to build very complex combinations of puzzles to solve and its easy to add more should they crop up.

[Update 25/3/17]
Angular 4 was released a couple of days ago, have just updated the game from 2.3.1, nothing too painful a few dependency updates and some small code changes, but nothing horrible. Angular library looks like its almost halved in size from 800k to 450k, but that includes a lot of packages so cant see it getting much bigger even for a huge application. Game code has increased from 27k to 45k but I guess thats the trade off. Seems to be running faster as well 🙂

Charlie and Lola

What makes us happy.

Built to spec and implementing easy click mechanism for young childen.