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

Use of classNames

Browse source
This commit is contained in:
aronmal 2023-01-11 21:08:40 +01:00
parent ebbbae4b15
commit 9243b04322
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
leaky-ships/components/Homepage.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames'
import { CSSProperties, useEffect, useMemo, useState } from 'react'
function Homepage() {
@ -66,7 +67,7 @@ function Homepage() {
return (
<div
key={index}
className={'tile ' + (active ? 'active' : '')}
className={classNames('tile', { active: active })}
style={{ '--delay': pos + 's' } as CSSProperties}
onClick={() => doEffect(x, y)}
></div>

5
leaky-ships/components/Homepage2.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames'
import { CSSProperties, useEffect, useMemo, useState } from 'react'
function Homepage2() {
@ -68,7 +69,7 @@ function Homepage2() {
return (
<div
key={index}
className={'tile ' + (active ? 'active' : 'inactive')}
className={classNames('tile', (active ? 'active' : 'inactive'))}
style={{ '--delay': pos + 's' } as CSSProperties}
onClick={() => doEffect(x, y)}
></div>
@ -78,7 +79,7 @@ function Homepage2() {
return (
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows } as CSSProperties}>
<div className="center-div">
<h1 className={'headline ' + (!active ? 'active' : 'inactive')}>{sentences[count % sentences.length]}</h1>
<h1 className={classNames('headline', (!active ? 'active' : 'inactive'))}>{sentences[count % sentences.length]}</h1>
</div>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
</div >

3
leaky-ships/components/Labeling.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { CSSProperties } from 'react'
import { fieldIndex } from '../helpers';
import { FieldType } from '../interfaces';
@ -21,7 +22,7 @@ function Labeling({count}: {count: number}) {
elems = elems.sort((a, b) => fieldIndex(count, a.x, a.y)-fieldIndex(count, b.x, b.y));
return <>
{elems.map(({field, x, y, orientation}, i) =>
<span key={i} className={`label ${orientation} ${field}`} style={{'--x': x, '--y': y} as CSSProperties}>{field}</span>
<span key={i} className={classNames('label', orientation, field)} style={{'--x': x, '--y': y} as CSSProperties}>{field}</span>
)}
</>
}

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

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { CSSProperties } from 'react'
function Ships() {
@ -14,7 +15,7 @@ function Ships() {
{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}>
<div key={i} className={classNames('ship', size)} style={{ '--x': i + 3 } as CSSProperties}>
<img src={filename} alt={filename} />
</div>
)