-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #109 from AgricolaDevJP/translation-print
translation sheet print
- Loading branch information
Showing
17 changed files
with
451 additions
and
84 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
...anslation-print/CardsTranslationPrintList/CardsTranslationPrintListItem/index.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .CardsTableCell { | ||
| box-sizing: border-box; | ||
| width: 55mm; | ||
| height: 40mm; | ||
| border: .5mm solid gray; | ||
| border-collapse: collapse; | ||
| text-align: left; | ||
| vertical-align: top; | ||
| font-family: 'Noto Sans JP'; | ||
| font-size: 3.3mm; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .CardsTableCellLongText { | ||
| font-size: 2.8mm; | ||
| } | ||
|
|
||
| .CardsTableCellLongLongText { | ||
| font-size: 2.5mm; | ||
| } | ||
|
|
||
| .CardTitle { | ||
| font-weight: bold; | ||
| } |
37 changes: 37 additions & 0 deletions
37
...cards-translation-print/CardsTranslationPrintList/CardsTranslationPrintListItem/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import classNames from 'classnames' | ||
| import type { FC } from 'react' | ||
|
|
||
| import type { CardForPrint } from '@/libs/domain/Card' | ||
|
|
||
| import styles from './index.module.scss' | ||
|
|
||
| type CardsTranslationPrintListItemProps = Readonly<{ | ||
| card: CardForPrint | ||
| }> | ||
|
|
||
| const CardsTranslationPrintListItem: FC<CardsTranslationPrintListItemProps> = ({ card }) => { | ||
| const textLength = (card.prerequisite?.length ?? 0) + (card.description?.length ?? 0) | ||
| return ( | ||
| <td | ||
| className={classNames({ | ||
| [styles.CardsTableCell]: true, | ||
| [styles.CardsTableCellLongText]: textLength >= 100, | ||
| [styles.CardsTableCellLongLongText]: textLength >= 130, | ||
| })} | ||
| > | ||
| <span className={styles.CardTitle}> | ||
| [{card.printedID}] {card.nameJa} | ||
| </span> | ||
| <br /> | ||
| {card.prerequisite && ( | ||
| <> | ||
| <span>(前提) {card.prerequisite}</span> | ||
| <br /> | ||
| </> | ||
| )} | ||
| <span>{card.description}</span> | ||
| </td> | ||
| ) | ||
| } | ||
|
|
||
| export default CardsTranslationPrintListItem |
10 changes: 10 additions & 0 deletions
10
src/components/pages/cards-translation-print/CardsTranslationPrintList/index.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .CardsTable { | ||
| width: 100%; | ||
| border: .5mm gray solid; | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .CardsTableRow { | ||
| break-inside: avoid-page; | ||
| border-collapse: collapse; | ||
| } |
74 changes: 74 additions & 0 deletions
74
src/components/pages/cards-translation-print/CardsTranslationPrintList/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { GraphQLClient } from 'graphql-request' | ||
| import { type FC, useEffect, useState } from 'react' | ||
|
|
||
| import { getSdk } from '@/libs/api/generated' | ||
| import { paramsToSearchCondition, searchConditionToWhere } from '@/libs/cards/search' | ||
| import type { CardForPrint } from '@/libs/domain/Card' | ||
| import type { RevisionKey } from '@/libs/domain/Revision' | ||
| import { isNonNullable } from '@/libs/utils/types' | ||
|
|
||
| import CardsTranslationPrintListItem from './CardsTranslationPrintListItem' | ||
| import styles from './index.module.scss' | ||
|
|
||
| type CardsTranslationPrintListProps = Readonly<{ | ||
| revisionKey: RevisionKey | ||
| }> | ||
|
|
||
| const CardsTranslationPrintList: FC<CardsTranslationPrintListProps> = ({ revisionKey }) => { | ||
| const [cards, setCards] = useState<CardForPrint[]>([]) | ||
| const [isLoading, setIsLoading] = useState<boolean>(false) | ||
| const [isLoaded, setIsLoaded] = useState<boolean>(false) | ||
|
|
||
| const params = new URLSearchParams(window.location.search) | ||
| const searchCondition = paramsToSearchCondition(params) | ||
| const where = searchConditionToWhere(revisionKey, searchCondition) | ||
|
|
||
| const client = new GraphQLClient('https://api.db.agricolajp.dev/graphql') | ||
| const sdk = getSdk(client) | ||
|
|
||
| useEffect(() => { | ||
| const fetch = async () => { | ||
| if (isLoading) return | ||
| setIsLoading(true) | ||
| const res = await sdk.GetCardsListForPrint({ where }) | ||
| const cards = res.cards?.edges?.map(e => e?.node).filter(isNonNullable) ?? [] | ||
| setCards(cards) | ||
| setIsLoading(false) | ||
| setIsLoaded(true) | ||
| } | ||
| fetch() | ||
| }, []) | ||
|
|
||
| useEffect(() => { | ||
| if (isLoaded) { | ||
| window.print() | ||
| } | ||
| }, [isLoaded]) | ||
|
|
||
| const cardsChunks = cards.reduce( | ||
| (acc: CardForPrint[][], _c, i) => (i % 3 ? acc : [...acc, ...[cards.slice(i, i + 3)]]), | ||
| [], | ||
| ) | ||
|
|
||
| return ( | ||
| <> | ||
| {isLoading ? ( | ||
| <p>読込中です。しばらくお待ちください</p> | ||
| ) : ( | ||
| <table className={styles.CardsTable}> | ||
| <tbody> | ||
| {cardsChunks.map(cardsChunk => ( | ||
| <tr className={styles.CardsTableRow} key={`chunk_${cardsChunk[0].literalID}}`}> | ||
| {cardsChunk.map(card => ( | ||
| <CardsTranslationPrintListItem card={card} key={card.literalID} /> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default CardsTranslationPrintList |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| --- | ||
| import '@fontsource/noto-sans-jp/400.css' | ||
| import { SEO } from 'astro-seo' | ||
| import './print.scss' | ||
| interface Props { | ||
| title?: string | ||
| description?: string | ||
| ogImage?: OGImage | ||
| pathname: string | ||
| } | ||
| type OGImage = Readonly<{ | ||
| path: string | ||
| alt: string | ||
| }> | ||
| const { title, pathname, ogImage } = Astro.props | ||
| const canonicalUrl = new URL(pathname, Astro.site).toString() | ||
| const description = | ||
| Astro.props.description ?? | ||
| 'ボードゲーム「アグリコラ」に関する情報をまとめたWebサイトです。製品版の全てのカードを掲載する予定です。' | ||
| const ogImagePath = ogImage?.path ?? '/ogimage.png' | ||
| const ogImageFullPath = new URL(ogImagePath, Astro.site).toString() | ||
| const ogImageAlt = ogImage?.alt ?? 'Agricola DB: Agricola Database for Japanese' | ||
| --- | ||
|
|
||
| <!doctype html> | ||
| <html lang="ja"> | ||
| <head> | ||
| <SEO | ||
| title={title} | ||
| titleTemplate="%s - AgricolaDB" | ||
| titleDefault="AgricolaDB" | ||
| description={description} | ||
| canonical={canonicalUrl} | ||
| charset="UTF-8" | ||
| openGraph={{ | ||
| basic: { | ||
| title: title ?? 'AgricolaDB', | ||
| type: 'website', | ||
| url: canonicalUrl, | ||
| image: ogImageFullPath, | ||
| }, | ||
| optional: { | ||
| siteName: 'AgricolaDB', | ||
| description, | ||
| locale: 'ja_JP', | ||
| }, | ||
| image: { | ||
| width: 800, | ||
| height: 418, | ||
| alt: ogImageAlt, | ||
| }, | ||
| }} | ||
| twitter={{ | ||
| card: 'summary_large_image', | ||
| image: ogImageFullPath, | ||
| imageAlt: ogImageAlt, | ||
| }} | ||
| extend={{ | ||
| link: [{ rel: 'icon', href: '/favicon.ico' }], | ||
| meta: [ | ||
| { name: 'viewport', content: 'width=device-width' }, | ||
| { name: 'generator', content: Astro.generator }, | ||
| ], | ||
| }} | ||
| /> | ||
| <script type="text/partytown" is:inline src="https://www.googletagmanager.com/gtag/js?id=G-D2KF0XCCVL" | ||
| ></script> | ||
| <script type="text/partytown" is:inline> | ||
| window.dataLayer = window.dataLayer || [] | ||
| function gtag() { | ||
| dataLayer.push(arguments) | ||
| } | ||
| gtag('js', new Date()) | ||
| gtag('config', 'G-D2KF0XCCVL') | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="main"><slot /></div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.