BabaIsDefined/game.html at project_js · Rockjack00/BabaIsDefined · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!-- in browser window size game screen -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Level GUI Mode - Keke AI Competition (offline)</title>
		<meta charset="utf-8">

		<!-- bootstrap stuff -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="/socket.io/socket.io.js"></script>


		<!-- main stylesheet -->
		<link rel="stylesheet" href="layout_style.css">

		<!-- extra styles -->
		<style>
			body{
				background-color: #150E16;
			}
			div{
				/*border: 1px solid black;*/
				color: var(--text);
			}
			input{
				color:black;
			}

			#gameWindow{
				background-color: #150E16;
				border:2px solid;
				border-color: #00ff00;
				width: 100%;
				height: auto;
			}

			.lvlsetTxt{
				color:#2CD115;
			}
			.lvlidTxt{
				color:#3AF5E7;
			}
			.agentTxt{
				color:#f00;
			}


			.btm_btn{
				background-color: white;
				color:black;
				border:3px solid;
				border-color: black
			}
			.btm_btn:hover{
				cursor: pointer;
			}
			.pauseBg{
				background-color: #F5BF3A;
			}
			.runBg{
				background-color: #3AF59A;
			}
		</style>

	</head>

	<body onload="init()">
		<div class='container top-buffer05'>
			<!-- author header -->
			<div class='row top-buffer05' id='authorID'>
				<div class='col-xs-12 text-center' style='font-size: 1.5em' id='levelIndex'>
					Level Set: - Level: # - Agent:
				</div>
			</div>
			<!-- game window -->
			<div class='row row-no-gutters top-buffer05'>
				<div class='col-xs-6 col-xs-offset-3 text-center'>
					<canvas width='100' height='100' id='gameWindow'>
						Game goes here. Change your browser if you see this message
					</canvas>
				</div>
			</div>
			<!-- special buttons -->
			<div class='row row-no-gutters' style='border-color:white'>
				<div class='col-xs-2 col-xs-offset-3 text-center btm_btn' onclick='resetMap()' id='resBtn'>Reset Level<br>[R]</div>
				<div class='col-xs-2 text-center btm_btn runBg' onclick='toggleRun(this)' id='togBtn'>Start Run<br>[SPACE]</div>
				<div class='col-xs-2 text-center btm_btn' onclick='window.close()' id='quitBtn'>Quit GUI Mode<br>[Q]</div>
			</div>
			<!-- time step  -->
			<div class='row row-no-gutters top-buffer1'>
				<div class='col-xs-6 col-xs-offset-3 text-center'>
					ms/step: <input type='text' value='250' id='ms_step' size="4" onchange="updateTime()">
				</div>
			</div>
		</div>

		<script src='./gui-client.js'></script>
	</body>
</html>