
This month we completed probably the single largest change in the history of our game [BattleTabs](https://battletabs.io), we converted our 2D game to run completely in 3D. This was obviously a massive undertaking for a 3 year old game but I personally think the results are fantastic and unlock a whole bunch more capabilities for us.

# History

Ever since the very earliest version of [BattleTabs](https://battletabs.io) the game has been rendered using a 2D canvas (PhaserJS & PixiJS).

[![](./old-game1.jpg)](./old-game1.jpg)

This has been a surprise to some as they assumed the game was 3D but in actuality the art was authored in 3D then simply rendered out to 2D sprite sheets.

[![](./spritesheet.png)](./spritesheet.png)

This looked great and worked just fine at first but then we started to add more and more ships and started to run into issue with our process. I have previously [discussed this in detail here](https://mikecann.blog/posts/introducing-battletabs) but the short version is "isometric is hard".

<iframe width="853" height="480" src="https://www.youtube.com/embed/ivIm2bZNQ3Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Not only did the 2D pipeline cause us issues in art output it also limited us design wise.

For example, we would liked to have done 4-way rotations, but that would have meant we would have to render out the ships facing the opposite direction then sliced them up, increasing the art load significantly. We also would have loved to have more than one animation per ship.

# Mobile Woes

There was a bigger looming issue on the horizon however; our port to Mobile. With mobile we knew that the smaller screen size was going to be a big problem for the game as there simply wasnt going to be enough space to fit both boards on screen in portrait or landscape.

[![](./mobile1.png)](./mobile1.png)

We could have done some clever scaling and blurring to give the illusion of depth:

[![](./battle-screen.png)](./battle-screen.png)

This however would limit our future plans for improving the scenery aesthetics and features:

[![](./scene-mock.jpg)](./scene-mock.jpg)

What we needed really was a way to rotate and move the camera in 3D space so we could shift the players perspective around the world.

[![](./perspective.png)](./perspective.png)

# Going 3D

So for these reasons (and others) we decided to bite the bullet and rewrite the game in 3D.

We did some preliminary investigations into various game engines:

[![](./editor-research.png)](./editor-research.png)

We really liked the look of Godot and Unity. We have lots of experience with Unity as as team but worried that its Web output file size would have been too large for users to download.

In the end the thing that decided it for us was the mountains of existing shared code between the server and client and we really didn't want to have to rewrite that in another language (such as c#) and then potentially have to maintain two codebases.

We decided to stick with our existing codebase and replace the [PixiJS](https://pixijs.com/) 2D engine and replace it with a [BabylonJS](https://www.babylonjs.com/) 3D engine. We went for Babylon because of the great documentation, feature set and rave reviews from other developers.

Because we were using a custom ECS implementation for the 2D version in theory I should have been able to simply swap out the 2d rendering components and systems and replace them with 3D versions. In reality there was too many other things that required changes that I decided to start from scratch with a brand new ECS architecture.

After a lengthy evaluation process I ended up going with hman's excellent [miniplex](https://github.com/hmans/miniplex). Miniplex is so cool I think I will devote an entire post to it in the future but ill just say if you need an ECS engine in JS and dont need vast numbers of entities then I strongly recommend miniplex.

<iframe width="853" height="480" src="https://www.youtube.com/embed/hbAWQYpoL-c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

As this post is getting quite long already ill skip a lot of the middle ground and just say that our artist, Sophie, did an incredible job converting the existing ships and assets over to work in 3D. She slogged through all 30 ships 3 times to get the number of draw-calls down and performance under control but I think the end result is fantastic.

For this first release we decided to keep the game looking as close as we can to the 2D version. This reduced the number of design-related changes so we could simply focus on the bare essentials of the port. This also reduced the list of changes for our existing user base.

# Conclusion

Since we released the 3D update earlier in the month, we have have done a number of follow-up updates including the first feature we were unable to do in 2D; full 4-direction ship rotation!

<iframe width="853" height="480" src="https://www.youtube.com/embed/BtXFBOO-Gk8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I feel like we now have a really firm footing which to build on for our mobile port and upcoming set of exciting features.

Stay tuned as I think 2023 is going Gangbusters!



As a [game developer of 30](/about) years I like to stay up to date with new tools and techniques in my chosen profession. There is however a change coming of such magnitude I think its going to totally upend the way games are made in the future.

# History

Before we can talk about the future of Game Development we must first take a quick trip to the past to see how we got here.

I remember first being blown away by AI powered image generation technology 6-7 years ago when [CycleGAN](https://github.com/junyanz/CycleGAN) was first released allowing you to "Style Transfer" a horse into a zebra:

[![](./horse2zebra.gif)](./horse2zebra.gif)

This led to a whole world of incredible advances, notably [StyleGAN](https://arxiv.org/abs/1912.04958) brought the ability to generate very realistic human portrait photos. Checkout this page and hit refresh a few times:

[https://thispersondoesnotexist.com/](https://thispersondoesnotexist.com/)

This then led to an explosion of [This X does not exist](https://thisxdoesnotexist.com/) websites that are all based on GANs (Generative Adversarial Networks).

Around that same time there was a whole wave of "Deep Fakes" that used the StyleGAN process to impose peoples faces onto video creating incredibly realistic videos that could very easily trick unsuspecting viewers.

<iframe width="853" height="480" src="https://www.youtube.com/embed/gLoI9hAX9dw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Up to this point most of these techniques had been limited to either transferring style or generating images based on a highly specialized model.

Then came along a new wave of generic language models based on [Google Brain's Transformer Networks](https://ai.googleblog.com/2017/08/transformer-novel-neural-network.html), notably [GPT-2 and 3 from OpenAI](https://beta.openai.com/examples/).

[![](./gpt3.png)](./gpt3.png)

These massive multi-billion neuron models understand language much more deeply than anything that had come before them and are able to understand and translate human language with incredible accuracy.

Don't tell my wife but I actually used GPT3 to help me craft my wedding vows:

[![](./vows.png)](./vows.png)

These advances in language understanding were critical to the next wave in image generation; text to image.

You see, to be able to generate images from some text that you provide then the AI must first deeply understand all the words in a given prompt.

For example lets say we want "An oil painting of a cat surfing a massive wave while riding on a lemon".

To accomplish this the AI must have a deep understanding of not only what a cat, a lemon, wave and surfing are but it must understand those words in the correct order and then understand how to put them together to look like an "oil painting".

[![](./lemon-cat.png)](./lemon-cat.png)

[OpenAI's Dall-e-2](https://openai.com/dall-e-2/) was released this year as a commercial product was used to generate the above images.

Arguably more impressive images are able to be generated by [Stable Diffusion](https://stability.ai/blog/stable-diffusion-public-release) which unlike Dall-e-2 was released for free to the general public:

[![](./lemon-cat-sd.png)](./lemon-cat-sd.png)

Stable Diffusion and its cousin [Mid Journey](https://www.midjourney.com/showcase/) are more targeted towards "Concept Art" than Dalle-e-2 this means that althought it might still understand the words "cat", "lemon", "surfing" when it comes to generating the images however it is less likely to do a good job on the "oil painting" part of the prompt than Dalle-e.

When given a task that its designed for however it is REALLY good. I mean just checkout some of the examples on this page with the prompts used to generate them: [https://openart.ai/discovery?dataSource=md](https://openart.ai/discovery?dataSource=md)

Designing the correct prompt is itself an art however and there are now job positions opening for "Prompt Engineers".

# Game Development

So what has all this got to do with the future of game development?

## Concept Art

Well firstly in my opinion Stable Diffusion and Mid Journey have all but destroyed the "Concept Artist" sub profession in game development.

A bold statement I know, but why would you pay hundreds of thousands of dollars per year for a highly specialized concept artist when in a few seconds you can generate images like this:

[![](./fortnite.png)](./fortnite.png)
["fortnite in the year 2060"](https://openart.ai/discovery?dataSource=md&q=game)

[![](./house.png)](./house.png)
["medieval fantasy monster tavern inn, hidden mimic monster living organic building , isolated lane in mountains, deep forest, winding paths, lonely traveller, detailed living organic architecture hidden monster, Tudor fantasy historical, eye-windows, fangs, mouth-doors, tongue, rain, digital concept art, menacing"](https://openart.ai/discovery?dataSource=md)

[![](./woman.png)](./woman.png)
["beautiful cyberpunk woman in armor, dark hair, futuristic, intricate binary and electronic designs, elegant, highly detailed, sharp focus, ghost in the shell, mamoru oshii, nier automata, art by wlop, art by guweiz"](https://openart.ai/discovery?dataSource=md)

Sure, they aren't perfect, so I guess you could make the argument that concept artists in their current form would still be needed, if only to tweak the output to the intended application.

I suspect its more likely that "a concept artist"'s job will change. Instead of pushing pixels around with a [Wacom tablet](https://www.wacom.com/) instead they will simply become "Prompt Engineers". Taking in the request from their client and using their experience with a number of specialized models to iterate towards a result.

## Generalist Artist

Right now the models arent particularly well tuned for generating sprites / textures or other assets that we currently use to build games but I suspect that is either currently being worked on or is currently being used in the larger studios.

Given tools such as [Pixel Diffision](https://colab.research.google.com/github/KaliYuga-ai/Pixel-Art-Diffusion/blob/main/) or [Pixelator](http://pixelatorapp.com/) or [Monster Mash](https://ai.googleblog.com/2021/04/monster-mash-sketch-based-tool-for.html) I suspect its just a matter of joining the dots and putting these pieces together in one cohesive package.

Maybe [even more recent](https://waxy.org/2022/11/invasive-diffusion-how-one-unwilling-illustrator-found-herself-turned-into-an-ai-model/) advances from [DreamBooth](https://dreambooth.github.io/) will allow us to train models designed specifically for our game's art style.

Having said that I think ultimately we wont have such low-level tooling that humans use, instead, I believe things will go much grander direction..

## Code

So art in Game Development as we know it is dead. Surely we will still need coders like myself. Right? The 30 years of game-making experience I have built up aren't simply going to become obsolete. Surely?

Github's [Copilot](https://github.com/features/copilot) was released last year to much fanfare and its easy to see why. Given a simple prompt written in a comment it's able to generate large swaths of working code for you:

[![](./copilot.png)](./copilot.png)

As with image generation it uses very large complex language models under the hood to understand to break apart your prompt (and other context specific information from your workspace) and transform that into an output, generating one token at a time.

OpenAI, the creators of GPT-3 have also been working on their own code generation tool they call [Codex](https://openai.com/blog/openai-codex/). This I think this strongly hints at the direction things are going to go for game coders of the future:

<iframe src="https://player.vimeo.com/video/583550498?h=90927a1846&color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

See how the programmer no longer writes code. Instead he describes iteratively what he wants and lets the AI generate the code.

What happens in this world where the programmer no longer needs to write code? The syntax for the code becomes your own language; English, French, Chinese whatever. The countless arguments over semicolons or braces become obsolete and irrelevant when you no longer have to write using syntax dictated by a "programming language".

I have spent so much of my career thinking about and worrying over the best practices for programming. Am I correctly implementing the SOLID principles in OO C# or and I fully understanding the Monad or ADTs in Functional Programming? In the future <b>IT DOES NOT MATTER</b>. The output is the only thing that matters.

I think about the future of programming more as sculpting. You start off with a blank slate then using your own words you command by command iterate towards your end goal.

[![](./sculpt.png)](./sculpt.png)
"a person sculping a half-finished masterpiece from a block of marble with a chisel, background is the inside of a grand building"

Imagine a future IDE / Game Engine such as [Unity](https://unity.com/) or [Unreal](https://www.unrealengine.com/) where you write no code, there is no code to interrogate. All there is is a prompt. Sure you can still select things but that is only to give context to the prompt rather than to directly edit its vertices or textures or anything like that.

[![](./mockup1.jpg)](./mockup1.jpg)

# Conclusion

Do I think this is going to happen tomorrow, next year, next 5 years? Probably not but the more I think about it the more I see it as an almost inevitability that this is the direction things are going to go. Particularly as we integrate more and more AI into our work lives.

Don't believe me? Check out this incredible Tweet from Nat Friedman who used GPT-3 to generate an intelligent web-crawling agent to automate browser tasks: https://twitter.com/natfriedman/status/1575631194032549888?s=20&t=3eSi6pFWeSE7rMui4kdyyA

His prompt and generated code can be found here: https://github.com/nat/natbot/blob/27a357115093cfe9ca927c9e22fd07048e91eb36/natbot.py#L15

Now imagine that you couldnt see the code output python code, it doesnt matter. Just so long as the final product works as intended who cares if the code "looks good" or not.

I guess in some aspects this is the ultimate promise of [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development). We specify in written english what the system under test should do and dont care about how it does it so long as it does it.

Perhaps BDD will become the programming "language" of the future?

```
Title: Mario 2032

As a game player,
I want to play a side scrolling platformer where I control a player that has to run and jump over obstacles and avoid enemies and solve puzzles

Scenario 1: The player can move left or right
Given that the player is alive and is controllable,
When I press left or right on the keyboard,
Then I should move the character left or right depending on the direction pressed.
```

Keen to hear your thoughts, drop me a comment below!



Im super excited to announce that [Gangbusters](https://www.gangbusters.io/) (the company that I am a co-founder and CTO of) has been joined on its journey by the gaming powerhouse [Bandai Namco](https://021fund.bn-ent.net/en/news/)!

We are super excited by this as it not only allows us to grow our team and ambitions it also validates our strategy and enhances our brand by having the creator / publisher of [such large IPs](https://en.wikipedia.org/wiki/List_of_Bandai_Namco_video_game_franchises) behind us:

[![](./bandi-ips.jpg)](./bandi-ips.jpg)

Bandai are joining a number of other investors as part of our early-seed round to help us realize our Web3 ambitions and take BattleTabs to mobile.

[![](./other-investors.png)](./other-investors.png)

Its been a long roller-coaster of a journey to reach this point but after 3 years of working in a very small team im really happy that we are finally able to grow a little bit and hire some more gang-members.

We still have a tough path ahead of us with some ambitious plans but I think we are starting to assemble a fantastic team that will allow us to get there. I personally cant wait to show our incredible community what we can do now!

If you are interested in partnering up or what we are working on, reach out to: mike@gangbusters.io or brandon@gangbusters.io.



I don't tend to post about general programming topics these days because I usually don't have much to add to the public discourse available in innumerable blogs, videos, podcasts and other places. However over the last year or two I have started to heavily adopt some programming pattern that I find so valuable that its worth re-iterating in my own words.

## TLDR;

If you are proficient with Typescript already you might want to skip these first two introductory sections and head down to the part on Pattern Matching with Variant and Examples from BattleTabs below.

## The Problem

Before I dive straight into the solution I think its always valuable to start with the problem we are trying to solve.

So lets start with a simple example. Suppose we have a website that has a simple auth system that represents its "User" with the following type:

```ts
type User = {
  id: string;
  email: string;
};
```

Now lets suppose that we pass that user to a some rendering logic (in this case React):

```ts
interface Props {
  user: User;
}

export const WelcomeBanner = ({ user }: Props) => (
  <div>
    Welcome {user.email} <a>logout</a>
  </div>
);
```

We also have another function somewhere else in the codebase that uses the User object:

```ts
export const shouldUserBeAbleToLaunchRocket = (user: User): boolean => {
  if (user.email.endsWith("rockets-r-us.com")) return true;

  return false;
};
```

This is all well and good, you launch the website, everyone is happy with how it works. But then the fun and games begin..

You are asked to support "anonymous" users. This is a User that has an ID but not an email address. So you go ahead and update the type of User so that the email address is now optional:

```ts
type User = {
  id: string;
  email?: string;
};
```

We now get a compile error on the server because you cannot assign a string to our potentially missing email address.

[![](./ss1.png)](./ss1.png)

Our WelcomeMessage component on the client however will quite happily render an undefined as an empty string resulting in a bug in our UI. We luckily catch this before it goes to production however and a quick patch later and we are okay again:

```ts
type Props = {
  user: User;
};

export const WelcomeBanner = ({ user }: Props) => (
  <div>
    Welcome {user.email ?? "anon"} <a>logout</a>
  </div>
);
```

The above is obviously a simple and contrived example, and im sure you are saying to yourself, well just dont forget to update everywhere you use the user and you shouldn't have a problem.

Well the problem is most codebases are much larger than this toy example and have been developed over the course of years with multiple different team members. Even well unit-tested code can quite easily see small issues like this creep into the codebase.

What would be nice is if the compiler could tell us about all the places we are using `User` and force us into making sure that what we are handling the new possible code branches.

Fortunately with Typescript there is a way..

# Unions

I think we need to take a step back first to when introduced the anonymous user. The problem is we changed the `User` type to represent what should have been two distinct "kinds" of user. So lets just try writing out both of those types now:

```ts
type AuthenticatedUser = {
  id: string;
  email: string;
};

type AnonymousUser = {
  id: string;
};
```

Cool, that seems nice and clear, but we still need a way to represent the single `user` variable in our code. So we can solve this by "union"'ing our two types together:

```ts
type User = AuthenticatedUser | AnonymousUser;
```

Our user now either an `AuthenticatedUser` OR and `AnonymousUser`.

We have made our type code a little clearer now but we havent really solved the "compiler please help me our" problem stated above, we would still run into the same problem in the first section.

The issue stems from the fact that we need a way to "discriminate" between the two "kinds" of User. So we can do something like this:

```ts
export const WelcomeBanner = ({ user }: Props) => {

  if (/* user is authenticated*/)
    return // some thing

  else
    return // something else

};
```

We could simply check to see if there is an "email" on a user, and if there is then this is indeed an Authenticated user, but what if we have another kind of user an "AdminUser" that also has an email, how do we now discriminate between an AuthenticatedUser and an AdminUser?

We could add different booleans like `isAdminUser` or `isAuthenticatedUser` but I think that is a bit gross and doesn't scale all that well.

Fortunately tho Typescript has a neat trick up its sleeve..

## Discriminated Unions

In a "nominally" typed languages like Java or C# we can check the type of something at runtime by doing something like the following:

```cs
if (user is AdminUser) {

}
```

It is possible to do it with Classes in JS / TS but there are lots of situations that its less convenient to use classes compared to simple JS objects for our data. Classes in JS also have a number of other issues that I wont get into in this post.

The big problem is that Typescript looses its type information at Runtime so we must come up with another way of "discriminating" between the different types in our `User` union.

A neat way we can do this in Typescript is by using a powerful feature of typescript called "literal types":

```ts
type AuthenticatedUser = {
  kind: "authenticated-user";
  id: string;
  email: string;
};

type AnonymousUser = {
  kind: "anonymous-user";
  id: string;
};
```

So note above the type of `kind` property on those two objects is different. Its not simply `string` and rather they are the literal value `"authenticated-user"` AND `"anonymous-user"`. So we have just invented a brand new type that MUST be that value and ONLY that value.

Now when we union the two users together in our `User` the type of the union of "kind" becomes "authenticated-user" OR "anonymous-user".

[![](./ss2.png)](./ss2.png)

With this we now have a way to determine the correct type of user because if the `user` object has a kind of `"authenticated-user"` then it MUST has an email and if its an `"anonymous-user"` then it MUST NOT have one:

[![](./ss3.png)](./ss3.png)

This "type narrowing" of the `user` is really cool but we can go a little further.

The real power comes in when we can lean on the compiler to remind us that we have forgotten about handling some case buried deep in our codebase.

To do this we need to lean on this "type narrowing" feature a little more..

# Exhaustive Matching

In the above section we showed that by discriminating between the "kind" of an object within an if-statement then we can "narrow" down the type of the object to JUST that kind. This means just the object properties defined by that type are available.

One other aspect of this "narrowing" of the `User` type is that the narrowed type in the `else` part of our `if-else` statement is also updated so that we actually didnt need to check for "anonymous-user" at all because it is now impossible for the type of user to be anything else:

```ts
if (user.kind == "authenticated-user") user.email = newEmail;
// email exists on the user
else user; // user MUST be an anonymous user
```

This is cool because it saves us some typing but what if we added our `AuthenticatedUser` to the `User` union so that it now becomes:

```ts
type User = AuthenticatedUser | AnonymousUser | AdminUser;
```

Now our assumption in the above if-else is wrong because `user` can now be an `AnonymousUser` OR an `AdminUser` depending on the code this could have now introduced a subtle bug.

So lets fix it by explicitly checking the kinds and handling them again:

```ts
if (user.kind == "authenticated-user") return user.email.endsWith("rockets-r-us.com");
// only company users can launch the rocket
else if (user.kind == "anonymous-user") return false;
else if (user.kind == "admin-user") return true;
// admins can launch rockets
else user; // but what is the type of user here?
```

So now we have handled every kind of user that we are going to get but the question is, what is the type of the user object that is left over from this?

[![](./ss4.png)](./ss4.png)

A `never` type is a special type in Typescript and has some special abilities but one of the perhaps counter-intuitive abilities it has is that it can be used as a regular type so we can write a function like this that takes a never type:

```ts
const exhaustiveCheck = (variable: never) => {
  throw new Error(`should never get here!`);
};
```

This looks kind of funky I know, but what it lets us do is enforce the rule at compile-time that we expect there to never be any more "kinds" of user:

```ts
if (user.kind == "authenticated-user") return user.email.endsWith("rockets-r-us.com");
else if (user.kind == "anonymous-user") return false;
else if (user.kind == "admin-user") return true;
else exhaustiveCheck(user); // we expect that the user should be "never"
```

This means if we forget to handle a kind of user in our if-else then we will get a compile error:

[![](./ss5.png)](./ss5.png)

By the way the same also works for switch statements too!

This is really cool because it now means we can lean on the compiler much more to let us know everywhere that needs to be updated whenever we add a new "kind" of thing to a union.

# Pattern Matching with Variant

Its possible to make the above code even cleaner however if we lean on a very cool library from paarthenon called [Variant](https://github.com/paarthenon/variant).

Its a powerful library with lots of features but the one I like to use the most is the simple pattern matching expressions.

So taking our original react example using [Variant](https://github.com/paarthenon/variant) we can write it cleanly like this:

```ts
type Props = {
  user: User;
};

const WelcomeMessage = ({ user }: Props) =>
  match(
    user,
    {
      "anonymous-user": () => (
        <div>
          Welcome Anon! <button>logout</button>
        </div>
      ),

      "authenticated-user": ({ email }) => (
        <div>
          Welcome {email}! <button>logout</button> <button>update email</button>
        </div>
      ),

      "admin-user": ({ email }) => (
        <div>
          Welcome Admin! <button>logout</button> <button>do some admin thing</button>
        </div>
      ),
    },
    // using v2 of variant, in v3 this isnt needed
    `kind`
  );
```

Now the compiler will yell at us if we dont exhaustively handle every kind of user, very cool!

# Examples from BattleTabs

I find this pattern so useful that I now use it everywhere, heres a few examples from our game [BattleTabs](https://battletabs.com):

```ts
import { ShipBlueprint } from "./ShipBlueprint";
import { matchKind } from "@battletabs/essentials";

export const findReasonWhyABlueprintCannotBeUsedInAFleet = (
  bp: ShipBlueprint
): string | undefined => {
  const shipName = bp.definition.name;
  return matchKind(bp.status, {
    locked: () => `${shipName} is Locked`,
    rented: () => undefined,
    hidden: () => `${shipName} is Hidden`,
    discovered: () => `${shipName} must first either be Rented or Bought`,
    expired: () => `${shipName} has Expired`,
    owned: () => undefined,
    undiscovered: () => `${shipName} is Undiscovered`,
  });
};
```

In the above example I am matching on the status of the blueprint and returning a message based on that.

In another example I render a different kind of emote depending on its kind:

```ts
export const EmoteView: React.FC<React.PropsWithChildren<Props>> = ({
  emote,
  scale = 1,
  ...rest
}) => {
  return matchKind(emote, {
    custom: (e) => <CustomEmoteView definitionId={e.id} scale={scale} {...rest} />,
    emoji: (e) => <EmojiEmoteView emote={e} scale={scale} {...rest} />,
  });
};
```

The example below runs on the server in a worker node executing background jobs:

```ts
export type GeneralJob =
  | MatchmakeJob
  | UpdateUserDerivableMedalsJob
  | RefreshUserSubscriptionJob
  | CollectUncollectedBattleRewardsForUserJob
  | UpdateUserScoresFromMatchFinishJob
  | AITakePlayerTurnJob;

export const createGeneralJobsHandler = ({ services }: { services: Services }) => (
  job: GeneralJob
) =>
  matchKind(job, {
    "update-user-derivable-medals": ({ userId }) => updateUserDerivableMedals({ userId, services }),
    "refresh-user-subscription": ({ userId }) => refreshUserSubscription({ userId, services }),
    "collect-uncollected-battle-rewards-for-user": ({ userId }) =>
      collectAnyUncollectedBattleRewards({ userId, services }),
    matchmake: () => services.backgroundProposalMatchmaking.check(),
    "update-user-scores-from-match-finish": ({ matchId }) =>
      updateUserScoresFromMatchFinish({ services, matchId }),
    "ai-take-player-turn": ({ userId, matchId }) =>
      services.aiTurnTaking.takeTurn({ userId, matchId }),
  });
```

The neat things about all these examples is that if I add more options to the union in the future I can be confident that the compiler is going to let me know about all the places where I need to go back and handle.

# Conclusion

Im not saying that this will solve ALL your problems but just like strongly-typed languages mean you have to write less unit tests, discriminated unions and pattern matching will help you catch more runtime problems before they go live



Its been a while since I have posted about BattleTabs but things most definitely haven't been standing still, so I think its time for an update!

# Background

Just quickly; [BattleTabs](https://battletabs.com/) is the premier game from [Gangbusters](https://www.gangbusters.io/), the company that im a co-founder of.

I have [posted quite a few times in the past](https://mikecann.blog/tags/battletabs) about BattleTabs so checkout those posts for more background on the game and how it works.

# Whats Changed

[![](./update-notes.jpg)](./update-notes.jpg)

Since November last year there have been over 40 updates to the game. Some of the major ones include:

- Rivalry Feature - challenge others to "just one more battle"
- Huge change to the battles architecture allowing for more complex ship-ship interactions
- New content - ships, emotes, etc
- Lots of changes to support Manifest v3 Chrome Extensions
- Added new sound and visual effects
- Added push notifications to the web versions of the game
- Added "Daily Deals" feature to the shop
- AI turn taking for players that go offline
- Board Ping feature
- TONs of bug fixes

In addition to the above we also started working on our long-term strategy for the company.

# Cards & Web3

We strongly believe in the power of community driven games. We think that a game can be good but the community is what makes it great. This is certainly the case for BattleTabs.

Over the almost 3 years of running the game we have amassed over a million downloads, millions of battles played and over 15,000 members on discord. 24 hours a day players on discord discuss the game, create content, share ideas or just generally hang out.

Given this, we started to think how we could empower our community to go further and at the same time develop a strategy that allows us to continue to develop the game and company.

This is where BattleTabs Cards comes in.

From our [community page](https://battletabs.com/battletabs-cards) on the topic:

> BattleTabs Cards are digital collectible cards that you can trade with other players. They will be released in Sets, where each set will feature a particular theme or art style. Every Set will be limited in quantity, and cards will have different rarities.

<iframe width="853" height="480" src="https://www.youtube.com/embed/LFV1ugBAb1M?playlist=LFV1ugBAb1M&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

> Outside of their intrinsic value in looking amazing cards will also provide unique benefits in BattleTabs and other experiences we have in production. For example, you may craft a special cosmetic item or a ship skin in BattleTabs using a combination of cards, then display or trade the crafted treasure inside your own 3D sandbox! Watch as the newly crafted item comes alive with special animations and behaviours.

[![](./storyboard_c.png)](./storyboard_c.png)

> Additionally, BattleTabs Cards can be freely built-upon without any intervention or restrictions from us. Say you have a fantastic idea for a new game, you can team up with your friends, use the exact same "shared card database" that we use!

[![](./storyboard_a.png)](./storyboard_a.png)

> You could host tournaments with these cards, perhaps charging players a Common card to enter the tournament and setting Rare cards as a reward for the winners.

> Say you have a vast stack of cards saved up and want to give some to helpful members in the community, you can do that with cards!

We think it an exciting direction for the company and community. To kick things off we are running a tournament on [Fractal.is](https://fractal.is).

# Fractal Tournament

Our first card is going to be special. Rather than simply selling or giving them away we thought it would be more fun if we rewarded top players and community members by giving them preferential access.

So every day that the tournament runs (2 weeks), the top 20 players that participate will earn a silver token:

[![](./silver-token.png)](./silver-token.png)

The silver token along with the golden token which we awarded to a selection of of most loyal players will grant free minting rights to the Seed Card.

[![](./gold-token.png)](./gold-token.png)

The tournament starts tomorrow, monday the 15th of August. Head over to [https://www.fractal.is/battletabs/tournaments](https://www.fractal.is/battletabs/tournaments) for all the details!

# Fractal Interview

In preparation we sat down with Justin Kan who co-founded JustinTV (Twitch) and a number of other companies including [Fractal.is](https://Fractal.is) where the tournament is being held.

<iframe width="853" height="480" src="https://www.youtube.com/embed/nRbUc9N9hGY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

We talk about the game, the tournament, web3 in general and some future projects. Check it out!

# Conclusion

The past 9 months have been a total rollercoaster of ups and downs (no one ever said running a startup would be easy huh?). The ever-changing funding landscape in particular has been a source of continual headaches.

It does however feel great to wake up each morning and work on something that brings obvious joy to thousands of people daily.

I hope we can continue to grow and improve our game, business and community for many years to come!

BTW: I generated the header image using [Dalle](https://openai.com/dall-e-2/).. so cool :)


Quite some time ago now a good friend and fellow squash player shared an idea he had with me, to create a system that is able to track a squash ball during a game and project realtime information onto the back wall.

Its an idea that really resonated with me and I have been thinking about it ever since. I want to share my thoughts here and see if anyone else has ideas on how to tackle this thorny problem.



# Prior Art

To set the stage, checkout this demo of an already existing system from [Interactive SQUASH](https://interactivesquash.com/):

<iframe width="853" height="480" src="https://www.youtube.com/embed/0N6OSVwGiRE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Their system tracks the ball and players using infrared sensors and cameras placed in both the tin (bottom front of the court) and in a box on the ceiling. The box on the ceiling also contains the projector which is used to update the display on the back wall in realtime.

[![](./interactiveSQUASH-Court.jpg)](./interactiveSQUASH-Court.jpg)

Its a very cool system and is the gold standard for the kind of system we would like to build. There are however a few small issues:

1. Cost. This is NOT a cheap system. They dont list their price on the website and I have requested a quote but I have been told that it is at a minimum $50k USD per court plus a yearly $5k USD subscription.

2. As explained in their [FAQ](https://interactivesquash.com/operator/) you must prepare the court for the system which could cost up to another $5k USD to paint the wall with special paint, install specific electrical cables etc.

3. It requires modifying the court. This might be a problem for a club (such as ours) that uses a shared community facility.

4. Its permanent. All the equipment must remain on site and cannot be taken home at the end of the day. This might pose a security issue when in a shared community facility.

So for these reasons we felt that there must be way we could take some of the best bits of this system but simplify things a bit and remove some of the bits we maybe dont need.

For the rest of this post im going to discuss my thoughts on this.

# Simplified Requirements

Before we can talk about solutions I want to make it clear what the requirements are.

1. At a very basic level all we want to do is know where on the back wall a ball strikes and then use that location to update a realtime projection of some scene onto the back wall. We dont really need to track the players or the ball in the air unless its comes for free as a result of the solution.

2. We want the system to be relatively inexpensive. We are not a rich club.

3. Preferably the system is portable and quick and easy to setup without any court modifications required.

# Problem Space

For those that are not familiar with the sport here is some basic info to help illustrate some of issues.

[![](./acourt.jpg)](./acourt.jpg)

A standard squash court is 9.75m in length and 6.4m in width. They can sometimes have one or more walls made of glass so you can see inside. In our case we have just the back-wall made of glass (see the above image for an example).

[![](./ball.jpg)](./ball.jpg)

A standard squash ball is about 4cm in diameter and can travel EXTREMELY fast. Here is a video of one being hit at 281km/h:

<iframe width="853" height="480" src="https://www.youtube.com/embed/4zXWu22ZhZY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

So tracking this ball with a standard video camera is a tough problem due to its size and speed of motion.

The sport involves two players hitting the ball with a racket against the back wall and then returning it. A player wins a point if their opponent is unable to return the shot.

# Potential Solutions

Okay with the requirements listed and the problem space explained lets discuss some potential solutions.

I have split solution into two parts; first we need to detect the impact then we need a way of displaying the results on the back wall in real time.

## Impact Detection

### Computer Vision

This was my first thought. If we could mount a camera on a tripod behind the court we could potentially use some clever CV or ML based methods to detect the moving ball and track it in 3D space as it moves around the court.

<iframe width="853" height="480" src="https://www.youtube.com/embed/h_MZg6qZc8I" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

The above video uses a program called [Kinovea](https://www.kinovea.org/) to retroactively track the ball using computer vision techniques in a semi-automated manner. Its cool but we need it to be realtime and totally automated.

[This paper](https://repository.tudelft.nl/islandora/object/uuid:758d345d-ecdf-478e-a534-a23300dbe877/datastream/OBJ/download) entitled "Detection and Tracking of a Fast-Moving Object in Squash using a Low-Cost Approach" outlines in great detail the problems and techniques involved with tracking a squash ball using cameras.

[![](./cv-paper.png)](./cv-paper.png)

Their approach however has a number caveats and critically is unable to run in realtime.

The first paragraph of the conclusion of this paper sums up the problem with CV based approaches perfectly:

> Ball-tracking in sports is a difficult problem because of the small size of the ball
> and the high speed at which it moves. The varying illumination conditions, the
> shape of the ball and constant occlusion due to the continuous movement of the
> players makes it even more difficult to track the ball accurately.

It obviously is possible to solve the problem using Computer Vision as [Interactive SQUASH](https://interactivesquash.com/) demonstrates but is is a thorny problem that requires multiple cameras and sensors from different angles.

If I had spare cash I would love to try out one or two of the [OptiTrack](https://optitrack.com/) cameras which are designed for motion tracking and have some high FPS options. These cameras are used by the excellent [Stuff Made Here](https://www.youtube.com/c/StuffMadeHere) in [this video](https://www.youtube.com/watch?v=1MkrNVic7pw) and [this one](https://www.youtube.com/watch?v=myO8fxhDRW0). I am however not sure on the limits of the cameras and if they could track something as small and fast as a squash ball however.

### Audio

Another potential solution is via audio "triangulation". Using 2 or more microphones placed at suitable distances apart it should be possible to detect the sound induced by the impact of the ball on the back wall.

[![](./audio-triangulation.png)](./audio-triangulation.png)

The benefit of this approach over computer vision is that it can handle very high impact velocities as the sample rate is generally much higher. This means we should be able to analyze the details of the sound produced in greater detail even when traveling at a high speed.

The paper "[Audio-based performance evaluation of squash players](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5868801/)" uses this precise method.

[![](./audio-based-performance.png)](./audio-based-performance.png)

The authors of this paper use 6 microphones spread around the court to triangulate audio events in 3D. This allows them to detect not just wall impacts but ball-racket, player-floor and other impacts.

For our purposes however we are only interested in ball-wall impacts which is a 2D location and so dont require as many microphones to locate it in 3D space.

There are some significant issues with this solution however:

1. Distinguishing between an actual impact and an impact sound reflected from a wall.

2. Level of accuracy required by just two microphones may be too high given their short maximum separation distance and the speed of sound vs speed of light.

3. Slow impacts might be too quiet to hear or may overlap with other sounds.

4. Impacts from nearby courts might be difficult to disambiguate from our court.

### Lidar

This solution is the one favoured by my friend. If you are able to place a lidar on the floor at the base of the court and point it upwards in 180 arc then you might be able to use that to detect a ball that passes through the beam before it strikes the wall.

[![](./lidar.png)](./lidar.png)

Given you know the mirror position of the spinning laser and the distance from the beam source you can calculate where the ball is.

My main concern with this solution however is that the ball may be traveling too fast and will have struck the wall and rebounded before the laser has swept over it.

Another slight concern is how to power the lidar at the front of the court. If its power requirements are low then a battery may be feasible.

### Seismic

An interesting method, related to the audio based solution, would be to place two microphones or seismometers at the far lower corners of the court so they are both touching the back wall. You could "triangulate" the location of the impact by measuring the difference in the times that the impact event was recorded.

This solution also suffers from many of the same issues that the audio based solution as it is effectively the same solution just detecting vibration through the wall rather than through the air.

## Realtime Display

Supposing one of the above solutions is able to accurately detect an impact point on the wall we now need to update some sort of display on the back wall.

### Projector

Squash courts tend to be quite bright places this makes projecting an image on a back wall a difficult thing to do as it requires an exceedingly high-lumen projector. Even the Interactive SQUASH projector which is undoubtedly very expensive doesnt seem to produce a particularly bright image:

[![](./brightness.png)](./brightness.png)

This problem is compounded by the fact that we want the system to be portable and thus not require it to be mounted from the ceiling, this means putting it on a stand outside the court. This unfortunately means that we are going to end up with silhouettes as a player occludes the projector.

Potentially a short throw projector could be used right at the front of the court but im not exactly sure what the closest distance from the back wall you could make a short-throw projector

### Laser

An alternative method is to use a laser such as the one from the [Laser Cube](https://www.laseros.com/) guys:

<iframe width="853" height="480" src="https://www.youtube.com/embed/8KxbNctIzto" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

This solution should in theory be bright enough even in a fully lit squash court. It would however also suffer from player obstruction. It is however low power and runs off batteries so could be placed at the bottom of the court and shine upwards.

The only issue with this solution is the kinds of things you could project. You couldn't do full color images or video like you might expect from a TV or computer display but it might be sufficient for the purposes of this project.

### LED Matrix

This one is very impractical for our purposes but an alternative solution is to cover the entire back wall in arrays of LED Matrix panels effectively turning the entire back wall into a giant display. This method has actually been done before as can be seen in the following video from Interactive SQUASH

<iframe width="853" height="480" src="https://www.youtube.com/embed/LclyACKS8xs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

This solution does however require a glass backed court (which we don't have) and an (undoubtedly) very expensive array of LED Matrix panels.

# Conclusion

So there we have it. This is something I have been thinking about for a while.

Let me know what you think, have I missed something obvious? How would you solve this problem? Let me know in the comments!

This is one of those super annoying things that took me a while to discover and I was unable to find any prior art on it so I thought I would share.



# Background

[BattleTabs](https://battletabs.com/) is [our](https://gangbusters.io) first and primary product. Its turn-based game that runs in the browser and on the web.

Being turn based means that there is a need to be able to notify a player for various in-game events such as its their turn in a battle or they have recieved a friend request or so on.

The way we have done this up to now is to maintain [a persistent background page](https://developer.chrome.com/docs/extensions/mv2/background_pages/) that would run when the extension is installed. Within that page we would open and maintain a websocket to our servers. That way the server could push notifications and other messages to the background page and thus we could open notifications to inform the player about an event.

# Manifest V3

One of the [major changes](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#service-workers) of Chrome's Manifest V3 is that you can no longer run persistent background pages. Instead you must use transient Service Workers. These startup and shutdown automatically and without your control, thus you are not able to maintain a persistent websocket connection to a server with them.

This was a big problem for us, how were we going to notify the player about events such as turn taken or friend invite?

# Push API

Well fortunately the ["Push API"](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) is a technology that exists to help with the problem of sending messages from the server to the client even when the website is closed.

It works by leveraging Service Workers and a special API built into the browser itself. You register a service provider with the browser and then provide a callback which is invoked by the browser when it receives a message from the provider.

# Firebase Cloud Messaging

[Firebase Cloud Messaging (FCM)](https://firebase.google.com/docs/cloud-messaging) is Google's push service provider. It has all the features we needed and as a bonus is totally free!

The only issue is all the docs are designed to work with websites not browser extensions. This is obviously a bit of a challenge for us and at first I thought it was an insurmountable one.

The key issue is the docs talk about registering a service token [from a normal webpage](https://firebase.google.com/docs/cloud-messaging/js/client#access_the_registration_token) which then will automatically create a service worker using a script it looks for at `firebase-messaging-sw.js`.

Well this is not how things work on and extension as the background service worker is automatically created for us.

# Solution

I'll save you the hours of wasted time trying to get things to work this way and skip to the solution.

The key insight is that we can register the service token not from a normal page but from with the background service worker itself!

See the below for a working example:

```typescript
import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw"; // note: we MUST use the sw version of the messaging API and NOT the one from "firebase/messaging"
import { getToken } from "firebase/messaging";
import { initializeApp } from "firebase/app";

const firebase = initializeApp({
  // your Firebase config here
});

chrome.runtime.onInstalled.addListener(async () => {
  const token = await getToken(getMessaging(), {
    serviceWorkerRegistration: self.registration, // note: we use the sw of ourself to register with
  });

  // Now pass this token to your server and use it to send push notifications to this user
});

onBackgroundMessage(getMessaging(firebase), async (payload) => {
  console.log(`Huzzah! A Message.`, payload);

  // Note: you will need to open a notification here or the browser will do it for you.. something, something, security
});
```

Now when the extension is installed it will register this user for push notifications which it will receive even when the service worker deactivates!

# Conclusion

Well this was a bit of pain to get this working but the solution is quite neat.

I hope it helps others out.

Well all good things must come to an end and Post To Tumblr has had 14 excellent years. Its just about my longest running project but unfortunately its come time to let it go the way Old Yeller...



# History

[12 years ago](https://mikecann.blog/posts/my-first-chrome-extension-post-to-tumblr) I posted about my first Chrome Extension ever. A little tool to help with posting content to the (at the time popular) micro blogging platform Tumblr.

The concept was simple. Allow people to quickly post content to Tumblr by simply right clicking on it.

[![](https://mikecann.blog/wp-content/uploads/2010/10/Shot_002.png)](https://mikecann.blog/wp-content/uploads/2010/10/Shot_002.png)

Since that humble beginning I slowly started adding more and more features such as [post preformatting](https://mikecann.blog/posts/post-to-tumblr-version-0-4) and [custom context menus](https://mikecann.blog/posts/post-to-tumblr-v6-16-templated-variables).

[![](https://www.mikecann.blog/wp-content/uploads/2016/06/chrome_2016-06-26_15-15-13.png)](https://www.mikecann.blog/wp-content/uploads/2016/06/chrome_2016-06-26_15-15-13.png)

Over time the extension grew in popularity, reaching a peak of about 50,000 weekly users:

[![](./50k.png)](./50k.png)

Since then however Tumblr's popularity started to decline and so too did my interest in the project. I did however continue to support the project with small updates and bug fixes.

I especially enjoyed getting emails from some of my most loyal users letting me know what they have been up to :)

# Sunset

Unfortunately my spare time, along with the updates, for PTT have totally dried up to the point where I haven't updated the extension in over a year.

Back in September of last year [Google announced](https://developer.chrome.com/blog/mv2-transition/) that they would be shutting down extensions that run on "Manifest V2" in favour of their newer "Manifest v3" format.

Upgrading PTT to support V3 was going to be a job too large for me to take on given my lack of time and (quite frankly) willpower to do.

So unfortunately we made the decision that it was time to turn off the PTT servers and remove the extension from the store.

I published one final update to the extension which added the following message:

[![](./announcement.jpg)](./announcement.jpg)

# Re: Sunset

Since posting the above announcement in the extension I have received a heap of lovely feedback from users of the extension both by email and on the [dedicated SubReddit](https://www.reddit.com/r/post_to_tumblr/).

[![](./feedback.png)](./feedback.png)

Its messages like these that let me know that all the effort that I put into the extension over the years has been worth it. People have found real value from a product that started out as a simple experiment :)

[![](./email1.png)](./email1.png)

[![](./email2.png)](./email2.png)

I wanted to experiment more with the NFT space. Get my hands dirty and actually mint an NFT. But what pieces should one immortalize on the immutable blockchain? Then it hit me! Vincent van Cann.



# Vincent van Cann

Vincent van Cann is an up and coming artist that has been seen posting under the guise of Michael Cann on Facebook. His is however keen to break out and receive international recognition for his exciting, innovative and perhaps even controversial work.

His style is mostly "circle doodles" in abstract form:

[![](./600x400.jpg)](./600x400.jpg)

[![](./wall-circles.jpg)](./wall-circles.jpg)

They are painstakingly created over about 8-12 hours using just sharpies:

[![](./sharpies.jpg)](./sharpies.jpg)

[![](./123.jpg)](./123.jpg)

He finds it very therapeutic and often finds himself entering an almost trance like state while arting. Perhaps his incredible talent is being siphoned into his brain from an artist deity in an alternate dimension?

# NFTs and OpenSea

NTFs have set the art work on fire over the past 12 months so if there was ever a time for an up and coming artist to break out and make a name for himself it was now.

[OpenSea](https://opensea.io/) is currently the largest marketplace for NFTs and there are (as far im aware) two ways to get your NFT listed on there. 1. you create a smart contract, upload the artwork and metadata to IPFS then you link your contract to a collection on OpenSea. Or 2. you mint directly on OpenSea using their mega-contract.

[![](./create-on-opensea.png)](./create-on-opensea.png)

As Vincent van Cann "isn't good with computers and things" he decided to keep it simple and mint directly on OpenSea. Maybe in the future he will get some help from the technical whiz-kid Mike Cann and create his own contract.

Vincent also decided to use Polygon rather than Ethereum as he isnt a wealthy artist and thus dint want to pay the [expensive gas fees found on ethereum](https://crypto.com/defi/dashboard/gas-fees).

As part of the NFT creation process on OpenSea Vincent saw that he could supply a link to his own website.

That got him thinking.. If he wanted international recognition for what is surely some of the best art work on the planet he was going to have to stop getting Mike Cann to post it on Facebook for him and instead get his own website.

# vincentvancann.xyz

Because websites are hard he just Googled it and what do you know, Google told him to use Google Domains to buy https://www.vincentvancann.xyz/ (Mike told him xyz is where all the cool crypto websites live) and Google told him that he could build a website for free with Google Sites too so he did just that:

[![](./google-sites.jpg)](./google-sites.jpg)

Its not a particularly flexible website builder but it was quick and free and it got the job done.

# Minting

Armed with a new fancy looking website and a "crypto bro" domain he was now ready to mint his first NFT on OpenSea.

Phew the process was not simple!

There were multiple steps he had to go through. Multiple things that needed signing with his metamask wallet all using cryptic hexcodes. He had no idea what he was agreeing to half the time.

Each step along the way he was forced to perform "captchas". He would have thought that verification like this would have only needed once, not tens of times (literally).

[![](./captcha.png)](./captcha.png)

Often OpenSea would error for no apparent reason.

[![](./error.png)](./error.png)

Usually refreshing the page fixed the error but it was very confusing for him. He also found that OpenSea to be quite slow, often stalling thus requiring a page reload to get it going again.

Finally after hours, he was able to create his first collection called "[Circles Series](https://opensea.io/collection/circles-series)" and mint his first 5 NFTs

[![](./circles-series.jpg)](./circles-series.jpg)

Vincent felt that 5 is enough for now. ~If~ When there is a great demand for more of his epic art then more will be added (at a higher price of course).

# Conclusion

Getting [a website](https://www.vincentvancann.xyz/) up and running with a custom domain and email forwarding (thanks to [ImprovMX](https://improvmx.com/)) is super easy.

[Minting NFTs directly on OpenSea](https://opensea.io/collection/circles-series) could definitely be easier.

Vincent can now happily sit back and wait for the 7-figure bids to roll in and and thus receive what is almost guaranteed to be international recognition.

Ever since I was a baby I have loved the water. I remember always enjoying going under the water and holding my breath while I challenged my mates to see who could stay under the longest.



That love of the water and exhilaration from underwater adventures has carried through with me into adulthood.

In 2013 during my [trip around South America](https://mikecann.blog/posts/the-trip-2013-tyrona-to-bucaramanga) I was fortunate enough to stumble across a poster for the sport / discipline of "Freediving".

[![](https://mikecann.blog/wp-content/uploads/2013/09/photo-222.jpg)](https://mikecann.blog/wp-content/uploads/2013/09/photo-222.jpg)

I hadn't really encountered it before but I decided to give it a shot and I loved it! I trained for 3 days with [Carlos Correa](https://www.instagram.com/clubdelphinus/?hl=en) who showed me how to safely hit deeper depths and longer holds.

I now regularly enjoy going out whenever I can and often I take my camera and film my exploits. Heres a youtube playlist of my various videos over the years.

# Videos

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLdFGn0KeUCYer1aL7cEzpcDIg51vycrio" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# What is so great "under da sea"?

[Darling its better down where its wetter...](https://www.youtube.com/watch?v=GC_mV1IpjWA)

As soon as you take that last breath and dive you are suddenly cut off from the world that we comprise 99.99% of our life. You are now in an alien world and you can snatch a tiny little glimpse of that wondrous place.

Its only you and your own body that keeps you out of danger, it makes you feel very in-tune with yourself. I think thats also the reason why I find the discipline almost meditative, so are focused on you and your movements, your heart-rate and breath. Its all about your experience in your little bubble.

# Joshie

The love of the water and I hope I am able to instil into my son Josh. He is only 19 months old but already he shows a keen affinity to the water. He loves his weekly swimming lesson and daily dips in the pool (during summer).

He has recently started putting his head under the water and holding his breath which is a great this but can be worrying at times!

[![](./joshie.jpg)](https://www.instagram.com/p/CZBlK45DVZy/)

Wow how fast did 2021 go? Crazy! And we are already almost at the end of January.



I try to write at least one blog post a month but I have to admit, lately I have been struggling to find the time. A combination of more [family](https://mikecann.blog/posts/joshua-christopher-cann) and more [business](https://gangbusters.io) are the likely culprits. Whatever the reasons, it means my personal projects have taken a back seat lately.

Thats not to say that there hasn't been a heap of cool stuff that has caught my eye over the past few months and am itchy to tinker with. So I thought for this month's post I would list a few of the projects that I want to take a closer look at this year :)

# Cloudflare's DOG

[BattleTabs](https://battletabs.com/) is currently [Gangbuster's](https://www.gangbusters.io/) only title and has been in development for [a couple of years](https://mikecann.blog/posts/introducing-battletabs) now. Initially it was released as a concept. We didnt know if it would work or not so I chose the technology I knew I could get going with the fastest, which was Heroku and Postgres at the time.

Since then the game has grown and the requirements have changed as we added new features. We have faced a number of challenges on Heroku and it is a continual worry of mine that the servers will fall over one day or run out of capacity when im on holiday or something. There is also the significant cost associated with Heroku compared to the alternatives.

Ideally we would move to a tech stack that supported infinite scale and not have the same operational concerns. An obvious choice would be a serverless tech stack.

The issue with a serverless stack for us would be the lack of a websocket connection to the client for realtime game updates. We need these capability to provide a great game experience for our players without resorting to less-than-optimal (and expensive) rapid polling.

[AWS does have the ability to use websockets with API Gateway](https://aws.amazon.com/blogs/compute/announcing-websocket-apis-in-amazon-api-gateway/) but when I last ran the numbers it was going to be fairly expensive and there were some significant limitations.

So when I heard about [Cloudflare's Durable Objects](https://developers.cloudflare.com/workers/learning/using-durable-objects) and their [ability to handle websockets](https://developers.cloudflare.com/workers/learning/using-websockets#:~:text=%E2%80%8BDurable%20Objects%20and%20WebSocket%20state&text=Durable%20Objects%20are%20a%20coordinated,learning%20page%20to%20get%20started.) and could do it in a [cost effective manner](https://developers.cloudflare.com/workers/platform/pricing#durable-objects) (you only pay for the message handling time) I became excited.

[In October](https://mikecann.blog/posts/serverless-databaseless-event-sourcing) I tinkered with Durable Objects to build a serverless Event-Sourcing application. This worked well but I ran out of time to try the websockets potential of the technology.

Because a single server / Durable Object can only support a limited number of connections was I needed was a way to automatically "fan-out" incoming connections to "children" automatically so that each server managed only a few thousand connections while still able to communicate with the others in the Group.

[![](./fan-out.png)](./fan-out.png)

Fortunately thats when I stumbled across [Cloudflare's Durable Object Groups](https://github.com/cloudflare/dog) (DOG). This is an experimental project that does just that. It takes incoming connections and fans them out to multiple "Replicas", scaling up or down the number of replicas as a needed.

I was thinking it would be cool do make a really cheap version of [Pusher](https://pusher.com/channels/pricing) using this :)

# FaunaDB

I have had my eye on serverless databases for some time now. When working in a serverless context you generally cant use databases that have heavy permanent connections such as Postges or MySQL. [Cloudflare Workers use V8 Isolates](https://developers.cloudflare.com/workers/learning/how-workers-works) which basically means that if it cant run in a web page then it cant work on Cloudflare.

So there are a number of alternatives out there such as DynamoDB, CosmosDB, Firebase, CockroachDB, MongoDB etc. They are all however either too simple (DynamoDB) or too expensive (Cosmos, Firebase) or I simply dont like using them (Mongo). [FaunaDB](https://fauna.com/) however caught my eye with its Document-but-still-Relational nature and its interesting querying options.

Thus far I have listened to a few podcasts on the technology and read a few articles and the following are some of the more interesting points for me:

## Scale & Cost

Even though DynamoDB is famous for its scaling potential there [is still a lot of operational complexity](https://docs.fauna.com/fauna/current/comparisons/compare-faunadb-vs-dynamodb#scalability) one has to worry about with scaling its usage. I like Firebase's fire-and-forget approach to scale but even it does have its limitations at upper bound of number of connections and key contention.

I havent dug very deep into this part of Fauna yet but im excited to see that [it scales](https://docs.fauna.com/fauna/current/comparisons/compare-faunadb-vs-dynamodb#scalability) with ease much like Firebase.

## GraphQL

Fauna has a number of interesting ways it can be queried including its own functional query language [FQL](https://docs.fauna.com/fauna/current/api/fql/). One option that has me curious is its [GraphQL querying option](https://docs.fauna.com/fauna/current/learn/quick_start/gql_quick_start).

If this works as advertised then it could indeed make some DB access operations much simpler. They have even solved [the n+1 problem](https://fauna.com/blog/no-more-n-1-problems-with-faunadbs-graphql-api) for access which is super cool tho I wonder what access patters it prohibits (joins?).

# SolidJS

I first heard about [SolidJS](https://www.solidjs.com/) a number of years ago and remember being impressed at its tiny file size and its [supposedly awesome performance](https://levelup.gitconnected.com/a-solid-realworld-demo-comparison-8c3363448fd8).

[![](./solidjs.png)](./solidjs.png)

At the time however I as perfectly comfortable with React and felt like its performance was just fine on my machine. Having worked on [BattleTabs](https://battletabs.com/), a large React app, for some time now I am feeling the pain of slow updates and large initial page load. Many of our users run on low-performance devices and thus experience this pain even more.

So the promise that SolidJS can both be a tiny download AND have incredible performance while staying familiar to the React-JSX-like way of developing has me very much intrigued.

I have worked my way [through their excellent tutorial](https://www.solidjs.com/tutorial/introduction_basics) and read a number of posts on the library and am ready to give it a shot.

The only thing I think it is missing is some NextJS / SveleteKit / RemixRun like server-side-all-batteries-included framework. [I hear that this is in the works however](https://github.com/solidjs/solid-start).

# Roc

[Roc](https://www.roc-lang.org/) is a programming language that captured my interest last year when I [watch](https://youtu.be/vzfy4EKwG_Y)e[d](https://youtu.be/6qzWm_eoUXM) a [num](https://youtu.be/cpQwtwVKAfU?t=75)b[er](https://youtu.be/ZnYa99QoznE?t=4790) of talks on the language.

Its a purely functional language heavily inspired by [Elm](https://elm-lang.org/) but unlike Elm intended to be multi-platform and thus run on the server not just the web.

I have been interested in functional languages for some time now and have tried to get into Elm on a number of occasions but other things kept getting in the way. I however really like the look of Roc which is taking the best of Elm and building on it in some pretty innovative ways.

I also have my eye on [F#](https://fsharp.org/) having [read much](https://www.amazon.com.au/Domain-Modeling-Made-Functional-Domain-Driven/dp/1680502549) on the language. Also [Clojure](https://clojure.org/) and [Elixir](https://elixir-lang.org/) are very interesting to me.

I have a lot of thoughts about functional langues and functional style in non-functional languages like Typescript but perhaps I should leave that to another post. Let me know in the comments if you would like to read more on that.

# Orleans

I have been interested in the actor model for quite some time and find it a fascinating way of building distributed systems that scale. I have read a whole heap about [Akka](https://akka.io/) and Akka.net and am keen to try both of those out.

[Orleans](https://dotnet.github.io/orleans/) from Microsoft Research takes many of the great concepts from Akka but expands and simplifies them. It touts itself as a "Virtual Actors" system and basically doesnt require explicit messages as Actors can communicate using simple function calls as if they were running as standard objects in memory with each other.

It reminds a bit of "true OO" like that found in [Smalltalk / Phaero](https://pharo.org/) but for the the .net ecosystem and distributed server-side computing.

Its a very interesting technology and I want to give it a try soon!

# Joshie

[![](./joshie.jpg)](./joshie.jpg)

Finally this one isnt a tech project at all but still something that I hold dear to my heart. This little man is growing up so fast and I am incredibly conscious about not letting these precious moments pass me by while I have my head stuck too deep into one of my projects.

Time is passing so fast it wont be long before he gets curious about what daddy does for his work and I hopefully will have a whole new set of projects to tinker with together :)

2022

Archive

2022

Archive

2022

Archive