talishar / talishar-fe

React client for Talishar.net

Talishar is a browser-based platform to play Flesh and Blood. It is a fan-made FABTCG project not associated with Legend Story Studios.

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

Getting started with Talishar

This is the back end client for Talishar.net - completely separate from the front end. In order to test Talishar locally, you will need to install the front end project.

Learn more here: Talishar-FE

New docker way to run Talishar.

Prerequisites:

• Docker
• Talishar-FE

Easier to do on *nix OS than on MS OS.

First clone the repo:

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

Into the directory we go:

cd Talishar

Run the script to do the setup and start the docker containers

bash start.sh

• NOTE: If you're on windows, the newline characters might mess up this script. It's only two lines so you can just run them manually in Windows Powershell or git Bash:

cp -n HostFiles/RedirectorTemplate.php HostFiles/Redirector.php
docker compose up -d

The containers are running in detached (background) mode. If you need to stop them:

bash stop.sh

or

docker compose down

What do the scripts do?

• As noted in the Quickstart Guide below you need a unique Redirector file setup. You can customise it, it's required, but it's not checked into the repo. So the script makes a copy of the Redirector file before launching the containers.
• The stop script just stops the containers by calling docker compose down
• After the first time making the Redirector file, you can bring the docker containers up and down using docker compose up and docker compose down and whatever else you're used to.

Developer / Contributor Resources / XAMPP dev env

• Webserver Dev Quickstart Guide
• Docs

If you would like to contribute, be sure to join the discord to chat with fellow contributors.

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.

talishar-fe's Issues

Chat submission

Chat should work. Hit enter or press a button to send a message

lifting finger off touch should clear the card pop up

Right now if a card is played by pressing on it with touch, the card pop up is still displayed, to clear it I need to touch elsewhere on the screen.

Fix UI scaling for mobile clients

Right now the UI scales properly on desktop and most laptop / ipad style devices.

It doesn't look very good on phones though.

I think the font size needs to scale up and down depending on the size of the screen. This could require a big rework of how elements are measured on screen.

I am considering a second vertical-first layout option. Ideally have some media query to switch between the two. Landscape orientation could be optimised for desktop, vertical layout optimised for mobile / small widdle screens.

Show/Hide Priority Pop Up

I think a show/hide button on the priority pop up windows could be very handy. So when Vis pops 18 runechants you can hide the window to look at the board before deciding what to do as an example

Mentions: 6

https://discord.com/channels/865412150125789214/971928581267664936/1017071410516086794

Replace all icons from React-Icons with icons from Game Icons if possible

Considering react-icons uses Game Icons as a source it shouldn't be too hard just to just swap where we can.
https://game-icons.net/

In particular we can use Tombstone as opposed to pirategrave as a less busy "graveyard" icon and a few other things too. Until we get our own custom artwork done for everything at least.

Display temporary buffs to weapons and cards

Some way to show temporary (or even permanent) buffs to weapons and cards is needed. Or even if a weapon just has some ability baked in like Boost/Go Again etc

This would make cards like Blood on Her Hands much easier to use because you can see which card already has Go Again etc.

This will require more info to be sent to the FE from the BE.

Talishar/Talishar#119

Change playmat and board layout to use CSS grid.

Some screens are bigger than others and we've had some ideas on how talishar should display, and where which item should go where, some people want bigger cards, some people like the focus on the chain link. I think can experiment and try a few different layouts and see what people think.

Plain / Vanilla Playmat

Eventually we will like to have customisable playmats, and some as patreon rewards like card backs.

For now we need a "plainer" playmat as some people say the current one is too distracting.

Could make the design a bit subdued like how Felt Table do theirs too. But right now maybe a plainer colour/texture is more appropriate.

Cards from hand appear “below” gems and card overlays for attack, disabled etc.

It looks pretty jank

Card borders on safari iOS messed up

see image.

need to spend an hour or so just playing with the iPad in debug mode to iron these out.

Token Stacking

Identical tokens should be stackable so you don't have 9 billion frostbites across the screen. Thanks, Denny.

