3 files changed, 79 insertions, 0 deletions
diff --git a/js/gg/game.js b/js/gg/game.js
new file mode 100644
index 0000000..0ba3d89
--- /dev/null
+++ b/js/gg/game.js
@@ -0,0 +1,20 @@
+const buttons = {
+  d: {
+    up: () => document.getElementById("dUp"),
+    down: () => document.getElementById("dDown"),
+    right: () => document.getElementById("dRight"),
+    left: () => document.getElementById("dLeft"),
+  },
+  ab: {
+    a: () => document.getElementById("a"),
+    b: () => document.getElementById("b"),
+  },
+  aux: {
+    start: () => document.getElementById("start"),
+    select: () => document.getElementById("select"),
+  },
+};
+
+console.log(buttons.ab.a);
+
+buttons.ab.a.style.backgroundColor = "pink";
diff --git a/js/gg/index.html b/js/gg/index.html
new file mode 100644
index 0000000..04b2a52
--- /dev/null
+++ b/js/gg/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello, world!</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="game.js"></script>
+  </head>
+  <body>
+    <canvas
+      id="targetCanvas"
+      width="512"
+      height="512"
+      style="border: 1px solid #000000"
+    >
+    </canvas>
+    <div class="flex-container">
+      <fieldset id="dPad" class="flex-item">
+        <button id="dUp">Up</button>
+        <br />
+        <button id="dLeft">Left</button>
+        <button id="dRight">Right</button>
+        <br />
+        <button id="dDown">Down</button>
+      </fieldset>
+      <fieldset id="ab" class="flex-item">
+        <button id="a">A</button>
+        <button id="b">B</button>
+      </fieldset>
+    </div>
+    <fieldset id="aux">
+      <button id="start">Start</button>
+      <button id="select">Select</button>
+    </fieldset>
+  </body>
+</html>
diff --git a/js/gg/styles.css b/js/gg/styles.css
new file mode 100644
index 0000000..3059105
--- /dev/null
+++ b/js/gg/styles.css
@@ -0,0 +1,21 @@
+body {
+  font-family: sans-serif;
+}
+
+canvas {
+  margin: 0 auto;
+  display: block;
+}
+
+.flex-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  padding: 1em;
+  margin: 0;
+}
+
+.flex-item {
+  width: 33vw;
+  text-align: center;
+}