add the other activity envisioned on the home page (though not sending data yet)

README.md

@@ -188,6 +188,9 @@ export const createAndStoreIdentifier = async (mnemonicPassword) => {
 
 ## Kudos
 
+Gifts make the world go 'round!
+
 * [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80)
-* [Many libraries]() such as Veramo.io, Vuejs.org, threejs
+* [Many tools & libraries]() such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
 * [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
+* [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)

project.task.yaml

@@ -31,8 +31,9 @@
 
 - Ensure each action sent to the server has a confirmation.
 
-- Feed screen
+- Home Feed & Quick Give screen
   - 01 save the feed-viewed status in settings storage ("afterQuery")
+  - 01 quick action - send action, maybe choose via canvas tool https://github.com/konvajs/vue-konva
 
 - .5 customize favicon
 - .5 make advanced features harder to access; advanced build?

src/components/GiftedDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1>Received from {{ contact?.name || "nobody in particular" }}</h1>
+      <p>{{ message }}</p>
+      <input
+        type="text"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        placeholder="What you received"
+        v-model="description"
+      />
+      <button @click="confirm">Confirm</button>
+      &nbsp;
+      <button @click="cancel">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["message"],
+  data() {
+    return {
+      contact: null,
+      description: "",
+      visible: false,
+    };
+  },
+  methods: {
+    open(contact) {
+      this.contact = contact;
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    confirm() {
+      this.close();
+      this.$emit("dialog-result", {
+        action: "confirm",
+        contact: this.contact,
+        description: this.description,
+      });
+    },
+    cancel() {
+      this.close();
+      this.$emit("dialog-result", { action: "cancel" });
+    },
+  },
+};
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 50%;
+}
+</style>

src/components/World/components/objects/terrain.js

@@ -2,7 +2,7 @@ import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader } from "three";
 
 export function createTerrain(props) {
   const loader = new TextureLoader();
-  const height = loader.load("img/textures/forest-floor.png");
+  const height = loader.load("img/textures/leafy-autumn-forest-floor.jpg");
   //                                         w            h
   const geometry = new PlaneGeometry(props.width, props.height, 64, 64);
 

src/views/HelpView.vue

@@ -216,6 +216,14 @@
       <p>
         {{ package.version }}
       </p>
+
+      <h2 class="text-xl font-semibold">
+        For any other questions, including remove your data:
+      </h2>
+      <p>
+        Contact us through
+        <a href="https://communitycred.org">CommunityCred.org</a>.
+      </p>
     </div>
   </section>
 </template>

src/views/HomeView.vue

@@ -46,14 +46,37 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Feed
+      Time Safari
     </h1>
-    <span :class="{ hidden: isHiddenSpinner }">
+
-      <fa icon="spinner" class="fa-fw"></fa>
+    <div>
-      Loading&hellip;
+      <h1 class="text-2xl">Quick Action</h1>
-    </span>
+      <p>Choose a contact to whom to show appreciation:</p>
+      <div class="px-4">
+        <button
+          v-for="contact in allContacts"
+          :key="contact.did"
+          @click="openDialog(contact)"
+        >
+          {{ contact.name }},&nbsp;
+        </button>
+        <button @click="openDialog()">or nobody in particular</button>
+      </div>
+    </div>
+
+    <GiftedDialog
+      ref="customDialog"
+      @dialog-result="handleDialogResult"
+      message="Confirm to publish to the world."
+    >
+    </GiftedDialog>
+
     <div>
-      <!-- Results List -->
+      <h1 class="text-2xl">Latest Activity</h1>
+      <span :class="{ hidden: isHiddenSpinner }">
+        <fa icon="spinner" class="fa-fw"></fa>
+        Loading&hellip;
+      </span>
       <ul class="">
         <li
           class="border-b border-slate-300"
@@ -80,18 +103,19 @@
 </template>
 
 <script lang="ts">
+import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";
 
+import GiftedDialog from "@/components/GiftedDialog.vue";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import * as R from "ramda";
 
 @Options({
-  components: {},
+  components: { GiftedDialog },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -102,6 +126,7 @@ export default class HomeView extends Vue {
   feedData = [];
   feedPreviousOldestId = null;
   isHiddenSpinner = true;
+  showInput = false;
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -215,6 +240,24 @@ export default class HomeView extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
+  recordGive(contact) {
+    console.log("recordGive", contact);
+  }
+
+  openDialog(contact) {
+    this.$refs.customDialog.open(contact);
+  }
+  handleDialogResult(result) {
+    if (result.action === "confirm") {
+      return new Promise((resolve) => {
+        console.log("Dialog confirmed: ", result.description);
+        resolve();
+      });
+    } else {
+      // action was "cancel"
+    }
+  }
+
   // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";