chore: staged changes

next.config.js

@@ -19,7 +19,7 @@ module.exports = withPlugins(
       excludeDefaultMomentLocales: true,
     },
     images: {
-      domains: [],
+      domains: ['sekai-res.dnaroma.eu'],
     },
     experimental: {
       modern: true,

package.json

@@ -28,6 +28,7 @@
     "@next/bundle-analyzer": "^10.0.1",
     "@tailwindcss/ui": "^0.7.2",
     "@zeit/next-workers": "^1.0.0",
+    "axios": "^0.21.0",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.31",
@@ -39,12 +40,14 @@
     "react-transition-group": "^4.4.1",
     "swr": "^0.3.8",
     "tailwindcss": "^1.9.6",
+    "tailwindcss-filters": "^3.0.0",
     "web-api-hooks": "^3.0.2",
     "worker-loader": "^3.0.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@types/axios": "^0.14.0",
     "@types/moment": "^2.13.0",
     "@types/node": "^14.14.6",
     "@types/react": "^16.9.56",

src/@types/Difficulty.ts

@@ -0,0 +1 @@
+export type Difficulty = 'easy' | 'normal' | 'hard' | 'expert' | 'master'

src/@types/Music.ts

@@ -0,0 +1,19 @@
+import { MusicCategory } from './MusicCategory'
+
+export interface Music {
+  id: number
+  seq: number
+  releaseConditionId: number
+  categories: MusicCategory[]
+  title: string
+  lyricist: string
+  composer: string
+  arranger: string
+  dancerCount: number
+  selfDancerPosition: number
+  assetbundleName: string
+  liveTalkBackgroundAssetbundleName: string
+  publishedAt: number
+  liveStageId: number
+  fillerSec: number
+}

src/@types/MusicCategory.ts

@@ -0,0 +1 @@
+export type MusicCategory = 'mv' | 'image' | 'mv_2d' | 'original'

src/@types/MusicDifficulty.ts

@@ -0,0 +1,10 @@
+import { Difficulty } from './Difficulty'
+
+export interface MusicDifficulty {
+  id: number
+  musicId: number
+  musicDifficulty: Difficulty
+  playLevel: number
+  releaseConditionId: number
+  noteCount: number
+}

src/@types/MusicTag.ts

@@ -0,0 +1,8 @@
+import { Tag } from './Tag'
+
+export interface MusicTag {
+  id: number
+  musicId: number
+  musicTag: Tag
+  seq: number
+}

src/@types/MusicVocal.ts

@@ -0,0 +1,17 @@
+export interface MusicVocal {
+  id: number
+  musicId: number
+  musicVocalType: string
+  seq: number
+  releaseConditionId: number
+  caption: string
+  characters: {
+    id: number
+    musicId: number
+    musicVocalId: number
+    characterType: string
+    characterId: number
+    seq: number
+  }[]
+  assetbundleName: string
+}

src/@types/Tag.ts

@@ -0,0 +1,9 @@
+export type Tag =
+  | 'all'
+  | 'vocaloid'
+  | 'light_music_club'
+  | 'idol'
+  | 'school_refusal'
+  | 'theme_park'
+  | 'street'
+  | 'other'

src/pages/music.tsx

@@ -1,11 +1,51 @@
-import { NextPage } from 'next'
+import { GetStaticProps, NextPage } from 'next'
+import Image from 'next/image'
+
+import { Music } from '../@types/Music'
+
+interface Props {
+  musics: Music[]
+}
+
+const Page: NextPage<Props> = props => {
+  const { musics } = props
+
+  // console.log(musics)
 
-const Page: NextPage = props => {
   return (
-    <div>
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <h1 className="font-bold text-2xl">Hello</h1>
+      <div className="grid grid-cols-4 gap-4">
+        {musics.map(music => (
+          <div
+            className="relative rounded-md overflow-hidden"
+            key={`music-${music.id}`}
+          >
+            {/* <div className="absolute top-0 bottom-0 left-0 right-0 bg-black-overlay backdrop-blur"></div> */}
+            <Image
+              src={`https://sekai-res.dnaroma.eu/file/sekai-assets/music/jacket/${music.assetbundleName}_rip/${music.assetbundleName}.webp`}
+              width={740}
+              height={740}
+            />
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
 
+export const getStaticProps: GetStaticProps<Props> = async context => {
+  const { default: axios } = await import('axios')
+
+  const res = await axios.get<Music[]>(
+    'https://raw.githubusercontent.com/Sekai-World/sekai-master-db-diff/master/musics.json'
+  )
+
+  return {
+    props: {
+      musics: res.data,
+    },
+  }
+}
+
 export default Page

tailwind.config.js

@@ -11,7 +11,20 @@ module.exports = {
     './src/**/*.js',
   ],
   theme: {
-    extend: {},
+    filter: {
+      none: 'none',
+      blur: 'blur(15px)',
+    },
+    backdropFilter: {
+      none: 'none',
+      blur: 'blur(5px)',
+      'blur-heavy': 'blur(20px)',
+    },
+    extend: {
+      backgroundColor: {
+        'black-overlay': 'rgba(0, 0, 0, 0.60)',
+      },
+    },
   },
   variants: {},
   plugins: [require('@tailwindcss/ui')],

yarn.lock

@@ -1476,6 +1476,13 @@
     hex-rgb "^4.1.0"
     postcss-selector-parser "^6.0.2"
 
+"@types/axios@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+  integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=
+  dependencies:
+    axios "*"
+
 "@types/estree@*":
   version "0.0.45"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
@@ -2006,6 +2013,13 @@ autoprefixer@^9.4.5:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+axios@*, axios@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
+  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-extract-comments@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
@@ -3690,6 +3704,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.10.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6961,6 +6980,13 @@ swr@^0.3.8:
   dependencies:
     dequal "2.0.2"
 
+tailwindcss-filters@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz#d5d40ca018a54b1aa2bdc57aeb6677529c24c8d8"
+  integrity sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==
+  dependencies:
+    lodash "^4.17.15"
+
 tailwindcss@^1.9.6:
   version "1.9.6"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.6.tgz#0c5089911d24e1e98e592a31bfdb3d8f34ecf1a0"