selectable problems

form/res-judicata/src/components/ICry.vue

@@ -1,5 +1,5 @@
 <template>
-  <article v-bind:class="{ good: notthatmuch }">
+  <article v-bind:class="{ good: notthatmuch }" @click="click">
     <h1>{{ title }}</h1>
     <p><slot></slot></p>
   </article>
@@ -11,6 +11,7 @@
     background-color: #ff5d1b;
     text-align: center;
     padding: 1rem 0;
+    transition: box-shadow .2s;
   }
 
   article.good {
@@ -21,6 +22,10 @@
     text-decoration: underline;
     font-weight: bold;
   }
+
+  .active {
+    box-shadow: .3rem .3rem 1rem black;
+  }
 </style>
 
 <script>
@@ -36,6 +41,15 @@ export default {
   },
 
   methods: {
+    click() {
+      this.$el.classList.add("active");
+      //this.$el.dispatchEvent(new Event("icry-activated"));
+      this.$emit("icry-activated", this.$el);
+    },
+
+    unselect() {
+
+    },
   },
 }
 </script>

form/res-judicata/src/views/Apply.vue

@@ -21,8 +21,8 @@
       </div>
       <div class="columns">
         <canvas id="content" class="column is-three-quarters"></canvas>
-        <div class="column problems">
-          <ICry v-for="detection in ['accuser', 'court', 'date_and_place', 'intent', 'signature', 'topic']" v-bind:key="detection" v-bind:style="{ 'background-color': getColor(detection) }" class="icries" :title="translateCryTitle(detection)" notthatmuch>
+        <div class="column" id="problems">
+          <ICry v-on:icry-activated="iCryActivated" v-for="detection in ['accuser', 'court', 'date_and_place', 'intent', 'signature', 'topic']" v-bind:key="detection" v-bind:style="{ 'background-color': getColor(detection) }" class="icries" :title="translateCryTitle(detection)" notthatmuch>
             {{ getDescription(detection) }}</ICry>
         </div>
       </div>
@@ -42,7 +42,7 @@
     margin-top: 1rem;
   }
 
-  .problems {
+  #problems {
     padding-top: 5rem;
   }
 </style>
@@ -66,7 +66,8 @@ export default {
   name: 'Apply',
   components: {ICry},
   props: {
-    "detections": Array
+    "detections": Array,
+    "paintingColor": String,
   },
   methods: {
     processForm: function () {
@@ -129,6 +130,14 @@ export default {
         "topic": "#ffdb00",
       })[cry];
     },
+    iCryActivated: function(e) {
+      this.paintingColor = e.style.backgroundColor;
+      for (const icry of document.querySelectorAll("#problems > *")) {
+        if (icry !== e) {
+          icry.classList.remove("active");
+        }
+      }
+    },
   },
 }
 </script>