From 8f5cddfc5ef754832060841e3a8b5583b4d2041e Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 13 Jan 2023 09:16:33 +0100 Subject: [PATCH 1/6] Use fontawesome pro icons --- leaky-ships/components/HitElems.tsx | 2 +- leaky-ships/components/Target.tsx | 2 +- leaky-ships/package-lock.json | 108 ++++++++++++++++++++++++---- leaky-ships/package.json | 8 ++- 4 files changed, 102 insertions(+), 18 deletions(-) diff --git a/leaky-ships/components/HitElems.tsx b/leaky-ships/components/HitElems.tsx index e304b6e..38ab589 100644 --- a/leaky-ships/components/HitElems.tsx +++ b/leaky-ships/components/HitElems.tsx @@ -1,4 +1,4 @@ -import { faBurst, faXmark } from '@fortawesome/free-solid-svg-icons'; +import { faBurst, faXmark } from '@fortawesome/pro-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import { HitType } from '../interfaces'; diff --git a/leaky-ships/components/Target.tsx b/leaky-ships/components/Target.tsx index ce1f755..70f7e85 100644 --- a/leaky-ships/components/Target.tsx +++ b/leaky-ships/components/Target.tsx @@ -1,4 +1,4 @@ -import { faCrosshairs } from '@fortawesome/free-solid-svg-icons'; +import { faCrosshairs } from '@fortawesome/pro-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import classNames from 'classnames'; diff --git a/leaky-ships/package-lock.json b/leaky-ships/package-lock.json index 00f43bd..21e8a9c 100644 --- a/leaky-ships/package-lock.json +++ b/leaky-ships/package-lock.json @@ -9,9 +9,13 @@ "version": "0.1.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.1", - "@fortawesome/free-regular-svg-icons": "^6.2.1", - "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/pro-duotone-svg-icons": "^6.2.1", + "@fortawesome/pro-light-svg-icons": "^6.2.1", + "@fortawesome/pro-regular-svg-icons": "^6.2.1", + "@fortawesome/pro-solid-svg-icons": "^6.2.1", + "@fortawesome/pro-thin-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@fortawesome/sharp-solid-svg-icons": "^6.2.1", "@next/font": "13.1.1", "@types/node": "18.11.18", "@types/react": "18.0.26", @@ -94,10 +98,10 @@ "node": ">=6" } }, - "node_modules/@fortawesome/free-regular-svg-icons": { + "node_modules/@fortawesome/pro-duotone-svg-icons": { "version": "6.2.1", - "resolved": "https://npm.fontawesome.com/@fortawesome/free-regular-svg-icons/-/6.2.1/free-regular-svg-icons-6.2.1.tgz", - "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-duotone-svg-icons/-/6.2.1/pro-duotone-svg-icons-6.2.1.tgz", + "integrity": "sha512-8kG2rcHxGdb8yGb2KLZN7Ht014Nf4lefvXP+pihJAE9Jy515g/xPwglkFMu3Ue6MBtcdrLPIYirV8664ubAVgA==", "dependencies": { "@fortawesome/fontawesome-common-types": "6.2.1" }, @@ -105,10 +109,43 @@ "node": ">=6" } }, - "node_modules/@fortawesome/free-solid-svg-icons": { + "node_modules/@fortawesome/pro-light-svg-icons": { "version": "6.2.1", - "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/6.2.1/free-solid-svg-icons-6.2.1.tgz", - "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/6.2.1/pro-light-svg-icons-6.2.1.tgz", + "integrity": "sha512-QTs61d6jAnYhjXuaRUTexv+KQuxzkwG5jjOGBQOGOnOoGZgho6AEU/a5r2Awgv5o+It50C/LduPnboA31P1NUQ==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/pro-regular-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.2.1/pro-regular-svg-icons-6.2.1.tgz", + "integrity": "sha512-U3JCqJjwkNSrxgDafsBBUQBbOlvTsa4Odtn7m01NDko45pZu2nh3eqCexovy4y6LzWXXP/Spq+AO29CBpCW8yA==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/pro-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.2.1/pro-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-gIGrv/hcw5/UsW0swBfxL9jwb2F+Yut+9QY47ZPs8+Ac9/AmYxIzJ31ZnYawwLdrxU/09Unc+AHbTfn0QXLfvQ==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/pro-thin-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-thin-svg-icons/-/6.2.1/pro-thin-svg-icons-6.2.1.tgz", + "integrity": "sha512-X+lubysMJrNf/Qw9lDt7BkD9An0pwOEzOMMTaY2dEKN901SJENJ/Y5Ne23CCWSZwAHydoz5EN4JCMVJS+wEkvQ==", "dependencies": { "@fortawesome/fontawesome-common-types": "6.2.1" }, @@ -128,6 +165,17 @@ "react": ">=16.3" } }, + "node_modules/@fortawesome/sharp-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/sharp-solid-svg-icons/-/6.2.1/sharp-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-fK/gm8TDlMEWo1x7KuQD1ZfD98PF28wtmQHs8AgdQk0GS0QV0wBfxOWEmG+BM857Obras9xjSj7p7DwhfRWCZA==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -3515,18 +3563,42 @@ "@fortawesome/fontawesome-common-types": "6.2.1" } }, - "@fortawesome/free-regular-svg-icons": { + "@fortawesome/pro-duotone-svg-icons": { "version": "6.2.1", - "resolved": "https://npm.fontawesome.com/@fortawesome/free-regular-svg-icons/-/6.2.1/free-regular-svg-icons-6.2.1.tgz", - "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-duotone-svg-icons/-/6.2.1/pro-duotone-svg-icons-6.2.1.tgz", + "integrity": "sha512-8kG2rcHxGdb8yGb2KLZN7Ht014Nf4lefvXP+pihJAE9Jy515g/xPwglkFMu3Ue6MBtcdrLPIYirV8664ubAVgA==", "requires": { "@fortawesome/fontawesome-common-types": "6.2.1" } }, - "@fortawesome/free-solid-svg-icons": { + "@fortawesome/pro-light-svg-icons": { "version": "6.2.1", - "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/6.2.1/free-solid-svg-icons-6.2.1.tgz", - "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/6.2.1/pro-light-svg-icons-6.2.1.tgz", + "integrity": "sha512-QTs61d6jAnYhjXuaRUTexv+KQuxzkwG5jjOGBQOGOnOoGZgho6AEU/a5r2Awgv5o+It50C/LduPnboA31P1NUQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/pro-regular-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.2.1/pro-regular-svg-icons-6.2.1.tgz", + "integrity": "sha512-U3JCqJjwkNSrxgDafsBBUQBbOlvTsa4Odtn7m01NDko45pZu2nh3eqCexovy4y6LzWXXP/Spq+AO29CBpCW8yA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/pro-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.2.1/pro-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-gIGrv/hcw5/UsW0swBfxL9jwb2F+Yut+9QY47ZPs8+Ac9/AmYxIzJ31ZnYawwLdrxU/09Unc+AHbTfn0QXLfvQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/pro-thin-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/pro-thin-svg-icons/-/6.2.1/pro-thin-svg-icons-6.2.1.tgz", + "integrity": "sha512-X+lubysMJrNf/Qw9lDt7BkD9An0pwOEzOMMTaY2dEKN901SJENJ/Y5Ne23CCWSZwAHydoz5EN4JCMVJS+wEkvQ==", "requires": { "@fortawesome/fontawesome-common-types": "6.2.1" } @@ -3539,6 +3611,14 @@ "prop-types": "^15.8.1" } }, + "@fortawesome/sharp-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/sharp-solid-svg-icons/-/6.2.1/sharp-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-fK/gm8TDlMEWo1x7KuQD1ZfD98PF28wtmQHs8AgdQk0GS0QV0wBfxOWEmG+BM857Obras9xjSj7p7DwhfRWCZA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, "@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", diff --git a/leaky-ships/package.json b/leaky-ships/package.json index 539f794..03e4c91 100644 --- a/leaky-ships/package.json +++ b/leaky-ships/package.json @@ -10,9 +10,13 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.1", - "@fortawesome/free-regular-svg-icons": "^6.2.1", - "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/pro-duotone-svg-icons": "^6.2.1", + "@fortawesome/pro-light-svg-icons": "^6.2.1", + "@fortawesome/pro-regular-svg-icons": "^6.2.1", + "@fortawesome/pro-solid-svg-icons": "^6.2.1", + "@fortawesome/pro-thin-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@fortawesome/sharp-solid-svg-icons": "^6.2.1", "@next/font": "13.1.1", "@types/node": "18.11.18", "@types/react": "18.0.26", From c3c7fd0eea1b558b35a9377db6606b8f7bc465fe Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 13 Jan 2023 13:34:14 +0100 Subject: [PATCH 2/6] half radar implementation --- leaky-ships/components/Target.tsx | 24 +++++++++++++++++--- leaky-ships/components/useGameEvent.tsx | 20 ++++++++--------- leaky-ships/styles/App.scss | 29 ++++++++++++++++++++++--- 3 files changed, 57 insertions(+), 16 deletions(-) diff --git a/leaky-ships/components/Target.tsx b/leaky-ships/components/Target.tsx index 70f7e85..190921f 100644 --- a/leaky-ships/components/Target.tsx +++ b/leaky-ships/components/Target.tsx @@ -3,11 +3,29 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import classNames from 'classnames'; import { TargetType } from '../interfaces'; +import { faRadar } from '@fortawesome/pro-thin-svg-icons'; -function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: TargetType }) { +function Target({ props: { + preview, + type, + edges, + imply, + x, + y, + show +} }: { + props: { + preview?: boolean, + type: string, + edges: string[], + imply: boolean, + } & TargetType +}) { + const isRadar = type === 'radar' + const style = !isRadar ? { '--x': x, '--y': y } : { '--x1': x - 1, '--x2': x + 2, '--y1': y - 1, '--y2': y + 2 } return ( -
- +
+
) } diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index e247708..6d7b2e2 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -5,8 +5,8 @@ import Item from './Item'; import Target from './Target'; export const modes = { - none: { xEnable: true, yEnable: true, type: 'none' }, - radar: { xEnable: true, yEnable: true, type: 'radar' }, + none: { xEnable: false, yEnable: false, type: 'none' }, + radar: { xEnable: false, yEnable: false, type: 'radar' }, hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' }, vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' }, missle: { xEnable: false, yEnable: false, type: 'missle' } @@ -74,7 +74,7 @@ function useGameEvent(count: number) { const Targets = useCallback((targets: TargetListType[], preview?: boolean) => { const { type } = modes[mode] - return targets.map(({ target, params }, i) => ) + return targets.map(({ target, params }, i) => ) }, [mode]) useEffect(() => { @@ -162,7 +162,7 @@ function useGameEvent(count: number) { // early return to start cooldown only when about to show up const autoTimeout = setTimeout(() => { setAppearOK(!targetPreview.show) - }, 500); + }, 600); // or abort if movement is repeated early return () => { @@ -177,12 +177,12 @@ function useGameEvent(count: number) { const eventBar = useMemo(() => { const items: ItemsType[] = [ - { icon: 'burger-menu', text: 'Menu' }, - { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 }, - { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 }, - { icon: 'scope', text: 'Fire missle', type: 'missle' }, - { icon: 'gear', text: 'Settings' } - ] + { icon: 'burger-menu', text: 'Menu' }, + { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 }, + { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 }, + { icon: 'scope', text: 'Fire missle', type: 'missle' }, + { icon: 'gear', text: 'Settings' } + ] return (
{items.map((e, i) => ( diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index bea03e9..335bf39 100644 --- a/leaky-ships/styles/App.scss +++ b/leaky-ships/styles/App.scss @@ -168,6 +168,29 @@ body { @include transition(.5s); } + &.radar { + --color: limegreen; + border: 5px solid var(--color); + grid-column-start: var(--x1) !important; + grid-column-end: var(--x2) !important; + grid-row-start: var(--y1) !important; + grid-row-end: var(--y2) !important; + + &.imply { + box-shadow: 0 0 6px 6px #fff4; + } + + &.target-preview { + --color: lawngreen; + background-color: #0001; + border: 5px dashed var(--color); + } + + svg { + padding: 12.5%; + } + } + &.show { opacity: 1; } @@ -192,15 +215,15 @@ body { border-bottom: 2px solid var(--color); } - &.imply.left { + &.edge.imply.left { border-left: 2px dashed white; } - &.imply.right { + &.edge.imply.right { border-right: 2px dashed white; } - &.imply.top { + &.edge.imply.top { border-top: 2px dashed white; } From 9bdcc8324eb238800b2e9206377ba9bf070bfb73 Mon Sep 17 00:00:00 2001 From: aronmal Date: Sat, 14 Jan 2023 16:28:03 +0100 Subject: [PATCH 3/6] Big rework for mutliple different events --- leaky-ships/components/BorderTiles.tsx | 41 ++-- leaky-ships/components/Gamefield.tsx | 8 +- .../{Target.tsx => GamefieldPointer.tsx} | 24 +- leaky-ships/components/Homepage.tsx | 2 +- leaky-ships/components/Homepage2.tsx | 2 +- leaky-ships/components/useGameEvent.tsx | 212 +++++++----------- leaky-ships/helpers.ts | 2 + leaky-ships/interfaces.ts | 35 +-- leaky-ships/styles/App.scss | 59 ++--- 9 files changed, 163 insertions(+), 222 deletions(-) rename leaky-ships/components/{Target.tsx => GamefieldPointer.tsx} (53%) diff --git a/leaky-ships/components/BorderTiles.tsx b/leaky-ships/components/BorderTiles.tsx index 341efbe..6ea04c3 100644 --- a/leaky-ships/components/BorderTiles.tsx +++ b/leaky-ships/components/BorderTiles.tsx @@ -1,24 +1,24 @@ import { CSSProperties, Dispatch, SetStateAction } from 'react'; -import { borderCN, cornerCN, fieldIndex, isHit } from '../helpers'; -import { HitDispatchType, HitType, LastLeftTileType, TargetPreviewPosType, TargetType } from '../interfaces'; +import { borderCN, cornerCN, fieldIndex } from '../helpers'; +import { LastLeftTileType, TargetPreviewPosType } from '../interfaces'; -function BorderTiles({ props: { count, setTarget, setTargetPreviewPos, hits, DispatchHits, setLastLeftTile } }: { +type TilesType = { + key: number, + isGameTile: boolean, + classNameString: string, + x: number, + y: number +} + +function BorderTiles({ props: { count, settingTarget, setTargetPreviewPos, setLastLeftTile } }: { props: { count: number, - setTarget: Dispatch>, + settingTarget: (isGameTile: boolean, x: number, y: number) => void, setTargetPreviewPos: Dispatch>, - hits: HitType[], - DispatchHits: Dispatch, setLastLeftTile: Dispatch> } }) { - let tilesProperties: { - key: number, - isGameTile: boolean, - classNameString: string, - x: number, - y: number - }[] = []; + let tilesProperties: TilesType[] = []; for (let y = 0; y < count + 2; y++) { for (let x = 0; x < count + 2; x++) { @@ -41,20 +41,7 @@ function BorderTiles({ props: { count, setTarget, setTargetPreviewPos, hits, Dis key={key} className={classNameString} style={{ '--x': x, '--y': y } as CSSProperties} - onClick={() => { - if (!isGameTile || isHit(hits, x, y).length) - return; - setTargetPreviewPos(e => ({ ...e, shouldShow: false })) - setTarget(t => { - if (t.x === x && t.y === y && t.show) { - DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } }); - return { show: false, x, y }; - } else { - return { show: true, x, y }; - } - }); - - }} + onClick={() => settingTarget(isGameTile, x, y)} onMouseEnter={() => setTargetPreviewPos({ x, y, shouldShow: isGameTile })} onMouseLeave={() => setLastLeftTile({ x, y })} >
diff --git a/leaky-ships/components/Gamefield.tsx b/leaky-ships/components/Gamefield.tsx index abea1db..884daa4 100644 --- a/leaky-ships/components/Gamefield.tsx +++ b/leaky-ships/components/Gamefield.tsx @@ -14,10 +14,9 @@ function Gamefield() { targets, eventBar, setLastLeftTile, - setTarget, + settingTarget, setTargetPreviewPos, - hits, - DispatchHits + hits } = useGameEvent(count); return ( @@ -25,7 +24,7 @@ function Gamefield() { {/* */}
{/* Bordes */} - + {/* Collumn lettes and row numbers */} @@ -38,6 +37,7 @@ function Gamefield() { {/* Fog images */} {/* */} {targets} + {/* Debug */}
{eventBar}
diff --git a/leaky-ships/components/Target.tsx b/leaky-ships/components/GamefieldPointer.tsx similarity index 53% rename from leaky-ships/components/Target.tsx rename to leaky-ships/components/GamefieldPointer.tsx index 190921f..d2ac0c4 100644 --- a/leaky-ships/components/Target.tsx +++ b/leaky-ships/components/GamefieldPointer.tsx @@ -2,32 +2,34 @@ import { faCrosshairs } from '@fortawesome/pro-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import classNames from 'classnames'; -import { TargetType } from '../interfaces'; import { faRadar } from '@fortawesome/pro-thin-svg-icons'; -function Target({ props: { +function GamefieldPointer({ props: { preview, - type, - edges, - imply, x, y, - show + show, + type, + edges, + imply } }: { props: { - preview?: boolean, + preview: boolean, + x: number, + y: number, + show: boolean, type: string, edges: string[], imply: boolean, - } & TargetType + } }) { const isRadar = type === 'radar' - const style = !isRadar ? { '--x': x, '--y': y } : { '--x1': x - 1, '--x2': x + 2, '--y1': y - 1, '--y2': y + 2 } + const style = !(isRadar && !edges.filter(s => s).length) ? { '--x': x, '--y': y } : { '--x1': x - 1, '--x2': x + 2, '--y1': y - 1, '--y2': y + 2 } return ( -
+
) } -export default Target \ No newline at end of file +export default GamefieldPointer \ No newline at end of file diff --git a/leaky-ships/components/Homepage.tsx b/leaky-ships/components/Homepage.tsx index 01e7286..cdb1609 100644 --- a/leaky-ships/components/Homepage.tsx +++ b/leaky-ships/components/Homepage.tsx @@ -76,7 +76,7 @@ function Homepage() { return (
- {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))} + {Array.from(Array(params.quantity), (_tile, index) => createTile(index))}
) }, [params, position, active, count]) diff --git a/leaky-ships/components/Homepage2.tsx b/leaky-ships/components/Homepage2.tsx index 4440850..b1a1bda 100644 --- a/leaky-ships/components/Homepage2.tsx +++ b/leaky-ships/components/Homepage2.tsx @@ -81,7 +81,7 @@ function Homepage2() {

{sentences[count % sentences.length]}

- {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))} + {Array.from(Array(params.quantity), (_tile, index) => createTile(index))}
) }, [params, position, active, action, count]) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 6d7b2e2..bd24a59 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -1,152 +1,111 @@ import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'; import { hitReducer, initlialLastLeftTile, initlialTarget, initlialTargetPreview, initlialTargetPreviewPos, isHit } from '../helpers'; -import { HitType, ItemsType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces'; +import { HitType, ItemsType, LastLeftTileType, ModeType, TargetPreviewPosType, TargetType } from '../interfaces'; import Item from './Item'; -import Target from './Target'; - -export const modes = { - none: { xEnable: false, yEnable: false, type: 'none' }, - radar: { xEnable: false, yEnable: false, type: 'radar' }, - hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' }, - vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' }, - missle: { xEnable: false, yEnable: false, type: 'missle' } -} +import GamefieldPointer from './GamefieldPointer'; function useGameEvent(count: number) { const [lastLeftTile, setLastLeftTile] = useState(initlialLastLeftTile); const [target, setTarget] = useState(initlialTarget); const [eventReady, setEventReady] = useState(false); const [appearOK, setAppearOK] = useState(false); - const [targetPreview, setTargetPreview] = useState(initlialTargetPreview); + const [targetPreview, setTargetPreview] = useState(initlialTargetPreview); const [targetPreviewPos, setTargetPreviewPos] = useState(initlialTargetPreviewPos); const [hits, DispatchHits] = useReducer(hitReducer, [] as HitType[]); - const [mode, setMode] = useState('none') - const [targetList, setTargetList] = useState([]) - const [targetPreviewList, setTargetPreviewList] = useState([]) + // const [mode, setMode] = useState<[number, string]>([0, '']) + const [mode, setMode] = useState(0) - function modXY(e: TargetType, mod: TargetModifierType) { - const { show, ...pos } = e - const { target, params } = mod - return { - target: { - show, - x: pos.x + (target.x ?? 0), - y: pos.y + (target.y ?? 0) - }, - params - } - } + const modes = useMemo(() => [ + { pointerGrid: Array.from(Array(3), () => Array.from(Array(3))), type: 'radar' }, + { pointerGrid: Array.from(Array(3), () => Array.from(Array(1))), type: 'htorpedo' }, + { pointerGrid: Array.from(Array(1), () => Array.from(Array(3))), type: 'vhtorpedo' }, + { pointerGrid: [[{ x: 0, y: 0 }]], type: 'missle' } + ], []) - const isSet = useCallback((x: number, y: number) => targetList.filter(({ target }) => x === target.x && y === target.y).length && target.show, [targetList, target]) - - const scopeGrid = useMemo(() => { - const { xEnable, yEnable } = modes[mode] - const matrix: TargetModifierType[][] = [] - let y = 0 - let x = 0 - const yLength = (yEnable ? 2 : 0) - const xLength = (xEnable ? 2 : 0) - for (let i = 0; i <= yLength; i++) { - for (let i2 = 0; i2 <= xLength; i2++) { - y = i + (yEnable ? -1 : 0); - x = i2 + (xEnable ? -1 : 0); - - (matrix[i] ??= [])[i2] = { - target: { - x, - y, - }, - params: { - edges: [ - i2 === 0 ? 'left' : '', - i2 === xLength ? 'right' : '', - i === 0 ? 'top' : '', - i === yLength ? 'bottom' : '', - ], - imply: false - } - } + const settingTarget = useCallback((isGameTile: boolean, x: number, y: number) => { + if (!isGameTile || isHit(hits, x, y).length) + return; + setTargetPreviewPos(e => ({ ...e, shouldShow: false })) + setTarget(t => { + if (t.x === x && t.y === y && t.show) { + DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } }); + return { preview: false, show: false, x, y }; + } else { + return { preview: false, show: true, x, y }; } - } - const fields = matrix.reduce((prev, curr) => [...prev, ...curr], []) - return fields - }, [mode]) - - const Targets = useCallback((targets: TargetListType[], preview?: boolean) => { - const { type } = modes[mode] - return targets.map(({ target, params }, i) => ) - }, [mode]) - - useEffect(() => { - const result = scopeGrid.map(e => modXY(target, e)) - .filter(({ target: { x, y } }) => { - const border = [ - x < 2, - x > count, - y < 2, - y > count, - ].reduce((prev, curr) => prev || curr, false) - return !border - }).map(field => { - const { target, params } = field - const { x, y } = target - if (isHit(hits, x, y).length) - return { ...field, params: { ...params, imply: true } } - return field - }) - setTargetList(e => { - if (JSON.stringify(e) === JSON.stringify(result)) - return e - return result }) - }, [scopeGrid, target, count, hits]); + }, []) - useEffect(() => { - const result = scopeGrid.map(e => modXY(targetPreview, e)) - .filter(({ target: { x, y } }) => { - const border = [ - x < 2, - x > count + 1, - y < 2, - y > count + 1, - ].reduce((prev, curr) => prev || curr, false) - return !border - }).map(field => { - const { target, params } = field - const { x, y } = target - if (isHit(hits, x, y).length || isSet(x, y)) - return { ...field, params: { ...params, imply: true } } - return field + const targetList = useCallback((target: TargetType) => { + const { pointerGrid, type } = modes[mode] + const xLength = pointerGrid.length + const yLength = pointerGrid[0].length + const { x: targetX, y: targetY } = target + return pointerGrid.map((arr, i) => { + return arr.map((_, i2) => { + const relativeX = -Math.floor(xLength / 2) + i; + const relativeY = -Math.floor(yLength / 2) + i2; + const x = targetX + (relativeX ?? 0) + const y = targetY + (relativeY ?? 0) + return { + x, + y, + type, + edges: [ + i === 0 ? 'left' : '', + i === xLength - 1 ? 'right' : '', + i2 === 0 ? 'top' : '', + i2 === yLength - 1 ? 'bottom' : '', + ] + } }) - if (!targetPreviewPos.shouldShow) - return - setTargetPreviewList(e => { - if (JSON.stringify(e) === JSON.stringify(result)) - return e - return result }) - }, [scopeGrid, targetPreview, count, hits, isSet, targetPreviewPos.shouldShow]); + .reduce((prev, curr) => [...prev, ...curr], []) + }, [mode, modes]) + + const isSet = useCallback((x: number, y: number) => !!targetList(target).filter(field => x === field.x && y === field.y).length && target.show, [target, targetList]) + + const composeTargetTiles = useCallback((target: TargetType) => { + const { preview, show } = target + const result = targetList(target).map(({ x, y, type, edges }) => { + return { + preview, + x, + y, + show, + type, + edges, + imply: !!isHit(hits, x, y).length || (!!isSet(x, y) && preview), + // isborder: x < 2 || x > count + 1 || y < 2 || y > count + 1 + } + }) + // .filter(({ isborder }) => !isborder) + return result + }, [count, hits, isSet, targetList]) + + // if (!targetPreviewPos.shouldShow) + // return // handle visibility and position change of targetPreview useEffect(() => { const { show, x, y } = targetPreview; // if mouse has moved too quickly and last event was entering and leaving the same field, it must have gone outside the grid const hasLeft = x === lastLeftTile.x && y === lastLeftTile.y + const isSet = x === target.x && y === target.y && target.show if (show && !appearOK) setTargetPreview(e => ({ ...e, show: false })); - if (!show && targetPreviewPos.shouldShow && eventReady && appearOK && !isHit(hits, x, y).length && !hasLeft) + if (!show && targetPreviewPos.shouldShow && eventReady && appearOK && !isHit(hits, x, y).length && !isSet && !hasLeft) setTargetPreview(e => ({ ...e, show: true })); - }, [targetPreview, targetPreviewPos.shouldShow, hits, eventReady, appearOK, lastLeftTile]) + }, [targetPreview, targetPreviewPos.shouldShow, hits, eventReady, appearOK, lastLeftTile, target]) // enable targetPreview event again after 200 mil. sec. useEffect(() => { - const { x: newX, y: newY } = targetPreviewPos; setEventReady(false); if (targetPreview.show || !appearOK) return; const autoTimeout = setTimeout(() => { - setTargetPreview(e => ({ ...e, x: newX, y: newY })); + setTargetPreview(e => ({ ...e, x: targetPreviewPos.x, y: targetPreviewPos.y })); setEventReady(true); setAppearOK(true); }, 300); @@ -155,14 +114,14 @@ function useGameEvent(count: number) { return () => { clearTimeout(autoTimeout); } - }, [targetPreviewPos, targetPreview.show, appearOK]); + }, [appearOK, targetPreview.show, targetPreviewPos.x, targetPreviewPos.y]); // approve targetPreview new position after 200 mil. sec. useEffect(() => { // early return to start cooldown only when about to show up const autoTimeout = setTimeout(() => { setAppearOK(!targetPreview.show) - }, 600); + }, targetPreview.show ? 500 : 300); // or abort if movement is repeated early return () => { @@ -170,23 +129,23 @@ function useGameEvent(count: number) { } }, [targetPreview.show]); - const targets = useMemo(() => <> - {Targets(targetPreviewList, true)} - {Targets(targetList)} - , [Targets, targetList, targetPreviewList]) + const targets = useMemo(() => [ + ...composeTargetTiles(target).map((props, i) => ), + ...composeTargetTiles(targetPreview).map((props, i) => ) + ], [composeTargetTiles, target, targetPreview]) const eventBar = useMemo(() => { const items: ItemsType[] = [ { icon: 'burger-menu', text: 'Menu' }, - { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 }, - { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 }, - { icon: 'scope', text: 'Fire missle', type: 'missle' }, + { icon: 'radar', text: 'Radar scan', mode: 0, amount: 1 }, + { icon: 'missle', text: 'Fire torpedo', mode: 1, amount: 1 }, + { icon: 'scope', text: 'Fire missle', mode: 2 }, { icon: 'gear', text: 'Settings' } ] return (
{items.map((e, i) => ( - { setMode(e.type as any); setTarget(e => ({ ...e, show: false })) } }} /> + { e.mode !== undefined ? setMode(e.mode) : {}; setTarget(e => ({ ...e, show: false })) } }} /> ))}
) @@ -195,10 +154,9 @@ function useGameEvent(count: number) { targets, eventBar, setLastLeftTile, - setTarget, + settingTarget, setTargetPreviewPos, - hits, - DispatchHits + hits } } diff --git a/leaky-ships/helpers.ts b/leaky-ships/helpers.ts index a0a2460..40133b9 100644 --- a/leaky-ships/helpers.ts +++ b/leaky-ships/helpers.ts @@ -40,11 +40,13 @@ export const initlialLastLeftTile = { y: 0 }; export const initlialTarget = { + preview: false, show: false, x: 2, y: 2 }; export const initlialTargetPreview = { + preview: true, show: false, x: 2, y: 2 diff --git a/leaky-ships/interfaces.ts b/leaky-ships/interfaces.ts index 83bd8ec..a3abed1 100644 --- a/leaky-ships/interfaces.ts +++ b/leaky-ships/interfaces.ts @@ -1,15 +1,9 @@ -import { modes } from "./components/useGameEvent"; - export type LastLeftTileType = { x: number, y: number } export type TargetType = { - show: boolean, - x: number, - y: number -}; -export type TargetPreviewType = { + preview: boolean, show: boolean, x: number, y: number @@ -20,30 +14,19 @@ export type TargetPreviewPosType = { y: number } export type TargetListType = { - target: { - show: boolean, - x: number, - y: number, - }, - params: { - edges: string[], - imply: boolean - } + x: number, + y: number, + type: string, + edges: string[] } -export type TargetModifierType = { - target: { - x: number, - y: number, - }, - params: { - edges: string[], - imply: boolean - } +export type ModeType = { + pointerGrid: any[][], + type: string } export type ItemsType = { icon: string, text: string, - type?: keyof typeof modes, + mode?: number, amount?: number, } export type FieldType = { diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index 335bf39..0526b17 100644 --- a/leaky-ships/styles/App.scss +++ b/leaky-ships/styles/App.scss @@ -159,35 +159,42 @@ body { --color: red; color: var(--color); opacity: 0; + + &.preview { + --color: orange; + } } - &.target-preview { - --color: orange; - color: var(--color); + &.preview { opacity: 0; @include transition(.5s); } &.radar { --color: limegreen; - border: 5px solid var(--color); - grid-column-start: var(--x1) !important; - grid-column-end: var(--x2) !important; - grid-row-start: var(--y1) !important; - grid-row-end: var(--y2) !important; + + svg { + opacity: 0; + } + + &:not(.left):not(.right):not(.top):not(.bottom) { + // border: 5px solid var(--color); + grid-area: var(--y1) /var(--x1) /var(--y2) /var(--x2); + + svg { + opacity: 1; + padding: 12.5%; + } + } &.imply { box-shadow: 0 0 6px 6px #fff4; } - &.target-preview { + &.preview { --color: lawngreen; background-color: #0001; - border: 5px dashed var(--color); - } - - svg { - padding: 12.5%; + // border: 5px dashed var(--color); } } @@ -215,20 +222,22 @@ body { border-bottom: 2px solid var(--color); } - &.edge.imply.left { - border-left: 2px dashed white; - } + &.imply { + &.left { + border-left: 2px dashed white; + } - &.edge.imply.right { - border-right: 2px dashed white; - } + &.right { + border-right: 2px dashed white; + } - &.edge.imply.top { - border-top: 2px dashed white; - } + &.top { + border-top: 2px dashed white; + } - &.imply.bottom { - border-bottom: 2px dashed white; + &.bottom { + border-bottom: 2px dashed white; + } } &.left.top { From 6a80f30132b0c7ede506d8c50e1a54c26a685fa5 Mon Sep 17 00:00:00 2001 From: aronmal Date: Sat, 14 Jan 2023 16:28:40 +0100 Subject: [PATCH 4/6] Tiny general style compatibility --- leaky-ships/styles/App.scss | 2 -- leaky-ships/styles/mixins/effects.scss | 32 +++++++++++++------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index 0526b17..f16d035 100644 --- a/leaky-ships/styles/App.scss +++ b/leaky-ships/styles/App.scss @@ -7,8 +7,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } * { diff --git a/leaky-ships/styles/mixins/effects.scss b/leaky-ships/styles/mixins/effects.scss index e386fa9..28598d0 100644 --- a/leaky-ships/styles/mixins/effects.scss +++ b/leaky-ships/styles/mixins/effects.scss @@ -18,37 +18,37 @@ } @mixin gradient-edge { &.left-top-corner { - -webkit-mask-image: -webkit-gradient(linear, right bottom, - left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); } &.right-top-corner { - -webkit-mask-image: -webkit-gradient(linear, left bottom, - right top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); } &.left-bottom-corner { - -webkit-mask-image: -webkit-gradient(linear, right top, - left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); } &.right-bottom-corner { - -webkit-mask-image: -webkit-gradient(linear, left top, - right bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0))); } &.left { - -webkit-mask-image: -webkit-gradient(linear, right top, - left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } &.right { - -webkit-mask-image: -webkit-gradient(linear, left top, - right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } &.top { - -webkit-mask-image: -webkit-gradient(linear, left bottom, - left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } &.bottom { - -webkit-mask-image: -webkit-gradient(linear, left top, - left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } } From b96ed76a7db492e745b61e497d948a85aa768ce1 Mon Sep 17 00:00:00 2001 From: aronmal Date: Mon, 16 Jan 2023 10:19:40 +0100 Subject: [PATCH 5/6] Rename stuff --- leaky-ships/components/{Homepage.tsx => Grid.tsx} | 4 ++-- leaky-ships/components/{Homepage2.tsx => Grid2.tsx} | 4 ++-- leaky-ships/pages/{homepage.tsx => grid.tsx} | 4 ++-- leaky-ships/pages/{homepage2.tsx => grid2.tsx} | 4 ++-- leaky-ships/pages/index.tsx | 8 ++++---- 5 files changed, 12 insertions(+), 12 deletions(-) rename leaky-ships/components/{Homepage.tsx => Grid.tsx} (98%) rename leaky-ships/components/{Homepage2.tsx => Grid2.tsx} (98%) rename leaky-ships/pages/{homepage.tsx => grid.tsx} (87%) rename leaky-ships/pages/{homepage2.tsx => grid2.tsx} (87%) diff --git a/leaky-ships/components/Homepage.tsx b/leaky-ships/components/Grid.tsx similarity index 98% rename from leaky-ships/components/Homepage.tsx rename to leaky-ships/components/Grid.tsx index cdb1609..65c75cf 100644 --- a/leaky-ships/components/Homepage.tsx +++ b/leaky-ships/components/Grid.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import { CSSProperties, useEffect, useMemo, useState } from 'react' -function Homepage() { +function Grid() { const floorClient = (number: number) => Math.floor(number / 50) @@ -84,4 +84,4 @@ function Homepage() { return createTiles } -export default Homepage \ No newline at end of file +export default Grid \ No newline at end of file diff --git a/leaky-ships/components/Homepage2.tsx b/leaky-ships/components/Grid2.tsx similarity index 98% rename from leaky-ships/components/Homepage2.tsx rename to leaky-ships/components/Grid2.tsx index b1a1bda..602a53d 100644 --- a/leaky-ships/components/Homepage2.tsx +++ b/leaky-ships/components/Grid2.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import { CSSProperties, useEffect, useMemo, useState } from 'react' -function Homepage2() { +function Grid2() { const floorClient = (number: number) => Math.floor(number / 50) @@ -89,4 +89,4 @@ function Homepage2() { return createTiles } -export default Homepage2 \ No newline at end of file +export default Grid2 \ No newline at end of file diff --git a/leaky-ships/pages/homepage.tsx b/leaky-ships/pages/grid.tsx similarity index 87% rename from leaky-ships/pages/homepage.tsx rename to leaky-ships/pages/grid.tsx index 6d877a1..da07730 100644 --- a/leaky-ships/pages/homepage.tsx +++ b/leaky-ships/pages/grid.tsx @@ -1,5 +1,5 @@ import Head from 'next/head' -import Homepage from '../components/Homepage' +import Grid from '../components/Grid' export default function Home() { return ( @@ -13,7 +13,7 @@ export default function Home() {
- +
diff --git a/leaky-ships/pages/homepage2.tsx b/leaky-ships/pages/grid2.tsx similarity index 87% rename from leaky-ships/pages/homepage2.tsx rename to leaky-ships/pages/grid2.tsx index e5b8676..9d3adb2 100644 --- a/leaky-ships/pages/homepage2.tsx +++ b/leaky-ships/pages/grid2.tsx @@ -1,5 +1,5 @@ import Head from 'next/head' -import Homepage2 from '../components/Homepage2' +import Grid2 from '../components/Grid2' export default function Home() { return ( @@ -13,7 +13,7 @@ export default function Home() {
- +
diff --git a/leaky-ships/pages/index.tsx b/leaky-ships/pages/index.tsx index 8e7b454..85174f8 100644 --- a/leaky-ships/pages/index.tsx +++ b/leaky-ships/pages/index.tsx @@ -12,10 +12,10 @@ export default function Home() {
-

Gamefield

-

Homepage

-

Homepage2

-

SocketIO

+

Gamefield

+

Grid Effect

+

Grid Effect with Content

+

SocketIO

) From a1dd49cd5354f150209f0ea367fc23d1c82b46a0 Mon Sep 17 00:00:00 2001 From: aronmal Date: Mon, 16 Jan 2023 10:28:24 +0100 Subject: [PATCH 6/6] Implemented unfinished Homepage --- leaky-ships/pages/_app.tsx | 5 +- leaky-ships/pages/homepage.tsx | 32 ++++++ leaky-ships/pages/index.tsx | 2 +- leaky-ships/styles/{home.scss => grid.scss} | 0 leaky-ships/styles/{home2.scss => grid2.scss} | 0 leaky-ships/styles/homepage.scss | 98 +++++++++++++++++++ 6 files changed, 134 insertions(+), 3 deletions(-) create mode 100644 leaky-ships/pages/homepage.tsx rename leaky-ships/styles/{home.scss => grid.scss} (100%) rename leaky-ships/styles/{home2.scss => grid2.scss} (100%) create mode 100644 leaky-ships/styles/homepage.scss diff --git a/leaky-ships/pages/_app.tsx b/leaky-ships/pages/_app.tsx index 36341e0..8a8a1e0 100644 --- a/leaky-ships/pages/_app.tsx +++ b/leaky-ships/pages/_app.tsx @@ -1,6 +1,7 @@ import '../styles/App.scss' -import '../styles/home.scss' -import '../styles/home2.scss' +import '../styles/grid.scss' +import '../styles/grid2.scss' +import '../styles/homepage.scss' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { diff --git a/leaky-ships/pages/homepage.tsx b/leaky-ships/pages/homepage.tsx new file mode 100644 index 0000000..0327f27 --- /dev/null +++ b/leaky-ships/pages/homepage.tsx @@ -0,0 +1,32 @@ +import { faCompass } from '@fortawesome/pro-solid-svg-icons' +import { faCirclePlay } from '@fortawesome/pro-thin-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useState } from 'react' + +export default function Home() { + const [heWantsToPlay, setHeWantsToPlay] = useState(false) + return ( +
+ +
+ Shield Logo + {!heWantsToPlay ? + <> +
+ +
+ + : +
+
+ + + +
+
} +
+
+ ) +} diff --git a/leaky-ships/pages/index.tsx b/leaky-ships/pages/index.tsx index 85174f8..7d57233 100644 --- a/leaky-ships/pages/index.tsx +++ b/leaky-ships/pages/index.tsx @@ -1,6 +1,5 @@ import Head from 'next/head' import Link from 'next/link' -// import styles from '../styles/Home.module.css' export default function Home() { return ( @@ -13,6 +12,7 @@ export default function Home() {

Gamefield

+

Homepage

Grid Effect

Grid Effect with Content

SocketIO

diff --git a/leaky-ships/styles/home.scss b/leaky-ships/styles/grid.scss similarity index 100% rename from leaky-ships/styles/home.scss rename to leaky-ships/styles/grid.scss diff --git a/leaky-ships/styles/home2.scss b/leaky-ships/styles/grid2.scss similarity index 100% rename from leaky-ships/styles/home2.scss rename to leaky-ships/styles/grid2.scss diff --git a/leaky-ships/styles/homepage.scss b/leaky-ships/styles/homepage.scss new file mode 100644 index 0000000..75df9cd --- /dev/null +++ b/leaky-ships/styles/homepage.scss @@ -0,0 +1,98 @@ +#box { + border: 2px solid black; + height: 100vh; + width: 100vw; + background-color: #282c34; + + #navExpand { + position: absolute; + top: 64px; + left: 64px; + width: 96px; + height: 96px; + background-color: black; + border-radius: 8px; + border: none; + + svg { + height: 50%; + width: 50%; + color: white; + } + } + + .beforeStartBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + height: 100%; + width: 100%; + + #shield { + width: 450px; + + } + + #videoWrapper { + display: flex; + align-items: center; + justify-content: center; + height: 225px; + width: 525px; + background-color: #2227; + border: 2px solid black; + border-radius: 8px; + + svg { + font-size: 4em; + color: #231f20; + + path { + stroke: black; + stroke-width: 2px; + stroke-linejoin: round; + } + } + } + + #startButton { + font-size: 2.5em; + color: white; + background-color: black; + border: none; + border-radius: 8px; + padding: 2rem 6rem; + } + + #startBox { + display: flex; + flex-direction: column; + align-items: center; + background-color: #B1B2B5CC; + border: 3px solid black; + padding: 3rem; + border-radius: 8px; + min-width: 60vw; + + div { + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; + + .optionButton { + font-size: 2em; + color: #B1B2B5CC; + background-color: #000C; + border: none; + border-radius: 8px; + padding: 1rem 4rem; + width: 100%; + } + + } + + } + } +} \ No newline at end of file