## Week 11
Weekly task:
write sketch for documentation for Web3 gaming development with Wasm & zkWasm proving service.

Understand componets for build a web3 game application backed by Delphinus Infra.

-----------------------------

## zk Provable WASM-Based browser Application

-----------------------------
## Sketch
-----------------------------

build documentation from components:

1. trustless-browser-sanbox
1.1 Rougelike-demo (Rust), branch `integration`
1.2 game source to wasm

2. App and MVC architecture.

3. Proving service

IF enough time:
4. zkWasm-protocol, continuious-batcher
5. Smart contract interaction:

Discuss:
play game with n-many steps, generate trace, generate proof

## Overview - Web3 Application in Web2 form:

The Model View Controller (MVC) is used throughout the overall architecture of the Web2 interface build on Web3 services. The MVC model in this case, has the View being the game frontend the user sees and interacts with. The Controller is responsible for processing user operation and manipulating the data. The View is responsible for representing the changes in the data, i.e., the game play. The reason why we take this approach in architecture is becase we want to separate the game mechanics and the mechanism of provably assuring a particular state from the view of that state. The Model and Controlelr are run in the Web Assembily virtual machine, but the View is not.


In this regard the game logic itself can be written in a variety of languages that can be compiled down to WebAssembily bytecode. These optiions include:

Javascript, Typescript, Assembily, C++, Rust for the game development language.

After compilation of the approiate

### Example compilation of game (from Rust source) Web Assembily:

TODO: *Explain all files in [game]/core/*

Note that the entry point of the zkWasm prove is via the `zkmain()` function in the game source code.

#[wasm_bindgen]
pub fn zkmain() {
    ...
}

Compiling `roguelike-demo` branch `integration`

`https://github.com/DelphinusLab/roguelike-demo`

cargo install wasm-pack

#### Compilation:

$ make wasm
wasm-pack build --release crates/core --out-name gameplay --out-dir pkg
[INFO]: 🎯  Checking for the Wasm target...
info: downloading component 'rust-std' for 'wasm32-unknown-unknown'
info: installing component 'rust-std' for 'wasm32-unknown-unknown'
 17.1 MiB /  17.1 MiB (100 %)  16.5 MiB/s in  1s ETA:  0s
[INFO]: 🌀  Compiling to Wasm...
...
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨   Done in 23.79s
[INFO]: 📦   Your wasm pkg is ready to publish at crates/core/pkg.

After compiling the game source, you will see the package files containing the main web assembily `.wasm` and the type definitions and loading script for the browser application.

├── pkg
│   ├── gameplay_bg.js
│   ├── gameplay_bg.wasm
│   ├── gameplay_bg.wasm.d.ts
│   ├── gameplay.d.ts
│   ├── gameplay.js
│   └── package.json

These files are copied to the target React web App frontend.

## Web App:

In the Web app, a typical file structure looks similar to the below:

Root directory of Web App:

├── src
│   ├── app
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── data
│   ├── fonts
│   ├── games
...

The game files are copied to the directory:

./src/games/roguelike/
                    ├── card.tsx
                    ├── controller.tsx
                    ├── death.tsx
                    ├── fantacy01.jpg
                    ├── js
                    │   ├── config.js
                    │   ├── game.js
                    │   ├── gameplay_bg.js
                    │   ├── gameplay_bg.wasm
                    │   ├── gameplay_bg.wasm.d.ts
                    │   ├── gameplay.d.ts
                    │   └── package.json
                    ├── style.scss
                    └── tile.ts

### Explain: controller.tsx

generally the controller processes commands

export function GameController() {

    function initGame(){...};
    function pickCard(){...};
    function endTurn(){...};
    
    return (
        render components
    )

}

## api of service-helper

explain api

`NewProveTask.tsx`

## Proving Service:

Write up about how to submit a proof via App.

the .ts to submit a proof through game app
and write about proving service.

## Smart contract & verification

Write about how game user is rewarded onchain.

(Proxy.sol)
callbacks for the accepted proof.
L 212, verify() function.
verfy the proof at L240 and call the side effect function L242. The calldata is user data

    /*
     * @dev Data encodes the delta functions with there verification in reverse order
     * data = opcode args; opcode' args'; ....
     */
    function verify(
        bytes calldata tx_data,
        uint256[] calldata proof,
        uint256[] calldata verify_instance,
        uint256[] calldata aux,
        uint256[][] calldata instances,
        RidInfo calldata ridInfo
    ) public {
        require(rid == ridInfo.rid, "Verify: Unexpected Request Id");

        // [0]: old root, [1]: new root, [2]: sha_low, [3]: sha_high

        require(
            tx_data.length == OP_SIZE * ridInfo.batch_size,
            "Verify: Insufficient delta operations"
        );

        uint256 sha_pack = uint256(sha256(tx_data));
        require(
            sha_pack == (instances[0][2] << 128) + instances[0][3],
            "Inconstant: Sha data inconsistant"
        );

        require(
            merkle_root == instances[0][0],
            "Inconstant: Merkle root dismatch"
        );

        verifier.verify(proof, verify_instance, aux, instances);

        uint256 sideEffectCalled = perform_txs(tx_data, ridInfo.batch_size);

        uint256 new_merkle_root = instances[0][1];
        merkle_root = new_merkle_root;
        rid = ridInfo.rid + ridInfo.batch_size;
        emit Ack(ridInfo.rid, sideEffectCalled);
    }