Added action button layout and some pointy move buttons

satiate.css

@@ -43,15 +43,30 @@ html, body {
 #control-area {
   display: flex;
   min-height: 40%;
+  max-height: 40%;
 }
 
 #actions {
+  position: relative;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  display: flex;
   padding: 25px;
   font-size: 24px;
   background: #111;
   flex: 1;
+  max-height: 100%;
+}
+
+.action-button {
+  flex: 0 0 50px;
+  width: 250px;
+  background-color: #888;
+  color: #eee;
 }
 
+
 #desc {
   padding: 25px;
   font-size: 18px;
@@ -77,6 +92,32 @@ html, body {
   height: 50px;
   background-color: #888;
   color: #eee;
+  border-radius: 5px;
+}
+
+/* nicked from the internet */
+
+.move-button:before,
+.move-button:after {
+  content: '';
+  position: absolute;
+  right: -20px;
+  width: 32px;
+  height: 15px;
+  border-radius: 5px;
+  background: #888;
+}
+.move-button:before {
+  top: 9px;
+  -webkit-transform: rotate(65deg);
+  -ms-transform: rotate(65deg);
+  transform: rotate(65deg);
+}
+.move-button:after {
+  bottom: 9px;
+  -webkit-transform: rotate(-65deg);
+  -ms-transform: rotate(-65deg);
+  transform: rotate(-65deg);
 }
 
 .disabled {
@@ -84,50 +125,94 @@ html, body {
   background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
 }
 
+.move-button > span {
+  display: inline-block;
+}
+
 #move-up-left {
   position: absolute;
   left: -70px;
   top: 30px;
+  transform: rotate(-135deg);
+}
+
+#move-up-left > span {
+  transform: rotate(135deg);
 }
 
 #move-up {
   position: absolute;
   left: 0px;
   top: 0px;
+    transform: rotate(-90deg);
+}
+
+#move-up > span {
+  transform: rotate(90deg);
 }
 
 #move-up-right {
   position: absolute;
   left: 70px;
   top: 30px;
+  transform: rotate(-45deg);
+}
+
+#move-up-right > span {
+  transform: rotate(45deg);
 }
 
 #move-left {
   position: absolute;
   left: -100px;
   top: 100px;
+  transform: rotate(-180deg);
+}
+
+#move-left > span {
+  transform: rotate(180deg);
 }
 
 #move-right {
   position: absolute;
   left: 100px;
   top: 100px;
+  transform: rotate(0deg);
+}
+
+#move-right > span {
+  transform: rotate(0deg);
 }
 
 #move-down-left {
   position: absolute;
   left: -70px;
   top: 170px;
+  transform: rotate(-225deg);
+}
+
+#move-down-left > span {
+  transform: rotate(225deg);
 }
 
 #move-down {
   position: absolute;
   left: 0px;
   top: 200px;
+  transform: rotate(-270deg);
+}
+
+#move-down > span {
+  transform: rotate(270deg);
 }
 
 #move-down-right {
   position: absolute;
   left: 70px;
   top: 170px;
+  transform: rotate(-315deg);
+}
+
+#move-down-right > span {
+  transform: rotate(315deg);
 }

satiate.html

@@ -34,22 +34,29 @@
   </div>
   <div id="control-area">
     <div id="actions">
-      these are the actions
+      <button class="action-button">potato 1</button>
+      <button class="action-button">potato 2</button>
+      <button class="action-button">potato 3</button>
+      <button class="action-button">potato 4</button>
+      <button class="action-button">potato 5</button>
+      <button class="action-button">potato 6</button>
+      <button class="action-button">potato 7</button>
+      <button class="action-button">potato 8</button>
     </div>
     <div id="desc">
       this is a description of your action
     </div>
     <div id="moves">
-      beep beep 
+      beep beep
       <div id="move-holder">
-        <button class="move-button" id="move-up-left">NW</button>
-        <button class="move-button" id="move-up">N</button>
-        <button class="move-button" id="move-up-right">NE</button>
-        <button class="move-button" id="move-left">W</button>
-        <button class="move-button" id="move-right">E</button>
-        <button class="move-button" id="move-down-left">SW</button>
-        <button class="move-button" id="move-down">S</button>
-        <button class="move-button" id="move-down-right">SE</button>
+        <button class="move-button" id="move-up-left"><span>NW</span></button>
+        <button class="move-button" id="move-up"><span>N</span></button>
+        <button class="move-button" id="move-up-right"><span>NE</span></button>
+        <button class="move-button" id="move-left"><span>W</span></button>
+        <button class="move-button" id="move-right"><span>E</span></button>
+        <button class="move-button" id="move-down-left"><span>SW</span></button>
+        <button class="move-button" id="move-down"><span>S</span></button>
+        <button class="move-button" id="move-down-right"><span>SE</span></button>
       </div>
     </div>
   </div>

server.py

@@ -0,0 +1,11 @@
+#!/usr/bin/env python3
+from http.server import HTTPServer, SimpleHTTPRequestHandler, test
+import sys
+
+class CORSRequestHandler (SimpleHTTPRequestHandler):
+    def end_headers (self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        SimpleHTTPRequestHandler.end_headers(self)
+
+if __name__ == '__main__':
+    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)