progFunFinalProgram/index.html at master · leducrd/progFunFinalProgram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Default Page</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
    <div id="container">
      <section id="gameCanvasArea">
        <canvas width="1075" height="350" id="gameBoard"></canvas>
      </section>
      <div id="sidebar">
        <section id ="title">
          <h1>Path of Destiny</h1>
          <h2>Javascript Board Game V1.0</h2>
          <p>Player 1 is ready to go. Just click the D10 die to move!</p>
        </section>
        <section id="player1Area">
          <p><span id ="player1NotifyOutput"></span></p>
          <p>Player 1 Position: <span id="player1PositionOutput"></span></p>
        </section>
        <section id="player2Area">
          <p><span id ="player2NotifyOutput"></span></p>
          <p>Player 2 Position: <span id="player2PositionOutput"></span></p>
        </section>
        <section id="dieArea">
          <p>Click D10 below to roll the die!</p>
          <div id ="playerRoll">
            <form id="rollD10Die">
              <input type="image" src="images/d10pic.png" id="DTen" alt="Click to roll D10 die!">
            </form>
            <p>Roll Result: <span id="rollResultOutput"></span></p>
            <form id="moveForward">
              <input type="submit" id="forward" value="forward">
            </form>
            <form id="moveBackward">
              <input type="submit" id="backward" value="backward">
            </form>
          </div>
        </section>
      </div>
      <script src="js/drawgameboard2.js"></script>
      <script src="js/playeractions.js"></script>
    </div>
  </body>
</html>