https://github.com/mattms/fsharp-game-jam-2021
https://github.com/mattms/fsharp-game-jam-2021
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mattms/fsharp-game-jam-2021
- Owner: MattMS
- Created: 2021-08-09T01:13:00.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-09T03:54:03.000Z (almost 5 years ago)
- Last Synced: 2025-02-01T16:11:20.525Z (over 1 year ago)
- Language: F#
- Size: 21.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JAM (Just Another Milking) game in F#
This was developed for the [F# Game Jam 2021](https://itch.io/jam/fsharp-jam).
While I was not successful in developing a working game within the time limit,
I decided to post this work anyway as I think it shows off some of the nice F# tooling that is available.
## Inspiration
While reading a [thread on the theme](https://itch.io/jam/fsharp-jam/topic/1543840/theme-alternate-history),
I was inspired by the [final suggestion from Vorotato](https://itch.io/post/4116094):
> Western cowboys but they ranch cats for their fur.
I was reminded that removing fur is not the same as shearing, so I decided to go with milking instead.
## Features
### Mostly working
- Intriguing introduction story
- Browser code from F# using Fable and Rollup
- Unit tests with Fuchu
- Light and dark themes based on system preference.
### Slightly working
- Feed your cat
- Sleep
### Totally missing
- Any story beyond the introduction
- Milk your cat
- Buy and sell cats/milk/food
- Get more cats
## How to build
In the `MattMS.CatGame.Browser` folder, run `dotnet fable` to build the EcmaScript with Fable.
In the project root, run `npm run build` to compile the Pug and Stylus code, and bundle the EcmaScript for the browser.
The "editor choices" section at the end of this document suggests a development approach,
with file watchers for source code changes.
## How to test
In `MattMS.CatGame.Tests`, run `dotnet run` to test the code.
There is very limited test coverage, as tests were only added when I was having trouble with the code.
## Why this tech?
I have used most of these libraries/tools before (except Rollup and Sutil), but I do not get to use them in my day job.
It is a small project, without multiple developer preferences, so I can fall back to the standard HTML page approach.
I very much like the graceful degredation approach that websites are meant to follow.
Unfortunately, I did make the choice of requiring CSS, otherwise I would have needed many more pages for each screen of the story.
I hope that wrapping each story "page" in an `article` tag can bring me some forgiveness.
## .NET library/tool choices
My currently installed version of .NET SDK is 5.0.301.
### Fable
[Fable](https://fable.io/) is used to convert F# code into EcmaScript code that can be bundled for the browser.
My decision to use it was based on familiarity of using it before.
### Fuchu
I chose to use Fuchu for testing due to how quick it is to get started.
The tests can be written in a .NET Console application, so there is no need to worry about test runners.
- [Fuchu @ GitHub](https://github.com/mausch/Fuchu)
### Sutil
I have used (and really enjoyed using) [Elmish](https://elmish.github.io/elmish/) before,
but I am not a fan of React so I decided to try something different this time.
I am quite curious about [Svelte](https://svelte.dev/) and was very happy to learn about [Sutil](https://sutil.dev/).
## Node tool choices
All of these were used on Node 14.17.3 with npm 6.14.13, running on Windows 10 Home.
### Concurrently
Although not strictly necessary, I decided to use Concurrently to simplify my npm scripts.
- [concurrently @ npm](https://www.npmjs.com/package/concurrently)
I did have `npm-run-all`, for the sequential execution, but that does not matter now that there are no dependencies from the Pug templates.
```
"build": "run-s build-styles build-scripts build-pages",
```
- [npm-run-all @ GitHub](https://github.com/mysticatea/npm-run-all)
- [npm-run-all @ npm](https://www.npmjs.com/package/npm-run-all)
### Pug
[Pug](https://pugjs.org/) templates are used to generate the HTML.
- [Pug @ GitHub](https://github.com/pugjs/pug)
- [Pug CLI @ GitHub](https://github.com/pugjs/pug-cli)
- [Includes @ Pug docs](https://pugjs.org/language/includes.html)
- [Inheritance @ Pug docs](https://pugjs.org/language/inheritance.html)
### Rollup
[Rollup](https://rollupjs.org/) turned out to be a pretty cool project for bundling up the EcmaScript generated by Fable.
I have used Browserify, Parcel, and WebPack on other projects, so I decided to give Rollup a go this time.
I was pleasantly surprised at being able to configure it entirely in my npm scripts.
- [Rollup @ GitHub](https://github.com/rollup/rollup)
- [rollup @ npm](https://www.npmjs.com/package/rollup)
### Stylus
[Stylus](https://stylus-lang.com/) is used to generate the CSS.
- [CLI @ Stylus docs](https://stylus-lang.com/docs/executable.html)
### Uglify
Uglify is used to minify the code that is generated by Rollup.
Not sure how I feel about the 3 different name styles: "UglifyJS" (GitHub), "uglify-js" (npm), and "uglifyjs" (command).
- [UglifyJS @ GitHub](https://github.com/mishoo/UglifyJS)
- [uglify-js @ npm](https://www.npmjs.com/package/uglify-js)
## Editor choices
This was mostly written in VS Code, using the Ionide extension.
I made heavy use of the `npm scripts` in the Explorer, and the Terminal for using Fable.
Essentially this involved 2 terminal sessions:
- `dotnet fable watch`
- `npm run watch`