- finished ant vector graphic

- added two ants to main page (refs #9) - added some images for ants
cpetry · Jul 22, 2017 · 4273436 · 4273436
1 parent 51de2fa
commit 4273436
Show file tree

Hide file tree

Showing 6 changed files with 330 additions and 14,335 deletions.
diff --git a/images/ant.svg b/images/ant.svg
diff --git a/images/ant150px.png b/images/ant150px.png
diff --git a/images/ant250px.png b/images/ant250px.png
diff --git a/index.html b/index.html
@@ -9,9 +9,9 @@
 	</head>
 	<body>
 		<div id="header">
-			AntSim
+			<img src="./images/ant150px.png" />AntSim <img class="flipped" src="./images/ant150px.png" />
 		</div>
-		<div style="height:50px;"></div>
+		<div style="height:20px;"></div>
 		<div id="options">
 			<input type="button" value="About" onclick="Message.about()">
 			<input type="button" value="Tutorial" onclick="tutorialClicked()">

diff --git a/js/message.js b/js/message.js
@@ -26,7 +26,7 @@ class Message {
 				</p>
 			</div>
 			<!-- insert cool image here -->
-			<img src="./images/overview.png" style="height:270px;float:right;margin:auto;" />
+			<img src="images/overview.png" style="height:270px;float:right;margin:auto;" />
 			
 		</div>`;
 		this.container.innerHTML = text + "<div id='message_bottom'>" + this.startTutorialButton() + this.closeButton() + "</div>";
@@ -39,12 +39,17 @@ class Message {
 				<p>Goal of this first tutorial is to understand programming ants.</p>
 					
 					Ants can do each iteration exactly one of the following things:<br/>
+				<div style="width:50%;float:left;margin:auto;">
 					<ul><li>Walk</li>
 					<li>Harvest</li>
 					<li>Give food (to another ant or the queen)</li>
 					<li>Use pheromones</li>
 					<li>Attack</li>
 					</ul>
+				</div>
+				<div style="width:40%;float:right;margin:auto;">
+					<
+				</div>
 				<p>	 
 					Key to survival is using these action commands the best way possible.<br/>
 					So lets learn about each of them step by step...

diff --git a/style.css b/style.css
@@ -103,4 +103,12 @@ canvas#terrarium {
 	-moz-border-radius: 15px 15px 15px 15px;
 	-webkit-border-radius: 15px 15px 15px 15px;
 	border: 3px solid #000000;
+}
+
+img.flipped {
+	-moz-transform: scale(-1, 1);
+	-webkit-transform: scale(-1, 1);
+	-o-transform: scale(-1, 1);
+	transform: scale(-1, 1);
+	filter: FlipH;	
 }