Building a reversi game on IC

Developers Programs & Applications
1

Hello everyone! I’d like to share my experience of building a game on IC. The game is also playable via the demo link on the web page. It is a long article, but I hope people find it useful :slight_smile:

15 Likes
2

This is a kind of article I was waiting for. Great job :muscle:

9 Likes
3

Welcome to the forum Paul! Great article indeed, it was a very nice read

3 Likes
4

issues with reversi:
ERROR in ./src/reversi_assets/public/index.js 3:0-6:31
Module not found: Error: Can’t resolve ‘dfx-generated/reversi’ in ‘/home/zlysunshine/reversi/src/reversi_assets/public’

ERROR in ./src/reversi_assets/public/index.js 7:0-10:38
Module not found: Error: Can’t resolve ‘dfx-generated/reversi_assets’ in ‘/home/zlysunshine/reversi/src/reversi_assets/public’

ERROR in Error: Child compilation failed:
Module not found: Error: Can’t resolve ‘/home/zlysunshine/reversi/src/reversi_ assets/public/index.html’ in ‘/home/zlysunshine/reversi’
ModuleNotFoundError: Module not found: Error: Can’t resolve ‘/home/zlysunshine /reversi/src/reversi_assets/public/index.html’ in ‘/home/zlysunshine/reversi’

5

I’ve just merged an update to the examples repo for 0.8.0. Try again with the latest code and dfx version 0.8.0 and let me know if it works!

Sorry, this was not in the examples repo. The issue you’re seeing is a webpack error with the dfx-generated alias pointing to .dfx. Make sure you start up dfx and deploy before running the frontend

6

Similar problem as @duke-sunshine and I don’t think it has to do with your suggestion here i.e. dfx running etc (I’ve done that).
I noticed that the frontend entry point is src/reversi_assets/public/index.html but this file does not exist. Just to see what would happen I created an empty index.html and the build and install is successful, but then the frontend doesn’t function: hangs on the splash page with a flashing dot.

7

The index.html should be auto generated by webpack from index.js. I need to confirm if this is still the case.

8

Thanks @PaulLiu ! Hope you can look into this - reversi is very important :sweat_smile:
The build fails with error messages pointing to the missing index.html, which is why I thought to look there. So there is definitely no index.html built before dfx build gets to that step in the process.

9

In webpack.config.js:

   entry: {
      // The frontend.entrypoint points to the HTML file for this build, so we need
      // to replace the extension to `.js`.
      index: path.join(__dirname, info.frontend.entrypoint).replace(/\.html$/, ".js"),
    },

So it shouldn’t matter to webpack when the file index.html does not exist. But maybe newer version of dfx now wants it, then creating an empty file solves the problem.

10

Interesting. I downgraded to dfx 0.7.1 to attempt to build it. Does it still build ok for you? The empty file approach “solves” building, but what is eventually built doesn’t really work, it seems.

11

Some progress @PaulLiu . I got it to build without a dummy index.html.
I temporarily removed npm modules higher up in the tree (i.e. globally installed npm modules like $HOME/node_modules) and did another install and it worked this time. So maybe it was using the wrong version of webpack or something.
Unfortunately it still doesn’t run. Console log errors “Register Error” and “Fail to verify certificate”.

12

I’m upgrading the repo to dfx 0.8.1, so hopefully will resolve the problem for you.

13

The reversi repo has been updated to dfx 8.1. Quite a few things changed, but all should be taken care of by now. Please let me know if you have any problems. Thanks!

1 Like
14

Working perfectly! Thanks a lot.
For those without javascript backgrounds it may be worth mentioning in the README that npm install should be run before dfx deploy.