- isColor() ? setActive(true) : props.callback && props.callback()
- }
- >
+
- {/* */}
+ setColor(e.hex)}
+ colors={colors}
+ triangle="hide"
+ />
-
{
+ isColor() ? setActive((e) => !e) : props.callback && props.callback()
+ }}
>
{typeof props.icon === "string" ? (
![]()
)}
-
+
{props.text}
)
diff --git a/leaky-ships/src/hooks/useDraw.ts b/leaky-ships/src/hooks/useDraw.tsx
similarity index 75%
rename from leaky-ships/src/hooks/useDraw.ts
rename to leaky-ships/src/hooks/useDraw.tsx
index bde1e0b..d83c456 100644
--- a/leaky-ships/src/hooks/useDraw.ts
+++ b/leaky-ships/src/hooks/useDraw.tsx
@@ -1,7 +1,9 @@
import { createEffect, createSignal, onCleanup } from "solid-js"
import { socket } from "~/lib/socket"
import { Draw, DrawLineProps, PlayerEvent, Point } from "../interfaces/frontend"
-import { useDrawProps } from "./useDrawProps"
+import { color, enable, shouldHide } from "./useDrawProps"
+
+let canvasRef: HTMLCanvasElement
function drawLine({ prevPoint, currentPoint, ctx, color }: Draw) {
const { x: currX, y: currY } = currentPoint
@@ -22,38 +24,41 @@ function drawLine({ prevPoint, currentPoint, ctx, color }: Draw) {
ctx.fill()
}
-export const useDraw = () => {
+function clear() {
+ const canvas = canvasRef
+ if (!canvas) return
+
+ const ctx = canvas.getContext("2d")
+ if (!ctx) return
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+}
+
+export function DrawingCanvas() {
const [mouseDown, setMouseDown] = createSignal(false)
- let canvasRef: HTMLCanvasElement
let prevPoint: null | Point
- const { color } = useDrawProps
-
const onMouseDown = () => setMouseDown(true)
- const clear = () => {
- const canvas = canvasRef
- if (!canvas) return
-
- const ctx = canvas.getContext("2d")
- if (!ctx) return
-
- ctx.clearRect(0, 0, canvas.width, canvas.height)
- }
-
createEffect(() => {
const canvas = canvasRef
if (!canvas) return
const handler = (e: MouseEvent) => {
- if (!mouseDown) return
+ if (!mouseDown()) return
const currentPoint = computePointInCanvas(e)
const ctx = canvasRef?.getContext("2d")
if (!ctx || !currentPoint) return
- drawLine({ ctx, currentPoint, prevPoint: prevPoint, color: color() })
+ const props = {
+ currentPoint,
+ prevPoint: prevPoint,
+ color: color(),
+ }
+ socket.emit("draw-line", props)
+ drawLine({ ctx, ...props })
prevPoint = currentPoint
}
@@ -121,5 +126,22 @@ export const useDraw = () => {
})
})
- return { canvasRef: canvasRef!, onMouseDown, clear }
+ return (
+
+ )
+}
+
+export function clearDrawing() {
+ clear()
+ socket.emit("canvas-clear")
}
diff --git a/leaky-ships/src/hooks/useDrawProps.ts b/leaky-ships/src/hooks/useDrawProps.ts
index 35a9070..ba89601 100644
--- a/leaky-ships/src/hooks/useDrawProps.ts
+++ b/leaky-ships/src/hooks/useDrawProps.ts
@@ -1,19 +1,30 @@
import { createSignal } from "solid-js"
-const [enable, setEnable] = createSignal(false)
-const [shouldHide, setShouldHide] = createSignal(false)
-const [color, setColor] = createSignal("#b32aa9")
+export const colors = [
+ "#ff4400",
+ "#fea800",
+ "#ffd635",
+ "#00a367",
+ "#7eed55",
+ "#2351a6",
+ "#3590ea",
+ "#52e9f3",
+ "#811e9f",
+ "#b34abf",
+ "#fe99a9",
+ "#9c6926",
+ // "#ffffff",
+ "#d3d7d8",
+ "#898d90",
+ "#000000",
+]
-export const useDrawProps = {
- enable,
- setEnable,
- shouldHide,
- setShouldHide,
- color,
- setColor,
- reset: () => {
- setEnable(false)
- setShouldHide(false)
- setColor("#b32aa9")
- },
+export const [enable, setEnable] = createSignal(false)
+export const [shouldHide, setShouldHide] = createSignal(false)
+export const [color, setColor] = createSignal("#b32aa9")
+
+export function reset() {
+ setEnable(false)
+ setShouldHide(false)
+ setColor("#b32aa9")
}
diff --git a/leaky-ships/src/hooks/useGameProps.ts b/leaky-ships/src/hooks/useGameProps.ts
index 0f4eb40..80897d8 100644
--- a/leaky-ships/src/hooks/useGameProps.ts
+++ b/leaky-ships/src/hooks/useGameProps.ts
@@ -129,14 +129,6 @@ export function setPlayer(newUsers: Players): string | null {
setUsers(0, newUsers)
setUsers(1, newUsers)
const body = getPayloadwithChecksum(getPayloadFromProps())
- if (!body.hash) {
- console.log("Something is wrong... ")
- // toast.warn("Something is wrong... ", {
- // toastId: "st_wrong",
- // theme: "colored",
- // })
- return null
- }
hash = body.hash
setGameProps("hash", hash)
return hash
diff --git a/leaky-ships/src/hooks/useSocket.ts b/leaky-ships/src/hooks/useSocket.ts
index 534d7cc..c3b0e5c 100644
--- a/leaky-ships/src/hooks/useSocket.ts
+++ b/leaky-ships/src/hooks/useSocket.ts
@@ -2,6 +2,8 @@ import status from "http-status"
// import { toast } from "react-toastify"
import { createEffect, createSignal, onCleanup } from "solid-js"
import { useNavigate } from "solid-start"
+import { getPayloadFromProps } from "~/lib/getPayloadFromProps"
+import { getPayloadwithChecksum } from "~/lib/getPayloadwithChecksum"
import { socket } from "~/lib/socket"
import { GamePropsSchema, GameState } from "~/lib/zodSchemas"
import { isAuthenticated } from "~/routes/start"
@@ -70,8 +72,11 @@ function useSocket() {
let message: string
if (type !== "disconnect") {
const { hash } = event
+ const hashAlreadyMatches =
+ hash === getPayloadwithChecksum(getPayloadFromProps()).hash
+ if (hashAlreadyMatches) return
const newHash = setPlayer(event.users)
- if (newHash && newHash !== hash) {
+ if (newHash !== hash) {
console.log("hash", hash, newHash)
socket.emit("update", (body) => {
console.log("Update is needed after", type)
diff --git a/leaky-ships/src/styles/App.scss b/leaky-ships/src/styles/App.scss
index 361639c..c1f8701 100644
--- a/leaky-ships/src/styles/App.scss
+++ b/leaky-ships/src/styles/App.scss
@@ -395,12 +395,12 @@ body {
width: 128px;
position: relative;
- .react-colorful-wrapper {
+ .color-picker-wrapper {
pointer-events: none;
opacity: 0;
transition: 0.2s;
position: absolute;
- top: -225px;
+ bottom: 105%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
@@ -454,6 +454,10 @@ body {
color: black;
font-size: 0.75em;
font-weight: bold;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
}
}