cerinoligutom / atelier-ryza-bottle-password-finder

A simple password lookup app for the travel bottle in the game Atelier Ryza: Ever Darkness & the Secret Hideout.

Atelier Ryza - Bottle Password Finder

A simple password lookup app for the travel bottle in the game Atelier Ryza: Ever Darkness & the Secret Hideout.

This is an over-engineered solution to a simple problem. I wanted to try out Nuxt 3 and some of the available modules and this is the result.

Features

• Search by Item Name
• Search by Password
• Filter by Level Limit
• Light and Dark Theme

Setup

Make sure to install the dependencies:

pnpm install

Development Server

Start the development server on http://localhost:3000

pnpm dev

There's also the component stories (powered by Histoire)

pnpm story:dev

atelier-ryza-bottle-password-finder's Issues

Revise search filters

• Labels
• Clear button

Refactor colors based on provided color system in Figma

Finally some names and values to base on

Display moon icon for dark mode on initial launch

Current Behavior

Display mode icon shows sun instead of moon when website is in dark mode.

Expected Behavior

It should display the moon icon.

Highlight the characters based on the filter type and query

As the title says:

If the filter type is password, then only the passwords should highlight. Same goes for item name type, matches from primary and secondary drops should highlight.

Use this package: https://astray-git.github.io/vue-highlight-words/

As for what the style should be, maybe bold and underline? (Make sure to use tailwind classes).

Fix loading behavior

After the introduction of #8 , it caused a weird UX behavior on what to show when on an empty state and when the app is still fetching.

Change the behavior such that:

1. It shows the table's loading state when it is still fetching.
2. Only shows the empty state when the fetch is done and the result is empty.

`$fetch` cannot fetch files in `public/` directory isomorphically

Related to: nuxt/nuxt#13857

Affected code: https://github.com/zeferinix/atelier-ryza-bottle-password-finder/blob/main/src/server/api/init.get.ts#L11-L63

Fix input behavior for level limit

Current Behavior

Changes only apply after pressing "Enter" key or on blur event.

Expected Behavior

It should behave the same as the search input where it should react on change.

Handle empty state

If no results are found for the query, show something rather than an empty table.

Tentative design:

Change tooltip message when password is copied