WebAssembly Chess Engine made with rust, Demo
TBA
TBA
TBA
$ git clone https://github.com/l0x539/chess-0x539
- Navigate to the repository folder and run following command:
$ npm install
- 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
Once you setup the recommended packages, you can run the following command to see the test:
$ yarn dev
or
$ npm run dev
- 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
or
$ npm install
- Run test:
$ yarn serve
Now your App should be running on http://localhost:8080 and you should receive an alert box.