F# / Fable Tetris
Simple implementation of Tetris in F# using Fable to run it in a browser. Might not be an exact match for "real" Tetris. Was only distracting myself with some code really, don't expect AAA code quality!
A build can be found online at https://www.jamesdrandall.com/tetris
Use the cursor keys to move blocks left, right and down. Z and X to rotate the blocks.
Basic premise / architecture is to keep the event based browser model and mutable state at the top level in App.js so the rest of the code can be more side-effect free and functional in nature.
Rest of the docs come from the Fable starter project but apply to running this yourself.
Requirements
- dotnet SDK 5.0 or higher
- node.js
- An F# editor like Visual Studio, Visual Studio Code with Ionide or JetBrains Rider
Building and running the app
- Install dependencies:
npm install - Start the compiler in watch mode and a development server:
npm start - After the first compilation is finished, in your browser open: http://localhost:8080/
Any modification you do to the F# code will be reflected in the web page after saving.
Note: check the "scripts" section in
package.jsonto see the commands triggered by the steps above.
Bundling for release
Run the following command to compile and bundle up all your F# code into one Javascript file: npm run build. The compiled output ends up in the public folder under the name bundle.js.
Project structure
npm
JS dependencies are declared in package.json, while package-lock.json is a lock file automatically generated.
Webpack
Webpack is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Configuration for Webpack is defined in the webpack.config.js file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the Fable webpack-config-template.
F#
The sample only contains two F# files: the project (.fsproj) and a source file (.fs) in the src folder.
Web assets
The index.html file and other assets like an icon can be found in the public folder.