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!!

[norswap]

@SIDHARTH20K4 @OSEH-svg @mamicho16

One of you can work of this issue, but please decide between yourself who it would be.

The budget for this issue is 150OP.

Also note that the project is currently paused, and so the delay to get a review might be lengthy (= few weeks, should be less than a month in any case). Please acknowledge this here if you still want to tackle the issue.

[OSEH-svg]

Hello @norswap. It would not be a problem. I am still interested in being assigned the task

[SIDHARTH20K4]

@norswap
I can work on it... could you tell me how to approach this problem?

[Shaktika-Selvakumar]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a 24 year old software engineer and a web3 enthusiast with web development experience, has been involved in various blockchain projects. I have worked with Javascript - to specifically write deployment scripts for smart contracts written in solidity and familiarity with typescript because of Angular. I believe I can resolve this issue.

How I plan on tackling this issue

I have already looked at the git repo.

1. The first thing I would do is familiarize with the game flow [architecture], mechanics, variables involved, interaction between components and the conventions you have used throughout the contracts written.
2. I will then set up the environment in a local devnet [Avnil] by following the steps in the git repo.
3. Then go through the Game.sol contract and other core contracts to check data structures and how game flow is managed in steps by debugging and setting breakpoints to see the flow.
4. I will check the already written tests in repo to see how they interact and the areas they are testing
5. I will make small changes to identify how the application responds
6. Then I will locate for playcard logic - and the relevant UI Components connected to it and make the necessary modifications [That is ensure the cards cant be played or the screen doesnt turn green when its illegal]
7. Run some manual tests so that I can ensure the logic isnt broken

[norswap]

Guys, please decide between yourself on one person to tackle this.

[Michelle031]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’ve worked on creating and modifying UIs in response to game conditions based on my experience with game logic. In this case, the issue is that the green drop background appears even when it’s not the player’s turn or they’ve already played a card. The game already blocks illegal moves, so the condition for valid plays exists. What needs to be done is to link this logic to the UI, ensuring the green background only shows when a card can legally be played, providing a clearer user experience.

How I plan on tackling this issue

I’d approach this by first identifying the existing logic that governs legal card plays, since it already blocks invalid moves. Then, I’d link that logic to the UI to ensure the green background only shows when playing a card is allowed. Finally, I’d test and debug the UI to make sure the feedback is consistent and accurate across all scenarios.

[DavidOredu]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I would like to apply for the task of adding indicators for illegal card play. My background is in Unity game development. I have knowledge in game design and gameplay system implementation. I have suitable knowledge with JavaScript syntax but I'm majored in C# and Python.

How I plan on tackling this issue

Find variables storing player turn. If there's none, we create one. Use this information the define a boolean state judging player turn. or state machine. This would constrain playing actions to the currently active player.
Also, for the single-card play, we store a use the structure contains card information and set that to the first play card and only change that value if the current card information is null. The remove currently active card, set card information back to null.

[akintewe]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a CS major with a lot of experience developing front ends for web3 applications using JavaScript, TypeScript, and Solidity. My background includes building user interfaces that communicate with smart contracts, handling game state management, and creating responsive UI elements. This experience will help this project's card play indicators be improved.

How I plan on tackling this issue

I would first examine the present coding to comprehend how the turn system and card play mechanics are built before adding indicators for illegal card plays. I would pinpoint the reasoning for legitimate card plays and expand it to regulate the green drop background's appearance. To do this, it would probably be necessary to change the card rendering component such that, before applying the green background style, it checks the game status (current player's turn, cards played this round). In the event that the game's state changes, I would make sure this check is responsive and performant. To confirm proper indication behaviour, testing would include a range of game circumstances.

[manicdon7]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My background includes hands-on experience in blockchain development, specifically with the Starknet ecosystem, which aligns with the fully on-chain nature of 0xFable. I have contributed to projects that involve smart contracts and zero-knowledge circuits, particularly around Python SDKs, making me familiar with the structure of on-chain gaming logic and interaction. Additionally, my experience in frontend design and game mechanics would allow me to effectively contribute to improving user experience, like in this case of better managing game interactions.

How I plan on tackling this issue

Review Existing Codebase: I would first dive into the codebase to identify where the card-dropping interaction is being handled. Since you mentioned that the logic for when a card can’t be played is already in place (as the playCard transaction isn't triggered when it's not allowed), I would locate that condition to reuse or extend it for the display logic.

Separate Drop and Action Logic: Once the condition is found, I would refactor it so that the legality of dropping a card is checked separately from the actual card-playing transaction. This will allow controlling both the game logic and UI feedback independently but cohesively.

Adjust UI Behavior: In the front-end/UI, I would ensure the green drop background appears only when:

It’s the player’s turn.
The player hasn’t already played a card this turn.
I would likely introduce a helper function that listens to the same legality conditions from the game state and updates the UI accordingly, ensuring that feedback to the player is intuitive and real-time.

Testing and Validation: After implementing the changes, I would test it with various scenarios, such as trying to drop a card out of turn or after a card has already been played. I’d check that no green drop background appears in these cases, and that a card can only be played when the conditions are met.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, Can i work on this task?

[akintewe]

Hello can i work on this task

[udyan13]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have been working with my solidity for my past 6months and I can make good contribution on this project.