From 2b4ab9c6eaf20bfb3889b844adfb8e3373d96161 Mon Sep 17 00:00:00 2001
From: John McCardle <mccardle.john@gmail.com>
Date: Tue, 4 Jan 2022 17:41:36 -0500
Subject: [PATCH] Some layout progress.

---
 components/InfinityTester.vue | 52 ++++++++++++++++++++++++++++++
 components/JohnHacks.vue      | 48 ++++++++++++++++++++++++++++
 components/TabNav.vue         | 59 +++++++++++++++++++++++++++++++++++
 pages/index.vue               | 29 ++++++++++++++++-
 4 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 components/InfinityTester.vue
 create mode 100644 components/JohnHacks.vue
 create mode 100644 components/TabNav.vue

diff --git a/components/InfinityTester.vue b/components/InfinityTester.vue
new file mode 100644
index 0000000..68aec17
--- /dev/null
+++ b/components/InfinityTester.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <button @click="add"> add {{addIncrement}} </button>
+    <button @click="stepup"> add to the adding </button>
+    <div> big value = {{ bigvalue }} </div>
+  </div>
+</template>
+
+<script>
+
+// import Decimal from "break_infinity.js";
+
+export default {
+  name: 'InfinityTester',
+  data () {
+    return {
+      addIncrement: 0,
+      bigvalue: 0,
+    }
+  },
+  methods: {
+      add () {
+          // eslint-disable-next-line no-console
+          console.log("!")
+          this.bigvalue = 0;
+      },
+
+     stepup () {
+        this.addIncrement += 100;
+
+     }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only 
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>-->
diff --git a/components/JohnHacks.vue b/components/JohnHacks.vue
new file mode 100644
index 0000000..af90c65
--- /dev/null
+++ b/components/JohnHacks.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <button @click="button_clicky()"> Click Me </button>
+    <div> clicks = {{ clicks }} </div>
+    <ul>
+        <li v-for="value in testvalues.slice(0, clicks)" :key="value">{{value}}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JohnHacks',
+  data () {
+    return {
+      msg: 'John copies files and makes a mess',
+      testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
+      clicks: 0,
+    }
+  },
+  methods: {
+      button_clicky () {
+          // eslint-disable-next-line no-console
+          console.log("!")
+          this.clicks += 1
+      }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only 
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>-->
diff --git a/components/TabNav.vue b/components/TabNav.vue
new file mode 100644
index 0000000..ad5b6e5
--- /dev/null
+++ b/components/TabNav.vue
@@ -0,0 +1,59 @@
+<template>
+<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
+    <nav class="flex flex-col sm:flex-row">
+        <button id="tab1" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" @click="tabclicked(1)">
+            Tab 1
+        </button><button id="tab2" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(2)">
+            Tab 2
+        </button><button id="tab3" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(3)">
+            Tab 3
+        </button><button id="tab4" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(4)">
+            Tab 4
+        </button>
+    </nav>
+
+    <JohnHacks id="tabcontents1" class="tabshown" />
+    <InfinityTester id="tabcontents2" class="tabhidden" />
+    <JohnHacks id="tabcontents3" class="tabhidden" />
+    <JohnHacks id="tabcontents4" class="tabhidden" />
+</div>
+</template>
+
+<script>
+export default {
+    name: 'TabNav',
+    data () {
+        return {}
+    },
+    methods: {
+        tabclicked (tabnumber) {
+            const tabSelected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
+            const tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
+            console.log("clicked " + tabnumber)
+            for (let i = 1; i <= 4; i++) {
+                const tabE = document.getElementById("tab" + i)
+                const viewE = document.getElementById("tabcontents" + i)
+                if (i === tabnumber) {
+                    tabE.className = tabSelected
+                    viewE.className = "tabshown"
+                }
+                else {
+                    tabE.className = tabDeselected
+                    viewE.className = "tabhidden"
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.tabshown {
+    display: show;
+}
+
+.tabhidden {
+    display: none;
+}
+</style>
+
diff --git a/pages/index.vue b/pages/index.vue
index b86323a..863245f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,13 @@
 <template>
-  <Tutorial />
+  <div class="gridcontainer container mx-auto bg-red-500">
+    <header>
+        I'm a header. Check this box
+    </header>
+    <TabNav/>
+    <footer>
+        This is a game jam game.
+    </footer>
+  </div>
 </template>
 
 <script>
@@ -7,3 +15,22 @@ export default {
   name: 'IndexPage',
 }
 </script>
+
+<style scoped>
+.gridcontainer {
+    display: grid | inline-grid;
+}
+
+header {
+    grid-row: 1;
+}
+
+.gridcenter {
+    grid-row: 2;
+}
+
+footer {
+    grid-row: 3;
+}
+
+</style>