GithubHelp home page GithubHelp logo

mitsunee / fgo-timers Goto Github PK

View Code? Open in Web Editor NEW
7.0 2.0 1.0 37.67 MB

Fansite for the global version of Fate/Grand Order with Event Timers, info on future Upgrades, Interludes, Rank Ups, Login Exchange Tickets and Calculators

Home Page: https://fgo.mitsunee.com

JavaScript 14.07% CSS 6.92% TypeScript 79.01%
nextjs-website fate-grand-order fgo

fgo-timers's Introduction

Mitsunee

Freelance Web Developer | Open Source Developer and Contributor | Sometimes Translation Volunteer

Mitsunee Mitsunee | Blog

Mastodon: @mitsunee@ieji.de Twitter: @Mitsunee npm: ~mitsunee Discord Server

fgo-timers's People

Contributors

coliff avatar dependabot[bot] avatar mitsunee avatar snyk-bot avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

00mjk

fgo-timers's Issues

Add user info printout to settings

Output stuff like the output of Intl.DateTimeFormat().resolvedOptions().timeZone and what tz offset spacetime is seeing to the settings menu for debugging reasons.

Docs and Build command need to be updated with pnpm commands

Docs

Example:

fgo-timers/docs/CONTRIBUTING.md

Lines 57 to 61 in 274e2f6

```shell
yarn install
cp .env.example .env.local
YOUR_EDITOR .env.local # adjust values if needed
```

Build command

Currently deployments still use yarn build. This should be replaced with pnpm build with pre-scripts enabled (.npmrc or simply &&?)

Update to pnpm v8

pnpm v8 uses a new lockfile version, Github Actions will need updating. Recommended upgrading dependencies in the same push as the lockfile version change doesn't cause vercel's deployment cache to invalidate correctly.

Wrong quest release times in gamedata

A lot of Interludes (unsure about rankups at this time) have Jan 1, 2000, seemingly random or JP release dates in the game data and need to be replaced.

  • Replaced all Quests with Jan 1, 2000 date
  • Found and replaced all Quests with JP dates
  • Found and replaced all Quests with incorrect dates (essentially looking through every not yet replaced quest... sorry)

Some Project Cleanup stuff

Broken Eventlist on HomePage after Events end

Example Deployments with issue:

The event list desyncs after events (in this case Enma-Tei and Amazones Pre-Campaign) end. In this example it causes the New Years Campaign to appear with the banner image and href of Amazones Pre-Campaign, while still having the title of "New Years 2022". Next's Link component still links to the correct place (href prop of Link is updated) despite the href of the inner <a> element being wrong.

A temporary workaround is to redeploy as this refreshes the dataset generated by getStaticProps. This was not possible here due to an unrelated oversight.

Expected Result:

Screenshot_20220123_223746

Actual Result:

Screenshot_20220123_223734

Steps to reproduce:

See branch reproduce-homepage-bug (specifically files ./pages/index.jsx and ./src/components/EventCard/EventCard.jsx) for a simulated case of this bug. The branch replaces all static generation related to events with the static data from the 2nd example deployment and uses typeof window === "undefined" to inject mock timestamps for static generation to cause the event "Amazones Pre-Campaign" to be present during static generation, despite having ended.

EoR True Name System issues

EoR's True Name System affects NPs in that is censors the names with '???'. This is reflected in the data as there quite literally being separate NPs: (example of Tomoe Gozen (id:202100))

[
  { id: 202100, name: "???", strengthStatus: 1, priority: 100, condQuestId: 0 },
  { id: 202101, name: "On Arorikya Sowaka", strengthStatus: 1, priority: 101, condQuestId: 2000306 },
  { id: 202102, name: "???", strengthStatus: 2, priority: 102, condQuestId: 91202101 },
  { id: 202103, name: "On Arorikya Sowaka", strengthStatus: 2, priority: 103, condQuestId: 2000306 }
]

The script currently finds 2021102 via the condQuestId and then properly refers to the un-upgraded uncensored NP by finding it via priority. It does not currently find its name as it has no way of knowing that 202103 is not a second upgrade.

How a second upgrade of an EoR True Name System NP would be implemented is currently not known and will likely need to be adressed if it ever happens (unless the fix for this issue happens to do it correctly)

