Fix both readers and cleanup

KorigamiK · Jun 6, 2021 · 65db343 · 65db343
1 parent 9f9546f
commit 65db343
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 48 deletions.
diff --git a/src/components/CoolReader.vue b/src/components/CoolReader.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="change-button">
+  <div class="change-button" v-if="Object.keys(reader_components).length !== 0">
+    <div class="active-text">Currently active: {{ Object.keys(reader_components)[Object.keys(reader_components).length -1] }}</div>
     <button @click="$emit('change-order')">Change Order</button>
     <div>
       <button
@@ -10,7 +11,6 @@
         {{ key }} +
       </button>
     </div>
-    <!-- <br /> -->
     <div>
       <button
         v-for="key in Object.keys(reader_components)"
@@ -21,14 +21,15 @@
       </button>
     </div>
   </div>
-  <div v-if="!!reader_components" class="align-left">
+  <div v-if="Object.keys(reader_components).length !== 0" class="align-left">
     <div v-for="images in get_manga()" :key="images" class="container">
       <img
         v-for="image in images"
         :key="image"
         class="inner"
         style="background-color: white"
         :src="image"
+        alt="Loading image"
       />
       &nbsp;
     </div>
@@ -50,7 +51,7 @@ interface Ireader_conponents {
 
 export default defineComponent({
   data() {
-    return { z_index_iterator: 1, current_z_index: 1 };
+    return {  };
   },
 
   emits: ["change-order", "offset-plus", "offset-minus"],
@@ -93,26 +94,12 @@ export default defineComponent({
       }
       return zipLongest(undefined, ...images_array);
     },
-    get_z_index() {
-      let ret: number = this.z_index_iterator;
-      if (
-        this.z_index_iterator !== Object.keys(this.reader_components).length
-      ) {
-        this.z_index_iterator += 1;
-      } else {
-        this.z_index_iterator = 1;
-      }
-      console.log(ret);
-      return ret;
-    },
+
     offset_plus(key: number) {
-      // console.log(key, typeof key)
-      // console.log(this.reader_components[key])
       this.$emit("offset-plus", key);
     },
+
     offset_minus(key: number) {
-      // console.log(key, typeof key)
-      // console.log(this.reader_components[key])
       this.$emit("offset-minus", key);
     },
   },
@@ -153,6 +140,8 @@ export default defineComponent({
   cursor: pointer;
   padding: 5px 10px;
   font-weight: bold;
+  margin-top: 0;
+  margin-bottom: 5px;
 }
 
 .change-button {
@@ -183,4 +172,10 @@ export default defineComponent({
 .hide {
   display: none;
 }
+
+.active-text {
+  background-color:rgb(214, 214, 214);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -2,25 +2,11 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <br>
-    <h1>This is very secret message {{ secret }}</h1>
-    <h1> This is the message that you passed {{ derived_message }} </h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+      For more imformation about this project<br>
       check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <a href="https://github.com/KorigamiK/mangu" target="_blank" rel="noopener">GitHub repository</a>.
     </p>
-    <h3>Google Test</h3>
-    <ul>
-      <li><a href="https://mail.google.com" target="_blank" rel="noopener">babel</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-    </ul>
   </div>
 </template>
 

diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -1,10 +1,10 @@
 <template>
-  <h3>Search</h3>
-  <div v-if="!show_form"><button @click="show_form = true; show_chapters=false">Search again?</button></div>
+  <div v-if="!show_form"><button @click="show_form = true; show_chapters=false">Add source</button></div>
   <div v-if="show_chapters"><button @click="show_chapters=false">Hide Chapters</button></div>
   <div v-if="chapters !== ['nothing'] && !show_chapters"><button @click="show_chapters=true">Show Chapters</button></div>
 
   <form @submit.prevent="handel_search" v-if="show_form">
+    <h3>Pick</h3>
     <label>Series Name</label>
     <input type="search_query" v-model="search_query" required />
 

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
-    <button @click="dynamic_thing = 'Ha Ha this was tampered with!'">
-      CLICK ME!
-    </button>
+    <br/>
     <HelloWorld
-      msg="Hi Sir, Welcome to Mangu-reader"
+      msg="Welcome to Mangu-reader"
       :derived_message="dynamic_thing"
       :secret="tampered_secret"
     />
+    <button @click="dynamic_thing = 'Ha Ha this was tampered with!'">
+      Useless Button
+    </button>
+
   </div>
 </template>
 

diff --git a/src/views/Reader.vue b/src/views/Reader.vue
@@ -1,19 +1,17 @@
 <template>
-  <div class="about">
-    <h4>This is the reader {{ dynamic_thing }} {{ secret }}</h4>
-  </div>
+  <Search @load-chapter="push_new_component" />
+  <br />
   <button class="viewer-button" @click="side_by_side = !side_by_side">
     Change Viewer
   </button>
-  <Search @load-chapter="push_new_component" />
   <div class="flex-container" v-if="side_by_side">
     <!-- this whole div tag repeats on every loop -->
     <div
-      v-for="component in reader_components"
+      v-for="(component, component_key) in reader_components"
       :key="component.index"
       class="flex-child magenta"
     >
-      <button @click="remove_component(component.index)">Remove</button>
+      <button @click="remove_component(component_key)">Remove</button>
       <button @click="component.offset += 1">Offset +</button>
       <button @click="component.offset -= 1">Offset -</button>