matthew-e-brown/cotera.io

A webapp for tracking armor upgrades in The Legend of Zelda: Breath of the Wild.

cotera.io's Issues

npm install ERR! code E404

2022-12-31T14_55_45_771Z-debug-0.log

Font is too small in a few places

They recommend 12px as the minimum, but I've got it at the base font-size after a certain breakpoint. This is probably gonna mean a lot of responsiveness tweaks

Social (OpenGraph) images for social preview

I'd like something wide-ish, maybe 1200x630, with the logo on the left. Something similar to AniList's user previews:

(this is just some random user, whoever had the ID of 2)

Incorrect or missing password.

2022-12-31T15_07_34_792Z-debug-0.log

Migrate to Firebase v9 Web SDK

Even though it's still in beta, I'd like to migrate to the modular, tree-shakable SDK sooner ratherthan later. Then, once the full release hits, I'll make any necessary changes and release an update.

Indexed type with Typescript 4.4

Currently, the way StorageKeys and StorageItems are handled looks like this:

cotera.io/src/store/types.ts

Lines 79 to 100 in 080f4e9

	export type StorageKey =
	ListID | // each list identified by its 'list-0' id
	'list-info' | // the list names and stuff
	'user-settings'; // the settings
	export type StorageItem<T extends StorageKey> =
	T extends ListID ? Progress :
	T extends 'list-info' ? ListInfo[] :
	T extends 'user-settings' ? Settings : never;
	export const isStorageItem = <T extends StorageKey>(
	key: T,
	value: any
	): value is StorageItem<T> => {
	const validProgress = isListID(key) && isProgress(value);
	const validListInfo = (key === 'list-info') && isListInfo(value);
	const validSettings = (key === 'user-settings') && isSettings(value);
	return validProgress || validListInfo || validSettings;
	}

This is a bit cumbersome, and isn't very DRY. TS 4.4 (which is currently in Beta) enables the use of Template Literals in indexed types, meaning we can do something like this, instead:

export type StorageItem = {
  [k: ListID]: Progress,
  'list-info': ListInfo[],
  'user-settings': Settings
}

export const isStorageItem = <K extends keyof StorageItem>(key: K, value: any): value is StorageItem[K] => {

  const validProgress = isListID(key) && isProgress(value);
  const validListInfo = (key === 'list-info') && isListInfo(value);
  const validSettings = (key === 'user-settings') && isSettings(value);

  return validProgress || validListInfo || validSettings;

}

export const getItem = <K extends keyof StorageItem>(key: K): StorageItem[K] | undefined => {

    const value = localStorage.getItem(key);
    if (value === null) return undefined;

    const item = JSON.parse(value);

    if (isStorageItem(key, item)) {
        return item as StorageItem[K];
    } else {
        throw new Error("Invalid data in localStorage");
    }

}

However, peer deps from Vue mean that I can't quite use this method yet, as much as it is far cleaner. I'm opening this issue to serve as a reminder to come back and do this later after some updates to Vue and Typescript.

List Deletion Confirmation

Right now, lists are deleted instantly. Because of how important they are, we should add a confirmation step to this. I think I'll do it with a ConfirmModal.vue, but within the confines of the Popper menu. I think that'll look nice.

Add support for multiple lists

I'd like for the user to be able to have as many lists of upgrades as they desire. This will require a rewrite of store.ts, which means rewriting some Firestore code, so it will likely take place after #5 is finished.

Quality of Life improvements

There's a couple niceties I would like to add to the app before calling it complete.

• Animations and transitions when elements appear and disappear
• Loading animations/spinners, I was thinking something like a bouncing bottom-border on the top navbar
  • Take note of renderAfter[...] in prerender-spa-plugin's options, these will be handy to implement a loading spinner while still having a good pre-render
  • We may not even need a loading spinner if the app is prerendered, we'll have to see
• #16

A11y Tweaks

• Touch targets in the footer don't have enough breathing room when they flex-wrap
• Contrast on the copyright notice isn't high enough

SEO Improvements

• #19
• #20
• First contentful paint is really really slow on Mobile, probably because of the almost 1 MiB @firebase in the bundle. Hopefully the v9 web SDK will fix this (#5).

Missing `maskable_icon` for Android

Create Account page

Once the redesign in Figma is finished, the new page needs to be created.

Account Page redesign

The flows that I've been experimenting with using Firebase Auth have not been working. To make one that works properly, once and for all, I'll have to spend some time in Figma. What should happen is that the account page shows information by default, but editing it requires the user to reauthenticate before they do anything, like how most major sites do it.

Register and Login error-message formatting

Currently, when something goes wrong with one of the forms, either one of my own error messages is displayed, or, the error thrown by Firebase is. However, in some instances, these aren't the most user friendly:

"auth/user-not-found": "There is no user record corresponding to this identifier. The user may have been deleted."
"auth/invalid-email": "The email address is badly formatted."

I would much prefer it to say something like, "There is no user with that email address. Please create an account." and "Please use a valid email address.", respectively.

Firebase has this list, which is kind of related, but not exactly. What I would like would be to find a list of all applicable error messages and their codes, so that I can switch them and make things a little more... polite. 🍁😁

Footer

After thinking about it, the site should probably have a footer. That would give a place to put copyright notices:

© 2020-2021 Matthew Brown. The Legend of Zelda and amiibo are trademarks of Nintendo.

As well as links to things which are also found in the About page, like a link to GitHub, mailto: support email, my personal site, et cetera.

Firestore Data not loading properly on startup

It seems to be working for the settings and stuff, but the progress arrays aren't working. Hmm...

PWA Capabilities and Lighthouse Audit

The last thing to get working before the app can be considered "complete" is having it work as a PWA. Notes and such pertaining to this endeavour will be tracked in this issue.

Rewrite README

The readme is kind of... weird... right now. It's just a big block of text, with me explaining what it's for. That's what the about page of the site should do, and the README should be more focused on code. This should be rewritten once the app is finished.

Missing Email Confirmation

The email-linking step currently does not send a confirmation/verification email to the user. This should be a super quick fix.