DisplayDate should be able to prerender using SERVER_TZ

This can be easily seen on HomePage by disabling JavaScript in the browser:

Screenshot_20230217_201405

Proposed Changes

  • add ssr?: boolean prop to time display components (other than delta)
  • only use inside these components when ssr is set to false or local tz is used
  • adjust components such as UpgradeInfo to use serverTZ in prerender and user timezone in client

    fgo-timers/src/pages/UpgradesPage/components/UpgradeInfo.tsx

    Line 57 in 096249f

    <DisplayDate time={time} format="date" serverTz="always" />
  • Other things I might want to change:
    • Adopt seconds as the time unit everywhere in the app
    • add util function to convert millisecond timestamps to second timestamp (same way as intervalStore currently does)
    • intervalStore could be turned into a custom hook that provides time and spacetime instance
useCurrentTime(unit: "ms" | "s" = "s"): { current: number; s: Spacetime }

Change font on Clocks/Timers

The current font does not seem to support the tabular-nums variant, which I'd prefer to have. Ideally the default sans font works, haven't tested yet.

Implement SVGO (and maybe @svgo/jsx) for better SVG implementation

  • install svgo and @svgo/jsx
  • Move *.svg assets into ./assets/svg/
  • Create script that takes optional argument
    • ignore files ending in *.inkscape.svg!
    • optimize file(s) from argument using svgo (if no argument just scan ./assets/svg/ for valid files
    • turn file(s) into components in ./src/components/icons/ and add to ./src/components/icons/index.js if missing
      • filenames like: arrow.svg => SvgArrow.jsx
  • Add lint-staged support for svg files in appropriate folder
  • Inkscape projects files should be named like *.inkscape.svg to be excluded from the script

Special Cases in upgrades data

This issue currently does not require immediate action and merely serves as a note for the future!

Jekyll&Hyde and Fairy Knight Lancelot are currently disabled in the upgrades data script:

https://github.com/Mitsunee/fgo-tools/blob/6facb4b95b2b7c1a490069b49378fc954db8d4ca/scripts/update-upgrades-data.mjs#L82-L86

Jekyll&Hyde's data is split between the servant (id:600700) and enemy (id:600710). This might not currently be causing any issues, but still needs to be checked. Showing the data for both in the app probably adds too much extra code.

Fairy Knight Lancelot (id:304800) uses different skill and NP data depending on ascension level. As they are right now they use priority 1 and 2, and 101 and 102 respectively, just like upgrades would. Thus the current code to find the initial versions of upgraded skills may get confused if she were to ever get any upgrades related to her S3 or NP.

Other Servants who have non-standard data (that are currently expected to be working correctly) are:

  • Emiya (Archer) (id:200100): can change NP with skill 3 similarly to Fairy Knight Lancelot, but his priority numbers match what you'd expect and it is possible to filter out his type-changed NPs. He also has a skill with multiple upgrades!
  • Space Ishtar (id:1100900): can also change her NP with a skill
  • Vlad III (id:700700): has an NP with multiple upgrades.

Server Days milestone off by 100 days

The next server milestone is off by 100 as the 2000 day milestone was on 15.12.2022. The current milestone is 2100 as outlined by supermarth64.

Location:
Root Page > Login Exchange Tickets Card

Migrate to newer dependencies and shared configs

  • Refactor Card component to accept color prop from style import
  • Implement classcat to clean up className concats
  • Replace utils with tested versions from foxkit and add rules from @foxkit/eslint-config and confusing-browser-globals
  • add corepack config
  • upgrade dependencies
  • refactor scripts to use their own separate utils directory and add nanospinner on async operations at script level

See #23 for more details and updates

Deprecated package "foxkit" still in use 

$ egrep -nrH "from \"foxkit" src pages
src/server/HomePage/getCurrentMasterMissions/index.js:1:import { isClamped } from "foxkit/clamp";
src/client/components/Pagination/Pagination.jsx:3:import { isClamped } from "foxkit/clamp";
src/client/components/SpecialTimer/SpecialTimer.jsx:1://import { isClamped } from "foxkit/clamp";
pages/ap-calc.jsx:3:import { clamp, isClamped } from "foxkit/clamp";

Some of these are already addressed in dev.

Use VERCEL_URL env var

vercel already exposes process.env.VERCEL_URL which can be used as NEXT_PUBLIC_VERCEL_URL in <Meta>. The current env var could be used as an override and there should probably also be a fallback for development using process.env.port

may implement an mjs script similar to what create-t3-app does to verify env vars or set defaults (with logging warnings)

EDIT: I asked at vercel and process.env.VERCEL_URL does not contain assigned domains, so that will require an addition env var with VERCEL_URL as fallback.

feat: Improve Atlas API caching

CI Cache key (rejected idea)

Tried implementing this and the actions runner does not wait for the node script to finish before getting the cache key, so this approach does not work.

Instead of using date add a script to pull https://api.atlasacademy.io/info and create a cache key like

console.log(`ATLAS-API-KEY=${info.JP.hash}-${info.NA.hash}`);
  - name: Get AtlasAcademy API Cache Key
    run: node src/ci/atlas-key.mjs >> $GITHUB_ENV

This would require setting up node first so the runtime and api-connector are available, but would significantly improve cache validity.

Testing prepare script

A new script in src/ci that simply prepares the atlas cache so jest can run without running the full prebuild script

Atlas Cache improvements

Currently it seems like slamming the API with multiple requests at ones causes it to stall. A for loop would possibly be faster. Or it's axios in the connector being slow...

AP Calc not showing deltas

APCalcCard's Result component is using two arguments for useFormattedDelta which is not supported anymore

Project Maintenance

  • Update to Spacetime 7.x https://github.com/spencermountain/spacetime/releases/tag/7.0.0
  • Remove Spacetime from project depency workflow (and rename to update-browserslist)
  • de-dupe packages (see comment below)
  • Unfinished things from January Update:
    • fully upgrade dependencies (incl. ^spacetime@7)
    • implement new features from [email protected]
    • text selection styling
    • figure out how to handle eslint-config that will now require eslint@8 (also this issue is on hold until that update is ready)
  • Remove New Years Bundles from MP and RP Shop

Bug: Footer Floating

Screenshot_2022-12-23-19-14-41-56_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg

Should probably add footer to Layout grid and have that be at least 100vh height work the content row set to auto size

Settings Menu incorrectly positioned on Timers Page

(reported by @Firq-ow)

Settings Menu does not adjust to scroll position on timers page.

The cause seems to be the backdrop-filter on the #__next element. It may be required to set this property to unset while the settings menu is open.

There are also be some related debug logs in the console that needs to be cleaned up.

Layout refactor

  • Remove floaters
  • Add Settings and Discord to Navigation
  • Add Sponsor Button to Navigation
  • Refactor _app.jsx and Layout component
  • Refactor Navigation (icon and showHome props, move out of Layout component folder)
  • Seperate highlight and clickable status so that for sub-pages the highlight is there, but the button remains useable

Some Modals are positioned incorrectly on a scrolled page

Screenshot_20230607_001129

Returning bugs are the best tho. Possibly broke during layout rewrite, which started causing weird behaviour with fixed positioning in some cases.

If possible I'd like to add a keyboard event to the Modal component where the Esc key should close the modal.

Edit: It appears the Settings Menu is not affected

Upgrade Release Estimate and Typing needs Rework

Bugs:

  • Bug: Estimates are currently not working and the Releases/Released text is inaccurate for certain cases in EventUpgradesPage where the NA date is known, but the Quest has not been released yet.
    • Knowing the date should never result in an estimate
    • Released/Releases text should possible use date comparisons to determine which word to use (how to handle SSR missmatches?)
    • see #93 (comment)
  • Bug: Constants in openTimeOverrides.yml are not correctly mapped and/or invalid

Rework:

  • set estimate during data bundling, add estimate?: boolean prop
  • rework typing of BundledQuest and Upgrade (rename to BundledUpgrade)
  • EventUpgradesPage shouldn't need to override open times anymore as the dedicated file now accepts dates in the same format (zDate schema)
  • Migrate UpgradeCard to new Card component and fix required code duplication to implement (see EventUpgradesPage and UpgradesPage)
  • address UpgradeCard not being able to bypass spoilers and instead missusing na prop in API request:

fgo-timers/src/server/api/routers/upgrades.ts

Lines 85 to 92 in 5c96b2b

select: publicProcedure
.input(
z.object({
id: z.union([z.number(), z.array(z.number())]),
disableSpoilers: z.boolean().optional() // TEMP
// TODO: prop to override quest open dates? Probably a z.record(z.number(),z.number())?
})
)

  • remove previously deprecated DataApi and replace swr with tRPC (can uninstall swr after)

Hydration missmatch in navigation after ISR rebuild in HomePage

Summary

Due to unknown reasons the navigation does not render the correct HTML during ISR. This can be seen easily by opening the page source and searching for >Timers<

Expected Result

<a href="/" class="Navigation_link_cksm Navigation_active_cksm"><svg ...>...</svg><span>Timers</span></a>

Incorrect Result

<a href="/" class="Navigation_link_cksm">Timers</a>

Further Information

In a debug deployment the following things have been confirmed:

  • useRouter works as expected, still has "/" on the asPath property
  • the testActive callback works as expected, returning true for the "Timers" route
    • ISR still receives true from this callback!
  • Non-ISR pages as well as pages that have not been rebuilt by ISR have the intended result
  • ErrorBoundaries will catch Hydration Errors, but are reset when React switches to client-rendering the page as this rebuilds the entire DOM from scratch. They are still useful to log warnings to the client before this reset occurs.

A discussion on the next.js repository has been opened here: vercel/next.js#48130

Affected Code

fgo-timers/src/client/components/Layout/Navigation.tsx

Lines 18 to 53 in 13b9516

export function Navigation() {
const router = useRouter();
const testActive = (item: (typeof navRoutes)[number]) =>
item.test
? item.test.test(router.asPath)
: router.asPath.startsWith(item.route);
return (
<nav
role="navigation"
aria-label="Main menu"
className={styles.nav}
id="main-menu">
<section className={styles.navSection}>
{navRoutes.map(navItem => {
const isActive = testActive(navItem);
return isActive ? (
<LinkButton
key={navItem.route}
href={navItem.route}
className={cc([styles.link, isActive && styles.active])}
decorated={false}
icon={IconChaldea}>
{navItem.label}
</LinkButton>
) : (
<LinkButton
key={navItem.route}
href={navItem.route}
className={styles.link}
decorated={false}>
{navItem.label}
</LinkButton>
);
})}

Future optimizations for search

(on hold until React 18)

  • rewrite filter as effect
  • React 18 startTransition
  • use /\p{Script=Han}|\p{Script=Hiragana}|\p{Script=Katakana}/gu or similar to determine whether the search query, servant.name and quest.name are japanese and skip accordingly
    • skip adding search property in update script for japanese strings (may or may not rename prop to something like latinized)
    • if query latin and no search prop exists skip
    • if query japanese and name prop is not japanese skip
    • if both latin use search prop and latinize() the query
    • if both japanese use name prop and only use String.prototype.trim() on query

feat: Better Server Error Fallbacks

the UpgradesPage and EventsPage routes currently just disappear entirely if there's server errors (such as today when there were issues at aws). UpgradesPage could probably just display the error message in the already existing section, replacing the search and filters, while EventsPage would have to create a new section.

While this is getting adressed it'd also be good to add a loading indicator on EventsPage as well as making the search field not pre-render as it is useless without javascript. It's probably good enough to start displaying it after data fetching completed instead.

Maintenance: Post-Merge cleanup

  • Removals of deprecated components/hooks
    • cannot remove withSpoilerLevel and withAddedProps yet due to ap-calc and exchange-tickets needing them and LegacySelect
  • (Not possible due to tsm) lowering bundle size (entire api-connector package is shipping due to it being cjs and typescript doesn't understand the default imports in dist)
  • Any changes (related) to SpecialTimer
    • SpecialTimer was a blocker for removing useFormatted(Spacetime|Timestamp|Estimate|Delta|DeltaFrom) hooks
    • Above hooks are a blocker for removing timeFormatsMap
  • cannot change default import of NoSSR in HomePage (usually used for SpecialTimer)
  • delete legacy upgrades data file
  • Fix: UpgradeCard's Hero does not use IconFace?
  • #78

feat: Migrate to pnpm

  • use pnpm
  • update workflows
  • add .npmrc with ignore-dep-scripts=true
  • use vercel.json to override installCommand in dev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.