Skip to content

Commit

Permalink
convert components into function components
Browse files Browse the repository at this point in the history
  • Loading branch information
signed committed Jan 15, 2023
1 parent 8c6b45d commit 5f832e5
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 110 deletions.
2 changes: 1 addition & 1 deletion src/Gallery.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import BattleGoalCard from 'battlegoals/BattleGoalCard'
import { BattleGoalCard } from 'battlegoals/BattleGoalCard'
import { BattleGoal, battleGoalImages, officialBattleGoals, satireGamingBattleGoals } from 'battlegoals/battleGoals'
import { css } from 'lang/react'
import * as React from 'react'
Expand Down
39 changes: 16 additions & 23 deletions src/app/Shop.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,28 @@
import * as React from 'react'
import { noop, NoState } from 'lang/react'
import { rangeFromTo } from 'lang/ranges'
import { itemToDiv } from 'cards/cards'
import { itemIdsByProsperityLevel } from 'app/Propsperity'
import { itemToDiv } from 'cards/cards'
import { rangeFromTo } from 'lang/ranges'
import { noop } from 'lang/react'
import * as React from 'react'

interface ProsperityInputProps {
onIncreaseProsperity: () => void
prosperity: number
}

export class ProsperityInput extends React.Component<ProsperityInputProps, NoState> {
constructor(props: ProsperityInputProps) {
super(props)
this.increaseProsperity = this.increaseProsperity.bind(this)
}

increaseProsperity() {
this.props.onIncreaseProsperity()
export const ProsperityInput = (props: ProsperityInputProps) => {
const increaseProsperity = () => {
props.onIncreaseProsperity()
}

render() {
const prosperity = this.props.prosperity
return (
<h2 key="h2">
Prosperity {prosperity}
<button disabled={prosperity >= 9} type="button" onClick={this.increaseProsperity}>
+
</button>
</h2>
)
}
const prosperity = props.prosperity
return (
<h2 key="h2">
Prosperity {prosperity}
<button disabled={prosperity >= 9} type="button" onClick={increaseProsperity}>
+
</button>
</h2>
)
}

interface ShopProps {
Expand Down
164 changes: 79 additions & 85 deletions src/battlegoals/BattleGoalCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react'
import { css, NoState } from 'lang/react'
import { BattleGoal, battleGoalImages } from 'battlegoals/battleGoals'
import { range } from 'lang/ranges'
import { css } from 'lang/react'
import * as React from 'react'

interface BattleGoalCardProps {
battleGoal: BattleGoal
Expand All @@ -15,97 +15,91 @@ const battleGoalStyle = css({
width: 200,
})

export default class BattleGoalCard extends React.Component<BattleGoalCardProps, NoState> {
constructor(props: BattleGoalCardProps) {
super(props)
}

public render(): React.ReactNode {
const imageStyle = css({
borderRadius: '15px',
height: '100%',
width: '100%',
})
export const BattleGoalCard = (props: BattleGoalCardProps) => {
const imageStyle = css({
borderRadius: '15px',
height: '100%',
width: '100%',
})

if (this.props.cardShadow) {
imageStyle.boxShadow = '0px 12px 22px 1px rgb(27, 26, 26)'
}
if (this.props.blurCard) {
imageStyle.filter = 'blur(5px) brightness(0.5)'
}

return (
<div style={battleGoalStyle}>
<img style={imageStyle} src={battleGoalImages.foreground} alt="ups" />
{this.renderOverlay()}
</div>
)
if (props.cardShadow) {
imageStyle.boxShadow = '0px 12px 22px 1px rgb(27, 26, 26)'
}
if (props.blurCard) {
imageStyle.filter = 'blur(5px) brightness(0.5)'
}

return (
<div style={battleGoalStyle}>
<img style={imageStyle} src={battleGoalImages.foreground} alt="ups" />
<BattleGoalCardOverlay battleGoal={props.battleGoal} />
</div>
)
}

private renderOverlay(): React.ReactNode {
const overlayStyle = css({
position: 'absolute',
top: '22%',
width: '64%',
bottom: '10%',
left: '18%',
display: 'flex',
flexDirection: 'column',
textAlign: 'center',
})
const overlayStyle = css({
position: 'absolute',
top: '22%',
width: '64%',
bottom: '10%',
left: '18%',
display: 'flex',
flexDirection: 'column',
textAlign: 'center',
})

const titleStyle = css({
margin: '0',
fontFamily: 'Pirata One',
fontSize: '1.35em',
fontWeight: 'normal',
})
const titleStyle = css({
margin: '0',
fontFamily: 'Pirata One',
fontSize: '1.35em',
fontWeight: 'normal',
})

const descriptionStyle = css({
display: 'flex',
alignItems: 'center',
fontFamily: 'High Tower',
fontSize: '0.8em',
lineHeight: '1.2em',
height: '52%',
padding: '0 7% 0 7%',
})
const descriptionStyle = css({
display: 'flex',
alignItems: 'center',
fontFamily: 'High Tower',
fontSize: '0.8em',
lineHeight: '1.2em',
height: '52%',
padding: '0 7% 0 7%',
})

const perksStyle = css({
position: 'absolute',
bottom: '12.5%',
left: '50%',
width: '50%',
margin: '0 0 0 -30%',
fontSize: '2em',
fontWeight: 'bold',
})
const perksStyle = css({
position: 'absolute',
bottom: '12.5%',
left: '50%',
width: '50%',
margin: '0 0 0 -30%',
fontSize: '2em',
fontWeight: 'bold',
})

const cardNumberStyle = css({
position: 'absolute',
bottom: '3%',
left: '50%',
width: '20%',
margin: '0 0 0 -15%',
color: 'white',
fontSize: 'xx-small',
})
const cardNumberStyle = css({
position: 'absolute',
bottom: '3%',
left: '50%',
width: '20%',
margin: '0 0 0 -15%',
color: 'white',
fontSize: 'xx-small',
})

const battleGoal = this.props.battleGoal
const BattleGoalCardOverlay = (props: Pick<BattleGoalCardProps, 'battleGoal'>) => {
const battleGoal = props.battleGoal

return (
<div style={overlayStyle}>
<h3 style={titleStyle}>{battleGoal.displayName}</h3>
<section style={descriptionStyle}>{battleGoal.text}</section>
<div key="perks" style={perksStyle}>
{range(0, battleGoal.reward)
.map(() => '✓')
.join('')}
</div>
<div key="globalCardId" style={cardNumberStyle}>
{battleGoal.globalCardId.displayString()}
</div>
return (
<div style={overlayStyle}>
<h3 style={titleStyle}>{battleGoal.displayName}</h3>
<section style={descriptionStyle}>{battleGoal.text}</section>
<div key="perks" style={perksStyle}>
{range(0, battleGoal.reward)
.map(() => '✓')
.join('')}
</div>
)
}
<div key="globalCardId" style={cardNumberStyle}>
{battleGoal.globalCardId.displayString()}
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion src/battlegoals/PartyBattleGoals.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { css, noop, NoProps } from 'lang/react'
import { partition, shuffle } from 'lang/arrays'
import { range } from 'lang/ranges'
import { BattleGoal, battleGoalByGlobalId, officialBattleGoals, satireGamingBattleGoals } from 'battlegoals/battleGoals'
import BattleGoalCard from 'battlegoals/BattleGoalCard'
import { BattleGoalCard } from 'battlegoals/BattleGoalCard'
import CardIdentifier from 'cards/CardIdentifier'

function drawDistinctBattleGoals(allBattleGoals: Array<BattleGoal>, count: number): Array<BattleGoal> {
Expand Down

0 comments on commit 5f832e5

Please sign in to comment.