From 41059d93967b472b2a69d323c59a4f2301de076e Mon Sep 17 00:00:00 2001 From: Gregor Lohaus Date: Tue, 8 Apr 2025 05:52:44 +0200 Subject: [PATCH] chess field --- package.json | 3 + pnpm-lock.yaml | 76 ++++++++++++++++++++++++++ src/app/fun/_components/ChessPiece.tsx | 30 ++++++++++ src/app/fun/page.tsx | 6 +- src/app/layout.tsx | 4 +- 5 files changed, 115 insertions(+), 4 deletions(-) create mode 100644 src/app/fun/_components/ChessPiece.tsx diff --git a/package.json b/package.json index 5f75851..b311dd4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ }, "dependencies": { "@clerk/nextjs": "^6.14.0", + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "@neondatabase/serverless": "^1.0.0", "@t3-oss/env-nextjs": "^0.12.0", "drizzle-orm": "^0.41.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f92c40b..ae150a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,15 @@ importers: '@clerk/nextjs': specifier: ^6.14.0 version: 6.14.0(next@15.2.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@fortawesome/fontawesome-svg-core': + specifier: ^6.7.2 + version: 6.7.2 + '@fortawesome/free-solid-svg-icons': + specifier: ^6.7.2 + version: 6.7.2 + '@fortawesome/react-fontawesome': + specifier: ^0.2.2 + version: 0.2.2(@fortawesome/fontawesome-svg-core@6.7.2)(react@19.1.0) '@neondatabase/serverless': specifier: ^1.0.0 version: 1.0.0 @@ -450,6 +459,24 @@ packages: cpu: [x64] os: [win32] + '@fortawesome/fontawesome-common-types@6.7.2': + resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==} + engines: {node: '>=6'} + + '@fortawesome/fontawesome-svg-core@6.7.2': + resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==} + engines: {node: '>=6'} + + '@fortawesome/free-solid-svg-icons@6.7.2': + resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==} + engines: {node: '>=6'} + + '@fortawesome/react-fontawesome@0.2.2': + resolution: {integrity: sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==} + peerDependencies: + '@fortawesome/fontawesome-svg-core': ~1 || ~6 + react: '>=16.3' + '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -939,6 +966,9 @@ packages: resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} engines: {node: '>=14'} + js-tokens@4.0.0: + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + lightningcss-darwin-arm64@1.29.2: resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==} engines: {node: '>= 12.0.0'} @@ -1003,6 +1033,10 @@ packages: resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==} engines: {node: '>= 12.0.0'} + loose-envify@1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} @@ -1042,6 +1076,10 @@ packages: no-case@3.0.4: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + object-assign@4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} + engines: {node: '>=0.10.0'} + obuf@1.1.2: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} @@ -1094,11 +1132,17 @@ packages: resolution: {integrity: sha512-cDWgoah1Gez9rN3H4165peY9qfpEo+SA61oQv65O3cRUE1pOEoJWwddwcqKE8XZYjbblOJlYDlLV4h67HrEVDg==} engines: {node: '>=12'} + prop-types@15.8.1: + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + react-dom@19.1.0: resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==} peerDependencies: react: ^19.1.0 + react-is@16.13.1: + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react@19.1.0: resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==} engines: {node: '>=0.10.0'} @@ -1449,6 +1493,22 @@ snapshots: '@esbuild/win32-x64@0.19.12': optional: true + '@fortawesome/fontawesome-common-types@6.7.2': {} + + '@fortawesome/fontawesome-svg-core@6.7.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.7.2 + + '@fortawesome/free-solid-svg-icons@6.7.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.7.2 + + '@fortawesome/react-fontawesome@0.2.2(@fortawesome/fontawesome-svg-core@6.7.2)(react@19.1.0)': + dependencies: + '@fortawesome/fontawesome-svg-core': 6.7.2 + prop-types: 15.8.1 + react: 19.1.0 + '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4 @@ -1816,6 +1876,8 @@ snapshots: js-cookie@3.0.5: {} + js-tokens@4.0.0: {} + lightningcss-darwin-arm64@1.29.2: optional: true @@ -1861,6 +1923,10 @@ snapshots: lightningcss-win32-arm64-msvc: 1.29.2 lightningcss-win32-x64-msvc: 1.29.2 + loose-envify@1.4.0: + dependencies: + js-tokens: 4.0.0 + lower-case@2.0.2: dependencies: tslib: 2.8.1 @@ -1901,6 +1967,8 @@ snapshots: lower-case: 2.0.2 tslib: 2.8.1 + object-assign@4.1.1: {} + obuf@1.1.2: {} pg-int8@1.0.1: {} @@ -1947,11 +2015,19 @@ snapshots: postgres@3.4.5: {} + prop-types@15.8.1: + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + react-is: 16.13.1 + react-dom@19.1.0(react@19.1.0): dependencies: react: 19.1.0 scheduler: 0.26.0 + react-is@16.13.1: {} + react@19.1.0: {} resolve-pkg-maps@1.0.0: {} diff --git a/src/app/fun/_components/ChessPiece.tsx b/src/app/fun/_components/ChessPiece.tsx new file mode 100644 index 0000000..743a796 --- /dev/null +++ b/src/app/fun/_components/ChessPiece.tsx @@ -0,0 +1,30 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faChessBishop,faChessPawn,faChessKing,faChessQueen,faChessKnight,faChessRook } from "@fortawesome/free-solid-svg-icons" + +type piece = "pawn" | "bishop" | "king" | "queen" | "knight" | "rook" +type color = "black" | "white" +type ChessPieceProps = { + piece: piece, + pieceColor: color, + color: color +} +export default function ChessField(props:ChessPieceProps) { + let fontSize = "2em"; + let className = props.color == "black" ? "bg-slate-600" : "bg-slate-200" + className += " h-10 w-10 flex place-content-center items-center text-center p-auto" + const pieceColor = props.pieceColor == "black" ? "#3d3d3d" : "#b5b5b5" + switch(props.piece) { + case "pawn": + return
+ case "bishop": + return
+ case "king": + return
+ case "queen": + return
+ case "knight": + return
+ case "rook": + return
+ } +} diff --git a/src/app/fun/page.tsx b/src/app/fun/page.tsx index e5ed191..aa2338a 100644 --- a/src/app/fun/page.tsx +++ b/src/app/fun/page.tsx @@ -1,12 +1,12 @@ 'use client' - import { usePathname } from "next/navigation" - +import ChessField from "./_components/ChessPiece" export default function Page() { const pathName = usePathname() return (
- {pathName} + +
) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4b5f604..5cd5320 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,8 +2,10 @@ import "~/styles/globals.css"; import type { Metadata } from "next"; import { Geist } from "next/font/google"; import { ClerkProvider } from "@clerk/nextjs"; - +import { config } from "@fortawesome/fontawesome-svg-core" +import "@fortawesome/fontawesome-svg-core/styles.css" import TopNav from "./_components/TopNav"; +config.autoAddCss = false; export const metadata: Metadata = { title: "Gregor Lohaus", description: "My Personal Website",