add pickaxe paint jobs

data/pickaxe-paint-jobs.json

@@ -0,0 +1,69 @@
+[
+  {
+    "name": "Chasm-Borne Cliffhanger",
+    "icon": "./icons/pickaxe-paint-jobs/chasm-borne-cliffhanger.png",
+    "saveId": "0BEC523C-416A67F9-F178AC93-070C124C"
+  },
+  {
+    "name": "Gadgeteer's Favorite",
+    "icon": "./icons/pickaxe-paint-jobs/gadgeteers-favorite.png",
+    "saveId": "A4594564-480D6B5F-518AFA82-F6C1CFF5"
+  },
+  {
+    "name": "Reaper's Claw",
+    "icon": "./icons/pickaxe-paint-jobs/reapers-claw.png",
+    "saveId": "A61A5476-4E7B1466-6EEF8DBC-AC0EE8AD"
+  },
+  {
+    "name": "Drift Crusher",
+    "icon": "./icons/pickaxe-paint-jobs/drift-crusher.png",
+    "saveId": "3DCC3FE1-4E28B2B7-BB7921AA-566012BE"
+  },
+
+  {
+    "name": "Bug Hide",
+    "icon": "./icons/pickaxe-paint-jobs/bug-hide.png",
+    "saveId": "AC11DCCC-43E84312-FDEDC6BF-9906ABC0"
+  },
+  {
+    "name": "Carven Pride",
+    "icon": "./icons/pickaxe-paint-jobs/carven-pride.png",
+    "saveId": "AD38360D-4D8B11F7-F1CD1F8D-D7DE2026"
+  },
+
+  {
+    "name": "Hammerblow",
+    "icon": "./icons/pickaxe-paint-jobs/hammerblow.png",
+    "saveId": "4261E533-41F43F31-08C088BB-9E15FA76"
+  },
+  {
+    "name": "Incorruptible",
+    "icon": "./icons/pickaxe-paint-jobs/incorruptible.png",
+    "saveId": "310539B1-4B920E56-6A70B58E-1F1DEB70"
+  },
+  {
+    "name": "Jagged Son",
+    "icon": "./icons/pickaxe-paint-jobs/jagged-son.png",
+    "saveId": "545EE93E-43807BBE-3F1187B3-89562933"
+  },
+  {
+    "name": "Pneumatic",
+    "icon": "./icons/pickaxe-paint-jobs/pneumatic.png",
+    "saveId": "06E36DA0-4452D148-941EA28F-80220DCA"
+  },
+  {
+    "name": "Arc Welder's Delight",
+    "icon": "./icons/pickaxe-paint-jobs/arc-welders-delight.png",
+    "saveId": "53FF51F3-4DED7443-9C165EB2-B772BF2E"
+  },
+  {
+    "name": "Core Hound",
+    "icon": "./icons/pickaxe-paint-jobs/core-hound.png",
+    "saveId": "F424F378-40A5C3C7-5ED9898A-3A7D8800"
+  },
+  {
+    "name": "Blight Guard",
+    "icon": "./icons/pickaxe-paint-jobs/blight-guard.png",
+    "saveId": "477A86F7-4903F12A-937EA5A5-B3D0E602"
+  }
+]

schema.gql

@@ -138,12 +138,18 @@ type PickaxePartsJson implements Node {
   saveId: String!
 }
 
+type PickaxePaintJobsJson implements Node {
+  name: String!
+  saveId: String!
+}
+
 enum PickaxeComponent {
   BLADES
   HEAD
   SHAFT
   HANDLE
   POMMEL
+  PAINT_JOB
 }
 
 enum CollectableSource {

src/components/Layout.tsx

@@ -101,6 +101,10 @@ export default function Layout({
               path: 'parts',
               name: 'Parts',
             },
+            {
+              path: 'paint-jobs',
+              name: 'Paint Jobs',
+            },
           ],
         },
       ],

