osrs runescape stats screen React

index.html

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Gamja Flower">
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

osrs-runescape-stats-screen-react.markdown

osrs runescape stats screen React

A Pen by MichaelDimmitt on CodePen.

License.

script.babel

function Clock() {
  const stats = [
    [01, "Attack_icon.png"],
    [10, "Hitpoints_icon.png"],
    [99, "Mining_icon.png"],
    [01, "Strength_icon.png"],
    [99, "Agility_icon.png"],
    [99, "Smithing_icon.png"],
    [01, "Defence_icon.png"],
    [99, "Herblore_icon.png"],
    [99, "Fishing_icon.png"],
    [01, "Ranged_icon.png"],
    [99, "Thieving_icon.png"],
    [99, "Cooking_icon.png"],
    [01, "Prayer_icon.png"],
    [99, "Crafting_icon.png"],
    [99, "Firemaking_icon.png"],
    [01, "Magic_icon.png"],
    [99, "Fletching_icon.png"],
    [99, "Woodcutting_icon.png"],
    [99, "Runecraft_icon.png"],
    [99, "Slayer_icon.png"],
    [99, "Farming_icon.png"],
    [99, "Construction_icon.png"],
    [99, "Hunter_icon.png"]
  ]
    return (
      <div>
        <div style={{position: "absolute", left: "350px", top: "0"}}>
          <h2 style={{textAlign: "center"}}>The Goal</h2>
          <img src="https://raw.githubusercontent.com/MichaelDimmitt/runescape-stats-screen/master/assets/The_Goal.png" width="300" />
        </div>
        <h2 style={{textAlign: "center", width: "300px"}}>Current Status</h2>

        <section style={{display: "flex", flexWrap: "wrap"}}> 
            <div id="outer-box" className="outer-box">
                <div id="inner-box" className="inner-box">
                  {stats.map( stat => <StatItem key={stat[1]} stat={stat}/> )}
                  <div className="cell">
                          <h3 style={{ position: "absolute", top: "-18px", left: "4px"}}>{`Total Level`}</h3>
                          <h3 style={{ position: "absolute", left: "30px"}}>{`1600`}</h3>
                  </div>
                </div>
            </div>
          </section>
        </div>
    );
}
function StatItem({stat}) {
  return (
    <div className="mop">
      <div className="bar"/>
      <h3 className={stat[0] === 1 ? "aa" :"a"}>{`${stat[0]}`}</h3>
      <h3 className={stat[0] === 1 ? "bb" :"b"}>{`${stat[0]}`}</h3>
      <img src={`https://raw.githubusercontent.com/MichaelDimmitt/runescape-stats-screen/master/assets/${stat[1]}`} 
        style={{position: 'absolute', zIndex: 100, left: "14px", top: "14px"}}         />
      <div style={{position: 'absolute'}}>
        <div id="main">
          <div className="top left"></div>
          <div className="top right"></div>
          <div className="bottom left"></div>
          <div className="bottom right"></div>
        </div>
        <div className="neg-y-100"></div>
        <div className="neg-x-100"></div> 
      </div>
    </div>
  )
}
ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

:root {
  --outer-border-color: #736957;
  --cell-border-color: #675b4a;
  --outer-background-color: #3e3428;
  --cell-background-color: #4e4e49;
  --font-color: #e6e623;
  --black-color: #000000;
  --outer-box-height: 45px;
}
body {
  font-family: 'Gamja Flower', serif;
}

.outer-box {
  color: var(--font-color);
  width: 292px;
  height: 384px;
  padding: 0px 5px 5px 5px;
  border: 7px solid var(--outer-border-color);
  background-color: var(--outer-background-color);
}
.cell {
  position: relative;
  top: 5px;
  left: 4px;
  display: inline-block;
  width: 88px;
  height: calc(var(--outer-box-height) + -4px);
  border: solid var(--cell-border-color);
  background-color: var(--black-color);
}
#main {
  position: relative;
  overflow: hidden;
  left: 2px;

  height: var(--outer-box-height);
  width: 92px;

  margin: 2px;
  background-color: var(--cell-background-color);
}
#main div {
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 100;

  border: solid var(--cell-border-color);
  border-radius: 46%; /* was 100 but the edges were too sharp */
  background-color: var(--outer-background-color);
}
.neg-y-100 {
  position: absolute;
  top: 2px;
  left: 8px;

  height: calc(var(--outer-box-height) + -6px)
  width: calc(100% + -16px);

  border-bottom: solid var(--cell-border-color);
  border-top: solid var(--cell-border-color);
}
.neg-x-100 {
  position: absolute;
  top: 8px;
  left: 4px;
  
  height: calc(var(--outer-box-height) + -12px);
  width: calc(100% + -10px);
  border-radius: 3px;
  border-right: solid var(--cell-border-color);
  border-left: solid var(--cell-border-color);
}
.top { top: -4px; }
.bottom { bottom: -4px; }
.left { left: -4px; }
.right { right: -4px; }
h2 {
  font-weight: normal;
}
.mop {
  position: relative;
  margin: 2px 10px 2px 0px;
  height: calc(var(--outer-box-height) + -8px);
  width: 85px;
  display: inline-block;
  align-self: start;
  vertical-align: top;
  padding-bottom: 5px;
}
.a{
    position: absolute;
    z-index: 10;
    top: -16px;
    right: 16px;
}
.aa {
    position: absolute;
    z-index: 10;
    top: -16px;
    right: 20px;
}
.b {
    position: absolute;
    z-index: 10;
    top: calc(0% + 2px);
    right: -2px;
}
.bb {
    position: absolute;
    z-index: 10;
    top: calc(0% + 2px);
    right: 4px;
}

.bar{
  width:28px;
  height:28px;
  position:absolute;
  z-index: 1;
  right: 0px;
  bottom: -22px;
}

.bar:after{
  content:"";
  position:absolute;
  border-top:1px solid black;
  width:40px;
  transform: rotate(-45deg);
  transform-origin: 0% 0%;
}