End Game Screen

Need a screen for the end of a game.

Needs to match all features the old UI has.

Drag to play equipment and to block with equipment and other non-hand cards.

It’s natural to drag the cards from hand to play them. Why not drag blocking eq to the combat chain too?
Or even drag your pistol when it’s playable to pew pew for two.

can also be handy for those cards in banish we want to play. Drag it over the play area n drop.

Figure out why Man Sant couldn't play his bolt 'n' shot

https://youtu.be/bgROhfoeKJc?t=719

Not able to play bolt n shot from arsenal.

I think it's because it might have a different border colour / different play ability so need to implement logic for that.

Modal Windows / Toast System

I want to unify the modals & toasts to be one - or absolute max two - component(s), right now it's a bit of a mess with things everywhere showing different bits all relying on updates to the redux store.

In addition to modal windows popping up and staying on screen, I'd like it that toasts can appear for a short amount of time.

Short toasts can show things like die roll results, revealed cards, any announcement we want to do for downtime etc.

[ReactUI] Player items are not usable / playable

The cognition nodes cannot be activated.

In the legacy client they can:

The item needs to be sent Action, actionDataOverride and borderColor params from BE so it can be rendered as active (and clickable).

Double face ally cards cannot be check when hovering

Show both sides of DFC when you hover above the invocations (UPR009 -> UPR0017):
https://discord.com/channels/865412150125789214/971928581267664936/992124188661919866

Options Menu -> Return to Main Menu not working

Return to main menu option not working in options menu.

https://discord.com/channels/865412150125789214/865423689976774656/1065425415105155072

Related to #27 - should have the buttons work to start with before building out the rest.

End game screen improvement

Allow rematch, vote up, vote down etc.

schema Talishar/Talishar#164

Arakni / Assassin ability effect bugged

412595 - On new layout, it does not show what the card you look at on top in from Arakni's ability affect or any assassin effect.

Active and Previous Chain Link Summaries

Open the popup / modal when we try to view the currently active chain link and previous chain links.

Using rtk query to cache the response so we don't repeatedly hammer the server opening and closing windows a lot.

Historical chain link:
https://discord.com/channels/865412150125789214/1019632221335859361/1054919905490772039

Tooltip / explainers for menu options

https://discord.com/channels/865412150125789214/971928581267664936/1054940838100213854
A little on hover tool-tip for the menu options would be nice to give it a quick read if one option suits my needs. Also Access to the menu from the home page not only in game. Integration of the deck stats via the profile page which looks kinda empty atm( one can dream )

Explainers for options seems like a good QOL improvement

Add button to switch back to old client in same window

Right now when switching from new to old client, you're still logged into the old client, and can timeout from there. I found some naughty players claimed victory because the old client reported a timeout.

Anyway need to have a button in the options menu to switch back to the old FE before we do the same on the current FE.

End Game Stats / Summary

Need to implement end game screen / stats / rematch etc

Talishar/Talishar#133

Options Menu

Hook up the options menu so it works.

[React UI] Highlight specific effects

9/10

when mulitiple could apply multiple effects on one card (preferably clarified on the section on the 'opponents effect' section) for cards such as voltaire

Mentions: 1

https://discord.com/channels/865412150125789214/971928581267664936/1018372140191469578

[ReactUI] Blood Debt and other "hero specific" counters in GetNextTurn3

Should have Blood Debt, Soul etc as a special counter type in GetNextTurn3.

Keep the current soul count as it is so we don't brick it.

But we can have a new one to track blood debt, if it's active or not. Just for the specific heroes it applies to.

Is there a special one for assassin?

Lazy load or placeholder card images

Need to implement a way to lazy load or have card image placeholders while the high res version is beamed through the tubes to clients.

Parsing of card data for game log & chat (and some modals)

We've made a new way for cards to be inserted into strings using double curly braces {{ like this }}

Actually implement the decoding of it on the front end, so we can improve the whole gameplay log, and can get rid of the extra unneeded javascript to show a popup card from chat.

AFK User detection / Timeout thing

