diff --git a/components/about/AboutHead/index.tsx b/components/about/AboutHead/index.tsx index 0aa45ec7..e4092694 100644 --- a/components/about/AboutHead/index.tsx +++ b/components/about/AboutHead/index.tsx @@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => { name="description" content={t(`page.descriptions.${currentPage}`)} /> - + {/* OpenGraph */} diff --git a/components/common/DialogContent/index.module.scss b/components/common/DialogContent/index.module.scss index 375acb76..92df55c2 100644 --- a/components/common/DialogContent/index.module.scss +++ b/components/common/DialogContent/index.module.scss @@ -13,6 +13,14 @@ color: inherit; z-index: 10; + @include breakpoint(phone) { + place-items: flex-end; + overflow-y: hidden; + + &.filter { + } + } + .dialogContent { $multiplier: 4; @@ -51,11 +59,11 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; min-width: inherit; - min-height: 90vh; + min-height: inherit; transform: initial; left: 0; right: 0; - top: 5vh; + top: $unit-10x; height: auto; width: 100%; } @@ -101,110 +109,6 @@ overflow-y: auto; } } - - &.Conflict { - $weapon-diameter: 14rem; - - .Content { - display: flex; - flex-direction: column; - gap: $unit-4x; - padding: $unit-4x $unit-4x $unit-2x $unit-4x; - - & > p { - font-size: $font-regular; - line-height: 1.4; - - strong { - font-weight: $bold; - } - - &:lang(ja) { - line-height: 1.4; - } - } - } - - .weapon, - .character { - display: flex; - flex-direction: column; - gap: $unit; - text-align: center; - width: $weapon-diameter; - font-weight: $medium; - - img { - border-radius: 1rem; - width: $weapon-diameter; - height: auto; - } - - span { - line-height: 1.3; - } - } - - .Diagram { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: flex-start; - - &.CharacterDiagram { - align-items: center; - } - - ul { - align-items: center; - display: flex; - flex-direction: column; - gap: $unit-2x; - } - - .wrapper { - display: flex; - justify-content: center; - width: 100%; - } - - .arrow { - align-items: center; - color: $grey-55; - display: flex; - font-size: 4rem; - text-align: center; - height: $weapon-diameter; - justify-content: center; - } - } - - footer { - display: flex; - flex-direction: row; - gap: $unit; - - .Button { - font-size: $font-regular; - padding: ($unit * 1.5) ($unit * 2); - width: 100%; - - &.btn-disabled { - background: $grey-90; - color: $grey-70; - cursor: not-allowed; - } - - &:not(.btn-disabled) { - background: $grey-90; - color: $grey-50; - - &:hover { - background: $grey-80; - } - } - } - } - } } @keyframes openModalDesktop { @@ -221,11 +125,20 @@ @keyframes slideUp { 0% { - transform: translate(0%, 100%); + transform: translateY(400px); + animation-timing-function: ease-out; + } + 60% { + transform: translateY(-30px); + animation-timing-function: ease-in; + } + 80% { + transform: translateY(10px); + animation-timing-function: ease-out; } - 100% { - transform: translate(0, 0%); + transform: translateY(0px); + animation-timing-function: ease-in; } } } diff --git a/components/common/DialogContent/index.tsx b/components/common/DialogContent/index.tsx index 53703c7d..44823b3b 100644 --- a/components/common/DialogContent/index.tsx +++ b/components/common/DialogContent/index.tsx @@ -11,6 +11,7 @@ interface Props React.DialogHTMLAttributes, HTMLDivElement > { + wrapperClassName?: string headerref?: React.RefObject footerref?: React.RefObject scrollable?: boolean @@ -127,7 +128,16 @@ const DialogContent = React.forwardRef(function Dialog( return ( - + styles[className]) + )} + > { @@ -27,9 +44,68 @@ const Editor = ({ onUpdate, ...props }: Props) => { + // Hooks: Router const router = useRouter() const locale = router.locale || 'en' + const { t } = useTranslation('common') + + useEffect(() => { + editor?.commands.setContent(formatContent(content)) + }, [content]) + + // Setup: Editor + const editor = useEditor({ + content: formatContent(content), + editable: editable, + editorProps: { + attributes: { + class: classNames( + { + [styles.editor]: true, + [styles.bound]: bound, + }, + className?.split(' ').map((c) => styles[c]) + ), + }, + }, + extensions: [ + StarterKit.configure({ + heading: { + levels: [1, 2, 3], + }, + }), + Link, + Highlight, + Placeholder.configure({ + emptyEditorClass: styles.empty, + placeholder: t('modals.edit_team.placeholders.description'), + }), + Typography, + CustomMention.configure({ + renderLabel({ options, node }) { + return `${node.attrs.id.name[locale] ?? node.attrs.id.granblue_en}` + }, + suggestion: mentionSuggestionOptions, + HTMLAttributes: { + class: classNames({ + [styles.mention]: true, + }), + }, + }), + Youtube.configure({ + inline: false, + modestBranding: true, + interfaceLanguage: locale, + }), + ], + onUpdate: ({ editor }) => { + const json = editor.getJSON() + if (onUpdate) onUpdate(json) + }, + }) + + // Methods: Convenience function isJSON(content?: string) { if (!content) return false @@ -59,46 +135,7 @@ const Editor = ({ } } - const editor = useEditor({ - content: formatContent(content), - editable: editable, - editorProps: { - attributes: { - class: classNames( - { - [styles.editor]: true, - [styles.bound]: bound, - }, - className?.split(' ').map((c) => styles[c]) - ), - }, - }, - extensions: [ - StarterKit, - Link, - CustomMention.configure({ - renderLabel({ options, node }) { - return `${node.attrs.id.name[locale] ?? node.attrs.id.granblue_en}` - }, - suggestion: mentionSuggestionOptions, - HTMLAttributes: { - class: classNames({ - [styles.mention]: true, - }), - }, - }), - Youtube.configure({ - inline: false, - modestBranding: true, - interfaceLanguage: locale, - }), - ], - onUpdate: ({ editor }) => { - const json = editor.getJSON() - if (onUpdate) onUpdate(json) - }, - }) - + // Methods: Actions const setLink = useCallback(() => { const previousUrl = editor?.getAttributes('link').href const url = window.prompt('URL', previousUrl) @@ -131,6 +168,7 @@ const Editor = ({ } } + // Methods: Rendering if (!editor) { return null } @@ -139,32 +177,84 @@ const Editor = ({
{editor && editable === true && ( )} diff --git a/components/common/Popover/index.module.scss b/components/common/Popover/index.module.scss index 8096d900..67699f31 100644 --- a/components/common/Popover/index.module.scss +++ b/components/common/Popover/index.module.scss @@ -21,12 +21,6 @@ &.flush { padding: 0; } - - .Arrow { - fill: var(--dialog-bg); - filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18)); - margin-top: -1px; - } } .trigger { diff --git a/components/common/PopoverContent/index.module.scss b/components/common/PopoverContent/index.module.scss index e69de29b..31fd8e86 100644 --- a/components/common/PopoverContent/index.module.scss +++ b/components/common/PopoverContent/index.module.scss @@ -0,0 +1,5 @@ +.arrow { + fill: var(--dialog-bg); + filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18)); + margin-top: -1px; +} diff --git a/components/common/Select/index.module.scss b/components/common/Select/index.module.scss index 93b8eaa1..6417cffd 100644 --- a/components/common/Select/index.module.scss +++ b/components/common/Select/index.module.scss @@ -63,6 +63,10 @@ &.table { min-width: $unit * 30; + + @include breakpoint(phone) { + width: 100%; + } } &.hidden { diff --git a/components/common/Slider/index.module.scss b/components/common/Slider/index.module.scss index a34fb341..6ab8f85a 100644 --- a/components/common/Slider/index.module.scss +++ b/components/common/Slider/index.module.scss @@ -14,6 +14,10 @@ border-radius: 9999px; height: 3px; } + + &.table { + flex-grow: 1; + } } .range { diff --git a/components/common/SliderTableField/index.tsx b/components/common/SliderTableField/index.tsx index 00108118..02527f05 100644 --- a/components/common/SliderTableField/index.tsx +++ b/components/common/SliderTableField/index.tsx @@ -54,6 +54,7 @@ const SliderTableField = (props: Props) => { max={props.max} step={props.step} value={[props.value ? props.value : 0]} + className="table" onValueChange={handleValueChange} onValueCommit={handleValueCommit} /> diff --git a/components/common/TableField/index.module.scss b/components/common/TableField/index.module.scss index de900793..e48b5328 100644 --- a/components/common/TableField/index.module.scss +++ b/components/common/TableField/index.module.scss @@ -36,6 +36,14 @@ } } + &.switch { + @include breakpoint(phone) { + align-items: center; + flex-direction: row; + justify-content: space-between; + } + } + .left { align-items: center; display: flex; diff --git a/components/common/ToolbarButton/index.module.scss b/components/common/ToolbarButton/index.module.scss new file mode 100644 index 00000000..bbfdbef7 --- /dev/null +++ b/components/common/ToolbarButton/index.module.scss @@ -0,0 +1,36 @@ +.button { + background: var(--toolbar-item-bg); + border-radius: $bubble-menu-item-corner; + color: var(--toolbar-item-text); + display: flex; + align-items: center; + justify-content: center; + font-weight: $medium; + font-size: $font-small; + padding: $unit-half; + + &:hover { + background: var(--toolbar-item-bg-hover); + color: var(--toolbar-item-text-hover); + cursor: pointer; + + svg { + fill: var(--text-primary); + } + } + + &.active { + background: var(--toolbar-item-bg-active); + color: var(--toolbar-item-text-active); + + svg { + fill: white; + } + } + + svg { + fill: var(--text-tertiary); + height: $unit-2x; + width: $unit-2x; + } +} diff --git a/components/common/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx new file mode 100644 index 00000000..7b780ac2 --- /dev/null +++ b/components/common/ToolbarButton/index.tsx @@ -0,0 +1,41 @@ +import { useTranslation } from 'next-i18next' +import classNames from 'classnames' + +import { Editor } from '@tiptap/react' +import Tooltip from '~components/common/Tooltip' + +import styles from './index.module.scss' + +interface Props { + editor: Editor + action: string + level?: number + icon: React.ReactNode + onClick: () => void +} + +const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => { + const { t } = useTranslation('common') + const classes = classNames({ + [styles.button]: true, + [styles.active]: level + ? editor.isActive(action, { level: level }) + : editor.isActive(action), + }) + + return ( + + + + ) +} + +export default ToolbarIcon diff --git a/components/filters/FilterModal/index.module.scss b/components/filters/FilterModal/index.module.scss index e2b68ed2..c1a55e87 100644 --- a/components/filters/FilterModal/index.module.scss +++ b/components/filters/FilterModal/index.module.scss @@ -39,5 +39,6 @@ @include breakpoint(phone) { gap: $unit-4x; + margin-bottom: $unit * 24; } } diff --git a/components/filters/FilterModal/index.tsx b/components/filters/FilterModal/index.tsx index d46cd0cb..ce73f588 100644 --- a/components/filters/FilterModal/index.tsx +++ b/components/filters/FilterModal/index.tsx @@ -402,7 +402,8 @@ const FilterModal = (props: Props) => { {props.children} { {/* HTML */} {t('page.titles.new')} - + {/* OpenGraph */} diff --git a/components/head/ProfileHead/index.tsx b/components/head/ProfileHead/index.tsx index 293cab5a..7e3b61a8 100644 --- a/components/head/ProfileHead/index.tsx +++ b/components/head/ProfileHead/index.tsx @@ -20,7 +20,7 @@ const ProfileHead = ({ user }: Props) => { username: user.username, })} /> - + {/* OpenGraph */} diff --git a/components/head/SavedHead/index.tsx b/components/head/SavedHead/index.tsx index 75821047..b87f349f 100644 --- a/components/head/SavedHead/index.tsx +++ b/components/head/SavedHead/index.tsx @@ -9,7 +9,7 @@ const SavedHead = () => { return ( {t('page.titles.saved')} - + diff --git a/components/head/TeamsHead/index.tsx b/components/head/TeamsHead/index.tsx index 66624a2f..a2aca1d2 100644 --- a/components/head/TeamsHead/index.tsx +++ b/components/head/TeamsHead/index.tsx @@ -11,7 +11,6 @@ const TeamsHead = () => { {/* HTML */} {t('page.titles.discover')} - {/* OpenGraph */} diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index 8f346544..26103c51 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -297,7 +297,8 @@ const EditPartyModal = ({ // Methods: Modification checking function hasBeenModified() { const nameChanged = - name !== party.name && !(name === '' && party.name === undefined) + name !== party.name && + !(name === '' && (party.name === undefined || party.name === null)) const descriptionChanged = description !== party.description && !(description === '' && party.description === undefined) @@ -433,7 +434,7 @@ const EditPartyModal = ({ const nameField = ( - ) - const editorField = ( ) diff --git a/components/party/Party/index.tsx b/components/party/Party/index.tsx index b6206b75..2333c345 100644 --- a/components/party/Party/index.tsx +++ b/components/party/Party/index.tsx @@ -46,6 +46,7 @@ const Party = (props: Props) => { // Set up states const { party } = useSnapshot(appState) + const [updatedParty, setUpdatedParty] = useState() const [editable, setEditable] = useState(false) const [refresh, setRefresh] = useState(false) const [errorMessage, setErrorMessage] = useState('') @@ -57,7 +58,10 @@ const Party = (props: Props) => { useEffect(() => { const resetState = clonedeep(initialAppState) appState.grid = resetState.grid - if (props.team) storeParty(props.team) + if (props.team) { + storeParty(props.team) + setUpdatedParty(props.team) + } }, []) // Subscribe to app state to listen for account changes and @@ -108,9 +112,11 @@ const Party = (props: Props) => { let payload = {} if (details) payload = formatDetailsObject(details) - return await api.endpoints.parties - .create(payload) - .then((response) => storeParty(response.data.party)) + return await api.endpoints.parties.create(payload).then((response) => { + storeParty(response.data.party) + setUpdatedParty(response.data.party) + return Promise.resolve(response.data.party) + }) } async function updateParty(details: DetailsObject) { @@ -119,7 +125,11 @@ const Party = (props: Props) => { if (props.team && props.team.id) { return await api.endpoints.parties .update(props.team.id, payload) - .then((response) => storeParty(response.data.party)) + .then((response) => { + storeParty(response.data.party) + setUpdatedParty(response.data.party) + return Promise.resolve(response.data.party) + }) .catch((error) => { const data = error.response.data if (data.errors && Object.keys(data.errors).includes('guidebooks')) { @@ -438,7 +448,7 @@ const Party = (props: Props) => { {errorAlert()} {
{currentGrid()}
{ const descriptionSection = ( <> - {partySnapshot && - partySnapshot.description && - partySnapshot.description.length > 0 && ( - + {props.party && + props.party.description && + props.party.description.length > 0 && ( + )} {(!partySnapshot || !partySnapshot.description) && (
diff --git a/components/party/PartyHead/index.tsx b/components/party/PartyHead/index.tsx index 7971de81..34590904 100644 --- a/components/party/PartyHead/index.tsx +++ b/components/party/PartyHead/index.tsx @@ -32,7 +32,7 @@ const PartyHead = ({ party, meta }: Props) => { raidName: party.raid ? party.raid.name[locale] : '', })} /> - + {/* OpenGraph */} diff --git a/components/summon/SummonGrid/index.tsx b/components/summon/SummonGrid/index.tsx index 565a5aa9..c0373c67 100644 --- a/components/summon/SummonGrid/index.tsx +++ b/components/summon/SummonGrid/index.tsx @@ -261,11 +261,9 @@ const SummonGrid = (props: Props) => { try { if (stage != previousTranscendenceStages[position]) - await api.endpoints.grid_summons - .update(id, payload) - .then((response) => { - storeGridSummon(response.data.grid_summon) - }) + await api.updateTranscendence('summon', id, stage).then((response) => { + storeGridSummon(response.data.grid_summon) + }) } catch (error) { console.error(error) diff --git a/components/uncap/TranscendenceFragment/index.module.scss b/components/uncap/TranscendenceFragment/index.module.scss index bab27223..8562c6b2 100644 --- a/components/uncap/TranscendenceFragment/index.module.scss +++ b/components/uncap/TranscendenceFragment/index.module.scss @@ -1,4 +1,4 @@ -.Fragment { +.fragment { $degrees: 72deg; $origWidth: 29px; @@ -28,11 +28,11 @@ cursor: pointer; } - &.Visible { + &.visible { opacity: 1; } - &.Stage1 { + &.stage1 { top: 3px; left: 18px; @@ -41,7 +41,7 @@ // } } - &.Stage2 { + &.stage2 { top: 10px; left: 27px; transform: rotate($degrees); @@ -51,7 +51,7 @@ // } } - &.Stage3 { + &.stage3 { top: 21px; left: 24px; transform: rotate($degrees * 2); @@ -61,7 +61,7 @@ // } } - &.Stage4 { + &.stage4 { top: 21px; left: 12px; transform: rotate($degrees * 3); @@ -71,7 +71,7 @@ // } } - &.Stage5 { + &.stage5 { top: 10px; left: 8px; transform: rotate($degrees * 4); diff --git a/components/uncap/TranscendenceFragment/index.tsx b/components/uncap/TranscendenceFragment/index.tsx index 769b3696..852353d5 100644 --- a/components/uncap/TranscendenceFragment/index.tsx +++ b/components/uncap/TranscendenceFragment/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import classnames from 'classnames' +import classNames from 'classnames' import styles from './index.module.scss' @@ -18,14 +18,14 @@ const TranscendenceFragment = ({ onClick, onHover, }: Props) => { - const classes = classnames({ - Fragment: true, - Visible: visible, - Stage1: stage === 1, - Stage2: stage === 2, - Stage3: stage === 3, - Stage4: stage === 4, - Stage5: stage === 5, + const classes = classNames({ + [styles.fragment]: true, + [styles.visible]: visible, + [styles.stage1]: stage === 1, + [styles.stage2]: stage === 2, + [styles.stage3]: stage === 3, + [styles.stage4]: stage === 4, + [styles.stage5]: stage === 5, }) function handleClick() { diff --git a/components/uncap/TranscendencePopover/index.module.scss b/components/uncap/TranscendencePopover/index.module.scss index fb09e919..311138fe 100644 --- a/components/uncap/TranscendencePopover/index.module.scss +++ b/components/uncap/TranscendencePopover/index.module.scss @@ -1,11 +1,20 @@ -.Transcendence.Popover { - align-items: center; +.transcendence { + display: flex; flex-direction: column; gap: $unit-half; - display: flex; + align-items: center; + justify-content: center; width: $unit-10x; height: $unit-10x; - justify-content: center; + + animation: scaleIn $duration-zoom ease-out; + background: var(--dialog-bg); + border-radius: $card-corner; + border: 0.5px solid rgba(0, 0, 0, 0.18); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); + outline: none; + padding: $unit; + transform-origin: var(--radix-popover-content-transform-origin); z-index: 32; &.open { @@ -18,7 +27,50 @@ font-weight: $medium; } - .Pending { + .pending { color: $yellow; } } + +@keyframes scaleIn { + 0% { + opacity: 0; + transform: scale(0); + } + 20% { + opacity: 0.2; + transform: scale(0.4); + } + 40% { + opacity: 0.4; + transform: scale(0.8); + } + 60% { + opacity: 0.6; + transform: scale(1); + } + 65% { + opacity: 0.65; + transform: scale(1.1); + } + 70% { + opacity: 0.7; + transform: scale(1); + } + 75% { + opacity: 0.75; + transform: scale(0.98); + } + 80% { + opacity: 0.8; + transform: scale(1.02); + } + 90% { + opacity: 0.9; + transform: scale(0.96); + } + 100% { + opacity: 1; + transform: scale(1); + } +} diff --git a/components/uncap/TranscendencePopover/index.tsx b/components/uncap/TranscendencePopover/index.tsx index 69c8fe38..8d11b484 100644 --- a/components/uncap/TranscendencePopover/index.tsx +++ b/components/uncap/TranscendencePopover/index.tsx @@ -2,8 +2,8 @@ import React, { PropsWithChildren, useEffect, useState } from 'react' import { useTranslation } from 'next-i18next' import classNames from 'classnames' +import { Popover } from '@radix-ui/react-popover' import { - Popover, PopoverAnchor, PopoverContent, } from '~components/common/PopoverContent' @@ -40,12 +40,8 @@ const TranscendencePopover = ({ const popoverRef = React.createRef() - const classes = classNames({ - Transcendence: true, - }) - const levelClasses = classNames({ - Pending: stage != currentStage, + [styles.pending]: stage != currentStage, }) useEffect(() => { @@ -77,16 +73,20 @@ const TranscendencePopover = ({ return ( {children} - + -

+

{t('level')}  {baseLevel + 10 * currentStage}

diff --git a/components/uncap/TranscendenceStar/index.tsx b/components/uncap/TranscendenceStar/index.tsx index 8f426549..7c3b3fa0 100644 --- a/components/uncap/TranscendenceStar/index.tsx +++ b/components/uncap/TranscendenceStar/index.tsx @@ -46,9 +46,12 @@ const TranscendenceStar = ({ [styles.stage5]: stage === 5, }) - const baseImageClasses = classnames(className, { - [styles.figure]: true, - }) + const baseImageClasses = classnames( + { + [styles.figure]: true, + }, + className?.split(' ').map((c) => styles[c]) + ) useEffect(() => { setVisibleStage(stage) @@ -87,7 +90,7 @@ const TranscendenceStar = ({ onMouseLeave={interactive ? handleMouseLeave : () => {}} tabIndex={tabIndex} > -
+
{[...Array(NUM_FRAGMENTS)].map((e, i) => { const loopStage = i + 1 return interactive ? ( diff --git a/package-lock.json b/package-lock.json index 9139c0ec..f3cf9fe4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,8 +20,11 @@ "@radix-ui/react-tooltip": "^1.0.3", "@svgr/webpack": "^6.2.0", "@tiptap/extension-bubble-menu": "^2.0.3", + "@tiptap/extension-highlight": "^2.0.3", "@tiptap/extension-link": "^2.0.3", "@tiptap/extension-mention": "^2.0.3", + "@tiptap/extension-placeholder": "^2.0.3", + "@tiptap/extension-typography": "^2.0.3", "@tiptap/extension-youtube": "^2.0.3", "@tiptap/pm": "^2.0.3", "@tiptap/react": "^2.0.3", @@ -56,6 +59,7 @@ "react-lite-youtube-embed": "^2.3.52", "react-scroll": "^1.8.5", "react-string-replace": "^1.1.0", + "remixicon-react": "^1.0.0", "resolve-url-loader": "^5.0.0", "sanitize-html": "^2.8.1", "sass": "^1.61.0", @@ -7229,6 +7233,18 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-highlight": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.0.3.tgz", + "integrity": "sha512-NrtibY8cZkIjZMQuHRrKd4php+plOvAoSo8g3uVFu275I/Ixt5HqJ53R4voCXs8W8BOBRs2HS2QX8Cjh79XhtA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0" + } + }, "node_modules/@tiptap/extension-history": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.0.3.tgz", @@ -7333,6 +7349,19 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-placeholder": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.0.3.tgz", + "integrity": "sha512-Z42jo0termRAf0S0L8oxrts94IWX5waU4isS2CUw8xCUigYyCFslkhQXkWATO1qRbjNFLKN2C9qvCgGf4UeBrw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0", + "@tiptap/pm": "^2.0.0" + } + }, "node_modules/@tiptap/extension-strike": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.3.tgz", @@ -7357,6 +7386,18 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-typography": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-2.0.3.tgz", + "integrity": "sha512-5U91O2dffYOvwenWG+zT1N/pnt+RppSlocxs1KaNWFLlI2fgzDTyUyjzygIHGmskStqay2MuvmPnfVABoC+1Gw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0" + } + }, "node_modules/@tiptap/extension-youtube": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@tiptap/extension-youtube/-/extension-youtube-2.0.3.tgz", @@ -19306,6 +19347,14 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remixicon-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz", + "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==", + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", diff --git a/package.json b/package.json index e3d72855..840c3cef 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,11 @@ "@radix-ui/react-tooltip": "^1.0.3", "@svgr/webpack": "^6.2.0", "@tiptap/extension-bubble-menu": "^2.0.3", + "@tiptap/extension-highlight": "^2.0.3", "@tiptap/extension-link": "^2.0.3", "@tiptap/extension-mention": "^2.0.3", + "@tiptap/extension-placeholder": "^2.0.3", + "@tiptap/extension-typography": "^2.0.3", "@tiptap/extension-youtube": "^2.0.3", "@tiptap/pm": "^2.0.3", "@tiptap/react": "^2.0.3", @@ -63,6 +66,7 @@ "react-lite-youtube-embed": "^2.3.52", "react-scroll": "^1.8.5", "react-string-replace": "^1.1.0", + "remixicon-react": "^1.0.0", "resolve-url-loader": "^5.0.0", "sanitize-html": "^2.8.1", "sass": "^1.61.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 60381287..6f3c64eb 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import { appWithTranslation } from 'next-i18next' +import Head from 'next/head' import Link from 'next/link' import { useTranslation } from 'next-i18next' import { get } from 'local-storage' @@ -131,20 +132,28 @@ function MyApp({ Component, pageProps }: AppProps) { } return ( - - - - - {!appState.version ? ( - serverUnavailable() - ) : ( - - )} - - - - - + <> + + + + + + + + {!appState.version ? ( + serverUnavailable() + ) : ( + + )} + + + + + + ) } diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 10b08b75..00bc379a 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -90,8 +90,8 @@ const PartyRoute: React.FC = ({ break } - if (router.asPath !== '/new' && router.asPath !== '/') - router.replace(path, undefined, { shallow: true }) + // if (router.asPath !== '/new' && router.asPath !== '/') + // router.replace(path, undefined, { shallow: true }) } // Set the initial data from props diff --git a/public/icons/remix/list-ordered-2.svg b/public/icons/remix/list-ordered-2.svg new file mode 100644 index 00000000..7ca71b79 --- /dev/null +++ b/public/icons/remix/list-ordered-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 149ded99..529fe5b0 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -557,6 +557,19 @@ "tokens": { "remix": "Remixed" }, + "toolbar": { + "tooltips": { + "bold": "Bold", + "italic": "Italic", + "strike": "Strikethrough", + "highlight": "Highlight", + "link": "Add a link", + "youtube": "Add a Youtube video", + "heading": "Heading {{level}}", + "bulletList": "Bullet list", + "orderedList": "Numbered list" + } + }, "tooltips": { "copy_url": "Copy the URL to this team", "new": "Create a new team", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 94169382..8c9fe7e4 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -555,6 +555,19 @@ "tokens": { "remix": "リミックスされた" }, + "toolbar": { + "tooltips": { + "bold": "太字", + "italic": "斜体", + "strike": "取り消し線", + "highlight": "ハイライト", + "link": "リンクを挿入", + "youtube": "Youtube動画を埋め込む", + "heading": "見出し {{level}}", + "bulletList": "箇条書き", + "orderedList": "番号リスト" + } + }, "tooltips": { "copy_url": "この編成のURLをコピーする", "new": "新しい編成を作成する", diff --git a/styles/themes.scss b/styles/themes.scss index 6ebab807..5f256bd6 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -63,6 +63,12 @@ --toolbar-item-text-hover: #{$toolbar--item--text--light--hover}; --toolbar-item-text-active: #{$toolbar--item--text--light--active}; + // Light - Highlights + --highlight-bg: #{$highlight--bg--light}; + --highlight-bg-hover: #{$highlight--bg--light--hover}; + --highlight-text: #{$highlight--text--light}; + --highlight-text-hover: #{$highlight--text--light--hover}; + // Light - Placeholders --placeholder-bound-bg: #{$placeholder--bound--bg--light}; --placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover}; @@ -153,6 +159,14 @@ --grid-border-color: #{$grid--border--color--light}; // Light - Element theming + --null-bg: #{$null--bg--light}; + --null-bg-hover: #{$null--bg--hover--light}; + --null-text: #{$null--text--light}; + --null-raid-text: #{$null--text--raid--light}; + --null-text-hover: #{$null--text--hover--light}; + --null-shadow: #{$null--shadow--light}; + --null-shadow-hover: #{$null--shadow--light--hover}; + --wind-bg: #{$wind--bg--light}; --wind-bg-hover: #{$wind--bg--hover--light}; --wind-text: #{$wind--text--light}; @@ -271,6 +285,12 @@ --toolbar-item-text-hover: #{$toolbar--item--text--dark--hover}; --toolbar-item-text-active: #{$toolbar--item--text--dark--active}; + // Dark - Highlights + --highlight-bg: #{$highlight--bg--dark}; + --highlight-bg-hover: #{$highlight--bg--dark--hover}; + --highlight-text: #{$highlight--text--dark}; + --highlight-text-hover: #{$highlight--text--dark--hover}; + // Dark - Placeholders --placeholder-bound-bg: #{$placeholder--bound--bg--dark}; --placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover}; @@ -361,6 +381,14 @@ --grid-border-color: #{$grid--border--color--dark}; // Dark - Element theming + --null-bg: #{$null--bg--dark}; + --null-bg-hover: #{$null--bg--hover--dark}; + --null-text: #{$null--text--dark}; + --null-raid-text: #{$null--text--raid--dark}; + --null-text-hover: #{$null--text--hover--dark}; + --null-shadow: #{$null--shadow--dark}; + --null-shadow-hover: #{$null--shadow--dark--hover}; + --wind-bg: #{$wind--bg--dark}; --wind-bg-hover: #{$wind--bg--hover--dark}; --wind-text: #{$wind--text--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 2b9ccd41..8877117a 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -79,6 +79,13 @@ $orange-75: #ffb461; $orange-80: #facea7; $orange-90: #ffebd9; +// Yellow -- Highlights +$yellow-10: #4d3703; +$yellow-30: #956d11; +$yellow-50: #c8a657; +$yellow-70: #fedc8d; +$yellow-90: #ffed4c; + // Colors -- Interface $blue: #275dc5; $red: #ff6161; @@ -96,6 +103,7 @@ $accent--yellow--light: #c89d39; $accent--yellow--dark: #f9cc64; $yellow-text-10: #a39200; $yellow-text-20: #ffed4c; +$highlight-yellow: #ffed4c55; $accent--yellow--00: #463805; $accent--yellow--20: #7f6a00; @@ -383,6 +391,19 @@ $toolbar--item--text--dark--hover: $grey-90; $toolbar--item--text--light--active: $grey-100; $toolbar--item--text--dark--active: $grey-00; +// Color Definitions: Highlights +$highlight--bg--light: $yellow-70; +$highlight--bg--dark: $yellow-50; + +$highlight--bg--light--hover: $yellow-50; +$highlight--bg--dark--hover: $yellow-70; + +$highlight--text--light: $yellow-30; +$highlight--text--dark: $yellow-10; + +$highlight--text--light--hover: $yellow-10; +$highlight--text--dark--hover: $yellow-30; + // Color Definitions: Element Toggle $toggle--bg--light: $grey-90; $toggle--bg--dark: $grey-15; @@ -443,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3); $wind--shadow--light--hover: fade-out($wind-text-00, 0.3); $wind--shadow--dark--hover: fade-out($wind-text-00, 0.3); +// Color Definitions: Element / Null +$null--bg--light: $grey-75; +$null--bg--dark: $grey-40; + +$null--bg--hover--light: $grey-70; +$null--bg--hover--dark: $grey-30; + +$null--text--light: $grey-40; +$null--text--dark: $grey-90; + +$null--text--raid--light: $grey-40; +$null--text--raid--dark: $grey-90; + +$null--text--hover--light: $grey-20; +$null--text--hover--dark: $grey-90; + +$null--shadow--light: fade-out($grey-60, 0.3); +$null--shadow--dark: fade-out($grey-25, 0.3); + +$null--shadow--light--hover: fade-out($grey-50, 0.3); +$null--shadow--dark--hover: fade-out($grey-10, 0.3); + // Color Definitions: Element / Fire $fire--bg--light: $fire-bg-10; $fire--bg--dark: $fire-bg-10; diff --git a/utils/api.tsx b/utils/api.tsx index bd55cd0b..63ac5ba4 100644 --- a/utils/api.tsx +++ b/utils/api.tsx @@ -179,6 +179,17 @@ class Api { } }) } + + updateTranscendence(resource: 'character'|'summon', id: string, value: number) { + const pluralized = resource + 's' + const resourceUrl = `${this.url}/${pluralized}/update_uncap` + return axios.post(resourceUrl, { + [resource]: { + id: id, + transcendence_step: value + } + }) + } userInfo(id: string) { const resourceUrl = `${this.url}/users/info/${id}`