Justin Edmund
83bebdb0c2
* Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors |
||
|---|---|---|
| .storybook | ||
| .vscode | ||
| components | ||
| data | ||
| extensions/CustomMention | ||
| hooks | ||
| pages | ||
| public | ||
| styles | ||
| types | ||
| utils | ||
| .env.sample | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| next-env.d.ts | ||
| next-i18next.config.js | ||
| next.config.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| README.png | ||
| tsconfig.json | ||
| tslint.json | ||
hensei-web
hensei-web is the frontend for granblue.team, an app for saving and sharing teams for Granblue Fantasy.
Getting Started
First, you have to set up your environment file. You should start with .env.sample, but here are some gotchas:
App URLs
Don't add a trailing slash to these URLs! The API will run on port 3000 by default, but make sure to change these to match your instance of the API.
NEXT_PUBLIC_SIERO_API_URL='http://127.0.0.1:3000/api/v1'
NEXT_PUBLIC_SIERO_OAUTH_URL='http://127.0.0.1:3000/oauth'
Asset URLs
Next.js serves all assets out of the /public directory. In development we utilize this for all assets, but in production, you will want to host these images on a cloud storage provider like Amazon S3. Once you have that set up and you're running in a production environment, change this to the full bucket URL.
NEXT_PUBLIC_SIERO_IMG_URL='/images'
Dependencies
Once your .env is all set up, install all dependencies:
npm install
# or
yarn install
Then, run the development server with:
npm run dev
# or
yarn dev
Assets
The hensei-api repository has tasks that will help you get assets, although some were crafted or renamed by hand. The front-end expects this folder structure inside of the images folder:
root
├─ accessory-grid/
├─ accessory-square/
├─ awakening/
├─ ax/
├─ character-main/
├─ character-grid/
├─ character-square/
├─ guidebooks/
├─ jobs/
├─ job-icons/
├─ job-portraits/
├─ job-skills/
├─ labels/
├─ mastery/
├─ placeholders/
├─ raids/
├─ summon-main/
├─ summon-grid/
├─ summon-square/
├─ updates/
├─ weapon-main/
├─ weapon-grid/
├─ weapon-keys/
├─ weapon-square/