diff --git a/leaky-ships/components/Bluetooth.tsx b/leaky-ships/components/Bluetooth.tsx index c9017d8..a52aa4f 100644 --- a/leaky-ships/components/Bluetooth.tsx +++ b/leaky-ships/components/Bluetooth.tsx @@ -127,7 +127,7 @@ function Bluetooth() { } return ( - <> +
- +

+ { navigator.clipboard.writeText("chrome://flags/#enable-experimental-web-platform-features") }} + // target="_blank" + style={{ "cursor": "pointer" }} + // rel="noopener noreferrer" + > + Step 1 + + {" "} + { navigator.clipboard.writeText("chrome://flags/#enable-web-bluetooth-new-permissions-backend") }} + // target="_blank" + style={{ "cursor": "pointer" }} + // rel="noopener noreferrer" + + > + Step 2 + +

+
) } diff --git a/leaky-ships/components/BorderTiles.tsx b/leaky-ships/components/BorderTiles.tsx index 49b07ea..144c8ca 100644 --- a/leaky-ships/components/BorderTiles.tsx +++ b/leaky-ships/components/BorderTiles.tsx @@ -35,6 +35,7 @@ function BorderTiles({ count, actions: { setTarget, setTargetPreview, hits, Disp onClick={() => { if (!isGameTile && !isHit(hits, x, y).length) return; + setTargetPreview(e => ({ ...e, shouldShow: false, show: false })) setTarget(t => { if (t.x === x && t.y === y) { DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } }); diff --git a/leaky-ships/components/Gamefield.tsx b/leaky-ships/components/Gamefield.tsx index 8c3d328..6263740 100644 --- a/leaky-ships/components/Gamefield.tsx +++ b/leaky-ships/components/Gamefield.tsx @@ -1,5 +1,7 @@ +import { faCrosshairs } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties, useEffect, useReducer, useState } from 'react'; -import Bluetooth from './Bluetooth'; +// import Bluetooth from './Bluetooth'; import BorderTiles from './BorderTiles'; // import FogImages from './FogImages'; import HitElems from './HitElems'; @@ -7,9 +9,18 @@ import Labeling from './Labeling'; import Ships from './Ships'; import { hitReducer, initlialTarget, initlialTargetPreview, isHit } from '../helpers'; import { HitType, TargetPreviewType, TargetType } from '../interfaces'; +import Item from './Item'; function Gamefield() { + const items = [ + { icon: 'burger-menu', text: 'Menu', cllFn: () => { } }, + { icon: 'radar', text: 'Radar scan', cllFn: () => { } }, + { icon: 'missle', text: 'Fire torpedo', cllFn: () => { } }, + { icon: 'scope', text: 'Fire missle', cllFn: () => { } }, + { icon: 'gear', text: 'Settings', cllFn: () => { } } + ] + const count = 12; const [target, setTarget] = useState(initlialTarget); const [targetPreview, setTargetPreview] = useState(initlialTargetPreview); @@ -63,29 +74,7 @@ function Gamefield() { return (
- -

- { navigator.clipboard.writeText("chrome://flags/#enable-experimental-web-platform-features") }} - // target="_blank" - style={{ "cursor": "pointer" }} - // rel="noopener noreferrer" - > - Step 1 - - {" "} - { navigator.clipboard.writeText("chrome://flags/#enable-web-bluetooth-new-permissions-backend") }} - // target="_blank" - style={{ "cursor": "pointer" }} - // rel="noopener noreferrer" - - > - Step 2 - -

+ {/* */}
{/* Bordes */} @@ -101,23 +90,17 @@ function Gamefield() { {/* Fog images */} {/* */}
- Crosshair +
- Crosshair +
- {/*

- Edit src/App.tsx and save to reload. -

*/} - -

Battleships designed by macrovector

- +
+ {items.map(e => ( + + ))} +
) } diff --git a/leaky-ships/components/Item.tsx b/leaky-ships/components/Item.tsx new file mode 100644 index 0000000..dcac540 --- /dev/null +++ b/leaky-ships/components/Item.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +function Item({ props: { icon, text, cllFn } }: { + props: { + icon: string, + text: string, + cllFn: () => void, + } +}) { + return ( +
+ {`${icon}.png`} + {text} +
+ ) +} + +export default Item \ No newline at end of file diff --git a/leaky-ships/public/assets/background.png b/leaky-ships/public/assets/background.png index fb73c6a..d0ecdf1 100644 Binary files a/leaky-ships/public/assets/background.png and b/leaky-ships/public/assets/background.png differ diff --git a/leaky-ships/public/assets/burger-menu.png b/leaky-ships/public/assets/burger-menu.png index 790cb54..221d022 100644 Binary files a/leaky-ships/public/assets/burger-menu.png and b/leaky-ships/public/assets/burger-menu.png differ diff --git a/leaky-ships/public/assets/gear.png b/leaky-ships/public/assets/gear.png index 3d373ff..ea100e2 100644 Binary files a/leaky-ships/public/assets/gear.png and b/leaky-ships/public/assets/gear.png differ diff --git a/leaky-ships/public/assets/missle.png b/leaky-ships/public/assets/missle.png index 11a25b0..ba35018 100644 Binary files a/leaky-ships/public/assets/missle.png and b/leaky-ships/public/assets/missle.png differ diff --git a/leaky-ships/public/assets/player_blue.png b/leaky-ships/public/assets/player_blue.png index 64317f3..546bc00 100644 Binary files a/leaky-ships/public/assets/player_blue.png and b/leaky-ships/public/assets/player_blue.png differ diff --git a/leaky-ships/public/assets/player_red.png b/leaky-ships/public/assets/player_red.png index 680d814..33215ed 100644 Binary files a/leaky-ships/public/assets/player_red.png and b/leaky-ships/public/assets/player_red.png differ diff --git a/leaky-ships/public/assets/radar.png b/leaky-ships/public/assets/radar.png index ff9e66b..e4e6786 100644 Binary files a/leaky-ships/public/assets/radar.png and b/leaky-ships/public/assets/radar.png differ diff --git a/leaky-ships/public/assets/scope.png b/leaky-ships/public/assets/scope.png index fa09a6c..a005edd 100644 Binary files a/leaky-ships/public/assets/scope.png and b/leaky-ships/public/assets/scope.png differ diff --git a/leaky-ships/public/svgs/1.svg b/leaky-ships/public/svgs/1.svg deleted file mode 100644 index 1f99254..0000000 --- a/leaky-ships/public/svgs/1.svg +++ /dev/null @@ -1,888 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/11.svg b/leaky-ships/public/svgs/11.svg deleted file mode 100644 index 926541a..0000000 --- a/leaky-ships/public/svgs/11.svg +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/12.svg b/leaky-ships/public/svgs/12.svg deleted file mode 100644 index b33a51e..0000000 --- a/leaky-ships/public/svgs/12.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/13.svg b/leaky-ships/public/svgs/13.svg deleted file mode 100644 index 28c29d0..0000000 --- a/leaky-ships/public/svgs/13.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/14.svg b/leaky-ships/public/svgs/14.svg deleted file mode 100644 index 8dc9598..0000000 --- a/leaky-ships/public/svgs/14.svg +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/2.svg b/leaky-ships/public/svgs/2.svg deleted file mode 100644 index bbd45c0..0000000 --- a/leaky-ships/public/svgs/2.svg +++ /dev/null @@ -1,252 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/3.svg b/leaky-ships/public/svgs/3.svg deleted file mode 100644 index 657beb5..0000000 --- a/leaky-ships/public/svgs/3.svg +++ /dev/null @@ -1,528 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/4.svg b/leaky-ships/public/svgs/4.svg deleted file mode 100644 index 0d835e3..0000000 --- a/leaky-ships/public/svgs/4.svg +++ /dev/null @@ -1,772 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/5.svg b/leaky-ships/public/svgs/5.svg deleted file mode 100644 index 59ec4f1..0000000 --- a/leaky-ships/public/svgs/5.svg +++ /dev/null @@ -1,272 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/public/svgs/6.svg b/leaky-ships/public/svgs/6.svg deleted file mode 100644 index cad6c30..0000000 --- a/leaky-ships/public/svgs/6.svg +++ /dev/null @@ -1,344 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index 7b0ba22..d300b65 100644 --- a/leaky-ships/styles/App.scss +++ b/leaky-ships/styles/App.scss @@ -28,9 +28,9 @@ body { .App-header { background-color: $theme; min-height: 100vh; - @include flex-col; - align-items: center; - justify-content: center; + // @include flex-col; + // align-items: center; + // justify-content: center; font-size: calc(10px + 2vmin); color: white; } @@ -49,10 +49,18 @@ body { } } +#gamefield { + @include flex-col; + align-items: center; + justify-content: space-evenly; + height: 100vh; +} + #game-frame { // border: 1px solid orange; // position: relative; - $height: 864px; + // $height: 864px; + $height: 648px; $width: $height; height: $height; width: $width; @@ -107,6 +115,7 @@ body { pointer-events: none; img { + @include pixelart; position: absolute; // height: 90%; width: 90%; @@ -158,23 +167,12 @@ body { &.target { color: red; opacity: 0; - - img { - height: inherit; - width: inherit; - } } &.target-preview { color: orange; opacity: 0; @include transition(.2s); - - img { - height: inherit; - width: inherit; - filter: sepia() saturate(2000%) hue-rotate(20deg) - } } &.show { @@ -209,4 +207,32 @@ body { grid-area: 4 / 4 / -4 / -4; } } +} + +.event-bar { + @include flex-row; + padding: 1rem 3rem; + background-color: #fff9; + border-radius: 1rem; + + .item { + @include flex-col; + align-items: center; + gap: .5rem; + width: 128px; + + img { + width: 64px; + padding: 8px; + @include pixelart; + background-color: white; + border-radius: 1rem; + } + + span { + color: black; + font-size: .75em; + font-weight: bold; + } + } } \ No newline at end of file diff --git a/leaky-ships/styles/mixins/effects.scss b/leaky-ships/styles/mixins/effects.scss index 287995a..e386fa9 100644 --- a/leaky-ships/styles/mixins/effects.scss +++ b/leaky-ships/styles/mixins/effects.scss @@ -50,4 +50,12 @@ -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } +} + +// Pixelart sharpness (no interpolation) +// https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/ +@mixin pixelart { + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; } \ No newline at end of file