MDjavaheri.github.io/index.html at master · MDjavaheri/MDjavaheri.github.io · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
	<head>
		<title>Rock, Paper, Scissors!</title>
		<meta charset="utf-8">
		<!--CSS-->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	    <link href="https://code.jquery.com/qunit/qunit-1.22.0.css" rel="stylesheet">
		<link href="css/rps.css" type="text/css" rel="stylesheet" />
	</head>

	<body>
		<h1>Rock, Paper, Scissors!</h1>

		<p>
			You know the rules!
			<br>
			Let's Play!
		</p>

		<div id="gamearea">
			<!--Computer's Current Move & Taunt Message-->
			<div id="computer" class="container">
				<img src="images/computer.jpg" class="img-responsive" alt="Responsive image">
				<div class="move">
				</div>
			</div>
			<p id="taunt">Pick an opponent gameplay strategy to mix it up a little.</p>


			<!--Pick a game strategy for the Computer and a move to play-->
			<div id="playerDashboard" class="container">
				<!--The Scoreboard-->
				<div id="scores" class="controls">
					<h3>Your Score</h3>
					<p>Wins: <span id="wins">0</span></p>
					<p>Losses: <span id="losses">0</span></p>
					<p>Ties: <span id="ties">0</span></p>
					<button type="button" class="btn btn-warning" id="reset">Reset</button>
				</div>
				<!--Change Computer's Playing' Strategy-->
				<div id="strategy" class="controls">
					<h3>Computer Strategy: <span>Random</span> Move</h3> <!--Make into a bootstrap button-->
					<div class="btn-group" role="group" aria-label="">
						<button type="button" class="btn btn-default strButton" value="last">Last Move</button>
						<button type="button" class="btn btn-default strButton" value="mostPopular" >Most Popular Move</button>
						<button type="button" class="btn btn-default strButton" value="random">Random</button>
					</div>
				</div>
				<!--Pick Your Next Move-->
				<div id="playerMoves" class="controls">
					<h3>Available Moves</h3>
					<button type="button" class="btn btn-info move" data="rock">
						  <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
							Rock
					</button>
					<button type="button" class="btn btn-info move" data="paper">
						<span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>
						Paper
					</button>
					<button type="button" class="btn btn-info move" data="scissors">
						<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
						Scissors
					</button>
				</div>
			</div>
		</div>
		<footer>
			<!--Game Log of Moves and Results, also logs Test Results -->
			<div class="well" id="log">
				<ol id="log">
				</ol>
				<!--<span>Log</span>-->
			</div>
			<a href="tests.html"><h3>Test Fixture</h3></a>
			<!--JS-->
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" type="text/javascript"></script>
			<script src="js/rps.js" type="text/javascript"></script>
		</footer>
	</body>
</html>