Need to hook into the existing system that detects if a player is AFK.

https://discord.com/channels/865412150125789214/1038535956426407987/1058788137687597127

When attack is on the stack / before on chain link, show amount of damage would threaten

discord suggestion link:
https://discord.com/channels/865412150125789214/971928581267664936/1055152342779039824

would it be possible when an attack is announced, the amount of damage it is threatening is stated on the screen? so when i am deciding instants i can see how much the attack is for

[ReactUI] Show if a card is face up or face down

We need to know if a card is faceup or facedown when it should or shouldn't be.

adding to Card JSON:

face:
enums:
UP = face up (all players can see)
DOWN = face down (opponent cannot see but player can see)
DOWNALL = face down to everybody ? (mystery card!)
null value = default for zone.

Got a better idea?

CSS: Have fallback to VH if client does not support DVH

Some users have web browsers that do not support CSS dvh property so they got jank happening like this:

https://discord.com/channels/865412150125789214/865423689976774656/1064447822784626728

https://discord.com/channels/865412150125789214/865412150125789217/1063694383871963146

We need to have vh as a fallback height option.

Sometimes cards get "crooked" in the card fan

I mean it just looks nasty when it happens.

Allow user option to switch between "card fan" and "flat display" for their hand when playing.

The "cards fan" is a bit divisive and some people don't like it. Let's make it an option that is saved to the user's preferences. If they don't like it, it can default to the same view as if they're spectating.

Maybe no need to have the drag n drop on the spectator view. Can click and play.

Show if player is a patreon and/or dev with playername

In GetNextTurn3 we send player names.

We should have it set to show if someone is a patron and I can have the little heart on display next to their name.

For super flex we can have the talishar coin next to our names for devs, same as the chat.

Improvement to "square" cards

Etasus has offered to improve the cutouts for the small square versions of the cards.

This issue is to track them being completed and added to the new UI as well as ported to the old one.

React Router

Incorporate react router so there are routes and can navigate about to pages.

Options menu -> buttons should render before options load

I can’t navigate to the main menu if the options fails to load for the expired game.

Make scrollbar obvious when a player has a lot of permanents

A scrollbar should appear underneath the permanents bar to indicate they can scroll left and right to select more stuff.

Ideally I would like it if little arrows could appear on the left and right.

Soul

Add indicator saying how many cards are in soul.
Have popup showing list of cards in soul.
Have indicator telling if the hero has charged that turn or not. (similar to blood debt).

Keyboard Shortcuts

Add keyboard shortcuts aside from spacebar/pass.

Option 1) Keep same as current talishar
Option 2) Focus on wasd side of the keyboard

Advanced Option 3) have it customisable

Border colour for cards played from banish

Card in banish doesn't have a border to indicate it's playable, but it is playable (which does work!). Could be a BE issue?...

https://discord.com/channels/865412150125789214/1038535956426407987/1062520745122607155

Permanents with Gems out of alignment

See attached issue:
#153

Items are out of alignment and clip the parent div when they have a gem. D:

Blood Debt

Add indicator for number of Blood Debt cards (both player and opponent).
Add popup showing list of blood debt cards.
Indicate if blood debt is active or not.

Cards that should be playable from banish should appear in-hand? I think? Who's still playing Chane?

When in dev environment assign all external api routes to go through vite server as a proxy.

In production we’ve already got the servers configured to accept *.talishar.net as origins to prevent cross origin requests. Stopping CORS errors.

We still have CORS issue when in dev environment though, because we are always on the local host.

When the environment is dev I think all requests to either dev, beta, or production BE should go via a /api/env/ directory endpoint on the fe dev server, so the requests can then be proxied out to the appropriate env, and then would require us to have a horrible CORS bypass extension in our browser.

Add border colour for runeblade blood debt cards

Border colour 2 needs to be implemented.

Hook up turn-tracker widget

Make the turn tracker widget work as opposed to just being a block

Migration to new React Front End

Talishar/Talishar#58

Use new health + AP Widget

Man Sant was nice enough to make a new Health + AP Widget to use. Get it implemented.