My app has some CSS code that I found, but it's too small. Can anyone help me increase the size by 150%? I am using React-Bootstrap for styling, so I'm looking for a way to enlarge the element without adjusting every attribute in the CSS classes.
I have made some progress with this code: https://codesandbox.io/s/baseball-bases-component-stackoverflow-113u7?file=/example.js
Below is the lengthy code:
React Component
import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import "./example.css";
class GamePlay extends Component {
render() {
const styles = {
grid: {
paddingLeft: 0,
paddingRight: 0
},
row: {
marginLeft: 3,
marginRight: 0
},
col: {
paddingLeft: 0,
paddingRight: 0
},
center: {
paddingLeft: 0,
paddingRight: 0
}
};
let situation = {onFirst: true, onSecond: true, onThrid: false, balls: 2, strikes: 1, outs: 2};
let balls = new Array(4).fill(<span className="circle balls"></span>);
let strikes = new Array(3).fill(<span className="circle strikes"></span>);
let outs = new Array(3).fill(<span className="circle outs"></span>);
for (let i = 0; i < situation.balls; i++) {
balls[i] = <span className="circle balls active"></span>;
}
for (let i = 0; i < situation.strikes; i++) {
strikes[i] = <span className="circle strikes active"></span>;
}
for (let i = 0; i < situation.outs; i++) {
outs[i] = <span className="circle outs active"></span>;
}
return (
<Container>
<Row>
<Col sm="auto">
<Row style={styles.row}>
<Col sm="auto" style={styles.col}>
<div className={"diamond second-base " + (situation.onSecond ? "active" : null)}></div>
</Col>
</Row>
<Row style={styles.col}>
<Col sm="auto" style={styles.center}>
<div className={"diamond third-base " + (situation.onThird ? "active" : null)}></div>
</Col>
<Col sm="auto" style={styles.col}>
<div className={"diamond first-base " + (situation.onFirst ? "active" : null)}></div>
</Col>
</Row>
</Col>
<Col sm="auto">
<div className="circleGraphs">
<div className="circleGraph four">
<span className="abbrev">B</span>
{balls}
</div>
<div className="circleGraph ">
<span className="abbrev">S</span>
{strikes}
</div>
<div className="circleGraph ">
<span className="abbrev">O</span>
{outs}
</div>
</div>
</Col>
</Row>
</Container>
);
}
}
export default GamePlay;
CSS File
<!-- Styles for different elements -->