Merge pull request #206 from jedmund/update-updates
Update update page in preparation for 2/6
This commit is contained in:
GitHub
commit
c5a45b8d21
4 changed files with 272 additions and 2 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -55,6 +55,7 @@ public/images/awakening*
|
||||||
public/images/ax*
|
public/images/ax*
|
||||||
public/images/accessory*
|
public/images/accessory*
|
||||||
public/images/mastery*
|
public/images/mastery*
|
||||||
|
public/images/updates*
|
||||||
|
|
||||||
# Typescript v1 declaration files
|
# Typescript v1 declaration files
|
||||||
typings/
|
typings/
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ interface Props {
|
||||||
id: string
|
id: string
|
||||||
name: string
|
name: string
|
||||||
type: 'character' | 'summon' | 'weapon'
|
type: 'character' | 'summon' | 'weapon'
|
||||||
|
image?: '01' | '02' | '03' | '04'
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
|
@ -13,15 +14,16 @@ const defaultProps = {
|
||||||
blended: false,
|
blended: false,
|
||||||
contained: false,
|
contained: false,
|
||||||
buttonSize: 'medium' as const,
|
buttonSize: 'medium' as const,
|
||||||
|
image: '01',
|
||||||
}
|
}
|
||||||
|
|
||||||
const ChangelogUnit = ({ id, type, name }: Props) => {
|
const ChangelogUnit = ({ id, type, image, name }: Props) => {
|
||||||
function generateImageUrl() {
|
function generateImageUrl() {
|
||||||
let src = ''
|
let src = ''
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'character':
|
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
|
break
|
||||||
case 'weapon':
|
case 'weapon':
|
||||||
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
|
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
|
export default ChangelogUnit
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
.Updates.PageContent {
|
.Updates.PageContent {
|
||||||
.version {
|
.version {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $unit-2x;
|
||||||
|
|
||||||
&.content {
|
&.content {
|
||||||
.top h3 {
|
.top h3 {
|
||||||
color: var(--accent-yellow);
|
color: var(--accent-yellow);
|
||||||
|
|
@ -49,6 +53,57 @@
|
||||||
font-weight: $medium;
|
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 {
|
.notes {
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,219 @@ interface Props {}
|
||||||
|
|
||||||
const UpdatesPage: React.FC<Props> = (props: Props) => {
|
const UpdatesPage: React.FC<Props> = (props: Props) => {
|
||||||
const { t: common } = useTranslation('common')
|
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 (
|
return (
|
||||||
<div className="Updates PageContent">
|
<div className="Updates PageContent">
|
||||||
<h1>{common('about.segmented_control.updates')}</h1>
|
<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">
|
<section className="version" data-version="1.0">
|
||||||
<div className="top">
|
<div className="top">
|
||||||
<h3>1.0.1</h3>
|
<h3>1.0.1</h3>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue