Skip to content

Commit 7386e42

Browse files
felipeogfelipeog
committed
Render targets to be done
1 parent 2516b42 commit 7386e42

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

109 files changed

+792
-223
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"start": "parcel --no-cache --open",
99
"build": "parcel build",
1010
"prepare": "husky install",
11-
"pre-commit": "lint-staged"
11+
"pre-commit": "lint-staged",
12+
"generate-empty-targets": "node ./scripts/generateEmptyTargets.js",
13+
"generate-targets-export": "node ./scripts/generateTargetsExport.js"
1214
},
1315
"dependencies": {
1416
"html-react-parser": "^1.4.8",

‎scripts/generateEmptyTargets.js

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
4+
const targets = [
5+
// battle 1
6+
'Simply Square',
7+
'Carrom',
8+
'Push Button',
9+
'Ups n Downs',
10+
'Acid Rain',
11+
'Missing Slice',
12+
'Leafy Trail',
13+
'Forking Crazy',
14+
'Tesseract',
15+
'Cloaked Spirits',
16+
'Eye of Sauron',
17+
'Wiggly Moustache',
18+
// battle 2
19+
'Totally Triangle',
20+
'Web Maker Logo',
21+
'Overlap',
22+
'Eye of the Tiger',
23+
'Fidget Spinner',
24+
'Matrix',
25+
// battle 3
26+
'Cube',
27+
'Ticket',
28+
// battle 4
29+
'SitePoint Logo',
30+
'Cloud',
31+
'Boxception',
32+
'Switches',
33+
'Blossom',
34+
'Smiley',
35+
'Lock Up',
36+
'Cups & Balls',
37+
// battle 5
38+
'Suffocate',
39+
'Horizon',
40+
// battle 6
41+
'Equals',
42+
'Band-aid',
43+
// battle 7
44+
'Birdie',
45+
'Christmas Tree',
46+
'Ice Cream',
47+
'Interleaved',
48+
'Tunnel',
49+
'Not Simply Square',
50+
'Sunset',
51+
'Letter B',
52+
'Fox Head',
53+
// battle 8
54+
'Baby',
55+
'Wrench',
56+
'Stripes',
57+
// battle 9
58+
'Magical Tree',
59+
'Mountains',
60+
// battle 10
61+
'Corona Virus',
62+
'Wash Your Hands',
63+
'Stay at Home',
64+
'Use Hand Sanitizer',
65+
'Wear a Mask',
66+
'Break the Chain',
67+
// battle 11
68+
'Pastel Logo',
69+
'Black Lives Matter',
70+
'Windmill',
71+
'Skull',
72+
'Pillars',
73+
'Rose',
74+
'Earth',
75+
'Evil Triangles',
76+
// battle 12
77+
'ImprovMX',
78+
'Sunset',
79+
'Command Key',
80+
'Door Knob',
81+
'Max Volume',
82+
'Batmicky',
83+
'Video Reel',
84+
'Bell',
85+
// battle 13
86+
'PushOwl',
87+
'Froggy',
88+
'Elephant',
89+
'Sheep',
90+
'Happy Tiger',
91+
'Danger Noodle',
92+
'Hippo',
93+
'Beeee',
94+
// battle 14
95+
'Notes',
96+
'Ukulele',
97+
'Tambourine',
98+
'Piano',
99+
// battle 15
100+
'Odoo',
101+
'Diamond Cut',
102+
'Supernova',
103+
'Junction',
104+
'Pythagoras',
105+
'Stairway',
106+
'Building Blocks',
107+
'Tight Corner',
108+
// battle 16
109+
'Summit',
110+
'Eclipse',
111+
'Reflection',
112+
'Squeeze',
113+
'Great Wall',
114+
'Ripples',
115+
'Pokeball',
116+
'Mandala',
117+
// battle 17
118+
'Snowman',
119+
'Candle',
120+
'Gift Box',
121+
'CSSBattle',
122+
]
123+
const targetsFolderPath = path.resolve(__dirname, `../src/targets`)
124+
125+
function getEmptyTargetContent(target, index) {
126+
const targetId = `${String(index).padStart(3, '0')}`
127+
128+
return (
129+
`export default {\n` +
130+
` id: '${targetId}',\n` +
131+
` title: 'Target #${index} - ${target}',\n` +
132+
` url: 'https://cssbattle.dev/play/${index}',\n` +
133+
` solution: '',\n` +
134+
`}\n`
135+
)
136+
}
137+
138+
function createTargetsFolder() {
139+
if (fs.existsSync(targetsFolderPath)) {
140+
console.log('Targets folder already exists')
141+
} else {
142+
console.log('Targets folder does not exist')
143+
console.log('Creating Targets folder...')
144+
145+
try {
146+
fs.mkdirSync(targetsFolderPath, { recursive: true })
147+
148+
console.log('Targets folder created')
149+
} catch (err) {
150+
throw Error('Error creating Targets folder', err)
151+
}
152+
}
153+
}
154+
155+
function createEmptyTargets() {
156+
try {
157+
targets.forEach((target, index) => {
158+
const targetFileName = `${String(index + 1).padStart(3, '0')}.ts`
159+
const targetFilePath = `${targetsFolderPath}/${targetFileName}`
160+
161+
if (fs.existsSync(targetFilePath)) {
162+
console.log(`${target} already exists, skipping...`)
163+
} else {
164+
console.log(`${target} does not exist`)
165+
console.log(`Creating ${target}...`)
166+
167+
try {
168+
fs.writeFileSync(
169+
`${targetsFolderPath}/${targetFileName}`,
170+
getEmptyTargetContent(target, index + 1),
171+
)
172+
173+
console.log(`${target} created`)
174+
} catch (err) {
175+
throw Error(`Error creating ${target} file`, err)
176+
}
177+
}
178+
})
179+
180+
console.log('Targets files created')
181+
} catch (err) {
182+
throw Error('Error creating Target files', err)
183+
}
184+
}
185+
186+
createTargetsFolder()
187+
createEmptyTargets()

‎scripts/generateTargetsExport.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
4+
const targetsFolderPath = path.resolve(__dirname, `../src/targets`)
5+
const targetsExportFilePath = `${targetsFolderPath}/index.ts`
6+
7+
if (fs.existsSync(targetsExportFilePath)) {
8+
console.log('Export file already exists, overwriting...')
9+
}
10+
11+
const fileNames = fs.readdirSync(targetsFolderPath)
12+
const formattedFileNames = fileNames
13+
.map((fileName) => fileName.replace('.ts', ''))
14+
.filter((fileName) => !isNaN(Number(fileName)))
15+
const exportFileContent = formattedFileNames
16+
.map((fileName) => {
17+
return `export { default as target${fileName} } from './${fileName}'\n`
18+
})
19+
.join('')
20+
21+
try {
22+
fs.writeFileSync(`${targetsExportFilePath}`, exportFileContent)
23+
24+
console.log(`Export file created`)
25+
} catch (err) {
26+
throw Error(`Error creating Export file`, err)
27+
}

‎src/components/Card/index.module.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
.iframe {
2+
pointer-events: none;
23
display: block;
34
border: none;
45
}
6+
7+
.empty {
8+
display: flex;
9+
width: 400px;
10+
height: 300px;
11+
justify-content: center;
12+
align-items: center;
13+
padding: 1rem;
14+
font-family: monospace;
15+
font-weight: bold;
16+
font-size: 1.2rem;
17+
background-color: #f8f8f8;
18+
color: #aaa;
19+
text-align: center;
20+
border: 1px solid #ddd;
21+
}

‎src/components/Card/index.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,30 @@ import * as styles from './index.module.css'
88

99
export type CardProps = HTMLAttributes<HTMLDivElement> & Target
1010

11-
export function Card({ solution }: CardProps) {
11+
export function Card({ solution, title }: CardProps) {
12+
function render() {
13+
if (!solution) {
14+
return (
15+
<div className={styles.empty}>
16+
<p>{title}</p>
17+
</div>
18+
)
19+
}
20+
21+
return (
22+
<IFrame
23+
className={styles.iframe}
24+
width={TARGET_DIMENSIONS.WIDTH}
25+
height={TARGET_DIMENSIONS.HEIGHT}
26+
>
27+
{parse(solution)}
28+
</IFrame>
29+
)
30+
}
31+
1232
return (
13-
<IFrame
14-
className={styles.iframe}
15-
width={TARGET_DIMENSIONS.WIDTH}
16-
height={TARGET_DIMENSIONS.HEIGHT}
17-
>
18-
{parse(solution)}
19-
</IFrame>
33+
<div className="Card" title={title}>
34+
{render()}
35+
</div>
2036
)
2137
}

‎src/components/List/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function List({ targets }: ListProps) {
5454
return (
5555
<ul className={styles.list} style={getScalingStyle(availableWidth)}>
5656
{targets.map((target) => (
57-
<li key={target.targetId}>
57+
<li key={target.id}>
5858
<Card {...target} />
5959
</li>
6060
))}

‎src/consts/battlesMap.ts

Lines changed: 0 additions & 93 deletions
This file was deleted.

0 commit comments

Comments
 (0)