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

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

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

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

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { CSSProperties } from 'react' import { CSSProperties } from 'react'
import { fieldIndex } from '../helpers'; import { fieldIndex } from '../helpers';
import { FieldType } from '../interfaces'; 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)); elems = elems.sort((a, b) => fieldIndex(count, a.x, a.y)-fieldIndex(count, b.x, b.y));
return <> return <>
{elems.map(({field, x, y, orientation}, i) => {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' import { CSSProperties } from 'react'
function Ships() { function Ships() {
@ -14,7 +15,7 @@ function Ships() {
{shipIndexes.map(({ size, index }, i) => { {shipIndexes.map(({ size, index }, i) => {
const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif` const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif`
return ( 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} /> <img src={filename} alt={filename} />
</div> </div>
) )