Interactive Fiction : React – Redux

Rebuilt the Interactive Fiction Player in React + Redux .

The Shivers

[Update 25/September/2019]
Refactored everything to Functional Components and made Hook based. Have added Jest Testing, and optimised with lighthouse.


[Update 16/March/2019]
Crossed my mind that the game engine might be more interesting if it could add some random elements. Maybe take it in a direction where it could run games similar to those from the series of Fighting Fantasy adventure books . I’m not sure if it will but I have added a dice roll to the game engine and also dealt with 10 months of technical debt so I’ve bumped up to the latest react version, migrated from CSS to styled-components and moved from JavaScript to TypeScript.


I decided to rebuild the Interactive Fiction Player using React and Redux. It still uses the same data structure so the same games can be played in the Angular version.

Previous post about Version 1 which was built with Angular / Typescript https://www.markhorsell.com/2017/03/interactive-fiction-angular-typescript/

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

Interactive Fiction – Angular + Typescript

The Shivers

Over the Christmas holidays of 2016 I played the game Firewatch https://www.firewatchgame.com/ ,it reminded me of the classic Interactive Fiction games of old, a genre I discovered that is still alive and well https://ifcomp.org/comp/2016, it also led me to this documentary which whilst it might be a big long and nerdy for some I also really enjoyed https://www.youtube.com/watch?v=o15itQ_EhRo

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",
"conditions":{"areCarrying":["HUNTING_HORN","MUSICAL_MOUTH_PIECE"]},
"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 🙂