prismarine-web-client-mirror/README.md

# prismarine-web-client
[![NPM version](https://img.shields.io/npm/v/prismarine-web-client.svg)](http://npmjs.com/package/prismarine-web-client)
[![Build Status](https://github.com/PrismarineJS/prismarine-web-client/workflows/CI/badge.svg)](https://github.com/PrismarineJS/prismarine-web-client/actions?query=workflow%3A%22CI%22)
[![Discord](https://img.shields.io/badge/chat-on%20discord-brightgreen.svg)](https://discord.gg/GsEFRM8)
[![Try it on gitpod](https://img.shields.io/badge/try-on%20gitpod-brightgreen.svg)](https://gitpod.io/#https://github.com/PrismarineJS/prismarine-web-client)

A Minecraft client running in a web page. **Live demo at https://webclient.prismarine.js.org/**


## How it Works
prismarine-web-client runs mineflayer and prismarine-viewer in the browser, which connects over WebSocket to a proxy 
which translates the WebSocket connection into TCP to connect to normal Minecraft servers.

## Screenshot
![Screenshot of prismarine-web-client in action](screenshot.png)

## Live Demo
Click on this link to open it in your browser, no installation necessary: https://webclient.prismarine.js.org/

*Tested on Chrome & Firefox for desktop platforms.*

## Usage
To host it yourself, run these commands in bash: 
```bash
$ npm install -g prismarine-web-client
$ prismarine-web-client
``` 
Finally, open `http://localhost:8080` in your browser.

## Features

* Display mobs and players
* Display blocks 
* Movement (you can move, and you see entities moving live)
* Place and break blocks

## Roadmap
* Containers (inventory, chests, etc.)
* Sounds
* More World Interactions (attacking entities, etc.)
* Cosmetic Rendering Features (day night cycle, fog, etc.)

## Development

If you're contributing/making changes, you need to install it differently.

First, clone the repo.

Then, set your working directory to that of the repo. For example:
```bash
$ cd ~/prismarine-viewer/
```

Finally, run

```bash
$ npm install
$ npm start
```

This will start express and webpack in development mode: whenever you save a file, the build will be redone (it takes 5s), 
and you can refresh the page to get the new result.

Connect to http://localhost:8080 in your browser.

You may want to disable auto saving in your IDE to avoid constant rebuilding, see https://webpack.js.org/guides/development/#adjusting-your-text-editor

To check the production build (take a minute to build), you can run `npm run build-start`

If you're interested in contributing, you can check projects at https://github.com/PrismarineJS/prismarine-web-client/projects

Some variables are exposed in window for debugging:
* bot
* viewer
* mcData
* worldView
* Vec3
* pathfinder
add code 2021-02-27 17:12:11 -05:00			`# prismarine-web-client`
			`[![NPM version](https://img.shields.io/npm/v/prismarine-web-client.svg)](http://npmjs.com/package/prismarine-web-client)`
			`[![Build Status](https://github.com/PrismarineJS/prismarine-web-client/workflows/CI/badge.svg)](https://github.com/PrismarineJS/prismarine-web-client/actions?query=workflow%3A%22CI%22)`
Initial commit 2021-02-27 16:27:59 -05:00			`[![Discord](https://img.shields.io/badge/chat-on%20discord-brightgreen.svg)](https://discord.gg/GsEFRM8)`
add code 2021-02-27 17:12:11 -05:00			`[![Try it on gitpod](https://img.shields.io/badge/try-on%20gitpod-brightgreen.svg)](https://gitpod.io/#https://github.com/PrismarineJS/prismarine-web-client)`
Initial commit 2021-02-27 16:27:59 -05:00
update live demo url 2021-03-12 10:59:51 -05:00			`A Minecraft client running in a web page. Live demo at https://webclient.prismarine.js.org/`
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00

			`## How it Works`
Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`prismarine-web-client runs mineflayer and prismarine-viewer in the browser, which connects over WebSocket to a proxy`
			`which translates the WebSocket connection into TCP to connect to normal Minecraft servers.`
Initial commit 2021-02-27 16:27:59 -05:00
add screenshot to readme (#19) * add screenshot to readme * move screenshot into the repo 2021-02-28 21:45:27 -05:00			`## Screenshot`
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			`![Screenshot of prismarine-web-client in action](screenshot.png)`

			`## Live Demo`
update live demo url 2021-03-12 10:59:51 -05:00			`Click on this link to open it in your browser, no installation necessary: https://webclient.prismarine.js.org/`
add screenshot to readme (#19) * add screenshot to readme * move screenshot into the repo 2021-02-28 21:45:27 -05:00
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			`Tested on Chrome & Firefox for desktop platforms.`
fix server import 2021-02-27 17:35:59 -05:00
Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`## Usage`
			`To host it yourself, run these commands in bash:`
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			```bash
			`$ npm install -g prismarine-web-client`
			`$ prismarine-web-client`
			```
			Finally, open `http://localhost:8080` in your browser.
fix server import 2021-02-27 17:35:59 -05:00
add code 2021-02-27 17:12:11 -05:00			`## Features`

Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`* Display mobs and players`
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			`* Display blocks`
			`* Movement (you can move, and you see entities moving live)`
			`* Place and break blocks`
add code 2021-02-27 17:12:11 -05:00
			`## Roadmap`
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			`* Containers (inventory, chests, etc.)`
			`* Sounds`
			`* More World Interactions (attacking entities, etc.)`
			`* Cosmetic Rendering Features (day night cycle, fog, etc.)`
Initial commit 2021-02-27 16:27:59 -05:00
fix server import 2021-02-27 17:35:59 -05:00			`## Development`
add code 2021-02-27 17:12:11 -05:00
clean up readme (#45) * clean up readme * more cleaning up * add word * am stupid * change project name * fix typos * move live demo * Update README.md * be less specific 2021-03-02 15:25:43 -05:00			`If you're contributing/making changes, you need to install it differently.`

			`First, clone the repo.`

			`Then, set your working directory to that of the repo. For example:`
			```bash
			`$ cd ~/prismarine-viewer/`
			```

			`Finally, run`

			```bash
			`$ npm install`
Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`$ npm start`
Initial commit 2021-02-27 16:27:59 -05:00			```

Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`This will start express and webpack in development mode: whenever you save a file, the build will be redone (it takes 5s),`
			`and you can refresh the page to get the new result.`

			`Connect to http://localhost:8080 in your browser.`

			`You may want to disable auto saving in your IDE to avoid constant rebuilding, see https://webpack.js.org/guides/development/#adjusting-your-text-editor`
add code 2021-02-27 17:12:11 -05:00
Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			To check the production build (take a minute to build), you can run `npm run build-start`
Initial commit 2021-02-27 16:27:59 -05:00
Optimize webpack usage, fix #34 (#58) * introduce prod/dev build https://webpack.js.org/guides/production/ * use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware to provide a fast npm start (5 second) 2021-03-05 19:29:28 -05:00			`If you're interested in contributing, you can check projects at https://github.com/PrismarineJS/prismarine-web-client/projects`
Initial commit 2021-02-27 16:27:59 -05:00
expose more things 2021-03-12 19:14:17 -05:00			`Some variables are exposed in window for debugging:`
			`* bot`
			`* viewer`
			`* mcData`
			`* worldView`
			`* Vec3`
			`* pathfinder`