Feature: Show level previews by gvjacob · Pull Request #24 · Upstatement/supernoodle-prototype

gvjacob · 2023-01-31T18:48:25Z

What This Does

Show level preview when you hover over a tile or current champ player is on that tile
The level preview only uses hardcoded content right now! I want to refactor how we scaffold mock content before wiring this up.
Send all tooltips on the board to a div container to avoid z-index issues with the board.

CleanShot.2023-01-31.at.15.32.26.mp4

How to Test

Hover over a tile
Make sure the level preview shows up and does not show a CTA button
Make sure the level preview also changes orientation (where it is anchored relative to the tile) depending on the viewport. For example, the preview should appear below the tile if the tile is close to the top of the screen
Focus on the champ player and move it to a level tile
Make sure the preview appears after a delay of 500ms to avoid rapidly showing previews when you're rapidly moving through the board
Make sure the preview shows a CTA button

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 · 2023-01-31T18:48:27Z

GN-55 Preview popovers for level tiles

Tile States - GoNoodle Define (Figma)

Level tiles should provide previews of the level, estimated duration, and energy level. Consider the experience for tablet users as well.

vercel · 2023-01-31T18:48:28Z

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	Feb 1, 2023 at 7:34PM (UTC)

# Conflicts: # src/components/WorldBoard.tsx

gvjacob · 2023-01-31T20:43:08Z

+      <Image
+        className="w-full rounded"
+        src={breatheLevelPreviewThumbnail}
+        alt="Stack of vibrant discs that expand and contract on inhale and exhale"


I'm a copywriter can't you tell? 😏

gvjacob · 2023-01-31T20:46:25Z

+      <Tooltip.Provider>
+        <Tooltip.Root open={isHovering || isCurrentPlayerPosition}>


Considered using a Popover from Radix because it seems to be the correct choice based on what we want to achieve here but decided to go with Tooltip for a couple reasons:

We don't want to trigger the preview with a button, which seems to be the intended purpose for Popover

We don't want to trap focus into the preview, which Popover will do.

Although these caveats can be overridden, I think it adds complexity and probably defeats the purpose anyways.

gvjacob · 2023-01-31T20:54:19Z


        <ChampPlayer classroomChamp={mcpuffersonClassroomChamp} />
+
+        <div id="board-tooltips" />


Decided to portal every tooltip to this container so that it sits above the board and we can avoid funky z-index issues.

gvjacob · 2023-01-31T20:54:51Z

