Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #37: Disable non-solution keyboard characters in Jumble #40

Merged
merged 7 commits into from
Oct 16, 2023

Conversation

paulkim26
Copy link
Contributor

Fixes #37

  • Non-solution characters in Jumble's visual keyboard will appear faded out/disabled.
    • Added a new .customButton[disabled] CSS class in global.css.
    • In WordInput.tsx a disabled attribute is applied to non-solution keys i.e. keys not found in the targetValue property of this component.
    • Note: A limitation of the simple-keyboard buttonAttributes option is that both an attribute AND a value must be assigned. This means that the disabled keys feature the non-standard attribute disabled="true" vs. the standard disabled (which is why I could not leverage the .customButton:disabled pseudoclass).
  • Jumble input field will jiggle if the player clicks on a non-solution character.
    • onKeyboardInputChange will check whether "disabled" characters are found in the keyboard component's input. This callback function will return early if so.
    • My original approach was to disallow disabled characters via the inputPattern option, but this would not allow for a callback function (i.e. to jiggle the input field) to fire.

If you see any issues with my pull request or suggestions for improvement, please let me know.

Tags: hacktoberfest, bug

@vercel
Copy link

vercel bot commented Oct 15, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ikea-word-games ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 16, 2023 1:05pm

Copy link
Owner

@avikantz avikantz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, please see comments for some minor suggestions.

src/components/wordInput.tsx Outdated Show resolved Hide resolved
Comment on lines 59 to 61
const disabledLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").filter((letter: string) => {
return !enabledLetters.includes(letter);
});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also can we move this to utils/words, something like getDisabledLettersForWord(word: string)

Don't need to use split and join everywhere either;

const reg = new RegExp(`[${targetValue}]`, "g")
const disabledCharacters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".replace(reg, "")

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion, will add the new utility function & remove redundant instances of split and join.

Copy link
Contributor Author

@paulkim26 paulkim26 Oct 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've created a new utils function and removed all instances of split & join, how does it look?

src/app/global.css Show resolved Hide resolved
Co-authored-by: Avikant Saini <avikantsainidbz@gmail.com>
Co-authored-by: Avikant Saini <avikantsainidbz@gmail.com>
Copy link
Owner

@avikantz avikantz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Thanks @paulkim26 🎉

@avikantz avikantz merged commit f22f7cc into avikantz:main Oct 16, 2023
2 checks passed
@paulkim26
Copy link
Contributor Author

Great to hear, thanks for the review!

@paulkim26 paulkim26 deleted the issue-37 branch October 16, 2023 13:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] Disable non-solution characters from Jumble
2 participants