Merge branch '3d-world'

2023-05-20 17:19:27 -06:00
parent b94e36ef3b 0fed104be1
commit 6d67a3e8e5
24 changed files with 1076 additions and 3 deletions
@@ -291,6 +291,17 @@
      </span>
    </div>

+    <div>
+      <button class="text-blue-500 px-2">
+        <router-link
+          :to="{ name: 'statistics' }"
+          class="block text-center py-3 px-1"
+        >
+          See Your Statistics
+        </router-link>
+      </button>
+    </div>
+
    <div v-bind:class="computedAlertClassNames()">
      <button
        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -0,0 +1,212 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Your Statistics
+    </h1>
+
+    <button class="float-right" @click="captureGraphics()">Screenshot</button>
+
+    <!-- Another place to play with the sizing is in Resizer.setSize -->
+    <div id="scene-container" class="h-screen"></div>
+
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
+import { Component, Vue } from "vue-facing-decorator";
+import { World } from "@/components/World/World.js";
+
+@Component
+export default class StatisticsView extends Vue {
+  world: World;
+
+  mounted() {
+    const container = document.querySelector("#scene-container");
+    const newWorld = new World(container, this);
+    newWorld.start();
+    this.world = newWorld;
+  }
+
+  public captureGraphics() {
+    /**
+    // from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples
+    // Adds a blank image
+    const dataBlob = document
+      .querySelector("#scene-container")
+      .firstChild.toBlob((blob) => {
+        const newImg = document.createElement("img");
+        const url = URL.createObjectURL(blob);
+
+        newImg.onload = () => {
+          // no longer need to read the blob so it's revoked
+          URL.revokeObjectURL(url);
+        };
+
+        newImg.src = url;
+        document.body.appendChild(newImg);
+      });
+     **/
+
+    /**
+    // Yields a blank page with the iframe below
+    const dataUrl = document
+      .querySelector("#scene-container")
+      .firstChild.toDataURL("image/png");
+     **/
+
+    /**
+    // Yields a blank page with the iframe below
+    const dataUrl = this.world.renderer.domElement.toDataURL("image/png");
+     **/
+
+    /**
+    // Show the image in a new tab
+    const iframe = `
+      <iframe
+        src="${dataUrl}"
+        frameborder="0"
+        style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"
+        allowfullscreen>
+      </iframe>`;
+    const win = window.open();
+    win.document.open();
+    win.document.write(iframe);
+    win.document.close();
+     **/
+
+    // from https://stackoverflow.com/a/17407392/845494
+    // This yields a file with funny formatting.
+    //const image = const dataUrl.replace("image/png", "image/octet-stream");
+
+    /**
+    // Yields a blank image at the bottom of the page
+    // from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3
+    const img = new Image();
+    img.src = this.world.renderer.domElement.toDataURL();
+    document.body.appendChild(img);
+     **/
+
+    /**
+     * This yields an SVG that only shows white and black highlights
+     // from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format
+     **/
+    const rendererSVG = new SVGRenderer();
+    rendererSVG.setSize(window.innerWidth, window.innerHeight);
+    rendererSVG.render(this.world.scene, this.world.camera);
+    //document.body.appendChild(rendererSVG.domElement);
+    ExportToSVG(rendererSVG, "test.svg");
+  }
+
+  alertTitle = "";
+  alertMessage = "";
+  isAlertVisible = false;
+
+  public setAlert(title, message) {
+    this.alertTitle = title;
+    this.alertMessage = message;
+    this.isAlertVisible = true;
+  }
+
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
+
+function ExportToSVG(rendererSVG, filename) {
+  const XMLS = new XMLSerializer();
+  const svgfile = XMLS.serializeToString(rendererSVG.domElement);
+  const svgData = svgfile;
+  const preface = '<?xml version="1.0" standalone="no"?>\r\n';
+  const svgBlob = new Blob([preface, svgData], {
+    type: "image/svg+xml;charset=utf-8",
+  });
+  const svgUrl = URL.createObjectURL(svgBlob);
+  const downloadLink = document.createElement("a");
+
+  downloadLink.href = svgUrl;
+  downloadLink.download = filename;
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+}
+</script>