-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (97 loc) · 4.79 KB
/
index.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE HTML>
<html>
<head>
<title>Experiment Task</title>
<style>
canvas{
border: 2px solid black;
background-color: white;
}
</style>
<meta charset="UTF-8">
</head>
<!-- PULLED ON NOVEMBER 18 -->
<!-- COPYRIGHTED (C) 2020, RAIL Lab @ Georgia Tech -->
<!-- script imports, you may need to reformat based on the webserver you are using (an example for Python Flask is commented out below) -->
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<script src="js/sagat.js"></script>
<script src="js/motion.js"></script>
<script src="js/shapes.js"></script>
<script src="js/utility.js"></script>
<script src="js/sidePanel.js"></script>
<script src="js/gameObjects/gameboard.js"></script>
<script src="js/gameObjects/package.js"></script>
<script src="js/gameObjects/spawner.js"></script>
<script src="js/gameObjects/warehouse.js"></script>
<!--
<link rel="stylesheet" href="{{url_for('static', filename='sa-test/css/styles.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<script src="{{url_for('static', filename='sa-test/js/sagat.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/motion.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/shapes.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/utility.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/sidePanel.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/gameObjects/gameboard.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/gameObjects/package.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/gameObjects/spawner.js')}}"></script>
<script src="{{url_for('static', filename='sa-test/js/gameObjects/warehouse.js')}}"></script>
-->
<body>
<!-- constructs the HTML body, it is simply a header title and two "side panel" divs side by side, and a button -->
<div class="center-div">
<h1></h1>
<div style="display: flex;">
<canvas id="Canvas" class="stage" width="1200" height="800"></canvas>
<div id="SidePanel" class="side-panel">
<div id="SidePanelTitle" style="text-decoration: underline; text-align: center;"></div>
<div id="SidePanelContent"></div>
<br>
<div style="display:flex; flex-direction: column; justify-content: center">
<button id="sagat-resume" class="resume" onclick="sagat.unfreeze();">Resume</button>
</div>
</div>
</div>
</div>
<script>
// initialize the situational awareness test and launch it
// log that this page is active
log({"stage": "SAGAT", "action": "opened-page"});
var seed = xmur3("RAIL Lab"); // use xmur3 to create a seed hash
var rand = mulberry32(seed()); // use the mulberry32 algorithm for the random number generator
var stage = document.getElementById("Canvas"); // the gameboard stage (for drawing)
var context = stage.getContext("2d"); // the gameboard context (for drawing)
var tutorialActive = true;
var gameActive = false;
var workerId = "{{ worker_id }}"; // the worker ID is used for logging
var mission = "{{ mission }}"; // the mission ID is used by the RAIL lab and sent back to the experiment portal at the end, to indicate what comes next in the experiment
// initialize lists used to keep track of things
var packages = []; // active packages
var warehouses = []; // active warehouses
var spawners = []; // active spawners
// initialize the gameboard
var gameboard = new Gameboard(context);
gameboard.generateTutorialGameboard();
// initialize the SAGAT test
var sagat = new SAGAT();
// set the side panel to the introduction
sidePanelTutorial1();
window.addEventListener("mousedown", mouseHandler);
// main game loop
function updateBoard() {
context.clearRect(0, 0, stage.width, stage.height); // clear the gameboard
gameboard.draw(sagat.active); // draw the gameboard
if (gameActive) { // only run if the game is active
sagat.timestep();
if (!sagat.active) { // if the board isn't frozen, update the packages
movePackages(packages); // move and draw the packages
updateWarehouses(warehouses); // update the warehouses
updateSpawners(spawners, packages); // update the spawners
}
}
window.requestAnimationFrame(updateBoard);
}
window.requestAnimationFrame(updateBoard);
</script>
</body>
</html>