almost integrated vue-tailwind

README.md

@@ -10,7 +10,7 @@ ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
 
 # Roadmap
 
- * Decide the front end library
+ * Integrate front end library 
  * Tie the ascii Meta Data into tabs / interface
  * Take a quick look at ASCIIBLASTER, compare code
  * Render the individual blocks

src/App.vue

@@ -1,13 +1,121 @@
 <template>
   <div id="app">
+
+    <t-modal
+      header="Create new ASCII"
+    >
+
+    <!-- Main Menu -->
+    <input type="number" name="width" v-model="forms.createAscii.width" />
+    <input type="number" name="height" v-model="forms.createAscii.height" />
+    <input type="text" name="title" v-model="forms.createAscii.title" />
+
+      <template v-slot:footer>
+        <div class="flex justify-between">
+          <t-button type="button">
+            Cancel
+          </t-button>
+          <t-button type="button" @click="createNewASCII()">
+            Ok
+          </t-button>
+        </div>
+      </template>
+    </t-modal>
+
+    <t-button>Add new ASCII</t-button>
+
+    <h1>ASCIIBIRD</h1>
+
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link  v-for="(value, key) in asciibirdMeta" v-bind:key="key" :to="value.title.replace(/([A-Z])([A-Z])/g, '$1-$2')
+  .replace(/([a-z])([A-Z])/g, '$1-$2')
+  .replace(/[\s_]+/g, '-')
+  .toLowerCase() "> {{ value.title }} |</router-link>
     </div>
+
     <router-view/>
+
   </div>
 </template>
 
+<script>
+export default {
+  created() {
+    console.log('Created');
+    this.asciibirdMeta = this.$store.state.asciibirdMeta;
+  },
+  name: 'HelloWorld',
+  data: () => ({
+    forms: {
+      createAscii: {
+        width: 80,
+        height: 80,
+        title: 'ascii',
+      },
+    },
+    status: {
+      createNew: false,
+    },
+    text: 'ASCII',
+    currentTab: 0,
+    asciibirdMeta: [],
+  }),
+  computed: {
+    returnAsciiMetaIndex() {
+      return this.$store.state.asciibirdMeta[this.currentTab];
+    },
+  },
+  methods: {
+    createClick() {
+      this.dialog.heading = 'Create new ASCII';
+      this.status.createNew = this.dialog.visible = true;
+    },
+    createNewASCII() {
+      const payload = {
+        title: this.forms.createAscii.title,
+        key: this.asciibirdMeta.length + 1,
+        ascii: {
+          blocks: this.create2DArray(this.forms.createAscii.height),
+          width: this.forms.createAscii.width,
+          height: this.forms.createAscii.height,
+        },
+      };
+
+      for (let i = 0; i <= payload.ascii.width - 1; i++) {
+        for (let j = 0; j <= payload.ascii.height - 1; j++) {
+          payload.ascii.blocks[i].push({
+            bg: null,
+            fg: null,
+            char: null,
+            bold: false,
+            blinking: false,
+          });
+        }
+      }
+
+      this.$store.commit('newAsciibirdMeta', payload);
+
+      console.log(this.$store.state.asciibirdMeta);
+
+      // this.reset();
+    },
+    create2DArray(rows) {
+      const arr = [];
+
+      for (let i = 0; i < rows; i++) {
+        arr[i] = [];
+      }
+
+      return arr;
+    },
+    // reset() {
+    //   this.dialog.heading = "";
+    //   this.status.createNew = this.dialog.visible = false;
+    // },
+  },
+};
+</script>
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/main.js

@@ -1,10 +1,109 @@
 import Vue from 'vue';
