Working ship placement

leaky-ships/components/Gamefield/Ship.tsx

@@ -0,0 +1,34 @@
+import { ShipProps } from "../../interfaces/frontend"
+import { useGameProps } from "@hooks/useGameProps"
+import classNames from "classnames"
+import React, { CSSProperties } from "react"
+
+function Ship({
+  props: { size, variant, x, y },
+  preview,
+}: {
+  props: ShipProps
+  preview?: boolean
+}) {
+  const { payload, removeShip } = useGameProps()
+  const filename = `ship_blue_${size}x_${variant}.gif`
+
+  return (
+    <div
+      className={classNames("ship", "s" + size, {
+        preview: preview,
+        interactive: payload?.game?.state === "starting",
+      })}
+      style={{ "--x": x, "--y": y } as CSSProperties}
+      onClick={() => {
+        if (payload?.game?.state !== "starting") return
+        removeShip({ size, variant, x, y })
+        useGameProps.setState({ mode: size - 2 })
+      }}
+    >
+      <img src={"/assets/" + filename} alt={filename} />
+    </div>
+  )
+}
+
+export default Ship