We've been doing "make days" at GatherContent for the past few years. There aren't too many rules involved, but they essentially involve us dropping everything for a day or so to work on random side projects.
The idea is that we can play around with new technologies, do some no-strings experiments, and generally have a bit of a potter around as a team.
After some intense pitches, we settled on the idea of creating a Top Trumps style card game but using jams and preserves. Because, Jamstack, yeah? Good one.
Some of the runner up ideas were:
A 'bad' day out generator: Pulling in 1-star reviews of various places from Google and Trip Advisor and creating an agenda for a generally terrible day out
Re-creating Myspace: This seemed like quite a lot of work for a day.
Jam-sweeper: Like Minesweeper, but jam.
Consequences: A choose your own adventure story, as an interactive version of the books.
Anyway, Top Trumps did what it does best, and topped the trumps.
It seemed like a good candidate because we could make the gameplay and content quite ridiculous, we could also use GatherContent as a really great way to create and deliver the content, and Gatsby would work really well to create the front-end experience. A solid plan.
The method
The first thing we did was create the content model. Because that is always the right thing to do. Ok? Yes, ok.
(In reality, we spent quite a long time at the start figuring out how Top Trumps actually worked, how many cards were involved and what the rules were).
The content model
We handled all of the content design and modelling in GatherContent, because we heard it's a pretty great product for that ;)
We followed these steps:
We created a project in GatherContent, which contained a folder of 30 items, one item per card
We also had folders and items for the project description and another for the game rules (nice and abstracted), as well as a folder for re-usable SVGs
We then created a template for each card, containing fields for the jam name, image (+alt text) and description. Most importantly, it had five range fields (scored from 0 to 10) for each jam stat:
Tastiness
Spreadability
Versatility
Trendiness
Rarity
How else would you rate a jam?
Once this was agreed, we could move on to building the game logic, starting the designs, writing the content and building the front-end.
The game logic
The game is quite simple...
You play against the computer
There are 30 available jam cards in total, you start with 5 each
You select a jam stat to play and if you score the highest stat you win both cards
The person to win all cards wins the game
But as you would imagine, it's not really that simple, some complications were:
How to handle a draw
How the final score is calculated.... Spoiler, it's = 20000 - ((timeSeconds * 10) + (rounds * wins))
Keeping track of the game state
The content
We wrote all the content and got it approved using GatherContent. As you would expect, this resulted in a really fast and simple process, where non-technical people could write about jam using a familiar editing experience. The content was then approved to make sure it was safe and adhered to a few basic tone of voice rules.
Once the content was approved, we used our API and the Gatsby source plugin to pull it into the front-end. This was all set-up using Gatsby components.
The front-end
It was our first experience using Gatsby on a project and was honestly such a great experience.
We were dealing with complex components, and the Gatsby Source plugin really helped with mapping our content model to use in the UI using GraphQL. This gave us instant parity between GatherContent and the UI.
This was made very easy by Gatsby's GraphQL data model and data querying tools. We carried out the following steps to build the frontend:
Created routes using Gatsby's file system routing
Grabbed data from GatherContent using our Gatsby Source plugin and the `pageQuery` and `useStaticQuery` methods
Built out the pages and interactivity with React and Javascript
Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!
And that's a Jam Slam
You can play Jam Slam online now. Forget about the mess that was 2020, and slam some jams. It's worth it for the music alone 🎵
This project taught us a lot and was a great way to get stuck into more Jamstack technologies and we'll be open-sourcing this code over the next few weeks.
We've been doing "make days" at GatherContent for the past few years. There aren't too many rules involved, but they essentially involve us dropping everything for a day or so to work on random side projects.
The idea is that we can play around with new technologies, do some no-strings experiments, and generally have a bit of a potter around as a team.
After some intense pitches, we settled on the idea of creating a Top Trumps style card game but using jams and preserves. Because, Jamstack, yeah? Good one.
Some of the runner up ideas were:
A 'bad' day out generator: Pulling in 1-star reviews of various places from Google and Trip Advisor and creating an agenda for a generally terrible day out
Re-creating Myspace: This seemed like quite a lot of work for a day.
Jam-sweeper: Like Minesweeper, but jam.
Consequences: A choose your own adventure story, as an interactive version of the books.
Anyway, Top Trumps did what it does best, and topped the trumps.
It seemed like a good candidate because we could make the gameplay and content quite ridiculous, we could also use GatherContent as a really great way to create and deliver the content, and Gatsby would work really well to create the front-end experience. A solid plan.
The method
The first thing we did was create the content model. Because that is always the right thing to do. Ok? Yes, ok.
(In reality, we spent quite a long time at the start figuring out how Top Trumps actually worked, how many cards were involved and what the rules were).
The content model
We handled all of the content design and modelling in GatherContent, because we heard it's a pretty great product for that ;)
We followed these steps:
We created a project in GatherContent, which contained a folder of 30 items, one item per card
We also had folders and items for the project description and another for the game rules (nice and abstracted), as well as a folder for re-usable SVGs
We then created a template for each card, containing fields for the jam name, image (+alt text) and description. Most importantly, it had five range fields (scored from 0 to 10) for each jam stat:
Tastiness
Spreadability
Versatility
Trendiness
Rarity
How else would you rate a jam?
Once this was agreed, we could move on to building the game logic, starting the designs, writing the content and building the front-end.
The game logic
The game is quite simple...
You play against the computer
There are 30 available jam cards in total, you start with 5 each
You select a jam stat to play and if you score the highest stat you win both cards
The person to win all cards wins the game
But as you would imagine, it's not really that simple, some complications were:
How to handle a draw
How the final score is calculated.... Spoiler, it's = 20000 - ((timeSeconds * 10) + (rounds * wins))
Keeping track of the game state
The content
We wrote all the content and got it approved using GatherContent. As you would expect, this resulted in a really fast and simple process, where non-technical people could write about jam using a familiar editing experience. The content was then approved to make sure it was safe and adhered to a few basic tone of voice rules.
Once the content was approved, we used our API and the Gatsby source plugin to pull it into the front-end. This was all set-up using Gatsby components.
The front-end
It was our first experience using Gatsby on a project and was honestly such a great experience.
We were dealing with complex components, and the Gatsby Source plugin really helped with mapping our content model to use in the UI using GraphQL. This gave us instant parity between GatherContent and the UI.
This was made very easy by Gatsby's GraphQL data model and data querying tools. We carried out the following steps to build the frontend:
Created routes using Gatsby's file system routing
Grabbed data from GatherContent using our Gatsby Source plugin and the `pageQuery` and `useStaticQuery` methods
Built out the pages and interactivity with React and Javascript
Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!
And that's a Jam Slam
You can play Jam Slam online now. Forget about the mess that was 2020, and slam some jams. It's worth it for the music alone 🎵
This project taught us a lot and was a great way to get stuck into more Jamstack technologies and we'll be open-sourcing this code over the next few weeks.
Angus is Co-founder and VP of Product at GatherContent, where he focusses on the product and research areas of the business – looking into the future of content management, and trying to improve the way organisations create and deliver information. A board member of the European Information Architecture Summit, he has been heavily involved with the Content Strategy, CMS, and product management communities for several years, and frequently writes and speaks around the intersection of these disciplines.
Share on Facebook
Share on Twitter
Share on LinkedIn
Share with email
