diff --git a/leaky-ships/package.json b/leaky-ships/package.json
index a730f53..7011155 100644
--- a/leaky-ships/package.json
+++ b/leaky-ships/package.json
@@ -20,6 +20,7 @@
"@fortawesome/pro-regular-svg-icons": "^6.4.2",
"@fortawesome/pro-solid-svg-icons": "^6.4.2",
"@fortawesome/pro-thin-svg-icons": "^6.4.2",
+ "@fortawesome/react-fontawesome": "^0.2.0",
"@fortawesome/sharp-solid-svg-icons": "^6.4.2",
"@prisma/client": "^4.16.2",
"@solidjs/meta": "^0.28.6",
diff --git a/leaky-ships/pnpm-lock.yaml b/leaky-ships/pnpm-lock.yaml
index e3fa8e2..4e5063e 100644
--- a/leaky-ships/pnpm-lock.yaml
+++ b/leaky-ships/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
'@fortawesome/pro-thin-svg-icons':
specifier: ^6.4.2
version: 6.4.2
+ '@fortawesome/react-fontawesome':
+ specifier: ^0.2.0
+ version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0)
'@fortawesome/sharp-solid-svg-icons':
specifier: ^6.4.2
version: 6.4.2
@@ -1768,6 +1771,17 @@ packages:
'@fortawesome/fontawesome-common-types': 6.4.2
dev: false
+ /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0):
+ resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==, tarball: https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.2.0/react-fontawesome-0.2.0.tgz}
+ peerDependencies:
+ '@fortawesome/fontawesome-svg-core': ~1 || ~6
+ react: '>=16.3'
+ dependencies:
+ '@fortawesome/fontawesome-svg-core': 6.4.2
+ prop-types: 15.8.1
+ react: 18.2.0
+ dev: false
+
/@fortawesome/sharp-solid-svg-icons@6.4.2:
resolution: {integrity: sha512-b8kA9CxRPmdgoOrELrYHokbF5f0C80SJg9NA+dYcny3SHMsUQCSUacEX1OOIERwRyb1t5ncB2XI9CAPDTQ8wVg==, tarball: https://npm.fontawesome.com/@fortawesome/sharp-solid-svg-icons/-/6.4.2/sharp-solid-svg-icons-6.4.2.tgz}
engines: {node: '>=6'}
@@ -4352,6 +4366,14 @@ packages:
'@prisma/engines': 4.16.2
dev: false
+ /prop-types@15.8.1:
+ resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+ dependencies:
+ loose-envify: 1.4.0
+ object-assign: 4.1.1
+ react-is: 16.13.1
+ dev: false
+
/punycode@2.3.0:
resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
engines: {node: '>=6'}
@@ -4360,6 +4382,10 @@ packages:
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+ /react-is@16.13.1:
+ resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/leaky-ships/src/components/FontAwesomeIcon.tsx b/leaky-ships/src/components/FontAwesomeIcon.tsx
index 10f54ae..4f7b248 100644
--- a/leaky-ships/src/components/FontAwesomeIcon.tsx
+++ b/leaky-ships/src/components/FontAwesomeIcon.tsx
@@ -1,34 +1,58 @@
-import { IconDefinition } from "@fortawesome/pro-solid-svg-icons"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome"
import classNames from "classnames"
-import { JSX } from "solid-js"
+import { Show } from "solid-js"
+import classList from "~/lib/utils/get-class-list-from-props"
-function FontAwesomeIcon({
- icon,
- className,
- style,
-}: {
- icon: IconDefinition
- className?: string
- style?: JSX.CSSProperties
-}) {
+function Path(props: { d: string | string[] }) {
return (
-
+
)
}
-export default FontAwesomeIcon
+export function FontAwesomeIcon(
+ props: {
+ icon: IconDefinition
+ class?: string
+ className?: never
+ } & FontAwesomeIconProps,
+) {
+ return (
+
+ )
+}
diff --git a/leaky-ships/src/components/Gamefield/GamefieldPointer.tsx b/leaky-ships/src/components/Gamefield/GamefieldPointer.tsx
index 31a44c4..fb58fe3 100644
--- a/leaky-ships/src/components/Gamefield/GamefieldPointer.tsx
+++ b/leaky-ships/src/components/Gamefield/GamefieldPointer.tsx
@@ -2,7 +2,7 @@ import { faCrosshairs } from "@fortawesome/pro-solid-svg-icons"
import { faRadar } from "@fortawesome/pro-thin-svg-icons"
import classNames from "classnames"
import {} from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { PointerProps } from "../../interfaces/frontend"
function GamefieldPointer({
diff --git a/leaky-ships/src/components/Gamefield/HitElems.tsx b/leaky-ships/src/components/Gamefield/HitElems.tsx
index 3ca8f54..572fd16 100644
--- a/leaky-ships/src/components/Gamefield/HitElems.tsx
+++ b/leaky-ships/src/components/Gamefield/HitElems.tsx
@@ -1,5 +1,5 @@
import { faBurst, faXmark } from "@fortawesome/pro-solid-svg-icons"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import useIndex from "~/hooks/useIndex"
import { Hit } from "../../interfaces/frontend"
diff --git a/leaky-ships/src/components/Gamefield/Item.tsx b/leaky-ships/src/components/Gamefield/Item.tsx
index 00db5a7..f2a9cc5 100644
--- a/leaky-ships/src/components/Gamefield/Item.tsx
+++ b/leaky-ships/src/components/Gamefield/Item.tsx
@@ -1,5 +1,5 @@
import { createEffect, createSignal } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { useDrawProps } from "~/hooks/useDrawProps"
// import { HexColorPicker } from "react-colorful"
import classNames from "classnames"
@@ -61,10 +61,7 @@ function Item({
class="pixelart"
/>
) : (
-
+
)}
{text}
diff --git a/leaky-ships/src/components/Lobby/LobbyFrame.tsx b/leaky-ships/src/components/Lobby/LobbyFrame.tsx
index ad46791..ec3d811 100644
--- a/leaky-ships/src/components/Lobby/LobbyFrame.tsx
+++ b/leaky-ships/src/components/Lobby/LobbyFrame.tsx
@@ -4,7 +4,7 @@ import {
} from "@fortawesome/pro-solid-svg-icons"
import { JSX, createEffect, createMemo, createSignal } from "solid-js"
import { useNavigate } from "solid-start"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { useGameProps } from "~/hooks/useGameProps"
import { useSession } from "~/hooks/useSession"
import useSocket from "~/hooks/useSocket"
@@ -94,10 +94,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
{isConnected ? (
{payload?.gamePin ?? "----"}
) : (
-
+
)}
)}
@@ -145,7 +142,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
}}
>
LEAVE
-
+
diff --git a/leaky-ships/src/components/Lobby/Player.tsx b/leaky-ships/src/components/Lobby/Player.tsx
index 4a4d4ab..e1dbb1f 100644
--- a/leaky-ships/src/components/Lobby/Player.tsx
+++ b/leaky-ships/src/components/Lobby/Player.tsx
@@ -9,7 +9,7 @@ import {
import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
import classNames from "classnames"
import { createEffect, createMemo, createSignal } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { useGameProps } from "~/hooks/useGameProps"
import { socket } from "~/lib/socket"
import Button from "./Button"
@@ -38,11 +38,7 @@ function HourGlass() {
}, [count])
return (
-
+
)
}
@@ -75,7 +71,7 @@ function Player({
{primary() ? (
@@ -97,11 +93,11 @@ function Player({
>
Ready
{isReady && isConnected ? (
-
+
) : primary() ? (
) : (
diff --git a/leaky-ships/src/components/Lobby/SettingsFrame/Setting.tsx b/leaky-ships/src/components/Lobby/SettingsFrame/Setting.tsx
index 4925ec1..71ee464 100644
--- a/leaky-ships/src/components/Lobby/SettingsFrame/Setting.tsx
+++ b/leaky-ships/src/components/Lobby/SettingsFrame/Setting.tsx
@@ -4,7 +4,7 @@ import {
} from "@fortawesome/pro-solid-svg-icons"
import classNames from "classnames"
import { JSX, createMemo } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { setGameSetting } from "~/components/Gamefield/EventBar"
import { useGameProps } from "~/hooks/useGameProps"
import { GameSettingKeys } from "../../../interfaces/frontend"
@@ -25,14 +25,14 @@ function Setting({
{children}
void }) {
onClick={closeSettings}
>
@@ -52,8 +52,8 @@ function Settings({ closeSettings }: { closeSettings: () => void }) {
}
>
diff --git a/leaky-ships/src/components/OptionButton.tsx b/leaky-ships/src/components/OptionButton.tsx
index e23ab9e..bfc0e54 100644
--- a/leaky-ships/src/components/OptionButton.tsx
+++ b/leaky-ships/src/components/OptionButton.tsx
@@ -1,7 +1,7 @@
import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
import classNames from "classnames"
import { JSX } from "solid-js"
-import FontAwesomeIcon from "./FontAwesomeIcon"
+import { FontAwesomeIcon } from "./FontAwesomeIcon"
function OptionButton({
id,
@@ -30,7 +30,7 @@ function OptionButton({
>
{node ? node : id}
diff --git a/leaky-ships/src/lib/utils/get-class-list-from-props.ts b/leaky-ships/src/lib/utils/get-class-list-from-props.ts
new file mode 100644
index 0000000..0ff80a4
--- /dev/null
+++ b/leaky-ships/src/lib/utils/get-class-list-from-props.ts
@@ -0,0 +1,60 @@
+/* eslint-disable solid/reactivity */
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome"
+
+// Get CSS class list from a props object
+export default function classList(props: FontAwesomeIconProps) {
+ const {
+ beat,
+ fade,
+ beatFade,
+ bounce,
+ shake,
+ flash,
+ spin,
+ spinPulse,
+ spinReverse,
+ pulse,
+ fixedWidth,
+ inverse,
+ border,
+ listItem,
+ flip,
+ size,
+ rotation,
+ pull,
+ } = props
+
+ // map of CSS class names to properties
+ const classes = {
+ "fa-beat": beat,
+ "fa-fade": fade,
+ "fa-beat-fade": beatFade,
+ "fa-bounce": bounce,
+ "fa-shake": shake,
+ "fa-flash": flash,
+ "fa-spin": spin,
+ "fa-spin-reverse": spinReverse,
+ "fa-spin-pulse": spinPulse,
+ "fa-pulse": pulse,
+ "fa-fw": fixedWidth,
+ "fa-inverse": inverse,
+ "fa-border": border,
+ "fa-li": listItem,
+ // @ts-expect-error either true or direction
+ "fa-flip": flip === true,
+ "fa-flip-horizontal": flip === "horizontal" || flip === "both",
+ "fa-flip-vertical": flip === "vertical" || flip === "both",
+ [`fa-${size}`]: typeof size !== "undefined" && size !== null,
+ [`fa-rotate-${rotation}`]:
+ // @ts-expect-error is a direction
+ typeof rotation !== "undefined" && rotation !== null && rotation !== 0,
+ [`fa-pull-${pull}`]: typeof pull !== "undefined" && pull !== null,
+ "fa-swap-opacity": props.swapOpacity,
+ }
+
+ // map over all the keys in the classes object
+ // return an array of the keys where the value for the key is not null
+ return Object.keys(classes)
+ .map((key) => (classes[key] ? key : null))
+ .filter((key) => key)
+}
diff --git a/leaky-ships/src/routes/signin.tsx b/leaky-ships/src/routes/signin.tsx
index 0cb64c1..a421293 100644
--- a/leaky-ships/src/routes/signin.tsx
+++ b/leaky-ships/src/routes/signin.tsx
@@ -3,7 +3,7 @@ import { faLeftLong } from "@fortawesome/pro-solid-svg-icons"
import classNames from "classnames"
import { createEffect, createSignal } from "solid-js"
import { useNavigate, useSearchParams } from "solid-start"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import { useSession } from "~/hooks/useSession"
// import { toast } from "react-toastify"
diff --git a/leaky-ships/src/routes/start.tsx b/leaky-ships/src/routes/start.tsx
index 97b9b22..ed75f2d 100644
--- a/leaky-ships/src/routes/start.tsx
+++ b/leaky-ships/src/routes/start.tsx
@@ -7,7 +7,7 @@ import status from "http-status"
import { createEffect, createMemo, createSignal } from "solid-js"
import { useLocation, useNavigate, useSearchParams } from "solid-start"
import BurgerMenu from "~/components/BurgerMenu"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
import Logo from "~/components/Logo"
import OptionButton from "~/components/OptionButton"
import { useGameProps } from "~/hooks/useGameProps"