repl.it
@lydiahallie/

A.I. Drone

HTML, CSS, JS

A.I. for the competition

fork
loading
Files
  • index.html
  • DroneFiles
  • cat.jpg
  • cat2.jpg
  • monitor.html
  • playground.js
  • README.md
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
<html>

<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>
  <script>
  let tutorialTick=true;
  function showTutorial(){
  tutorialTick =!tutorialTick;
  if(tutorialTick){
document.getElementById('tutorButton').innerHTML="hide tutorial";
document.getElementById('tutorial').style="visibility: visible;"
  }else if(!tutorialTick){
    document.getElementById('tutorButton').innerHTML="show tutorial";
    	document.getElementById('tutorial').style="visibility: hidden;"
  }

};
  let viewTick=false;
  function showPlayer(){
  viewTick =!viewTick;
  if(viewTick){
document.getElementById('player').style="scrolling:no;overflow:hidden; position:sticky;margin-left:200px; margin-top:100px; height:300px;width:520px;border:none"
  }else if(!viewTick){
    	document.getElementById("player").style = "height:0px;width:0px;"
  }

};
   
function reloadPlayer() {
document.getElementById('player').src = document.getElementById('player').src;

};
</script>
  	<button id="tutorButton" onclick="showTutorial();">
	hide tutorial
	</button  >
  <div id="tutorial">
  <p style="font-family:Consolas;">

  In a moment Drone Assistant will ascend to your mouse cursor. Ask him what he can do. 
 

    </p>
     <i style="font-family:Calibri;">
    For better UX - open in repl editor.</i>
    
  <p style="font-family:Consolas;">
    
    
    Press ESC or F2 to start chat. Press enter to send. Type help for more info.
    </p>
     <p style="font-family:Consolas;">
If you don't like your drone just use command "self destruct" and you will get a new one.
</p>
 


<p></p>
  <i style="font-family:Consolas;">
    p5.js is used - for more detailed referances go to 
    <a href="https://p5js.org/reference/">p5js.org</a>
    </i>
 <p></p>
  <p style="font-family:Calibri;">
    use 	&#8635 to refresh the canvas and 📺 to hide/show canvas and press 'hide tutorial' to hide this text</p>
    </div>
	<button style="margin-left:20px;margin-top:150px;" onclick="reloadPlayer();">
		&#8635;
	</button  >
  	<button  style="margin-left:20px; display:block;" onclick="showPlayer();">
		📺
	</button>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js""></script>
    <script src="DroneFiles/lib/p5/p5.js"></script>
    <script src="DroneFiles/lib/p5/p5.dom.js"></script>
  	  <script src="DroneFiles/lib/rive/rivescript.min.js"></script>
	<script src="DroneFiles/commands.js"></script>
	<script src="DroneFiles/drone.js"></script>
 <div id="image_for_crop"  style=" margin-left:200px; margin-top:-170px; max-height: 100%; max-width: 100%;"></div>
 <iframe id="player" frameBorder="0" src="monitor.html"
	 style="scrolling:no;overflow:hidden; position:sticky;margin-left:200px; margin-top:100px; height:0px;width:0px;border:none">

	</iframe>
<i style="font-family:Calibri;">
    </i>
</body >

</html>
result
console
?