New functional features and fog images
This commit is contained in:
parent
fd6a93b7db
commit
d6242bfb2e
GPG key ID:
816B7707426FC612
6 changed files with 221 additions and 68 deletions
|
|
@ -1,60 +1,151 @@
|
|||
import { faXmark } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faBurst, faCrosshairs, faXmark } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { CSSProperties } from 'react';
|
||||
import './App.scss';
|
||||
import { CSSProperties, useState } from 'react';
|
||||
import './styles/App.scss';
|
||||
|
||||
function App() {
|
||||
|
||||
let borders: JSX.Element[] = [];
|
||||
const [target, setTarget] = useState({
|
||||
event: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
const [targetPreview, setTargetPreview] = useState({
|
||||
event: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
style: {
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0
|
||||
}
|
||||
})
|
||||
|
||||
let borderTiles: JSX.Element[] = [];
|
||||
let shipElems: JSX.Element[] = [];
|
||||
let elems2: {
|
||||
field: string,
|
||||
x: number,
|
||||
y: number,
|
||||
}[] = [];
|
||||
let elems: {
|
||||
let hitElems: {
|
||||
field: string,
|
||||
x: number,
|
||||
y: number,
|
||||
}[] = [],
|
||||
count = 12;
|
||||
for (let x = 0; x < count; x++) {
|
||||
for (let y = 0; y < count; y++) {
|
||||
elems2.push(...[
|
||||
{ field: String.fromCharCode(65+x), x: x+2, y: 1 },
|
||||
{ field: (x+1).toString(), x: 1, y: x+2 },
|
||||
{ field: String.fromCharCode(65+x), x: x+2, y: count+2 },
|
||||
{ field: (x+1).toString(), x: count+2, y: x+2 }
|
||||
])
|
||||
for (let y = 0; y < count; y++) {
|
||||
elems.push({ field: String.fromCharCode(65+x)+(y), x: x+2, y: y+2 })
|
||||
// Up
|
||||
{ field: String.fromCharCode(65+y), x: y+2, y: 1 },
|
||||
// Left
|
||||
{ field: (y+1).toString(), x: 1, y: y+2 },
|
||||
// Bottom
|
||||
{ field: String.fromCharCode(65+y), x: y+2, y: count+2 },
|
||||
// Right
|
||||
{ field: (y+1).toString(), x: count+2, y: y+2 }
|
||||
]);
|
||||
for (let x = 0; x < count; x++) {
|
||||
hitElems.push({ field: String.fromCharCode(65+x)+(y), x: x+2, y: y+2 })
|
||||
}
|
||||
}
|
||||
for (let x = 0; x < count+2; x++) {
|
||||
for (let y = 0; y < count+2; y++) {
|
||||
borders.push(<div className='border' style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}></div>)
|
||||
const hitSVGs = hitElems.map((obj, i) =>
|
||||
<div key={i} className='hit-svg' style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>
|
||||
<FontAwesomeIcon icon={faBurst} />
|
||||
</div>);
|
||||
for (let y = 0; y < count+2; y++) {
|
||||
for (let x = 0; x < count+2; x++) {
|
||||
const corner = [
|
||||
x === 0 && y === 0 ? 'left-top-corner' : '',
|
||||
x === count+1 && y === 0 ? 'right-top-corner' : '',
|
||||
x === 0 && y === count+1 ? 'left-bottom-corner' : '',
|
||||
x === count+1 && y === count+1 ? 'right-bottom-corner' : ''
|
||||
].filter(s => s);
|
||||
const border = [
|
||||
x === 0 ? 'left' : '',
|
||||
y === 0 ? 'top' : '',
|
||||
x === count+1 ? 'right' : '',
|
||||
y === count+1 ? 'bottom' : ''
|
||||
].filter(s => s);
|
||||
const borderType = corner.length ? corner[0] : border[0];
|
||||
const action = x > 0 && x < count+1 && y > 0 && y < count+1;
|
||||
const classNames = [
|
||||
'border-tile',
|
||||
borderType ? `edge ${borderType}` : '',
|
||||
action ? 'action' : ''
|
||||
].join(' ')
|
||||
borderTiles.push(
|
||||
<div
|
||||
key={y*(count+2)+x}
|
||||
className={classNames}
|
||||
style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}
|
||||
onClick={action ? () => setTarget({ event: true, x, y }) : () => {}}
|
||||
onMouseEnter={e => {
|
||||
const target = e.target as HTMLDivElement
|
||||
if (action) {
|
||||
setTargetPreview({
|
||||
event: true,
|
||||
x,
|
||||
y,
|
||||
style: {
|
||||
height: target.offsetHeight,
|
||||
left: target.offsetLeft,
|
||||
top: target.offsetTop,
|
||||
width: target.offsetWidth,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setTargetPreview(e => Object.assign({...e}, {
|
||||
style: {
|
||||
height: target.offsetHeight,
|
||||
left: target.offsetLeft,
|
||||
top: target.offsetTop,
|
||||
width: target.offsetWidth,
|
||||
}
|
||||
}))
|
||||
}
|
||||
}}
|
||||
onMouseLeave={action ? () => setTargetPreview(e => Object.assign({...e}, {event: false})) : () => {}}
|
||||
></div>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
shipElems.push(
|
||||
<div key={i} className={`ship s${i}`} style={{'--i': i+3} as CSSProperties}>
|
||||
<img src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
|
||||
</div>);
|
||||
}
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
{[1,2,3,4,5,6,11,12,13,14].map((num, i) => <img key={i} src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
|
||||
{[1,2,3,4].map((num, i) => <img key={i} src={`/fog/fog${num}.png`} alt={`fog${num}.png`} />)}
|
||||
<div id="game-frame">
|
||||
{ borders }
|
||||
{elems2.map((obj, i) =>
|
||||
<span key={i} className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>{obj.field}</span>
|
||||
)}
|
||||
{/* <div id='game'> */}
|
||||
{elems.map((obj, i) =>
|
||||
<div key={i} className={`${obj.field} svg-r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>
|
||||
<FontAwesomeIcon key={i} className={`${obj.field} r1`} icon={faXmark} />
|
||||
</div>)}
|
||||
{[1,2,3,4,5,6].map((num, i) =>
|
||||
<div key={i} id='test-ship' className={`s${num}`} style={{'--i': i+3} as CSSProperties}>
|
||||
<img src={`/svgs/${num}.svg`} alt={`${num}.svg`}/>
|
||||
</div>)}
|
||||
{/* <div id='test-ship' className='s2'>
|
||||
<img src={`/svgs/${3}.svg`} alt={`${3}.svg`} />
|
||||
</div> */}
|
||||
{/* </div> */}
|
||||
{/* Bordes */}
|
||||
{ borderTiles }
|
||||
|
||||
{/* Collumn lettes and row numbers */}
|
||||
{elems2.map((obj, i) =>
|
||||
<span key={i} className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>{obj.field}</span>
|
||||
)}
|
||||
{ hitSVGs }
|
||||
|
||||
{/* Ships */}
|
||||
{/* { shipElems } */}
|
||||
|
||||
{/* Fog images */}
|
||||
{/* <img className='fog-left' src={`/fog/fog2.png`} alt={`fog1.png`} />
|
||||
<img className='fog-right' src={`/fog/fog2.png`} alt={`fog1.png`} />
|
||||
<img className='fog-middle' src={`/fog/fog4.png`} alt={`fog4.png`} /> */}
|
||||
<div className={`hit-svg target ${target.event ? 'show' : ''}`} style={{'--x': target.x+1, '--y': target.y+1} as CSSProperties}>
|
||||
<FontAwesomeIcon icon={faCrosshairs} />
|
||||
</div>
|
||||
<div className={`hit-svg target-preview ${targetPreview.event && (target.x !== targetPreview.x || target.y !== targetPreview.y) ? 'show' : ''}`} style={targetPreview.style}>
|
||||
<FontAwesomeIcon icon={faCrosshairs} />
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue