GenerateHTML

loads of html :D

HTML

<div class="item-container" id="itemContainer">

</div>

CSS

.hud-item {
	position: relative;
	flex-direction: row;
	width: 64px;
	height: 64px;
	margin: 5px;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgb(128, 128, 128);
	transition: box-shadow .3s;
}
.hud-item:hover { box-shadow: inset 0 0 10px 1px rgb(0, 204, 255); }
.hud-item:hover .hud-tooltip { display: initial; }
.hud-tooltip {
	display: none;
	position: absolute;
	width: 500%;
	height: auto;
	padding: 10px;
	top: 125%;
	left: -200%;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, .9);
	border: 1px solid rgba(0, 0, 0, 1);
	border-radius: 1px;
	text-align: center;
	z-index: 1;
	animation-name: animatetooltip;
  animation-duration: .3s;
}
.hud-tt-header-container {
	display: flex;
}
.hud-tt-info-container {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
}
.hud-tt-lv-container {
	width: 64px;
	height: 64px;
}
.col-half { flex-basis: 50%; padding: 5px; box-sizing: border-box; }
.col-full { flex-basis: 100%; padding: 5px; box-sizing: border-box; }

@keyframes animatetooltip {
  from { left: -240%; opacity: 0; }
  to { left: -200%; opacity: 1; }
}

.item-container {
  width: 232px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
}

.fgrey{ color: #808080; }
.fwhite{ color: #FFFFFF; }

JavaScript

const upgrades = [{
    "Id": "lasBeam",
    "Name": "Laser Beam",
    "Info": "Basic beam for your laser gun. Low price makes it efficient, scalable upgrade",
    "Res": "plutonium"
}, {
    "Id": "lasIntens",
    "Name": "Laser Intensifier",
    "Info": "Intensifies the laser for more damage",
    "Res": "plutonium"
}, {
    "Id": "lasAmp",
    "Name": "Laser Amplifier",
    "Info": "Amplifies the laser strength",
    "Res": "plutonium"
}, {
    "Id": "nitCool",
    "Name": "Nitrogen Cooler",
    "Info": "Advanced cooler that prevents your LaserGun from heating up",
    "Res": "viridium"
}, {
    "Id": "relAcc",
    "Name": "Reload Accelerator",
    "Info": "Reduces time needed to reload the LaserGun",
    "Res": "viridium"
}, {
    "Id": "pClip",
    "Name": "Plasma Clip",
    "Info": "Holds so much more ammo than basic clip, meaning you wont have to reload very often",
    "Res": "viridium"
}, {
    "Id": "expProp",
    "Name": "Explosion Propulsion",
    "Info": "Laser now explodes upon impact",
    "Res": "heridium"
}, {
    "Id": "expIntens",
    "Name": "Explosion Intensifier",
    "Info": "Intensifies the explosion for more damage",
    "Res": "heridium"
}, {
    "Id": "expAmp",
    "Name": "Explosion Amplifier",
    "Info": "Amplifies the explosion strength",
    "Res": "heridium"
}]

class UpgradeBlock {
	constructor(props) {
	  this.props = props;
  }
  render() {
  	let { Id, Name, Info, Res } = this.props;
    // basically:
    // let Id = this.props.Id;
    // let Name = this.props.Name;
    // etc
  	return (`
<div class="hud-item" id="${Id}">
	<img src="client/img/${Id}.png" id="${Id}Img" />
    <div class="hud-tooltip f16 fwhite">
        <div class="hud-tt-header-container">
            <div class="hud-tt-info-container">
                <div class="col-full">${Name}</div>
                <div class="col-half">
                	<img style="vertical-align: text-bottom;" src="img/${Res}16.png" />
                  <span...