src/components/pickaxe/PickaxePaintJobCatd.tsx

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { useDB } from '../../hooks/db';
+import { useLiveQuery } from 'dexie-react-hooks';
+import { graphql, useStaticQuery } from 'gatsby';
+import { Badge, Card, Col } from 'antd';
+import React from 'react';
+import PickaxePaintJobIcon from './PickaxePaintJobIcon';
+
+export default function PickaxePaintJobCard({
+  pickaxePaintJob,
+}: {
+  pickaxePaintJob: Queries.PickaxePaintjobCardPickaxePaintJobFragment;
+}) {
+  const db = useDB();
+  const query = useLiveQuery(
+    () =>
+      db.pickaxeParts.get({
+        name: pickaxePaintJob.name,
+        component: 'PAINT_JOB',
+      }),
+    [pickaxePaintJob.name],
+  );
+
+  const { color } = useStaticQuery<Queries.PickaxePaintJobCardColorsQuery>(
+    graphql`
+      query PickaxePaintJobCardColors {
+        minersJson(name: { eq: "Scout" }) {
+          color
+        }
+      }
+    `,
+  ).minersJson!;
+
+  /** When clicked, add new entry to IndexedDB if Paintjob doesn't exist,
+   *  or delete its entry if it does. */
+  const toggleEntry = useCallback(() => {
+    if (query === undefined) {
+      db.pickaxeParts.add({
+        name: pickaxePaintJob.name,
+        component: 'PAINT_JOB',
+      });
+    } else {
+      db.pickaxeParts
+        .where({ name: pickaxePaintJob.name, component: 'PAINT_JOB' })
+        .delete();
+    }
+  }, [db.pickaxeParts, pickaxePaintJob.name, query]);
+
+  return (
+    <Col xxl={4} xl={4} lg={8} md={8} sm={8} xs={12}>
+      <Badge.Ribbon className="pickaxe-ribbon" text={pickaxePaintJob.name}>
+        <Card
+          hoverable
+          onClick={toggleEntry}
+          size="small"
+          style={{
+            backgroundColor: query ? color : 'inherit',
+            transition: 'all 0.3s ease',
+          }}
+        >
+          <PickaxePaintJobIcon paintJob={pickaxePaintJob} />
+        </Card>
+      </Badge.Ribbon>
+    </Col>
+  );
+}
+
+export const query = graphql`
+  fragment PickaxePaintjobCardPickaxePaintJob on PickaxePaintJobsJson {
+    name
+    ...PickaxePaintJobIconPickaxePaintJob
+  }
+`;

src/components/pickaxe/PickaxePaintJobIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { GatsbyImage } from 'gatsby-plugin-image';
+import { graphql } from 'gatsby';
+import nullthrows from '../../utils/nullthrows';
+
+export default function PickaxePaintJobIcon({
+  paintJob,
+}: {
+  paintJob: Queries.PickaxePaintJobIconPickaxePaintJobFragment;
+}) {
+  return (
+    <div
+      style={{
+        height: 100,
+        width: 100,
+        margin: 'auto',
+      }}
+    >
+      <GatsbyImage
+        image={nullthrows(paintJob.icon?.childImageSharp?.gatsbyImageData)}
+        alt={paintJob.name!}
+      />
+    </div>
+  );
+}
+
+export const query = graphql`
+  fragment PickaxePaintJobIconPickaxePaintJob on PickaxePaintJobsJson {
+    name
+    icon {
+      childImageSharp {
+        gatsbyImageData(width: 100)
+      }
+    }
+  }
+`;

src/hooks/db/AppDatabase.ts

@@ -23,7 +23,10 @@ export type FrameworkEntry = {
 };
 
 export type PickaxePartEntry = {
-  name: Queries.PickaxePartSetsJson['name'] | Queries.PickaxePartsJson['name'];
+  name:
+    | Queries.PickaxePartSetsJson['name']
+    | Queries.PickaxePartsJson['name']
+    | Queries.PickaxePaintJobsJson['name'];
   component: Queries.PickaxeComponent;
 };
 

src/pages/pickaxe/paint-jobs.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { graphql, type PageProps } from 'gatsby';
+import { Row } from 'antd';
+import PickaxePaintJobCard from '../../components/pickaxe/PickaxePaintJobCatd';
+
+export default function PickaxePaintJobs({
+  data,
+}: PageProps<Queries.PickaxePaintJobsQuery>) {
+  return (
+    <Row gutter={[16, 16]}>
+      {data.allPickaxePaintJobsJson.nodes.map((p) => (
+        <PickaxePaintJobCard key={p.name} pickaxePaintJob={p} />
+      ))}
+    </Row>
+  );
+}
+
+export const query = graphql`
+  query PickaxePaintJobs {
+    allPickaxePaintJobsJson {
+      nodes {
+        name
+        ...PickaxePaintjobCardPickaxePaintJob
+      }
+    }
+  }
+`;

src/pages/pickaxe/parts.tsx

@@ -4,8 +4,9 @@ import { Row } from 'antd';
 import PickaxePartSetCard from '../../components/pickaxe/PickaxePartSetCard';
 import PickaxePartCard from '../../components/pickaxe/PickaxePartCard';
 
-const Overclocks = ({ data }: PageProps<Queries.PickaxePartsQuery>) => {
-  console.log(data);
+export default function PickaxeParts({
+  data,
+}: PageProps<Queries.PickaxePartsQuery>) {
   return (
     <Row gutter={[16, 16]}>
       {data.allPickaxePartSetsJson.nodes.map((p) => (
@@ -16,9 +17,7 @@ const Overclocks = ({ data }: PageProps<Queries.PickaxePartsQuery>) => {
       ))}
     </Row>
   );
-};
-
-export default Overclocks;
+}
 
 export const query = graphql`
   query PickaxeParts {