Render targets to be done

package.json

@@ -8,7 +8,9 @@
     "start": "parcel --no-cache --open",
     "build": "parcel build",
     "prepare": "husky install",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "generate-empty-targets": "node ./scripts/generateEmptyTargets.js",
+    "generate-targets-export": "node ./scripts/generateTargetsExport.js"
   },
   "dependencies": {
     "html-react-parser": "^1.4.8",

scripts/generateEmptyTargets.js

@@ -0,0 +1,187 @@
+const fs = require('fs')
+const path = require('path')
+
+const targets = [
+  // battle 1
+  'Simply Square',
+  'Carrom',
+  'Push Button',
+  'Ups n Downs',
+  'Acid Rain',
+  'Missing Slice',
+  'Leafy Trail',
+  'Forking Crazy',
+  'Tesseract',
+  'Cloaked Spirits',
+  'Eye of Sauron',
+  'Wiggly Moustache',
+  // battle 2
+  'Totally Triangle',
+  'Web Maker Logo',
+  'Overlap',
+  'Eye of the Tiger',
+  'Fidget Spinner',
+  'Matrix',
+  // battle 3
+  'Cube',
+  'Ticket',
+  // battle 4
+  'SitePoint Logo',
+  'Cloud',
+  'Boxception',
+  'Switches',
+  'Blossom',
+  'Smiley',
+  'Lock Up',
+  'Cups & Balls',
+  // battle 5
+  'Suffocate',
+  'Horizon',
+  // battle 6
+  'Equals',
+  'Band-aid',
+  // battle 7
+  'Birdie',
+  'Christmas Tree',
+  'Ice Cream',
+  'Interleaved',
+  'Tunnel',
+  'Not Simply Square',
+  'Sunset',
+  'Letter B',
+  'Fox Head',
+  // battle 8
+  'Baby',
+  'Wrench',
+  'Stripes',
+  // battle 9
+  'Magical Tree',
+  'Mountains',
+  // battle 10
+  'Corona Virus',
+  'Wash Your Hands',
+  'Stay at Home',
+  'Use Hand Sanitizer',
+  'Wear a Mask',
+  'Break the Chain',
+  // battle 11
+  'Pastel Logo',
+  'Black Lives Matter',
+  'Windmill',
+  'Skull',
+  'Pillars',
+  'Rose',
+  'Earth',
+  'Evil Triangles',
+  // battle 12
+  'ImprovMX',
+  'Sunset',
+  'Command Key',
+  'Door Knob',
+  'Max Volume',
+  'Batmicky',
+  'Video Reel',
+  'Bell',
+  // battle 13
+  'PushOwl',
+  'Froggy',
+  'Elephant',
+  'Sheep',
+  'Happy Tiger',
+  'Danger Noodle',
+  'Hippo',
+  'Beeee',
+  // battle 14
+  'Notes',
+  'Ukulele',
+  'Tambourine',
+  'Piano',
+  // battle 15
+  'Odoo',
+  'Diamond Cut',
+  'Supernova',
+  'Junction',
+  'Pythagoras',
+  'Stairway',
+  'Building Blocks',
+  'Tight Corner',
+  // battle 16
+  'Summit',
+  'Eclipse',
+  'Reflection',
+  'Squeeze',
+  'Great Wall',
+  'Ripples',
+  'Pokeball',
+  'Mandala',
+  // battle 17
+  'Snowman',
+  'Candle',
+  'Gift Box',
+  'CSSBattle',
+]
+const targetsFolderPath = path.resolve(__dirname, `../src/targets`)
+
+function getEmptyTargetContent(target, index) {
+  const targetId = `${String(index).padStart(3, '0')}`
+
+  return (
+    `export default {\n` +
+    `  id: '${targetId}',\n` +
+    `  title: 'Target #${index} - ${target}',\n` +
+    `  url: 'https://cssbattle.dev/play/${index}',\n` +
+    `  solution: '',\n` +
+    `}\n`
+  )
+}
+
+function createTargetsFolder() {
+  if (fs.existsSync(targetsFolderPath)) {
+    console.log('Targets folder already exists')
+  } else {
+    console.log('Targets folder does not exist')
+    console.log('Creating Targets folder...')
+
+    try {
+      fs.mkdirSync(targetsFolderPath, { recursive: true })
+
+      console.log('Targets folder created')
+    } catch (err) {
+      throw Error('Error creating Targets folder', err)
+    }
+  }
+}
+
+function createEmptyTargets() {
+  try {
+    targets.forEach((target, index) => {
+      const targetFileName = `${String(index + 1).padStart(3, '0')}.ts`
+      const targetFilePath = `${targetsFolderPath}/${targetFileName}`
+
+      if (fs.existsSync(targetFilePath)) {
+        console.log(`${target} already exists, skipping...`)
+      } else {
+        console.log(`${target} does not exist`)
+        console.log(`Creating ${target}...`)
+
+        try {
+          fs.writeFileSync(
+            `${targetsFolderPath}/${targetFileName}`,
+            getEmptyTargetContent(target, index + 1),
+          )
+
+          console.log(`${target} created`)
+        } catch (err) {
+          throw Error(`Error creating ${target} file`, err)
+        }
+      }
+    })
+
+    console.log('Targets files created')
+  } catch (err) {
+    throw Error('Error creating Target files', err)
+  }
+}
+
+createTargetsFolder()
+createEmptyTargets()

scripts/generateTargetsExport.js

@@ -0,0 +1,27 @@
+const fs = require('fs')
+const path = require('path')
+
+const targetsFolderPath = path.resolve(__dirname, `../src/targets`)
+const targetsExportFilePath = `${targetsFolderPath}/index.ts`
+
+if (fs.existsSync(targetsExportFilePath)) {
+  console.log('Export file already exists, overwriting...')
+}
+
+const fileNames = fs.readdirSync(targetsFolderPath)
+const formattedFileNames = fileNames
+  .map((fileName) => fileName.replace('.ts', ''))
+  .filter((fileName) => !isNaN(Number(fileName)))
+const exportFileContent = formattedFileNames
+  .map((fileName) => {
+    return `export { default as target${fileName} } from './${fileName}'\n`
+  })
+  .join('')
+
+try {
+  fs.writeFileSync(`${targetsExportFilePath}`, exportFileContent)
+
+  console.log(`Export file created`)
+} catch (err) {
+  throw Error(`Error creating Export file`, err)
+}

src/components/Card/index.module.css

@@ -1,4 +1,21 @@
 .iframe {
+  pointer-events: none;
   display: block;
   border: none;
 }
+
+.empty {
+  display: flex;
+  width: 400px;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  font-family: monospace;
+  font-weight: bold;
+  font-size: 1.2rem;
+  background-color: #f8f8f8;
+  color: #aaa;
+  text-align: center;
+  border: 1px solid #ddd;
+}

src/components/Card/index.tsx

@@ -8,14 +8,30 @@ import * as styles from './index.module.css'
 
 export type CardProps = HTMLAttributes<HTMLDivElement> & Target
 
-export function Card({ solution }: CardProps) {
+export function Card({ solution, title }: CardProps) {
+  function render() {
+    if (!solution) {
+      return (
+        <div className={styles.empty}>
+          <p>{title}</p>
+        </div>
+      )
+    }
+
+    return (
+      <IFrame
+        className={styles.iframe}
+        width={TARGET_DIMENSIONS.WIDTH}
+        height={TARGET_DIMENSIONS.HEIGHT}
+      >
+        {parse(solution)}
+      </IFrame>
+    )
+  }
+
   return (
-    <IFrame
-      className={styles.iframe}
-      width={TARGET_DIMENSIONS.WIDTH}
-      height={TARGET_DIMENSIONS.HEIGHT}
-    >
-      {parse(solution)}
-    </IFrame>
+    <div className="Card" title={title}>
+      {render()}
+    </div>
   )
 }

src/components/List/index.tsx

@@ -54,7 +54,7 @@ export function List({ targets }: ListProps) {
   return (
     <ul className={styles.list} style={getScalingStyle(availableWidth)}>
       {targets.map((target) => (
-        <li key={target.targetId}>
+        <li key={target.id}>
           <Card {...target} />
         </li>
       ))}