Skip to content

Feature: Champ player keyboard mouse navigation#6

Merged
gvjacob merged 26 commits into
mainfrom
GN-52
Jan 18, 2023
Merged

Feature: Champ player keyboard mouse navigation#6
gvjacob merged 26 commits into
mainfrom
GN-52

Conversation

@gvjacob
Copy link
Copy Markdown
Member

@gvjacob gvjacob commented Jan 17, 2023

What This Does

  • Render champ player that moves according to coordinates on the board.
  • Move champ player when arrow keys are pressed while focused on the player icon
  • Set starting position of champ based on world content
  • Install and configure typescript-eslint to properly use eslint for TS
CleanShot.2023-01-17.at.19.47.53.mp4

How to Test

  1. Run yarn install
  2. Open the homepage
  3. Press the arrow keys and make sure they do not affect the champ player position
  4. Now focus onto the player icon by pressing the Tab key until the player icon is focused on
  5. Press the arrow keys and make sure the player icon moves around the board if there are actual tiles to move to.

Accessibility Checklist

  • Markup uses semantic HTML
  • <img> tags have appropriate alt text
  • Links and buttons have discernable text
  • Form inputs have labels
  • Pages are keyboard accessible & focus states are handled

See the
Playbook accessibility page
for more details.

@linear
Copy link
Copy Markdown

linear Bot commented Jan 17, 2023

GN-52 In-world keyboard navigation

Navigate the tiles with keyboard arrow keys when allowed.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 17, 2023

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

Name Status Preview Comments Updated
supernoodle-prototype ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 18, 2023 at 4:22PM (UTC)

@gvjacob gvjacob self-assigned this Jan 18, 2023
@gvjacob gvjacob added this to the 0.1.0 milestone Jan 18, 2023
@gvjacob gvjacob marked this pull request as ready for review January 18, 2023 09:58
Comment thread .eslintrc.json
Comment on lines +16 to +21
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"next/core-web-vitals"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Had to reconfigure ESLint to use typescript-eslint so that we use TS rules, and not JS.

Comment on lines +87 to +89
<p className="sr-only" aria-live="polite">
{`Move ${neighborsDirections.join(", ")}`}
</p>
Copy link
Copy Markdown
Member Author

@gvjacob gvjacob Jan 18, 2023

Choose a reason for hiding this comment

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

This would only say Move up, down, right right now. We can make this more helpful but let's wait until we've included other tile types.

An example of what the accessible text can be in the future.

Currently at a check-in. Press Enter to continue. You may move up, right, or down.

Copy link
Copy Markdown
Contributor

@joshpensky joshpensky left a comment

Choose a reason for hiding this comment

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

This is great! 🏆 Just a few comments from reviewing!

Comment thread src/components/ChampPlayer.tsx
Comment thread src/components/ChampPlayer.tsx
Comment thread src/components/WorldBoard.tsx Outdated
Comment thread src/components/ChampPlayer.tsx Outdated
Comment thread src/utils/board.ts Outdated
Comment thread src/utils/board.ts Outdated
# Conflicts:
#	.eslintrc.json
#	src/components/WorldBoard.tsx
#	src/worlds/oms-calming-corner.ts
Copy link
Copy Markdown
Contributor

@joshpensky joshpensky left a comment

Choose a reason for hiding this comment

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

Love it! 🍉

@gvjacob gvjacob merged commit 8430f1d into main Jan 18, 2023
@gvjacob gvjacob deleted the GN-52 branch January 18, 2023 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants