Skip to content

Commit 364b059

Browse files
lulunac27alulunac27a
committed
Add tables with styles
1 parent b65c826 commit 364b059

File tree

2 files changed

+150
-82
lines changed

2 files changed

+150
-82
lines changed

‎src/App.css

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
.App {
2-
/*app content*/
3-
text-align: center; /*center text for whole app*/
1+
.App {/*app content*/
2+
text-align: center;/*center text for whole app*/
43
}
54

6-
.App-header {
7-
/*app header*/
5+
.App-header {/*app header*/
86
background-color: #208040;
9-
min-height: 10vh; /*set height to 10% of viewpoint height*/
7+
min-height: 10vh;/*set height to 10% of viewpoint height*/
108
display: flex;
119
flex-direction: column;
1210
align-items: center;
@@ -16,9 +14,9 @@
1614
}
1715

1816
#points-display {
19-
font-weight: bold; /*bold the numeric values*/
17+
font-weight: bold;/*bold the numeric values*/
2018
}
2119

2220
p {
23-
line-height: 120%; /*add some line spacing between paragraphs*/
21+
line-height: 120%;/*add some line spacing between paragraphs*/
2422
}

‎src/App.js

Lines changed: 144 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -255,80 +255,150 @@ function App() {
255255
{/*increase points from clicking a button*/}
256256
<button onClick={() => addPointsFromClick()}>Click to Add Points</button>
257257
<br />
258-
Clicker Level: <NumericDisplay value={clickers} shortForm={false} />
259-
<br />
260-
{/*upgrade clicker (points per click)*/}
261-
<button onClick={() => upgradeClicker()}>Upgrade Clicker</button>
262-
<CostDisplay cost={10 * Math.pow(2, clickers - 1)} />
263-
Clicker Multiplier Level:{" "}
264-
<NumericDisplay value={clickersMultiplier} shortForm={false} />
265-
<br />
266-
{/*upgrade clicker multiplier*/}
267-
<button onClick={() => upgradeClickerMultiplier()}>
268-
Upgrade Clicker Multiplier
269-
</button>
270-
<CostDisplay cost={100 * Math.pow(2, clickersMultiplier - 1)} />
271-
Time Multiplier Bonus:{" "}
272-
<NumericDisplay value={timeMultiplierBonus} shortForm={false} />
273-
<br />
274-
{/*upgrade time multiplier bonus*/}
275-
<button onClick={() => upgradeTimeMultiplierBonus()}>
276-
Upgrade Time Multiplier Bonus
277-
</button>
278-
<CostDisplay cost={2.5e3 * Math.pow(10, timeMultiplierBonus)} />
279-
Click Multiplier Bonus:{" "}
280-
<NumericDisplay value={clickMultiplierBonus} shortForm={false} />
281-
<br />
282-
{/*upgrade click multiplier bonus*/}
283-
<button onClick={() => upgradeClickMultiplierBonus()}>
284-
Upgrade Click Multiplier Bonus
285-
</button>
286-
<CostDisplay cost={5e3 * Math.pow(10, clickMultiplierBonus)} />
287-
Clicker Bonus: <NumericDisplay value={clickerBonus} shortForm={false} />
288-
<br />
289-
{/*upgrade clicker bonus*/}
290-
<button onClick={() => upgradeClickerBonus()}>
291-
Upgrade Clicker Bonus
292-
</button>
293-
<CostDisplay cost={1e3 * Math.pow(10, clickerBonus)} />
294-
Autoclicker Level:{" "}
295-
<NumericDisplay value={autoClickers} shortForm={false} />
296-
<br />
297-
{/*upgrade autoclicker (points per second)*/}
298-
<button onClick={() => upgradeAutoClicker()}>Upgrade Autoclicker</button>
299-
<CostDisplay cost={10 * Math.pow(2, autoClickers)} />
300-
Autoclicker Multiplier Level:{" "}
301-
<NumericDisplay value={autoClickersMultiplier} shortForm={false} />
302-
<br />
303-
{/*upgrade autoclicker multiplier*/}
304-
<button onClick={() => upgradeAutoClickerMultiplier()}>
305-
Upgrade Autoclicker Multiplier
306-
</button>
307-
<CostDisplay cost={100 * Math.pow(2, autoClickersMultiplier - 1)} />
308-
Autoclicker Level Bonus:{" "}
309-
<NumericDisplay value={autoClickersLevelBonus} shortForm={false} />
310-
<br />
311-
{/*upgrade autoclicker level bonus*/}
312-
<button onClick={() => upgradeAutoClickerLevelBonus()}>
313-
Upgrade Autoclicker Level Bonus
314-
</button>
315-
<CostDisplay cost={1e3 * Math.pow(2, autoClickersLevelBonus)} />
316-
Autoclicker Bonus:{" "}
317-
<NumericDisplay value={autoClickersBonus} shortForm={false} />
318-
<br />
319-
{/*upgrade autoclicker bonus*/}
320-
<button onClick={() => upgradeAutoClickerBonus()}>
321-
Upgrade Autoclicker Bonus
322-
</button>
323-
<CostDisplay cost={1e4 * Math.pow(3, autoClickersBonus)} />
324-
Autoclicker Bonus Multiplier:{" "}
325-
<NumericDisplay value={autoClickersBonus} shortForm={false} />
326-
<br />
327-
{/*upgrade autoclicker bonus multiplier*/}
328-
<button onClick={() => upgradeAutoClickerBonusMultiplier()}>
329-
Upgrade Autoclicker Bonus Multiplier
330-
</button>
331-
<CostDisplay cost={1e5 * Math.pow(5, autoClickersBonusMultiplier)} />
258+
<tr>
259+
<td>
260+
Time Multiplier Bonus:{" "}
261+
<NumericDisplay value={timeMultiplierBonus} shortForm={false} />
262+
<br />
263+
{/*upgrade time multiplier bonus*/}
264+
<button onClick={() => upgradeTimeMultiplierBonus()}>
265+
Upgrade Time Multiplier Bonus
266+
</button>
267+
<CostDisplay cost={2.5e3 * Math.pow(10, timeMultiplierBonus)} />
268+
</td>
269+
</tr>
270+
<tr>
271+
<td>
272+
Click Multiplier Bonus:{" "}
273+
<NumericDisplay value={clickMultiplierBonus} shortForm={false} />
274+
<br />
275+
{/*upgrade click multiplier bonus*/}
276+
<button onClick={() => upgradeClickMultiplierBonus()}>
277+
Upgrade Click Multiplier Bonus
278+
</button>
279+
<CostDisplay cost={5e3 * Math.pow(10, clickMultiplierBonus)} />
280+
</td>
281+
</tr>
282+
<tr>
283+
<td>
284+
Clicker Bonus:{" "}
285+
<NumericDisplay value={clickerBonus} shortForm={false} />
286+
<br />
287+
{/*upgrade clicker bonus*/}
288+
<button onClick={() => upgradeClickerBonus()}>
289+
Upgrade Clicker Bonus
290+
</button>
291+
<CostDisplay cost={1e3 * Math.pow(10, clickerBonus)} />
292+
</td>
293+
</tr>
294+
295+
<table>
296+
<thead>
297+
<tr>
298+
<th>
299+
Item (1% bonus per autoclicker upgrade per bonus multiplier
300+
upgrade)
301+
</th>
302+
<th>
303+
Multiplier (2% bonus per multiplier upgrade per bonus multiplier
304+
upgrade)
305+
</th>
306+
<th>
307+
Level Bonus (1% bonus per autoclicker level, 3% bonus per level
308+
bonus upgrade per bonus multiplier upgrade)
309+
</th>
310+
<th>
311+
Bonus (1% bonus per upgrade, 4% bonus per bonus upgrade per bonus
312+
multiplier upgrade)
313+
</th>
314+
<th>Bonus Multiplier (5% bonus per bonus multiplier upgrade)</th>
315+
</tr>
316+
</thead>
317+
<tbody>
318+
<tr>
319+
<td>
320+
Clicker Level:{" "}
321+
<NumericDisplay value={clickers} shortForm={false} />
322+
<br />
323+
{/*upgrade clicker (points per click)*/}
324+
<button onClick={() => upgradeClicker()}>Upgrade Clicker</button>
325+
<CostDisplay cost={10 * Math.pow(2, clickers - 1)} />
326+
</td>
327+
<td>
328+
Clicker Multiplier Level:{" "}
329+
<NumericDisplay value={clickersMultiplier} shortForm={false} />
330+
<br />
331+
{/*upgrade clicker multiplier*/}
332+
<button onClick={() => upgradeClickerMultiplier()}>
333+
Upgrade Clicker Multiplier
334+
</button>
335+
<CostDisplay cost={100 * Math.pow(2, clickersMultiplier - 1)} />
336+
</td>
337+
</tr>
338+
<tr>
339+
<td>
340+
Autoclicker Level:{" "}
341+
<NumericDisplay value={autoClickers} shortForm={false} />
342+
<br />
343+
{/*upgrade autoclicker (points per second)*/}
344+
<button onClick={() => upgradeAutoClicker()}>
345+
Upgrade Autoclicker
346+
</button>
347+
<CostDisplay cost={10 * Math.pow(2, autoClickers)} />
348+
</td>
349+
<td>
350+
Autoclicker Multiplier Level:{" "}
351+
<NumericDisplay
352+
value={autoClickersMultiplier}
353+
shortForm={false}
354+
/>
355+
<br />
356+
{/*upgrade autoclicker multiplier*/}
357+
<button onClick={() => upgradeAutoClickerMultiplier()}>
358+
Upgrade Autoclicker Multiplier
359+
</button>
360+
<CostDisplay
361+
cost={100 * Math.pow(2, autoClickersMultiplier - 1)}
362+
/>
363+
</td>
364+
<td>
365+
Autoclicker Level Bonus:{" "}
366+
<NumericDisplay
367+
value={autoClickersLevelBonus}
368+
shortForm={false}
369+
/>
370+
<br />
371+
{/*upgrade autoclicker level bonus*/}
372+
<button onClick={() => upgradeAutoClickerLevelBonus()}>
373+
Upgrade Autoclicker Level Bonus
374+
</button>
375+
<CostDisplay cost={1e3 * Math.pow(2, autoClickersLevelBonus)} />
376+
</td>
377+
<td>
378+
Autoclicker Bonus:{" "}
379+
<NumericDisplay value={autoClickersBonus} shortForm={false} />
380+
<br />
381+
{/*upgrade autoclicker bonus*/}
382+
<button onClick={() => upgradeAutoClickerBonus()}>
383+
Upgrade Autoclicker Bonus
384+
</button>
385+
<CostDisplay cost={1e4 * Math.pow(3, autoClickersBonus)} />
386+
</td>
387+
<td>
388+
Autoclicker Bonus Multiplier:{" "}
389+
<NumericDisplay value={autoClickersBonus} shortForm={false} />
390+
<br />
391+
{/*upgrade autoclicker bonus multiplier*/}
392+
<button onClick={() => upgradeAutoClickerBonusMultiplier()}>
393+
Upgrade Autoclicker Bonus Multiplier
394+
</button>
395+
<CostDisplay
396+
cost={1e5 * Math.pow(5, autoClickersBonusMultiplier)}
397+
/>
398+
</td>
399+
</tr>
400+
</tbody>
401+
</table>
332402
</div>
333403
);
334404
}

0 commit comments

Comments
 (0)