From 9243b04322e7008c4b4280b0330274450c9e187d Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Wed, 11 Jan 2023 21:08:40 +0100
Subject: [PATCH] Use of classNames

---
 leaky-ships/components/Homepage.tsx  | 3 ++-
 leaky-ships/components/Homepage2.tsx | 5 +++--
 leaky-ships/components/Labeling.tsx  | 3 ++-
 leaky-ships/components/Ships.tsx     | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/leaky-ships/components/Homepage.tsx b/leaky-ships/components/Homepage.tsx
index 3854cb1..01e7286 100644
--- a/leaky-ships/components/Homepage.tsx
+++ b/leaky-ships/components/Homepage.tsx
@@ -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>
diff --git a/leaky-ships/components/Homepage2.tsx b/leaky-ships/components/Homepage2.tsx
index e5d52ac..4440850 100644
--- a/leaky-ships/components/Homepage2.tsx
+++ b/leaky-ships/components/Homepage2.tsx
@@ -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 >
diff --git a/leaky-ships/components/Labeling.tsx b/leaky-ships/components/Labeling.tsx
index b3d0c9a..9c9f8c4 100644
--- a/leaky-ships/components/Labeling.tsx
+++ b/leaky-ships/components/Labeling.tsx
@@ -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>
         )}
     </>
 }
diff --git a/leaky-ships/components/Ships.tsx b/leaky-ships/components/Ships.tsx
index 9eb2f58..ac03ff2 100644
--- a/leaky-ships/components/Ships.tsx
+++ b/leaky-ships/components/Ships.tsx
@@ -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>
             )