mattmccherry / talishar-fe

React client for Talishar.net

Talishar is a browser-based platform to play Flesh and Blood. This is an unofficial project not linked to or endorsed by Legend Story Studios.

Visit Talishar.net to get playing Flesh & Blood in your browser right now!

Getting started with Talishar-FE

This is a new front end client for talishar.net - completely separate from the back end. The players will be using this app to connect to the servers eventually.

Project

This is a Vite single page React App using Redux, Redux Toolkit, and React Redux bindings.

Requirements / How to install:

Prerequesites:

• Volta to manage node installs.
• node.js (currently 16.19.0), which would be managed automagically by Volta for you.
• git
• basic knowledge of the command line / terminal
  • If you're on Windows, get Windows Powershell or wsl or something.

git clone https://github.com/Talishar/Talishar-FE

cd Talishar-FE

npm install

npm run dev

Access the server at http://localhost:5173/ (Port 5173 by default, if you configure it to something else in Vite then it'll be there instead).

If you have problems running the development server, come to the discord and ask for help.

How to play a game.

• From regular talishar.net you should be able to copy the search Params and append them to your local dev url for spectating.
  • Eg: https://talishar.net/game/NextTurn4.php?gameName=612839&playerID=3
  • Copy the ?gameName=612839&playerID=3
  • Stick it on the the end of your dev service, eg: http://127.0.0.1:5173/?gameName=612839&playerID=3
  • react router will automatically route any query like this to the 'game' page.
• If you want to play (use your cards) - you'll need to find your authkey.
  • on Talishar.net you can find your cookie in storage -> cookies, it is called lastAuthKey and copy the value as search query param authKey
  • so your local dev url will look something like: http://127.0.0.1:5173/game/play?gameName=612888&playerID=1&authKey=7147c19a6b4460390ace621dc581e334f24e9e4fa0c729eecab9805a6bbafd09
  • if you're playing with a local dev BE server then there's no need, all the cookies and stuff should work without any fiddling.

Important!

If you run into any trouble setting up the project please let LaustinSpayce know so we can fix it, and help make it a smoother process for future contributors.

Optional happy fun things:

Configure Prettier / ES Lint in your text editor of choice.

How it's organised:

Short answer is it isn't really. If you have a better idea on how to organise the files, please let me know.

Otherwise try to keep everything as small as possible, Reacty-containers. And pulling data from Redux etc. CSS modules help to keep stuff locally scoped.

The plan for later:

Accomplished so far:

• ✅ automatic deployment to CDN
• ✅ automatic testing for all MR and commits to main

Still need help with:

• More testing coverage
• Building out features and helping with BE bugs etc.

Learn More

This project was originally bootstrapped with Create React App, and is now using Vite.

To learn React, check out the React documentation.

There is some redux stuff involved here too so check the React Redux documentation too.

Disclaimer

All artwork and card images © Legend Story Studios.

Talishar.net is in no way affiliated with Legend Story Studios. Legend Story Studios®, Flesh and Blood™, and set names are trademarks of Legend Story Studios. Flesh and Blood characters, cards, logos, and art are property of Legend Story Studios.