Add indicators for illegal card play

[norswap]

Currently the game allows playing a single card every turn.

Two things are thus illegal:

• playing a card when it's not your turn
• playing a card when you've already played one

But the interface currently shows the green drop background in all of these scenarios. This should be changed so that this drop background only appears in situation where playing a card is legal. The condition is probably already in the code somewhere, since we do not trigger a playCard transaction when it is not possible, which just need to extend the condition to the display of the green background.

[tanyas-codes]

Hey ! Can i take a look at this ?

[Ayoazeez26]

@norswap there has been an inactivity for a while now on this issue, can I jump on this?

[Joy-Adah]

Hi @norswap is this still available?

[norswap]

Yep, it's still open.

[No-bodyq]

Hey @norswap can I take this??

[norswap]

Hey Asher, 0xFable development is on ice for now. You can take it but aware that there might a long delay for the review to come in. If that's fine, go ahead!

[No-bodyq]

That's fine

[mamicho16]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I've done some academic projects in JS and TS and I've done a tutorial of Solidity so I want to try to solve this problem to improve my skills in this languages, I'm almost sure I can figure it out.

How I plan on tackling this issue

I would do the following:
Read the resource.
Understand the code to know which part should be change.
Proceed with my final solution until I confirm everythings is set up.

[OSEH-svg]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a seasoned JavaScript developer with experience in front-end development and UI/UX design, I have honed my skills in creating intuitive and responsive interfaces. My background includes working with modern JavaScript frameworks like React, which is often used in game development for managing state and rendering dynamic components. This experience will allow me to address the problem efficiently by ensuring the interface behaves as expected and provides users with clear visual feedback.

How I plan on tackling this issue

Approach to the Problem:
Identify the Conditions:

First, I'll locate the existing logic that determines when a player can legally play a card. This condition likely exists in the function or component responsible for handling the playCard transaction.
Extend the Condition:

I will extend the existing condition to control the visibility of the green drop background. This ensures that the background only appears when it's the player’s turn and they haven't already played a card.
Update the UI:

I'll modify the component rendering the drop zone to conditionally apply the green background style. This will involve checking the extended condition and applying the appropriate CSS class or style dynamically.
Testing:

Thoroughly test the solution to ensure the green drop background only appears in legal scenarios:
When it’s the player’s turn and they haven’t played a card yet.
Ensure that it doesn’t appear when it’s not the player’s turn or when they’ve already played a card.
Test different edge cases, such as rapid turn switches or multiple players interacting simultaneously.
Optimization and Refactoring:

Review the code to ensure that the new logic is efficient and does not introduce unnecessary complexity. Refactor any related code if necessary to maintain code quality and readability.
Documentation:

Document the changes made to the codebase, explaining the new logic and how it interacts with the existing system. This will help other developers understand the solution and maintain it in the future.

[SIDHARTH20K4]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I would like to contribute to this issue
Kindly assign this issue to me!!