granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix and update Changelog and About modals

Browse source
This commit is contained in:
Justin Edmund 2023-01-21 00:10:41 -08:00
parent 41d22c59a5
commit 6bc34af434
13 changed files with 472 additions and 265 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
components/AboutModal/index.scss
View file

@ -1,42 +1,28 @@
.DialogWrapper {
position: fixed;
background: none;
border: 0;
inset: 0;
top: 0;
display: grid;
place-items: center;
min-height: 100vh;
min-width: 100vw;
overflow-y: auto;
color: inherit;
}
.About.DialogContent {
gap: 0;
padding-bottom: $unit;
.About.Dialog {
top: 0;
animation: none;
transform: translate(-50%, 0);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-top: $unit-10x;
@include breakpoint(phone) {
border-radius: 0;
transform: none;
margin: 0;
& > div:not(.DialogHeader) {
display: flex;
flex-direction: column;
gap: $unit-2x;
padding: 0 $unit-4x;
}
section {
margin-bottom: $unit;
h2 {
& > h2 {
font-size: $font-medium;
font-weight: $medium;
margin-bottom: $unit * 3;
}
}
.DialogDescription {
p {
color: var(--text-secondary);
font-size: $font-regular;
line-height: 1.24;
line-height: 1.3;
margin-bottom: $unit;
&:last-of-type {
@ -80,6 +66,12 @@
display: flex;
gap: $unit-2x;
flex-grow: 1;
h3 {
font-weight: 600;
max-width: 70%;
line-height: 1.3;
}
}
svg {
@ -98,17 +90,3 @@
}
}
}
.ScrollingOverlay {
background: rgba(0 0 0 / 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
place-items: center;
overflow-y: auto;
z-index: 40;
padding-top: 10%;
}

323
components/AboutModal/index.tsx
View file

@ -1,7 +1,14 @@
import React from 'react'
import Link from 'next/link'
import { useTranslation } from 'next-i18next'
import * as Dialog from '@radix-ui/react-dialog'
import {
Dialog,
DialogClose,
DialogTitle,
DialogTrigger,
} from '~components/Dialog'
import DialogContent from '~components/DialogContent'
import CrossIcon from '~public/icons/Cross.svg'
import ShareIcon from '~public/icons/Share.svg'
@ -14,181 +21,173 @@ const AboutModal = () => {
const { t } = useTranslation('common')
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<Dialog>
<DialogTrigger asChild>
<li className="MenuItem">
<span>{t('modals.about.title')}</span>
</li>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="ScrollingOverlay">
<div className="DialogWrapper">
<Dialog.Content
className="About Dialog"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<div className="DialogHeader">
<Dialog.Title className="DialogTitle">
{t('menu.about')}
</Dialog.Title>
<Dialog.Close className="DialogClose" asChild>
<span>
<CrossIcon />
</span>
</Dialog.Close>
</div>
</DialogTrigger>
<DialogContent
className="About"
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={() => {}}
>
<div className="DialogHeader">
<DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
<DialogClose className="DialogClose" asChild>
<span>
<CrossIcon />
</span>
</DialogClose>
</div>
<section>
<Dialog.Description className="DialogDescription">
Granblue.team is a tool to save and share team comps for{' '}
<div>
<section>
<p>
Granblue.team is a tool to save and share team comps for{' '}
<a
href="https://game.granbluefantasy.jp"
target="_blank"
rel="noreferrer"
>
Granblue Fantasy
</a>
.
</p>
<p>
Start adding to a team and a URL will be created for you to share
wherever you like, no account needed.
</p>
<p>
However, if you do make an account, you can save any teams you
find for future reference and keep all of your teams together in
one place.
</p>
</section>
<section>
<h2>Feedback</h2>
<p>
This is an evolving project so feedback and suggestions are
greatly appreciated!
</p>
<p>
If you have a feature request, would like to report a bug, or are
enjoying the tool and want to say thanks, come hang out in
Discord!
</p>
<div className="LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<DiscordIcon />
<h3>granblue-tools</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</div>
</section>
<section>
<h2>Credits</h2>
<p>
Granblue.team was built by{' '}
<a
href="https://twitter.com/jedmund"
target="_blank"
rel="noreferrer"
>
@jedmund
</a>{' '}
with a lot of help from{' '}
<a
href="https://twitter.com/lalalalinna"
target="_blank"
rel="noreferrer"
>
@lalalalinna
</a>{' '}
and{' '}
<a
href="https://twitter.com/tarngerine"
target="_blank"
rel="noreferrer"
>
@tarngerine
</a>
.
</p>
<p>
Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind,
and everyone else in{' '}
<a
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
target="_blank"
rel="noreferrer"
>
Fireplace
</a>{' '}
that helped with bug testing and feature requests. (P.S.
We&apos;re recruiting!) And yoey, but he won&apos;t join our crew.
</p>
</section>
<section>
<h2>Contributing</h2>
<p>
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
. Plainly, that means you can download the source, modify it, and
redistribute it if you attribute this project, use the same
license, and keep it open source. You can contribute on Github.
</p>
<ul className="Links">
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
<a
href="https://game.granbluefantasy.jp"
href="https://github.com/jedmund/hensei-api"
target="_blank"
rel="noreferrer"
>
Granblue Fantasy.
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-api</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Dialog.Description>
<Dialog.Description className="DialogDescription">
Start adding to a team and a URL will be created for you to
share wherever you like, no account needed.
</Dialog.Description>
<Dialog.Description className="DialogDescription">
However, if you do make an account, you can save any teams you
find for future reference and keep all of your teams together
in one place.
</Dialog.Description>
</section>
<section>
<Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
<Dialog.Description className="DialogDescription">
This is an evolving project so feedback and suggestions are
greatly appreciated!
</Dialog.Description>
<Dialog.Description className="DialogDescription">
If you have a feature request, would like to report a bug, or
are enjoying the tool and want to say thanks, come hang out in
Discord!
</Dialog.Description>
<div className="LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<DiscordIcon />
<h3>granblue-tools</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</div>
</section>
<section>
<Dialog.Title className="DialogTitle">Credits</Dialog.Title>
<Dialog.Description className="DialogDescription">
Granblue.team was built by{' '}
</Link>
</li>
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-web">
<a
href="https://twitter.com/jedmund"
href="https://github.com/jedmund/hensei-web"
target="_blank"
rel="noreferrer"
>
@jedmund
</a>{' '}
with a lot of help from{' '}
<a
href="https://twitter.com/lalalalinna"
target="_blank"
rel="noreferrer"
>
@lalalalinna
</a>{' '}
and{' '}
<a
href="https://twitter.com/tarngerine"
target="_blank"
rel="noreferrer"
>
@tarngerine
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-web</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
.
</Dialog.Description>
<Dialog.Description className="DialogDescription">
Many thanks also go to Disinfect, Slipper, Jif, Bless,
9highwind, and everyone else in{' '}
<a
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
target="_blank"
rel="noreferrer"
>
Fireplace
</a>{' '}
that helped with bug testing and feature requests. (P.S.
We&apos;re recruiting!) And yoey, but he won&apos;t join our
crew.
</Dialog.Description>
</section>
<section>
<Dialog.Title className="DialogTitle">
Contributing
</Dialog.Title>
<Dialog.Description className="DialogDescription">
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
. Plainly, that means you can download the source, modify it,
and redistribute it if you attribute this project, use the
same license, and keep it open source. You can contribute on
Github.
</Dialog.Description>
<ul className="Links">
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
<a
href="https://github.com/jedmund/hensei-api"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-api</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</li>
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-web">
<a
href="https://github.com/jedmund/hensei-web"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-web</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</li>
</ul>
</section>
</Dialog.Content>
</div>
</Dialog.Overlay>
</Dialog.Portal>
</Dialog.Root>
</Link>
</li>
</ul>
</section>
</div>
</DialogContent>
</Dialog>
)
}

78
components/ChangelogModal/index.scss
View file

@ -1,15 +1,71 @@
h3.version {
color: $blue;
font-weight: $medium;
font-size: $font-medium;
margin-bottom: $unit;
}
.Changelog.DialogContent {
gap: 0;
padding-bottom: $unit-4x;
.notes {
color: var(--text-primary);
list-style-type: disc;
& > div:not(.DialogHeader) {
padding: 0 $unit-4x;
}
li {
margin-bottom: $unit-half;
.updates {
display: flex;
flex-direction: column;
gap: $unit-4x;
}
.version {
&.content {
.top h3 {
color: var(--accent-yellow);
}
.update {
display: flex;
flex-direction: column;
gap: $unit-2x;
}
.characters,
.weapons,
.summons {
display: grid;
grid-template-rows: 1fr auto;
gap: $unit;
}
.items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: $unit-4x;
}
}
.top {
align-items: baseline;
display: flex;
gap: $unit-half;
margin-bottom: $unit-2x;
h3 {
color: var(--accent-blue);
font-weight: $medium;
font-size: $font-large;
}
time {
color: var(--text-secondary);
font-size: $font-small;
font-weight: $medium;
}
}
}
.notes {
color: var(--text-primary);
list-style-type: disc;
list-style-position: inside;
li {
margin-bottom: $unit-half;
}
}
}

178
components/ChangelogModal/index.tsx
View file

@ -1,6 +1,14 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import * as Dialog from '@radix-ui/react-dialog'
import ChangelogUnit from '~components/ChangelogUnit'
import {
Dialog,
DialogClose,
DialogTitle,
DialogTrigger,
} from '~components/Dialog'
import DialogContent from '~components/DialogContent'
import CrossIcon from '~public/icons/Cross.svg'
@ -10,45 +18,145 @@ const ChangelogModal = () => {
const { t } = useTranslation('common')
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<Dialog>
<DialogTrigger asChild>
<li className="MenuItem">
<span>{t('modals.changelog.title')}</span>
</li>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Content
className="Dialog"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<div className="DialogHeader">
<Dialog.Title className="DialogTitle">
{t('menu.changelog')}
</Dialog.Title>
<Dialog.Close className="DialogClose" asChild>
<span>
<CrossIcon />
</span>
</Dialog.Close>
</div>
</DialogTrigger>
<DialogContent
className="Changelog"
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={() => {}}
>
<div className="DialogHeader">
<DialogTitle className="DialogTitle">
{t('menu.changelog')}
</DialogTitle>
<DialogClose className="DialogClose" asChild>
<span>
<CrossIcon />
</span>
</DialogClose>
</div>
<section>
<Dialog.Description className="DialogDescription">
<h3 className="version">1.0</h3>
<ul className="notes">
<li>First release!</li>
<li>Content update - Mid-December 2022 Flash Gala</li>
<li>You can embed Youtube videos now</li>
<li>Better clicking - right-click and open in a new tab</li>
<li>Manually set dark mode in Account Settings</li>
<li>Lots of bugs squashed</li>
</ul>
</Dialog.Description>
<div className="updates">
<section className="version" data-version="1.0">
<div className="top">
<h3>1.0.1</h3>
<time>2023/01/08</time>
</div>
<ul className="notes">
<li>Extra party fields: Full Auto, Clear Time, and more</li>
<li>Support for Youtube short URLs</li>
<li>Responsive grids and lots of other mobile fixes</li>
<li>Many other bug fixes</li>
</ul>
</section>
</Dialog.Content>
<Dialog.Overlay className="Overlay" />
</Dialog.Portal>
</Dialog.Root>
<section className="content version" data-version="2022-12L">
<div className="top">
<h3>2022-12 Legend Festival</h3>
<time>2022/12/26</time>
</div>
<div className="update">
<section className="characters">
<h4>New characters</h4>
<div className="items">
<ChangelogUnit
name="Michael (Grand)"
id="3040440000"
type="character"
/>
<ChangelogUnit
name="Makura"
id="3040441000"
type="character"
/>
<ChangelogUnit
name="Ultimate Friday"
id="3040442000"
type="character"
/>
</div>
</section>
<section className="weapons">
<h4>New weapons</h4>
<div className="items">
<ChangelogUnit
name="Crimson Scale"
id="1040315900"
type="weapon"
/>
<ChangelogUnit
name="Leporidius"
id="1040914500"
type="weapon"
/>
<ChangelogUnit
name="FRIED Spear"
id="1040218200"
type="weapon"
/>
</div>
</section>
<section className="summons">
<h4>New summons</h4>
<div className="items">
<ChangelogUnit name="Yatima" id="2040417000" type="summon" />
</div>
</section>
</div>
</section>
<section className="content version" data-version="2022-12F2">
<div className="top">
<h3>2022-12 Flash Gala</h3>
<time>2022/12/26</time>
</div>
<div className="update">
<section className="characters">
<h4>New characters</h4>
<div className="items">
<ChangelogUnit
name="Charlotta (Grand)"
id="3040438000"
type="character"
/>
<ChangelogUnit name="Erin" id="3040439000" type="character" />
</div>
</section>
<section className="weapons">
<h4>New weapons</h4>
<div className="items">
<ChangelogUnit
name="Claíomh Solais Díon"
id="1040024200"
type="weapon"
/>
<ChangelogUnit
name="Crystal Edge"
id="1040116500"
type="weapon"
/>
</div>
</section>
</div>
</section>
<section className="version" data-version="1.0">
<div className="top">
<h3>1.0.0</h3>
<time>2022/12/26</time>
</div>
<ul className="notes">
<li>First release!</li>
<li>You can embed Youtube videos now</li>
<li>Better clicking - right-click and open in a new tab</li>
<li>Manually set dark mode in Account Settings</li>
<li>Lots of bugs squashed</li>
</ul>
</section>
</div>
</DialogContent>
</Dialog>
)
}

16
components/ChangelogUnit/index.scss Normal file
View file

@ -0,0 +1,16 @@
.ChangelogUnit {
display: flex;
flex-direction: column;
gap: $unit-half;
img {
border-radius: $input-corner;
width: 100%;
}
h4 {
font-size: $font-small;
font-weight: $medium;
text-align: center;
}
}

45
components/ChangelogUnit/index.tsx Normal file
View file

@ -0,0 +1,45 @@
import React from 'react'
import './index.scss'
interface Props {
id: string
name: string
type: 'character' | 'summon' | 'weapon'
}
const defaultProps = {
active: false,
blended: false,
contained: false,
buttonSize: 'medium' as const,
}
const ChangelogUnit = ({ id, type, name }: Props) => {
function generateImageUrl() {
let src = ''
switch (type) {
case 'character':
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_01.jpg`
break
case 'weapon':
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
break
case 'summon':
src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
break
}
return src
}
return (
<div className="ChangelogUnit">
<img alt={name} src={generateImageUrl()} />
<h4>{name}</h4>
</div>
)
}
export default ChangelogUnit

9
components/DialogContent/index.scss
View file

@ -28,7 +28,7 @@
overflow-y: scroll;
max-height: 80vh;
min-width: 580px;
max-width: 50vw;
max-width: 42vw;
// padding: $unit * $multiplier;
position: relative;
@ -55,11 +55,16 @@
align-items: center;
gap: $unit-2x;
justify-content: space-between;
padding: $unit-3x ($unit * $multiplier);
padding: $unit-4x ($unit * $multiplier);
position: sticky;
top: 0;
z-index: 10;
&.Short {
padding-top: $unit-3x;
padding-bottom: $unit-3x;
}
.left {
display: flex;
flex-direction: column;

4
components/LoginModal/index.scss
View file

@ -2,10 +2,6 @@
gap: $unit;
min-width: $unit * 52;
.DialogHeader {
padding: $unit-4x $unit-3x;
}
form {
display: flex;
flex-direction: column;

4
components/RoadmapModal/index.scss
View file

@ -2,10 +2,6 @@
gap: 0;
padding-bottom: $unit-2x;
.DialogHeader {
padding: $unit-4x;
}
h3.priority {
font-weight: $medium;
font-size: $font-large;

4
components/SignupModal/index.scss
View file

@ -2,10 +2,6 @@
gap: $unit;
min-width: $unit * 52;
.DialogHeader {
padding: $unit-4x $unit-3x;
}
form {
display: flex;
flex-direction: column;

2
components/WeaponModal/index.tsx
View file

@ -354,7 +354,7 @@ const WeaponModal = ({
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={onEscapeKeyDown}
>
<div className="DialogHeader">
<div className="DialogHeader Short">
<img
alt={gridWeapon.object.name[locale]}
className="DialogImage"

6
styles/themes.scss
View file

@ -13,6 +13,9 @@
--separator-bg: #{$separator--bg--light};
--accent-blue: #{$accent--blue--light};
--accent-yellow: #{$accent--yellow--light};
// Light - Menus
--dialog-bg: #{$dialog--bg--light};
@ -137,6 +140,9 @@
--separator-bg: #{$separator--bg--dark};
--accent-blue: #{$accent--blue--dark};
--accent-yellow: #{$accent--yellow--dark};
// Dark - Dialogs
--dialog-bg: #{$dialog--bg--dark};

6
styles/variables.scss
View file

@ -76,6 +76,12 @@ $red: #ff6161;
$yellow: #c89d39;
$error: #d13a3a;
$accent--blue--light: #275dc5;
$accent--blue--dark: #6195f4;
$accent--yellow--light: #c89d39;
$accent--yellow--dark: #f9cc64;
// Colors -- Elements
$wind-text-00: #023e28;
$wind-text-10: #006a43;