Add 2022-02-06 update log
This commit is contained in:
parent
432428f4dc
commit
39dba09ced
3 changed files with 271 additions and 2 deletions
|
|
@ -6,6 +6,7 @@ interface Props {
|
|||
id: string
|
||||
name: string
|
||||
type: 'character' | 'summon' | 'weapon'
|
||||
image?: '01' | '02' | '03' | '04'
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -13,15 +14,16 @@ const defaultProps = {
|
|||
blended: false,
|
||||
contained: false,
|
||||
buttonSize: 'medium' as const,
|
||||
image: '01',
|
||||
}
|
||||
|
||||
const ChangelogUnit = ({ id, type, name }: Props) => {
|
||||
const ChangelogUnit = ({ id, type, image, name }: Props) => {
|
||||
function generateImageUrl() {
|
||||
let src = ''
|
||||
|
||||
switch (type) {
|
||||
case 'character':
|
||||
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_01.jpg`
|
||||
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_${image}.jpg`
|
||||
break
|
||||
case 'weapon':
|
||||
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
|
||||
|
|
@ -42,4 +44,6 @@ const ChangelogUnit = ({ id, type, name }: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
ChangelogUnit.defaultProps = defaultProps
|
||||
|
||||
export default ChangelogUnit
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
.Updates.PageContent {
|
||||
.version {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
|
||||
&.content {
|
||||
.top h3 {
|
||||
color: var(--accent-yellow);
|
||||
|
|
@ -49,6 +53,57 @@
|
|||
font-weight: $medium;
|
||||
}
|
||||
}
|
||||
|
||||
.Notes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
gap: $unit-2x;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit;
|
||||
|
||||
h3 {
|
||||
font-weight: $bold;
|
||||
font-size: $font-regular;
|
||||
}
|
||||
|
||||
img {
|
||||
aspect-ratio: 4 / 3;
|
||||
background: var(--dialog-bg);
|
||||
border-radius: $input-corner;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
background: var(--button-bg);
|
||||
border-radius: 2px;
|
||||
font-family: monospace;
|
||||
font-weight: $bold;
|
||||
letter-spacing: 0.02rem;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Bugs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
gap: $unit;
|
||||
|
||||
li {
|
||||
font-size: $font-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notes {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,219 @@ interface Props {}
|
|||
|
||||
const UpdatesPage: React.FC<Props> = (props: Props) => {
|
||||
const { t: common } = useTranslation('common')
|
||||
|
||||
function image(
|
||||
alt: string,
|
||||
url: string,
|
||||
filename: string,
|
||||
extension: string
|
||||
) {
|
||||
const fallback = `${url}/${filename}.${extension}`
|
||||
|
||||
let set = []
|
||||
for (let i = 1; i < 3; i++) {
|
||||
if (i === 1) set.push(fallback)
|
||||
else set.push(`${url}/${filename}@${i}x.${extension} ${i}x`)
|
||||
}
|
||||
const sizes = set.join(', ')
|
||||
|
||||
return <img alt={alt} src={fallback} srcSet={sizes} />
|
||||
}
|
||||
return (
|
||||
<div className="Updates PageContent">
|
||||
<h1>{common('about.segmented_control.updates')}</h1>
|
||||
<section className="version" data-version="1.1">
|
||||
<div className="top">
|
||||
<h3>1.1.0</h3>
|
||||
<time>2023/02/06</time>
|
||||
</div>
|
||||
<section>
|
||||
<h2>New features</h2>
|
||||
<ul className="Notes">
|
||||
<li>
|
||||
{image(
|
||||
'Remix parties',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'remix',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Remix parties</h3>
|
||||
<p>
|
||||
See a team you want to try but don't have Yatima? Now you can
|
||||
remix teams from other users to showcase substitutes, swap for
|
||||
items you have, or just give it your own flavor.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Transcendence',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'transcendence',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Transcendence</h3>
|
||||
<p>
|
||||
Now you can set the transcendence stage for Eternals and select
|
||||
summons (namely, Bahamut).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Shields and Manatura',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'accessories',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Shields and Manatura</h3>
|
||||
<p>
|
||||
When using Paladin or Manadiver, you can set their respective
|
||||
Shield or Manatura from the button next to the main character.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Character Mastery',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'mastery',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Character Mastery</h3>
|
||||
<p>
|
||||
You can now add individual values for your character's rings,
|
||||
earrings, and awakenings. Make sure to set your Perpetuity
|
||||
Rings!
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Updated team mechanics',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'mechanics',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Updated team mechanics</h3>
|
||||
<p>Sorry, each party is only big enough for one Beelzebub.</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'R Characters',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'rare',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>R Characters</h3>
|
||||
<p>
|
||||
R Characters have been added to the database for your
|
||||
mem—Proving Grounds compositions.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Unique URLs for team tabs',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'urls',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Unique URLs for team tabs</h3>
|
||||
<p>
|
||||
You can now link to individual tabs directly. The site will do
|
||||
it for you when you copy a URL, or you can append{' '}
|
||||
<code>/characters</code>, <code>/weapons</code> or{' '}
|
||||
<code>/summons</code> manually.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Redesigned navigation',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'nav',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Redesigned navigation</h3>
|
||||
<p>
|
||||
The top-navigation has been slightly redesigned. Click the party
|
||||
name to copy its URL!
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Update toasts',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'toasts',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>Update toasts</h3>
|
||||
<p>
|
||||
The site will now show an update in the bottom-right corner when
|
||||
new features or content is added.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Bug fixes</h2>
|
||||
<ul className="Bugs">
|
||||
<li>
|
||||
Fixed a bug that caused users to be logged out whenever they
|
||||
restarted their browser
|
||||
</li>
|
||||
<li>Fixed a bug that caused Dark Opus weapons to disappear</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<section className="content version" data-version="2022-12L">
|
||||
<div className="top">
|
||||
<h3>2023-01 Flash Gala</h3>
|
||||
<time>2023/01/19</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<section className="characters">
|
||||
<h4>New characters</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit name="Amelia" id="3040444000" type="character" />
|
||||
<ChangelogUnit
|
||||
name="Halluel and Malluel (Grand)"
|
||||
id="3040443000"
|
||||
type="character"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="weapons">
|
||||
<h4>New weapons</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit
|
||||
name="Shining Silver"
|
||||
id="1040218300"
|
||||
type="weapon"
|
||||
/>
|
||||
<ChangelogUnit
|
||||
name="Eternal Signature"
|
||||
id="1040116600"
|
||||
type="weapon"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="content version" data-version="2023-01U">
|
||||
<div className="top">
|
||||
<h3>2023-01 Uncap</h3>
|
||||
<time>2023/01/06</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<section className="characters">
|
||||
<h4>Updated characters</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit
|
||||
name="Shiva"
|
||||
id="3040196000"
|
||||
type="character"
|
||||
image="03"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="version" data-version="1.0">
|
||||
<div className="top">
|
||||
<h3>1.0.1</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue