Merging remote master into local

src/components/GiftedDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-lg text-center">
+        Received from {{ contact?.name || "nobody in particular" }}
+      </h1>
+      <p class="py-2">{{ 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"
+      />
+      <div class="flex flex-row">
+        <span class="py-4">Hours</span>
+        <input
+          type="text"
+          class="block w-8 rounded border border-slate-400 ml-4 text-center"
+          v-model="hours"
+        />
+        <div class="flex flex-col px-1">
+          <div>
+            <fa icon="square-caret-up" size="2xl" @click="increment()" />
+          </div>
+          <div>
+            <fa icon="square-caret-down" size="2xl" @click="decrement()" />
+          </div>
+        </div>
+      </div>
+      <div class="text-right">
+        <button class="rounded border border-slate-400" @click="confirm">
+          <span class="m-2">Confirm</span>
+        </button>
+        &nbsp;
+        <button class="rounded border border-slate-400" @click="cancel">
+          <span class="m-2">Cancel</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["message"],
+  data() {
+    return {
+      contact: null,
+      description: "",
+      hours: "0",
+      visible: false,
+    };
+  },
+  methods: {
+    open(contact) {
+      this.contact = contact;
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    increment() {
+      this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
+    },
+    decrement() {
+      this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
+    },
+    confirm() {
+      this.close();
+      this.$emit("dialog-result", {
+        action: "confirm",
+        contact: this.contact,
+        hours: parseFloat(this.hours),
+        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/InfiniteScroll.vue

@@ -31,6 +31,7 @@ export default class InfiniteScroll extends Vue {
     }
   }
 
+  // 'beforeUnmount' hook runs before unmounting the component
   beforeUnmount() {
     if (this.observer) {
       this.observer.disconnect();

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);