matthew-e-brown / cotera.io Goto Github PK
View Code? Open in Web Editor NEWA webapp for tracking armor upgrades in The Legend of Zelda: Breath of the Wild.
Home Page: https://cotera.io
License: GNU General Public License v3.0
A webapp for tracking armor upgrades in The Legend of Zelda: Breath of the Wild.
Home Page: https://cotera.io
License: GNU General Public License v3.0
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.
Once the redesign in Figma is finished, the new page needs to be created.
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.
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.
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.
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.
It seems to be working for the settings
and stuff, but the progress arrays aren't working. Hmm...
Currently, the way StorageKey
s and StorageItem
s are handled looks like this:
Lines 79 to 100 in 080f4e9
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.
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.
The email-linking step currently does not send a confirmation/verification email to the user. This should be a super quick fix.
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. ๐๐
There's a couple niceties I would like to add to the app before calling it complete.
renderAfter[...]
in prerender-spa-plugin
's options, these will be handy to implement a loading spinner while still having a good pre-renderThey 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.