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

Adapt to assets

Browse source
This commit is contained in:
aronmal 2023-01-07 13:53:58 +01:00
parent 804474fc5a
commit 4ca74f3f47
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 32 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

11
leaky-ships/components/Gamefield.tsx
View file

@ -1,5 +1,3 @@
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 BorderTiles from './BorderTiles';
@ -21,13 +19,14 @@ function Gamefield() {
useEffect(() => {
const { newX, newY, shouldShow, appearOK, eventReady, show, x, y } = targetPreview;
const positionChange = !(x === newX && y === newY);
const alreadyTargeting = target.show && target.x === targetPreview.newX && target.y === targetPreview.newY
// if not ready or no new position
if (!eventReady || (!positionChange && show))
return;
if (show) {
// hide preview to change position when hidden
setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: false }));
} else if (shouldShow && appearOK && !isHit(hits, newX, newY).length) {
} else if (shouldShow && appearOK && !isHit(hits, newX, newY).length && !alreadyTargeting) {
// BUT only appear again if it's supposed to (in case the mouse left over the edge) and ()
setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: true, x: newX, y: newY }));
}
@ -102,10 +101,10 @@ function Gamefield() {
{/* Fog images */}
{/* <FogImages /> */}
<div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}>
<FontAwesomeIcon icon={faCrosshairs} />
<img src='/assets/scope.png' alt='Crosshair' />
</div>
<div className={`hit-svg target-preview ${targetPreview.show && (target.x !== targetPreview.x || target.y !== targetPreview.y) ? 'show' : ''}`} style={{ '--x': targetPreview.x, '--y': targetPreview.y } as CSSProperties}>
<FontAwesomeIcon icon={faCrosshairs} />
<div className={`hit-svg target-preview ${targetPreview.show ? 'show' : ''}`} style={{ '--x': targetPreview.x, '--y': targetPreview.y } as CSSProperties}>
<img src='/assets/scope.png' alt='Crosshair' />
</div>
</div>
{/* <p>

27
leaky-ships/components/Ships.tsx
View file

@ -1,19 +1,24 @@
import Image from 'next/image';
import { CSSProperties } from 'react'
function Ships() {
let shipIndexes: number[] = [];
for (let i = 1; i <= 6; i++) {
shipIndexes.push(i);
}
let shipIndexes = [
{ size: 2, index: null },
{ size: 3, index: 1 },
{ size: 3, index: 2 },
{ size: 3, index: 3 },
{ size: 4, index: 1 },
{ size: 4, index: 2 }
];
return <>
{shipIndexes.map(i =>
<div key={i} className={`ship s${i}`} style={{'--x': i+3} as CSSProperties}>
<Image src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
</div>
)}
{shipIndexes.map(({ size, index }, i) => {
const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif`
return (
<div key={i} className={`ship s${size}`} style={{ '--x': i + 3 } as CSSProperties}>
<img src={filename} alt={filename} />
</div>
)
})}
</>
}