Skip to content

Commit

Permalink
Merge pull request #4 from rajesh-rahul/master
Browse files Browse the repository at this point in the history
Adjust sizes for smaller screens
  • Loading branch information
rajesh-rahul authored Dec 13, 2024
2 parents 0d53a2c + ab7392d commit 53dd843
Show file tree
Hide file tree
Showing 66 changed files with 2,178 additions and 2,042 deletions.
76 changes: 38 additions & 38 deletions .github/workflows/gh_pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,50 @@
name: Deploy WotReplay Packet Analyzer

on:
# Runs on pushes targeting the default branch
push:
branches: ['prod']
# Runs on pushes targeting the default branch
push:
branches: ['prod']

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
contents: read
pages: write
id-token: write

# Allow one concurrent deployment
concurrency:
group: 'pages'
cancel-in-progress: true
group: 'pages'
cancel-in-progress: true

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 23
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload dist folder
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 23
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload dist folder
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
27 changes: 14 additions & 13 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
"useTabs": false,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
75 changes: 71 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,76 @@

Current Site: https://rajesh-rahul.github.io/wot-packet-analyzer/

Usage: Simply open a `.wotreplay` file
This tool visualizes binary data present in `.wotreplay` files produced by
World of Tanks. It is a static site that runs completely in your browser.

- Cells highlighted in Green: ZLIB header
The format of `.wotreplay` files tend to change with every release of WoT (including micro patches). In addition, structure of many packets remain a mystery after all these years. This tool makes it easy to keep up with changes in the file format as well as to discover the structure of unknown packets.

- Cells highlighted in Gray: Pickle stream. Might be a false positive as well
![msedge_lgQxmQFEQu](https://user-images.githubusercontent.com/98002119/204069254-9e371301-4de8-4ad5-a8ab-590d49873d20.gif)
## How to Use (Chrome highly recommended)

1. Go to the webapp: https://rajesh-rahul.github.io/wot-packet-analyzer/
2. Open a replay file (or open the demo/example replay)

![Demo video](wot-packet-analyzer-demo.gif)

## Features

### Copy JSON Data from the replay

Click on the `Copy` button next to `Replay Overview` to copy the JSON portion of the replay file.

This data is entirely different from the data in the binary portion (which this tool helps you visualize).

### Data View

Click on a cell of one of the packets in the packet table to see the data represented as UInt8, Float32 etc. This feature is very common in binary file viewers such as https://hexed.it/. However, only little endian representation is supported
because all `.wotreplay` files uses little-endian.

### Filter Packet Types

The Packet Overview table on the bottom left can be used to control which packets are shown in the Packet Table (the middle table).

### Identify Segments

Many packets in the replay contain segments that can be identified without intimately knowing the packet formats. These are highlighted/underlined in the Packet Table. Clicking on them will display more information in the `Segment Info` section.

Most of these segments are useful because it makes it easier to understand data surrounding the segments. For example, if a packet contains a Vehicle ID segment, it is reasonable to assume that the data in the packet has something to do with that particular vehicle.

Finally, note that some segments, such as Vehicle ID or Entity ID, may contain false positives because we are only trying to match 4 bytes of data. As well, some segments of Python Pickle or ZLIB (compressed data) may not be identified at all because they use a different format to denote the size of the segment. Only one such example is known: there is a large packet at the end of the replay which contains a lot of Python Pickle and ZLIB segments which are not identified as such. It is still possible to identify them manually and extract data using this tool.

### Various Find Tools

You can search packets based on:

- `Timestamp`. The timestamp used is the same as the one that you see on the top right corner during battles and replays.

- `Packet Type`. Packets of the same type have the same format (though some are more complicated). For example, Packet Type of `0x0A` or `10` represents a position packet.

- `Packet ID`. If you place all the packets as they occur in an array where `arr[0]` is the first packet that occured, Packet ID is the same as the index of the packet in the array.

- `Selection`. If you select a range of cells, you can search for other occurences of this selection

### Convert Python Pickles and ZLIB (compressed data) to JSON/ASCII

Once a Python Pickle or ZLIB segment is identified (via manual selection or by selecting an automatically identified segment), use actions in `Analyze Selection` section to make sense of the data.

## FAQ

### What is Python Pickle?

Python Pickle is a protocol to serialize Python data. For example, if you have a dictionary or a list in Python that you want to save to disk, you can use the `pickle` module to serialize this data to a sequence of bytes that can be saved to disk as file.

In `.wotreplay` files, If you see the two bytes `0x80` `0x02` and then a `0x2E` a while later, there is a good chance it a pickle segment. `0x02` denotes the version of the protocol. Thankfully, we only encounter protocols of version 2.

### What is ZLIB?

ZLIB is a data compression library. It allows you to compress data to v

## Tech Stack

The UI is built with Svelte 5 and shadcn-svelte. The WASM binary is produced from Rust code in `src-wasm` with `wasm-bindgen`.

- Svelte 5 with shadcn-svelte
- Rust
- wasm-bindgen
- WebAssembly
30 changes: 15 additions & 15 deletions components.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app.css",
"baseColor": "stone"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks"
},
"typescript": true,
"registry": "https://next.shadcn-svelte.com/registry"
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app.css",
"baseColor": "stone"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks"
},
"typescript": true,
"registry": "https://next.shadcn-svelte.com/registry"
}
20 changes: 10 additions & 10 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WotReplay Packet Analyzer</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WotReplay Packet Analyzer</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
72 changes: 36 additions & 36 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{
"name": "wot-packet-analyzer2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier --write .",
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tsconfig/svelte": "^5.0.4",
"@types/node": "^22.9.0",
"autoprefixer": "^10.4.20",
"bits-ui": "^1.0.0-next.65",
"clsx": "^2.1.1",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.8",
"prettier-plugin-tailwindcss": "^0.6.9",
"svelte": "^5.1.3",
"svelte-check": "^4.0.5",
"svelte-tiny-virtual-list": "^2.1.2",
"tailwind-merge": "^2.5.4",
"tailwind-variants": "^0.3.0",
"tailwindcss": "^3.4.9",
"tslib": "^2.8.0",
"typescript": "~5.6.2",
"vite": "^5.4.10",
"vite-plugin-top-level-await": "^1.4.4",
"vite-plugin-wasm": "^3.3.0"
},
"dependencies": {
"lucide-svelte": "^0.460.1"
}
"name": "wot-packet-analyzer2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier --write .",
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tsconfig/svelte": "^5.0.4",
"@types/node": "^22.9.0",
"autoprefixer": "^10.4.20",
"bits-ui": "^1.0.0-next.65",
"clsx": "^2.1.1",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.8",
"prettier-plugin-tailwindcss": "^0.6.9",
"svelte": "^5.1.3",
"svelte-check": "^4.0.5",
"svelte-tiny-virtual-list": "^2.1.2",
"tailwind-merge": "^2.5.4",
"tailwind-variants": "^0.3.0",
"tailwindcss": "^3.4.9",
"tslib": "^2.8.0",
"typescript": "~5.6.2",
"vite": "^5.4.10",
"vite-plugin-top-level-await": "^1.4.4",
"vite-plugin-wasm": "^3.3.0"
},
"dependencies": {
"lucide-svelte": "^0.460.1"
}
}
8 changes: 4 additions & 4 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
Loading

0 comments on commit 53dd843

Please sign in to comment.