prepare for modpack-cli update

VoidShake · Jan 29, 2024 · c0768f3 · c0768f3
1 parent d041b63
commit c0768f3
Show file tree

Hide file tree

Showing 14 changed files with 5,301 additions and 177 deletions.
diff --git a/components/ModCard.tsx b/components/ModCard.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
+import Image from 'next/image'
 import { darken, invert, mix, saturate } from 'polished'
 import { FC, useMemo } from 'react'
 import { useIntl } from 'react-intl'
@@ -8,12 +9,16 @@ import InvisibleLink from './InvisibleLink'
 
 type Scheme = 'highlighted' | 'library' | 'major'
 
-const ModCard: FC<
-   IMod & {
-      onHover?: () => void
-      onBlur?: () => void
-   }
-> = ({ websiteUrl, name, icon, library, pages, slug, highlight, fade, ...events }) => {
+export type ModProps = IMod & {
+   highlight?: boolean
+   fade?: boolean
+   onHover?: () => void
+   onBlur?: () => void
+}
+
+const ICON_SIZE = 200
+
+const ModCard: FC<ModProps> = ({ websiteUrl, name, icon, library, pages, slug, highlight, fade, ...events }) => {
    const scheme = useMemo<Scheme | undefined>(() => {
       if (highlight) return 'highlighted'
       if (library) return 'library'
@@ -33,17 +38,19 @@ const ModCard: FC<
    )
    const tooltip = `${info} (${pages?.map(p => p.title).join(', ')})`
 
-   return (
-      <InvisibleLink href={websiteUrl}>
-         <Card fade={fade} scheme={scheme} onMouseOver={events.onHover} onMouseLeave={events.onBlur}>
-            <img alt={name} src={icon} />
-            <h3>{name}</h3>
-            {library && <Lib>Library</Lib>}
+   const card = (
+      <Card fade={fade} scheme={scheme} onMouseOver={events.onHover} onMouseLeave={events.onBlur}>
+         {icon ? <img alt={name} src={icon} /> : <Image alt={name} src='/missing-icon.png' height={ICON_SIZE} width={ICON_SIZE} />}
+         <h3>{name}</h3>
+         {library && <Lib>Library</Lib>}
 
-            {pages && pages.length > 0 && <Info data-tip={tooltip} data-for='mod-info' />}
-         </Card>
-      </InvisibleLink>
+         {pages && pages.length > 0 && <Info data-tip={tooltip} data-for='mod-info' />}
+      </Card>
    )
+
+   if (!websiteUrl) return card
+
+   return <InvisibleLink href={websiteUrl}>{card}</InvisibleLink>
 }
 
 const Info = styled.span`
@@ -112,7 +119,7 @@ const Card = styled.div<{ glow?: boolean; fade?: boolean; scheme?: Scheme }>`
       `}
 
    transform: translateY(0);
-   transition: background 0.1s linear, color 0.1s linear, opacity 0.4s linear;
+   transition: background 0.1s linear, color 0.1s linear, opacity 0.4s linear, transform 0.2s ease;
 
    &:hover {
       transform: translateY(-0.4rem);
@@ -133,7 +140,7 @@ const Card = styled.div<{ glow?: boolean; fade?: boolean; scheme?: Scheme }>`
 
    img {
       background: ${p => darken(p.theme.darker * 2, p.theme.bg)};
-      height: 200px;
+      height: ${ICON_SIZE}px;
    }
 `
 

diff --git a/components/ModLine.tsx b/components/ModLine.tsx
@@ -22,7 +22,7 @@ export enum Change {
 export function getChange({ from, to }: Partial<VersionedMod>): Change {
    if (!from) return Change.added
    if (!to) return Change.removed
-   if (from.date !== to.date) return Change.changed
+   if (from !== to) return Change.changed
    return Change.unchanged
 }
 
@@ -46,11 +46,11 @@ const ModLine: FC<VersionedMod> = ({ name, from, to, ...props }) => {
          <span>{name}</span>
 
          <Version change={change}>
-            <Right>{change === Change.changed && to?.file}</Right>
+            <Right>{change === Change.changed && to}</Right>
 
             {createElement(icon, { size: '1rem' })}
 
-            <Left>{from?.file ?? to?.file}</Left>
+            <Left>{from ?? to}</Left>
          </Version>
       </Style>
    )
@@ -81,7 +81,7 @@ export const ChangeStyle = (p: { theme: Theme; change: Change }) => css`
 
    ${p.change === Change.unchanged &&
    css`
-      background: ${darken(p.theme.darker, p.theme.bg)}; ;
+      background: ${darken(p.theme.darker, p.theme.bg)};
    `}
 `
 

diff --git a/components/Modlist.tsx b/components/Modlist.tsx
@@ -1,23 +1,24 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { flatten, uniqBy } from 'lodash'
+import { flatten, uniq } from 'lodash'
 import { invert } from 'polished'
 import { FC, useCallback, useMemo, useState } from 'react'
 import { IMod } from '../database/models/Mod'
+import ModCard, { ModProps } from './ModCard'
 import useTooltip from './hooks/useTooltip'
-import ModCard from './ModCard'
 
-const HIDDEN_CATEGORIES = [4780]
+// TODO
+const HIDDEN_CATEGORIES = ['4780']
 
 const Modlist: FC<{
-   mods: IMod[]
+   mods: ModProps[]
    onHover?: (mod?: IMod) => void
 }> = ({ mods, ...events }) => {
-   const [hoveredCategory, hoverCategory] = useState<number>()
-   const [selectedCategory, selectCategory] = useState<number>()
+   const [hoveredCategory, hoverCategory] = useState<string>()
+   const [selectedCategory, selectCategory] = useState<string>()
 
    const libs = useMemo(() => mods.filter(m => m.library).length, [mods])
-   const categories = useMemo(() => uniqBy(flatten(mods.map(m => m.categories)), c => c.id).filter(c => !HIDDEN_CATEGORIES.includes(c.id)), [mods])
+   const categories = useMemo(() => uniq(flatten(mods.map(m => m.categories))).filter(c => !HIDDEN_CATEGORIES.includes(c)), [mods])
 
    const rankOf = useCallback((mod: IMod) => {
       let rank = mod.popularityScore ?? 0
@@ -26,13 +27,16 @@ const Modlist: FC<{
       return rank
    }, [])
 
-   const sorted = useMemo(
+   const [librariesShown, showLibraries] = useState(false)
+   const filtered = useMemo<ModProps[]>(() => (librariesShown ? mods : mods.filter(it => !it.library)), [mods, librariesShown])
+
+   const sorted = useMemo<ModProps[]>(
       () =>
-         mods
-            .filter(m => !selectedCategory || m.categories.some(c => c.id === selectedCategory))
-            .map(m => ({ ...m, highlight: m.highlight || m.categories.some(c => c.id === hoveredCategory) }))
+         filtered
+            .filter(m => !selectedCategory || m.categories.some(c => c === selectedCategory))
+            .map(m => ({ ...m, highlight: m.highlight || m.categories.some(c => c === hoveredCategory) }))
             .sort((a, b) => rankOf(b) - rankOf(a)),
-      [mods, hoveredCategory, selectedCategory, rankOf]
+      [filtered, hoveredCategory, selectedCategory, rankOf]
    )
 
    const somethingHighlighted = useMemo(() => sorted.some(m => m.highlight), [sorted])
@@ -42,25 +46,25 @@ const Modlist: FC<{
       <Container>
          {tooltip}
          <p>
-            {mods.length - libs} mods ({libs} libraries)
+            {mods.length - libs} mods ({libs} libraries <input type='checkbox' checked={librariesShown} onChange={e => showLibraries(e.target.checked)} />)
          </p>
 
          <Categories>
-            {categories.map(({ id, name }) => (
+            {categories.map(name => (
                <Category
-                  selected={id === selectedCategory}
-                  onMouseOver={() => hoverCategory(id)}
+                  selected={name === selectedCategory}
+                  onMouseOver={() => hoverCategory(name)}
                   onMouseLeave={() => hoverCategory(undefined)}
-                  onClick={() => (selectedCategory === id ? selectCategory(undefined) : selectCategory(id))}
-                  key={id}>
+                  onClick={() => (selectedCategory === name ? selectCategory(undefined) : selectCategory(name))}
+                  key={name}>
                   {name}
                </Category>
             ))}
          </Categories>
 
          <Grid>
             {sorted.map(mod => (
-               <ModCard {...mod} key={mod.cfID} onHover={() => events.onHover?.(mod)} onBlur={() => events.onHover?.()} fade={somethingHighlighted && !mod.highlight} />
+               <ModCard {...mod} key={mod.id} onHover={() => events.onHover?.(mod)} onBlur={() => events.onHover?.()} fade={somethingHighlighted && !mod.highlight} />
             ))}
          </Grid>
       </Container>

diff --git a/database/models/Mod.ts b/database/models/Mod.ts
@@ -2,42 +2,29 @@ import { Schema } from 'mongoose'
 import { IPage } from './Page'
 
 export interface IMod {
-   cfID: number
+   id: string
    name: string
-   library: boolean
+   library?: boolean
    websiteUrl?: string
    summary?: string
    slug: string
    icon?: string
    popularityScore?: number
-   highlight?: boolean
-   fade?: boolean
-   categories: Array<{
-      id: number
-      name: string
-      url: string
-      iconUrl: string
-   }>
-   version: {
-      date: string
-      file: string
-   }
+   categories: string[]
+   version?: string
    pages?: Array<IPage>
 }
 
 const schema = new Schema({
-   cfID: {
-      type: Number,
+   id: {
+      type: String,
       required: true,
    },
    name: {
       type: String,
       required: true,
    },
-   library: {
-      type: Boolean,
-      required: true,
-   },
+   library: Boolean,
    websiteUrl: String,
    wikiUrl: String,
    issuesUrl: String,
@@ -49,18 +36,8 @@ const schema = new Schema({
    },
    icon: String,
    popularityScore: Number,
-   categories: [
-      new Schema({
-         id: { type: Number, required: false },
-         name: { type: String, required: true },
-         url: { type: String, required: true },
-         iconUrl: { type: String, required: false },
-      }),
-   ],
-   version: new Schema({
-      date: { type: String, required: true },
-      file: { type: String, required: true },
-   }),
+   categories: [{ type: String, required: false }],
+   version: String,
 })
 
 export default schema
diff --git a/database/models/Release.ts b/database/models/Release.ts
@@ -9,7 +9,7 @@ export interface IRelease extends Model {
    name?: string
    version: string
    date: string
-   url: string
+   url?: string
    changelog: string
    mods: IMod[]
 }
@@ -25,10 +25,7 @@ const schema = new Schema({
       type: String,
       required: true,
    },
-   url: {
-      type: String,
-      required: true,
-   },
+   url: String,
    changelog: {
       type: String,
       required: true,

diff --git a/lib/curseforge.ts b/lib/curseforge.ts
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
-   "name": "with-typescript",
+   "name": "modpacks-web",
    "version": "1.0.0",
    "scripts": {
       "dev": "next",
-      "build": "yarn lang:extract && yarn lang:compile && next build",
+      "build": "next build",
       "start": "next start",
+      "prepare": "yarn lang:extract && yarn lang:compile",
       "type-check": "tsc --noEmit",
       "format": "prettier --write **/*.{tsx,ts,scss}",
       "lint": "eslint --fix **/*.{tsx,ts}",