+import VueTailwind from 'vue-tailwind';
+import {
+  TInput,
+  TTextarea,
+  TSelect,
+  TRadio,
+  TCheckbox,
+  TButton,
+  TInputGroup,
+  TCard,
+  TAlert,
+  TModal,
+  TDropdown,
+  TRichSelect,
+  TPagination,
+  TTag,
+  TRadioGroup,
+  TCheckboxGroup,
+  TTable,
+  TDatepicker,
+  TToggle,
+  TDialog,
+} from 'vue-tailwind/dist/components';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.config.productionTip = false;
 
+const settings = {
+  // Use the following syntax
+  // {component-name}: {
+  //   component: {importedComponentObject},
+  //   props: {
+  //     {propToOverride}: {newDefaultValue}
+  //     {propToOverride2}: {newDefaultValue2}
+  //   }
+  // }
+  't-input': {
+    component: TInput,
+    props: {
+      classes: 'border-2 block w-full rounded text-gray-800',
+    },
+  },
+  't-textarea': {
+    component: TTextarea,
+    props: {
+      classes: 'border-2 block w-full rounded text-gray-800',
+    },
+  },
+  't-button': {
+    component: TButton,
+    props: {
+      classes: 'text-white bg-green-500 border border-transparent rounded shadow-sm hover:bg-green-600',
+    },
+  },
+  't-modal': {
+    component: TModal,
+    fixedClasses: {
+      overlay: 'z-40  overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
+      wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
+      modal: 'overflow-visible relative  rounded',
+      body: 'p-3',
+      header: 'border-b p-3 rounded-t',
+      footer: ' p-3 rounded-b',
+      close: 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
+    },
+    classes: {
+      overlay: 'bg-black',
+      wrapper: '',
+      modal: 'bg-white shadow',
+      body: 'p-3',
+      header: 'border-gray-100',
+      footer: 'bg-gray-100',
+      close: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+      closeIcon: 'fill-current h-4 w-4',
+      overlayEnterClass: '',
+      overlayEnterActiveClass: 'opacity-0 transition ease-out duration-100',
+      overlayEnterToClass: 'opacity-100',
+      overlayLeaveClass: 'transition ease-in opacity-100',
+      overlayLeaveActiveClass: '',
+      overlayLeaveToClass: 'opacity-0 duration-75',
+      enterClass: '',
+      enterActiveClass: '',
+      enterToClass: '',
+      leaveClass: '',
+      leaveActiveClass: '',
+      leaveToClass: '',
+    },
+    variants: {
+      danger: {
+        overlay: 'bg-red-100',
+        header: 'border-red-50 text-red-700',
+        close: 'bg-red-50 text-red-700 hover:bg-red-200 border-red-100 border',
+        modal: 'bg-white border border-red-100 shadow-lg',
+        footer: 'bg-red-50',
+      },
+    },
+
+  },
+  // ...Rest of the components
+};
+
+Vue.use(VueTailwind, settings);
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,14 +1,14 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
+import Editor from '../views/Editor.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home,
+    path: '/:ascii',
+    name: 'Editor',
+    component: Editor,
   },
   {
     path: '/about',

src/store/index.js

@@ -5,11 +5,31 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    // Object that is a single ASCII block
+    defaultBlock: {
+      x: 0,
+      y: 0,
+      bg: '#FFFFF',
+      fg: '#00000',
+      char: '*',
+      bold: false,
+      blinking: false,
+    },
+    asciibirdMeta: [{
+      title: 'New ASCII',
+      key: 1,
+      ascii: {
+        blocks: {},
+        width: 80,
+        height: 80,
+      },
+    }],
   },
   mutations: {
+    newAsciibirdMeta(state, payload) {
+      this.state.asciibirdMeta.push(payload);
+    },
   },
-  actions: {
-  },
-  modules: {
-  },
+  actions: {},
+  modules: {},
 });

src/views/About.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>About ASCIIBIRD</h1>
+    <h2>it is pretty good</h2>
   </div>
 </template>

src/views/Editor.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="home">
+    Main ascii page editor things for individual ascii
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Editor',
+
+};
+</script>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue';
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-};
-</script>