aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Little changes

Browse source
This commit is contained in:
aronmal 2023-09-07 15:46:02 +02:00
parent a3eab18535
commit 1e7b46ff69
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 91 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

1
leaky-ships/package.json
View file

@ -37,7 +37,6 @@
"socket.io-client": "^4.7.2",
"solid-js": "^1.7.11",
"solid-start": "^0.3.5",
"solid-zustand": "^1.7.0",
"unique-names-generator": "^4.7.1",
"zod": "3.21.1"
},

40
leaky-ships/pnpm-lock.yaml generated
View file

@ -87,9 +87,6 @@ dependencies:
solid-start:
specifier: ^0.3.5
version: 0.3.5(@solidjs/meta@0.28.6)(@solidjs/router@0.8.3)(solid-js@1.7.11)(solid-start-node@0.3.5)(vite@4.4.9)
solid-zustand:
specifier: ^1.7.0
version: 1.7.0(solid-js@1.7.11)(zustand@4.4.1)
unique-names-generator:
specifier: ^4.7.1
version: 4.7.1
@ -5115,16 +5112,6 @@ packages:
- '@nuxt/kit'
- supports-color
/solid-zustand@1.7.0(solid-js@1.7.11)(zustand@4.4.1):
resolution: {integrity: sha512-BWLSYIUOr7qhAdY+IFh1fA3+s6LvqQuxmHgzuZ8BQHHBcoq/a1S+lgDbWQmFF8fhmJyXHbSbp/WlPJgvdjmSiw==}
peerDependencies:
solid-js: ^1.6.0
zustand: ^4.3.0
dependencies:
solid-js: 1.7.11
zustand: 4.4.1(react@18.2.0)
dev: false
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@ -5494,14 +5481,6 @@ packages:
punycode: 2.3.0
dev: true
/use-sync-external-store@1.2.0(react@18.2.0):
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
dev: false
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: true
@ -5721,22 +5700,3 @@ packages:
/zod@3.21.1:
resolution: {integrity: sha512-+dTu2m6gmCbO9Ahm4ZBDapx2O6ZY9QSPXst2WXjcznPMwf2YNpn3RevLx4KkZp1OPW/ouFcoBtBzFz/LeY69oA==}
/zustand@4.4.1(react@18.2.0):
resolution: {integrity: sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==}
engines: {node: '>=12.7.0'}
peerDependencies:
'@types/react': '>=16.8'
immer: '>=9.0'
react: '>=16.8'
peerDependenciesMeta:
'@types/react':
optional: true
immer:
optional: true
react:
optional: true
dependencies:
react: 18.2.0
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false

12
leaky-ships/src/components/Gamefield/EventBar.tsx
View file

@ -50,7 +50,7 @@ import { EventBarModes } from "../../interfaces/frontend"
import Item from "./Item"
function EventBar(props: { clear: () => void }) {
const { shouldHide, color } = useDrawProps()
const { shouldHide, setShouldHide, setEnable, color } = useDrawProps
const { selfIndex, isActiveIndex, selfUser, ships } = useSession()
const navigator = useNavigate()
@ -186,12 +186,12 @@ function EventBar(props: { clear: () => void }) {
],
draw: [
{ icon: faBroomWide, text: "Clear", callback: props.clear },
{ icon: faPalette, text: "Color", iconColor: color },
{ icon: faPalette, text: "Color", iconColor: color() },
{
icon: shouldHide ? faEye : faEyeSlash,
text: shouldHide ? "Show" : "Hide",
icon: shouldHide() ? faEye : faEyeSlash,
text: shouldHide() ? "Show" : "Hide",
callback: () => {
useDrawProps.setState({ shouldHide: !shouldHide })
setShouldHide((e) => !e)
},
},
],
@ -262,7 +262,7 @@ function EventBar(props: { clear: () => void }) {
})
createEffect(() => {
useDrawProps.setState({ enable: menu() === "draw" })
setEnable(menu() === "draw")
})
// createEffect(() => {

8
leaky-ships/src/components/Gamefield/Gamefield.tsx
View file

