Merge pull request #247 from jedmund/staging
Add ContentUpdate component and update updates page
This commit is contained in:
GitHub
commit
e81d5f12a5
3 changed files with 186 additions and 98 deletions
0
components/ContentUpdate/index.scss
Normal file
0
components/ContentUpdate/index.scss
Normal file
143
components/ContentUpdate/index.tsx
Normal file
143
components/ContentUpdate/index.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import ChangelogUnit from '~components/ChangelogUnit'
|
||||
|
||||
import './index.scss'
|
||||
|
||||
interface UpdateObject {
|
||||
character?: string[]
|
||||
summon?: string[]
|
||||
weapon?: string[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
version: string
|
||||
dateString: string
|
||||
event: string
|
||||
newItems?: UpdateObject
|
||||
uncappedItems?: UpdateObject
|
||||
numNotes: number
|
||||
}
|
||||
const ContentUpdate = ({
|
||||
version,
|
||||
dateString,
|
||||
event,
|
||||
newItems,
|
||||
uncappedItems,
|
||||
numNotes,
|
||||
}: Props) => {
|
||||
const { t: updates } = useTranslation('updates')
|
||||
|
||||
const date = new Date(dateString)
|
||||
|
||||
function newItemElements(key: 'character' | 'weapon' | 'summon') {
|
||||
let elements: React.ReactNode[] = []
|
||||
if (newItems && newItems[key]) {
|
||||
const items = newItems[key]
|
||||
elements = items
|
||||
? items.map((id, i) => {
|
||||
return <ChangelogUnit id={id} type={key} key={`${key}-${i}`} />
|
||||
})
|
||||
: []
|
||||
}
|
||||
|
||||
return elements
|
||||
}
|
||||
|
||||
function newItemSection(key: 'character' | 'weapon' | 'summon') {
|
||||
let section: React.ReactNode = ''
|
||||
|
||||
if (newItems && newItems[key]) {
|
||||
const items = newItems[key]
|
||||
section =
|
||||
items && items.length > 0 ? (
|
||||
<section className={`${key}s`}>
|
||||
<h4>{updates(`labels.${key}s`)}</h4>
|
||||
<div className="items">{newItemElements(key)}</div>
|
||||
</section>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
return section
|
||||
}
|
||||
|
||||
function uncapItemElements(key: 'character' | 'weapon' | 'summon') {
|
||||
let elements: React.ReactNode[] = []
|
||||
if (uncappedItems && uncappedItems[key]) {
|
||||
const items = uncappedItems[key]
|
||||
elements = items
|
||||
? items.map((id) => {
|
||||
return key === 'character' ? (
|
||||
<ChangelogUnit id={id} type={key} image="03" />
|
||||
) : (
|
||||
<ChangelogUnit id={id} type={key} />
|
||||
)
|
||||
})
|
||||
: []
|
||||
}
|
||||
return elements
|
||||
}
|
||||
|
||||
function uncapItemSection(key: 'character' | 'weapon' | 'summon') {
|
||||
let section: React.ReactNode = ''
|
||||
|
||||
if (uncappedItems && uncappedItems[key]) {
|
||||
const items = uncappedItems[key]
|
||||
section =
|
||||
items && items.length > 0 ? (
|
||||
<section className={`${key}s`}>
|
||||
<h4>{updates(`labels.uncaps.${key}s`)}</h4>
|
||||
<div className="items">{uncapItemElements(key)}</div>
|
||||
</section>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
return section
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="Content Version" data-version={version}>
|
||||
<div className="Header">
|
||||
<h3>{`${updates('events.date', {
|
||||
year: date.getFullYear(),
|
||||
month: `${date.getMonth() + 1}`.padStart(2, '0'),
|
||||
})} ${updates(event)}`}</h3>
|
||||
<time>{dateString}</time>
|
||||
</div>
|
||||
<div className="Contents">
|
||||
{newItemSection('character')}
|
||||
{uncapItemSection('character')}
|
||||
{newItemSection('weapon')}
|
||||
{uncapItemSection('weapon')}
|
||||
{newItemSection('summon')}
|
||||
{uncapItemSection('summon')}
|
||||
</div>
|
||||
{numNotes > 0 ? (
|
||||
<div>
|
||||
<section>
|
||||
<h2>{updates('labels.updates')}</h2>
|
||||
<ul className="Bare Contents">
|
||||
{[...Array(numNotes)].map((e, i) => (
|
||||
<li key={`${version}-${i}`}>
|
||||
{updates(`versions.${version}.features.${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
ContentUpdate.defaultProps = {
|
||||
numNotes: 0,
|
||||
}
|
||||
|
||||
export default ContentUpdate
|
||||
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import ContentUpdate from '~components/ContentUpdate'
|
||||
import ChangelogUnit from '~components/ChangelogUnit'
|
||||
|
||||
import './index.scss'
|
||||
|
|
@ -55,104 +56,48 @@ const UpdatesPage = () => {
|
|||
return (
|
||||
<div className="Updates PageContent">
|
||||
<h1>{common('about.segmented_control.updates')}</h1>
|
||||
<section className="Content Version" data-version="2023-02F">
|
||||
<div className="Header">
|
||||
<h3>{`${updates('events.date', {
|
||||
year: 2023,
|
||||
month: 2,
|
||||
})} ${updates('events.flash')}`}</h3>
|
||||
<time>2023/02/14</time>
|
||||
</div>
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>{updates('labels.characters')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="3040447000" type="character" />
|
||||
<ChangelogUnit id="3040448000" type="character" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="weapons">
|
||||
<h4>{updates('labels.weapons')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="1040617200" type="weapon" />
|
||||
<ChangelogUnit id="1040421500" type="weapon" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="Content Version" data-version="2023-02U3">
|
||||
<div className="Header">
|
||||
<h3>{`${updates('events.date', {
|
||||
year: 2023,
|
||||
month: 2,
|
||||
})} ${updates('events.uncap')}`}</h3>
|
||||
<time>2023/02/12</time>
|
||||
</div>
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>{updates('labels.uncaps.characters')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="3040173000" type="character" image="03" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="weapons">
|
||||
<h4>{updates('labels.uncaps.weapons')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="1040606800" type="weapon" />
|
||||
<ChangelogUnit id="1040606900" type="weapon" />
|
||||
<ChangelogUnit id="1040607000" type="weapon" />
|
||||
<ChangelogUnit id="1040509500" type="weapon" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="summons">
|
||||
<h4>{updates('labels.uncaps.summons')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="2040288000" type="summon" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="Content Version" data-version="2023-02U2">
|
||||
<div className="Header">
|
||||
<h3>{`${updates('events.date', {
|
||||
year: 2023,
|
||||
month: 2,
|
||||
})} ${updates('events.uncap')}`}</h3>
|
||||
<time>2023/02/06</time>
|
||||
</div>
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>{updates('labels.uncaps.characters')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="3040252000" type="character" image="03" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="weapons">
|
||||
<h4>{updates('labels.uncaps.weapons')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="1040016100" type="weapon" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="weapons">
|
||||
<h4>{updates('labels.weapons')}</h4>
|
||||
<div className="items">
|
||||
<ChangelogUnit id="1040617100" type="weapon" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<section>
|
||||
<h2>{updates('labels.updates')}</h2>
|
||||
<ul className="Bare Contents">
|
||||
{[...Array(versionUpdates['202302U2'])].map((e, i) => (
|
||||
<li key={`2023-02-U2-${i}`}>
|
||||
{updates(`versions.2023-02-U2.features.${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<ContentUpdate
|
||||
version="2023-02L"
|
||||
dateString="2023/02/27"
|
||||
event="events.legfest"
|
||||
newItems={{
|
||||
character: ['3040450000', '3040449000'],
|
||||
weapon: ['1040421600', '1040617300', '1040712200'],
|
||||
summon: ['2040418000'],
|
||||
}}
|
||||
/>
|
||||
<ContentUpdate
|
||||
version="2023-02F"
|
||||
dateString="2023/02/14"
|
||||
event="events.flash"
|
||||
newItems={{
|
||||
character: ['3040447000', '3040448000'],
|
||||
weapon: ['1040617200', '1040421500'],
|
||||
}}
|
||||
/>
|
||||
<ContentUpdate
|
||||
version="2023-02-U3"
|
||||
dateString="2023/02/12"
|
||||
event="events.uncap"
|
||||
uncappedItems={{
|
||||
character: ['3040173000'],
|
||||
weapon: ['1040606800', '1040606900', '1040607000', '1040509500'],
|
||||
summon: ['2040288000'],
|
||||
}}
|
||||
/>
|
||||
<ContentUpdate
|
||||
version="2023-02-U2"
|
||||
dateString="2023/02/06"
|
||||
event="events.uncap"
|
||||
newItems={{
|
||||
weapon: ['1040016100'],
|
||||
}}
|
||||
numNotes={versionUpdates['202302U2'].updates}
|
||||
uncappedItems={{
|
||||
character: ['3040252000'],
|
||||
weapon: ['1040617100', '1040016100'],
|
||||
}}
|
||||
/>
|
||||
<section className="Version" data-version="1.1">
|
||||
<div className="Header">
|
||||
<h3>1.1.0</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue