diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index 0a2b476b..fef838f1 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -36,6 +36,14 @@ outline: none; } + p.empty:first-child::before { + color: var(--text-tertiary); + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + } + &.bound { background-color: var(--input-bound-bg); diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index 00404ae2..f99c1d56 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -1,9 +1,12 @@ import { ComponentProps, useCallback, useEffect } from 'react' -import { useRouter } from 'next/router' import { useEditor, EditorContent } from '@tiptap/react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' + import StarterKit from '@tiptap/starter-kit' import Link from '@tiptap/extension-link' import Highlight from '@tiptap/extension-highlight' +import Placeholder from '@tiptap/extension-placeholder' import Typography from '@tiptap/extension-typography' import Youtube from '@tiptap/extension-youtube' import CustomMention from '~extensions/CustomMention' @@ -45,6 +48,8 @@ const Editor = ({ const router = useRouter() const locale = router.locale || 'en' + const { t } = useTranslation('common') + useEffect(() => { editor?.commands.setContent(formatContent(content)) }, [content]) @@ -72,6 +77,10 @@ const Editor = ({ }), Link, Highlight, + Placeholder.configure({ + emptyEditorClass: styles.empty, + placeholder: t('modals.edit_team.placeholders.description'), + }), Typography, CustomMention.configure({ renderLabel({ options, node }) { 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/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx index 363d4187..7b780ac2 100644 --- a/components/common/ToolbarButton/index.tsx +++ b/components/common/ToolbarButton/index.tsx @@ -24,7 +24,13 @@ const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => { }) return ( - + diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index e794fdca..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 = ( { 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 27b232b2..f3cf9fe4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@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", @@ -7348,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", diff --git a/package.json b/package.json index 202aa676..840c3cef 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@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", 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/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}`