Adding the web assets

Create a folder in your project folder named /public. Add a new file named index.html to the /public folder and populate it with the following contents:

<!doctype html>
<html lang="en-us">
<head>
  <title>Tetris</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <div class="wrapper">
    <h1>Tetris</h1>
    <div>
      <canvas id="canvas"></canvas>
      <div class="scoreWrapper">
        <span>ROWS:</span><span id="score"></span>
      </div>
    </div>
  </div>
  <script type="application/javascript" src="index.js"></script>
  <script type="application/javascript">
    Module({ canvas: (() => document.getElementById('canvas'))() })
  </script>
</body>
</html>

The index.js file being loaded in the first <script> tag doesn't exist yet; that'll be generated in the compilation step. Let's add some styles to the elements. Create a styles.css file in the /public folder and populate it with the following contents:

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

* {
  font-family: "Press Start 2P", sans-serif;
}

body {
  margin: 24px;
}

h1 {
  font-size: 36px;
}

span {
  color: white;
  font-size: 24px;
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.titleWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  font-size: 24px;
  margin-left: 16px;
}

.scoreWrapper {
  background-color: #3A3A3A;
  border-top: 1px solid white;
  padding: 16px 0;
  width: 360px;
}

span:first-child {
  margin-left: 16px;
  margin-right: 8px;
}

Since the Press Start 2P font we're using is hosted on Google Fonts, we can import it for use on the site. The CSS rules in this file handle simple layout and styling. That's it for the web-related files we needed to create. Now, it's time to update the C++ code.

Table of Contents for Adding the web assets

Create new playlist

Sign In

Sign Up

Table of Contents for
Adding the web assets