+/**
+ * Returns a stateful value, and a function to update it with a timeout.
+ *
+ * @param initial - initial state value
+ * @param delay - timeout duration for setting state value
+ */
+export function useTimeoutState<T>(


Does exactly what it says on the docs, but happy to huddle and explain how this is used in LevelTile!

RegisBiron

Should edge cases like this be considered or is it intuitive enough to scroll since the button is hiding behind the bottom UI bar? For example should the tooltip logic account for the UI bar and the tooltip jumps to the top sooner so that the button isn't hidden? I feel like it's intuitive enough to scroll but figured i'd flag this.

gvjacob · 2023-02-01T15:54:35Z


        <ChampPlayer classroomChamp={mcpuffersonClassroomChamp} />
+
+        <div id="board-tooltips" />


@RegisBiron opening up a thread about your note. It's a good question! I had thought that it's intuitive to scroll down, but do you think it could work better if we give these tooltips a higher z-index than the progress bar or is that weird?

Also, most users would be using this on a 1920x1080 TV, which I think means this edge case is unlikely

joshpensky

Lookin good! 🤩 Just a few comments/q's

joshpensky · 2023-02-01T14:32:03Z

+
+export default function EnergyBars({ className, energy }: EnergyBarsProps) {
+  function getBarFillClass(i: number) {
+    const energies = ["low", "medium", "high"] as Energy[];


Preference for explicit type declarations over as narrowing!

Suggested change

const energies = ["low", "medium", "high"] as Energy[];

const energies: Energy[] = ["low", "medium", "high"];

joshpensky · 2023-02-01T14:37:34Z

+  );
+}
+
+export interface PreviewProps {


quick fix!

Suggested change

export interface PreviewProps {

export interface LevelPreviewProps {

joshpensky · 2023-02-01T16:43:39Z

+            duration: 0.1,
+          },
+          translateY: {
+            type: "spring",


non-blocking: the spring felt a bit too bouncy for a tooltip to me, so I played around with a different animation style in #27!

joshpensky · 2023-02-01T16:45:40Z

+  }, [state.context.coordinates, coordinates, setIsCurrentPlayerPosition]);
+
  function onHoverStart() {
+    setIsHovering(true);


Let's remove these in favor of the tooltip's onOpenChange event:

<Tooltip.Root open={isHovering || isCurrentPlayerPosition} onOpenChange={setIsHovering} delayDuration={0}>

@joshpensky we want to keep those because we're detecting the hovers from the motion.div's onHoverStart and onHoverEnd. If we move it to onOpenChange, setIsHovering won't be called!

Ahh I see, thanks for calling out! Let's keep it as is for now then

catlynbowles · 2023-02-01T18:26:17Z

+        width="3"
+        height="11"
+        rx="1.5"
+        fill="#5D15E3"


tagging the fill attr here !

catlynbowles

Amazing work ! <3

# Conflicts: # src/components/Tile/FinishTile.tsx # src/components/Tile/StartTile.tsx # src/components/WorldBoard.tsx

joshpensky

Nice work! 💯

gvjacob added 22 commits January 30, 2023 14:21

chore: add metadata properties to LevelTile

0b63340

chore: install @radix-ui/react-popover

c8c03a6

chore: render popover with placeholder

ac97bef

feat: open preview on hovergst

f93a676

feat: open preview on hover and when player is at current level tile

aa5d465

fix: use util preventDefault

7f24059

feat: render level title and prompt

cb74a87

fix: move to Preview component

3af7c15

feat: add popover arrow

8284d80

fix: move Preview to new LevelPreview component

817a819

style: preview figures

5a28f7e

feat: include placeholder icons

59a72f8

feat: animate in level preview

68b8351

feat: include placeholder image for level preview

5dc4515

fix: portal popover into after world board

701fcaf

fix: show tooltip with a delay

12e505d

fix: use Tooltip over Popover

4c3dd3e

fix: move start and finish tile tooltips to tooltip container

cc92897

fix: move Tooltip to LevelTile

64282e2

fix: hide prompt when player is not on the tile

c427389

docs: add details to LevelTile about preview

4ae4d3d

fix: move Tooltip content outside of trigger

ad8912c

gvjacob changed the title ~~Feature: Show level preivews~~ Feature: Show level previews Jan 31, 2023

gvjacob added 2 commits January 31, 2023 13:54

Merge branch 'main' into gn-55

45c71de

# Conflicts: # src/components/WorldBoard.tsx

feat: energy bar icon

1b12f02

vercel Bot had a problem deploying to Preview January 31, 2023 19:45 Failure

fix: remove LevelTile properties

2e3f5af

vercel Bot deployed to Preview January 31, 2023 19:46 View deployment

vercel Bot deployed to Preview January 31, 2023 20:53 View deployment

gvjacob commented Jan 31, 2023

View reviewed changes

fix: abstract into BoardTooltipsPortal

2a88e2b

vercel Bot deployed to Preview January 31, 2023 21:02 View deployment

gvjacob requested review from catlynbowles and joshpensky January 31, 2023 21:02

gvjacob self-assigned this Jan 31, 2023

gvjacob requested review from RegisBiron and kjmiller1029 January 31, 2023 21:02

gvjacob added this to the 0.2.0 milestone Jan 31, 2023

gvjacob marked this pull request as ready for review January 31, 2023 21:02

RegisBiron reviewed Feb 1, 2023

View reviewed changes

gvjacob commented Feb 1, 2023

View reviewed changes

joshpensky reviewed Feb 1, 2023

View reviewed changes

joshpensky mentioned this pull request Feb 1, 2023

Animate enter and exit for start/finish tile tooltips #23

Merged

5 tasks

catlynbowles reviewed Feb 1, 2023

View reviewed changes

catlynbowles approved these changes Feb 1, 2023

View reviewed changes

gvjacob added 8 commits February 1, 2023 13:37

Merge branch 'main' into gn-55

67c8ab4

# Conflicts: # src/components/Tile/FinishTile.tsx # src/components/Tile/StartTile.tsx # src/components/WorldBoard.tsx

style: increase start/finish tooltips sideoffset

426c967

fix: prefer explicit type for energies

37e39da

fix: use label to display energy value

aa33489

fix: level preview props name

8a3ea65

fix: move LevelPreview types to generics

075da5c

fix: use useSelector to subscribe to player coordinates only

e39859b

fix: remove fill attributes from svg

43d0044

gvjacob requested a review from joshpensky February 1, 2023 19:33

vercel Bot deployed to Preview February 1, 2023 19:34 View deployment

joshpensky approved these changes Feb 1, 2023

View reviewed changes

gvjacob merged commit 6b5575c into main Feb 1, 2023

gvjacob deleted the gn-55 branch February 1, 2023 20:06

		<Tooltip.Provider>
		<Tooltip.Root open={isHovering \|\| isCurrentPlayerPosition}>


		<ChampPlayer classroomChamp={mcpuffersonClassroomChamp} />

		<div id="board-tooltips" />

	const energies = ["low", "medium", "high"] as Energy[];
	const energies: Energy[] = ["low", "medium", "high"];

	export interface PreviewProps {
	export interface LevelPreviewProps {

Conversation

gvjacob commented Jan 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What This Does

How to Test

Accessibility Checklist

Uh oh!

linear Bot commented Jan 31, 2023

Uh oh!

vercel Bot commented Jan 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RegisBiron left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gvjacob Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshpensky left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

catlynbowles left a comment

Choose a reason for hiding this comment

Uh oh!

joshpensky left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gvjacob commented Jan 31, 2023 •

edited

Loading

vercel Bot commented Jan 31, 2023 •

edited

Loading

RegisBiron left a comment •

edited

Loading

gvjacob Feb 1, 2023 •

edited

Loading