@ -36,7 +36,7 @@ function Gamefield() {
const navigator = useNavigate()
const { isConnected } = useSocket()
const usingDraw = useDraw()
const { enable, color, shouldHide } = useDrawProps()
const { enable, color, shouldHide } = useDrawProps
createEffect(() => {
if (
@ -119,9 +119,9 @@ function Gamefield() {
<canvas
style={{
opacity: shouldHide ? 0 : 1,
"box-shadow": enable ? "inset 0 0 0 2px " + color : "none",
"pointer-events": enable && !shouldHide ? "auto" : "none",
opacity: shouldHide() ? 0 : 1,
"box-shadow": enable() ? "inset 0 0 0 2px " + color : "none",
"pointer-events": enable() && !shouldHide() ? "auto" : "none",
}}
ref={usingDraw.canvasRef}
onMouseDown={usingDraw.onMouseDown}

38
leaky-ships/src/components/OptionButton.tsx
View file

@ -3,36 +3,46 @@ import classNames from "classnames"
import { JSX, Show } from "solid-js"
import { FontAwesomeIcon } from "./FontAwesomeIcon"
const styles = {
wrapper:
"flex w-full flex-row items-center justify-between rounded-xl py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8",
disabled:
"border-b-4 border-shield-gray bg-voidDark active:border-b-0 active:border-t-4",
enabled: "border-4 border-dashed border-slate-600 bg-red-950",
icon: "ml-2 w-10 text-xl sm:ml-12 sm:text-4xl",
}
function OptionButton(props: {
text: string
icon: IconDefinition
callback?: () => void
node?: JSX.Element
children?: JSX.Element
nodeWhen?: boolean
disabled?: boolean
}) {
return (
<Show
when={!props.nodeWhen}
fallback={
<div class={classNames(styles.wrapper, styles.enabled)}>
{props.children}
<FontAwesomeIcon class={styles.icon} icon={props.icon} />
</div>
}
>
<button
class={classNames(
"flex w-full flex-row items-center justify-between rounded-xl py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8",
!props.disabled
? "border-b-4 border-shield-gray bg-voidDark active:border-b-0 active:border-t-4"
: "border-4 border-dashed border-slate-600 bg-red-950",
styles.wrapper,
!props.disabled ? styles.disabled : styles.enabled,
)}
onClick={() => props.callback && setTimeout(props.callback, 200)}
disabled={props.disabled}
title={!props.disabled ? "" : "Please login"}
>
<Show
when={props.nodeWhen}
fallback={<span class="mx-auto">{props.text}</span>}
children={props.node}
/>
<FontAwesomeIcon
class="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
icon={props.icon}
/>
<span class="mx-auto">{props.text}</span>
<FontAwesomeIcon class={styles.icon} icon={props.icon} />
</button>
</Show>
)
}

4
leaky-ships/src/hooks/useDraw.ts
View file

@ -28,7 +28,7 @@ export const useDraw = () => {
let canvasRef: HTMLCanvasElement
let prevPoint: null | Point
const { color } = useDrawProps()
const { color } = useDrawProps
const onMouseDown = () => setMouseDown(true)
@ -53,7 +53,7 @@ export const useDraw = () => {
const ctx = canvasRef?.getContext("2d")
if (!ctx || !currentPoint) return
drawLine({ ctx, currentPoint, prevPoint: prevPoint, color })
drawLine({ ctx, currentPoint, prevPoint: prevPoint, color: color() })
prevPoint = currentPoint
}

37
leaky-ships/src/hooks/useDrawProps.ts
View file

@ -1,26 +1,19 @@
import create from "solid-zustand"
import { createSignal } from "solid-js"
const initialState: {
enable: boolean
shouldHide: boolean
color: string
} = {
enable: false,
shouldHide: false,
color: "#b32aa9",
}
const [enable, setEnable] = createSignal(false)
const [shouldHide, setShouldHide] = createSignal(false)
const [color, setColor] = createSignal("#b32aa9")
export type State = typeof initialState
export type Action = {
setColor: (color: string) => void
reset: () => void
}
export const useDrawProps = create<State & Action>()((set) => ({
...initialState,
setColor: (color) => set((state) => ({ ...state, color })),
export const useDrawProps = {
enable,
setEnable,
shouldHide,
setShouldHide,
color,
setColor,
reset: () => {
set(initialState)
setEnable(false)
setShouldHide(false)
setColor("#b32aa9")
},
}))
}

68
leaky-ships/src/routes/start.tsx
View file

@ -52,13 +52,17 @@ export default function Start() {
const [searchParams] = useSearchParams()
const query = () => {
switch (searchParams["q"]) {
case "join":
return { join: true }
case "watch":
return { watch: true }
default:
return {}
const q = searchParams["q"]
return {
get join() {
return q === "join"
},
get watch() {
return q === "watch"
},
get available() {
return !!q
},
}
}
@ -182,23 +186,17 @@ export default function Start() {
icon={faUserPlus}
disabled={!session()}
nodeWhen={query().join && !!session()}
node={
<input value={otp()} onInput={(e) => setOtp(e.target.value)} />
// <OtpInput
// shouldAutoFocus
// containerStyle={{ color: "initial" }}
// value={otp}
// onChange={setOtp}
// numInputs={4}
// inputType="number"
// inputStyle="inputStyle"
// placeholder="0000"
// renderSeparator={<span>-</span>}
// renderInput={(props) => <input {...props} />}
// />
>
<input
value={otp()}
onInput={(e) =>
setOtp((otp) => {
const value = e.target.value
return /^\d{0,4}$/.test(value) ? value : otp
})
}
/>
</OptionButton>
<OptionButton
text="Zuschauen"
icon={faEye}
@ -212,25 +210,17 @@ export default function Start() {
)
}
nodeWhen={query().watch}
node={
<>
{
// <OtpInput
// shouldAutoFocus
// containerStyle={{ color: "initial" }}
// value={otp}
// onChange={setOtp}
// numInputs={4}
// inputType="number"
// inputStyle="inputStyle"
// placeholder="0000"
// renderSeparator={<span>-</span>}
// renderInput={(props) => <input {...props} />}
// />
}
</>
>
<input
value={otp()}
onInput={(e) =>
setOtp((otp) => {
const value = e.target.value
return /^\d{0,4}$/.test(value) ? value : otp
})
}
/>
</OptionButton>
</div>
</div>
</div>