Skip to content

Commit

Permalink
designing score board batters, 1st innings details
Browse files Browse the repository at this point in the history
  • Loading branch information
@altafjava
altafjava committed Jan 7, 2022
1 parent c034194 commit 941455f
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 19 deletions.
45 changes: 44 additions & 1 deletion src/components/ScoreBoard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ table thead {
padding: 0 !important;
}
.batter-name {
max-width: 6rem;
max-width: 6.5rem;
}
.extras-container {
margin: 0.8rem 0;
Expand Down Expand Up @@ -158,3 +158,46 @@ table thead {
.text-center {
text-align: center;
}
.score-board-container {
margin: 0.8rem 0;
}
.score-board-innings {
display: flex;
justify-content: space-between;
padding: 6px 4px;
color: #fff;
background: #737373;
font-size: 0.95rem;
}
.score-board-text {
color: #fff;
background: #404040;
padding: 8px;
}
.sb-batting {
display: flex;
align-items: center;
justify-content: flex-start;
}
.sb-batting table {
width: 100%;
border: none;
border-spacing: unset;
}
.sb-batting table thead {
font-size: 0.9rem;
}
.sb-batting table tbody {
font-size: 0.85rem;
}
.sb-batting table td {
padding: 8px 4px;
}
.score-board-extras {
margin: 0.8rem 0;
display: flex;
justify-content: space-between;
padding: 6px 4px;
font-size: 0.85rem;
background: #3f51b517;
}
82 changes: 64 additions & 18 deletions src/components/ScoreBoard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,14 @@ const ScoreBoard = () => {
return {
...state,
inning1: {
run: totalRuns,
runs: totalRuns,
wickets: wicketCount,
runRate: crr,
overs: totalOvers,
four: totalFours,
six: totalSixes,
extra: extras,
batters: batters,
},
}
})
Expand Down Expand Up @@ -528,28 +529,14 @@ const ScoreBoard = () => {
if (batter1.name !== undefined && batter2.name !== undefined && bowler !== '') {
enableAllScoreButtons()
}
const inning1 = match.inning1
const target = (match && match.inning1 && match.inning1.run + 1) === undefined ? 0 : match.inning1.run + 1
let rrr = (remainingRuns / (remainingBalls / 6)).toFixed(2)
rrr = isFinite(rrr) ? rrr : 0
const overs = overCount + ballCount / 6
let crr = (totalRuns / overs).toFixed(2)
crr = isFinite(crr) ? crr : 0

const welcomeContent = (
<>
<div></div>
<div>Welcome to Gully Cricket Score Board</div>
<div></div>
</>
)
const firstInningCompletedContent = (
<>
{overCount === maxOver && <div>1st inning completed</div>}
{wicketCount === 10 && <div>All Out</div>}
<div>Please click "End Inning" button</div>
</>
)

const scoringTeam = batting === team1 ? team1 : team2
const chessingTeam = scoringTeam === team1 ? team2 : team1
let winningMessage = `${inningNo === 1 ? scoringTeam : chessingTeam} needs ${remainingRuns} ${
Expand All @@ -569,14 +556,27 @@ const ScoreBoard = () => {
endMatch()
}
}
const welcomeContent = (
<>
<div></div>
<div>Welcome to Gully Cricket Score Board</div>
<div></div>
</>
)
const firstInningCompletedContent = (
<>
{overCount === maxOver && <div>1st inning completed</div>}
{wicketCount === 10 && <div>All Out</div>}
<div>Please click "End Inning" button</div>
</>
)
const remainingRunsContent = (
<>
<div>Target: {target}</div>
<div>{winningMessage}</div>
<div>RRR: {isNaN(rrr) ? 0 : rrr}</div>
</>
)

return (
<div className='container'>
<div className='inning'>
Expand Down Expand Up @@ -700,7 +700,7 @@ const ScoreBoard = () => {
<thead>
<tr>
<td className='score-types padding-left'>Batting</td>
<td className='score-types'>Run(Ball)</td>
<td className='score-types'>R(B)</td>
<td className='score-types text-center'>4s</td>
<td className='score-types text-center'>6s</td>
<td className='score-types text-center'>SR</td>
Expand Down Expand Up @@ -857,6 +857,52 @@ const ScoreBoard = () => {
</table>
</div>
</div>
<div className='score-board-container'>
<div className='score-board-text text-center'>Score Board</div>
<div>
<div className='score-board-innings'>
<div>{scoringTeam} Innings</div>
<div>RR:{inningNo === 1 ? crr : inning1.runRate}</div>
<div>
{inningNo === 1 ? totalRuns : inning1.runs}-{inningNo === 1 ? wicketCount : inning1.wickets} (
{inningNo === 1 ? totalOvers : inning1.overs} Ov)
</div>
</div>
<div className='sb-batting'>
<table>
<thead>
<tr>
<td className='score-types padding-left'>Batter</td>
<td className='score-types'>R(B)</td>
<td className='score-types text-center'>4s</td>
<td className='score-types text-center'>6s</td>
<td className='score-types text-center'>SR</td>
</tr>
</thead>
<tbody>
{batters.map((batter, i) => (
<tr key={i}>
<td className='score-types padding-left'>{batter.name}</td>
<td className='score-types'>
{batter.run}({batter.ball})
</td>
<td className='score-types text-center'>{batter.four}</td>
<td className='score-types text-center'>{batter.six}</td>
<td className='score-types text-center'>{batter.strikeRate}</td>
</tr>
))}
<tr>
<td className='score-types padding-left'>Extras:</td>
<td className='score-types'>{inningNo === 1 ? extras.total : inning1.extra.total}</td>
<td className='score-types text-center'>wd:{inningNo === 1 ? extras.wide : inning1.extra.wide}</td>
<td className='score-types text-center'>nb:{inningNo === 1 ? extras.noBall : inning1.extra.noBall}</td>
<td className='score-types text-center'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)
Expand Down

0 comments on commit 941455f

Please sign in to comment.