Chess 0x539

WebAssembly Chess Engine made with rust, Demo

A chess app using rust webassembly and react js

Rust

TBA

WASM

TBA

ReactJS

TBA

Running the project

Clone this repository:

$ git clone https://github.com/l0x539/chess-0x539

Installing npm package:

Navigate to the repository folder and run following command:

$ npm install

Installing Rust packages:

Navigate to the repository folder and run following commands:

you'll need wasm-bindgen-cli using following command:

$ rustup target add wasm32-unknow-unknown
$ cargo +nightly install wasm-bindgen-cli
$ cargo build

Run the app:

Once you setup the recommended packages, you can run the following command to see the test:

$ yarn dev

$ npm run dev

Running a rust Webassembly Website (not required for this repo)

Steps to compile

Setting up rust project:

install it using rustup:

$ rustup target add wasm32-unknown-unknown

install wasm-bindgen-cli using following command:

$ cargo +nightly install wasm-bindgen-cli

create the project folder:

$ cargo +nightly new chess-0x539 --lib

Adding Cargo.toml configuration:

Add following lines:

[lib]
crate-type = ["cdylib"]

Add wasm bindgen using cargo edit:

$ cargo add wasm-bindgen

this wall add following line to your toml file:

...
[dependencies]
wasm-bindgen = "x.x.x"

in this cas 0.2.70

Build the project:

Intstall Rust dependencies:

$ cargo build

Test case:

Inside src/lib.rs put this:

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
   fn alert(s: &str);
}

#[wasm_bindgen]
pub fn run_alert(item: &str) {
   alert(&format!("This is WASM and {}", item));
}

Build the wasm file and typescript files:

$ cargo +nightly build --target wasm32-unknown-unknown

Clone built files on current directory

$ wasm-bindgen target/wasm32-unknown-unknown/debug/chess-0x539.wasm --out-dir .

Create js file index.js to import and call the wasm functions:

const rust = import("./chess_0x539.wasm")

rust.then(func => {
    func.run_alert("Nico")
})

install and add webpack inside package.json (create the file):

{
    "scripts": {
        "server": "webpack-dev-server"
    },
    "defDependencies": {
        "webpack": "4.15.1",
        "webpack-cli": "3.0.8",
        "webpack.dev.server": "3.1.4"
    }
}

Add a webpack config file webpack.config.js:

const path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    mode: "development"
}

Add an html index file to render DOM index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>0x539 wasm test</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

Install JS dependencies:

$ yarn install

$ npm install

Run test:

$ yarn serve

Now your App should be running on http://localhost:8080 and you should receive an alert box.