diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index a11777c..02010c7 100644 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..962e547 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,7 +7,7 @@ - React App + Leaky Ships diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/frontend/public/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png index fc44b0a..3d63d11 100644 Binary files a/frontend/public/logo192.png and b/frontend/public/logo192.png differ diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png index a4e47a6..1962360 100644 Binary files a/frontend/public/logo512.png and b/frontend/public/logo512.png differ diff --git a/frontend/public/svgs/1.svg b/frontend/public/svgs/1.svg new file mode 100644 index 0000000..1f99254 --- /dev/null +++ b/frontend/public/svgs/1.svg @@ -0,0 +1,888 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/11.svg b/frontend/public/svgs/11.svg new file mode 100644 index 0000000..926541a --- /dev/null +++ b/frontend/public/svgs/11.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/12.svg b/frontend/public/svgs/12.svg new file mode 100644 index 0000000..b33a51e --- /dev/null +++ b/frontend/public/svgs/12.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/13.svg b/frontend/public/svgs/13.svg new file mode 100644 index 0000000..28c29d0 --- /dev/null +++ b/frontend/public/svgs/13.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/14.svg b/frontend/public/svgs/14.svg new file mode 100644 index 0000000..8dc9598 --- /dev/null +++ b/frontend/public/svgs/14.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/2.svg b/frontend/public/svgs/2.svg new file mode 100644 index 0000000..bbd45c0 --- /dev/null +++ b/frontend/public/svgs/2.svg @@ -0,0 +1,252 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/3.svg b/frontend/public/svgs/3.svg new file mode 100644 index 0000000..657beb5 --- /dev/null +++ b/frontend/public/svgs/3.svg @@ -0,0 +1,528 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/4.svg b/frontend/public/svgs/4.svg new file mode 100644 index 0000000..0d835e3 --- /dev/null +++ b/frontend/public/svgs/4.svg @@ -0,0 +1,772 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/5.svg b/frontend/public/svgs/5.svg new file mode 100644 index 0000000..59ec4f1 --- /dev/null +++ b/frontend/public/svgs/5.svg @@ -0,0 +1,272 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/svgs/6.svg b/frontend/public/svgs/6.svg new file mode 100644 index 0000000..cad6c30 --- /dev/null +++ b/frontend/public/svgs/6.svg @@ -0,0 +1,344 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/App.scss b/frontend/src/App.scss index 74b5e05..29d20de 100644 --- a/frontend/src/App.scss +++ b/frontend/src/App.scss @@ -36,3 +36,42 @@ transform: rotate(360deg); } } + +#game { + border: 5px solid orange; + position: relative; + height: 1200px; + width: 1200px; + display: grid; + grid-template-rows: repeat(12, 1fr); + grid-template-columns: repeat(12, 1fr); + grid-gap: 1px solid blue; + + .missle { + height: 50px; + width: 50px; + position: absolute; + border: 1px solid red; + top: calc(50px + 100px * var(--y)); + left: calc(50px + 100px* var(--x)); + transform: translateX(-50%) translateY(-50%); + } + + svg { + height: 50px; + width: 50px; + align-self: center; + justify-self: center; + grid-column: var(--x); + grid-row: var(--y); + } + .r1 { + border: 2px solid blue; + } + .r2 { + border: 2px solid green; + } + .r3 { + border: 2px solid yellowgreen; + } +} \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bbf9332..f0a82af 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,20 +1,38 @@ +import { faXmark } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { CSSProperties } from 'react'; import './App.scss'; function App() { + + let elems: { + field: string, + x: number, + y: number, + }[] = [], + count = 12; + for (let x = 1; x <= count; x++) { + for (let y = 1; y <= count; y++) { + elems.push({field: String.fromCharCode(64+x)+(y), x, y}) + } + } return (
- logo + {[1,2,3,4,5,6,11,12,13,14].map(num => {`${num}.svg`})} +
+ {elems.map(obj => )} +

Edit src/App.tsx and save to reload.

- - Learn React + Battleships designed by macrovector