From 5cb2627320f0809cef721b5ef0c935ec42186556 Mon Sep 17 00:00:00 2001
From: LumaLivy <7350336+LumaLivy@users.noreply.github.com>
Date: Fri, 17 Dec 2021 23:58:16 -0500
Subject: [PATCH] Photo subject proposal

---
 .../Pages/Layouts/BaseLayout.cshtml           |  11 ++
 .../Pages/Partials/PhotoPartial.cshtml        | 115 +++++++++++++++++-
 2 files changed, 121 insertions(+), 5 deletions(-)
diff --git a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml
index 2295cea3..d4e14ade 100644
--- a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml
+++ b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml
@@ -64,6 +64,17 @@
             gtag('config', '@ServerSettings.Instance.GoogleAnalyticsId');
         </script>
     }
+
+    <style>
+        canvas.photo-subjects {
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+
+        canvas.hide-subjects {
+            opacity: 0;
+        }
+    </style>
 </head>
 <body>
 <div class="pageContainer">
diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml
index 33a8fbc1..af350119 100644
--- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml
+++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml
@@ -1,7 +1,15 @@
 @using LBPUnion.ProjectLighthouse.Types
+
 @model LBPUnion.ProjectLighthouse.Types.Photo
 
-<img src="/gameAssets/@Model.LargeHash" style="width: 100%; height: auto; border-radius: .28571429rem;">
+
+
+<div style="position: relative">
+    <canvas class="hide-subjects" id="canvas-subjects-@Model.PhotoId" width="1920" height="1080"
+        style="position: absolute; /*width: 100%; height: 100%;*/ transform: rotate(180deg)"></canvas>
+    <img id="game-image-@Model.PhotoId" src="/gameAssets/@Model.LargeHash"
+        style="width: 100%; height: auto; border-radius: .28571429rem;">
+</div>
 <br>
 
 <p>
@@ -16,7 +24,104 @@
 <p>
     <b>Photo contains @Model.Subjects.Count @(Model.Subjects.Count == 1 ? "person" : "people"):</b>
 </p>
-@foreach (PhotoSubject subject in Model.Subjects)
-{
-    <a href="/user/@subject.UserId">@subject.User.Username</a>
-}
\ No newline at end of file
+<div id="hover-subjects-@Model.PhotoId">
+    @foreach (PhotoSubject subject in Model.Subjects)
+    {
+        <a href="/user/@subject.UserId">@subject.User.Username</a>
+    }
+</div>
+
+
+<script>
+    // set timeout so that the image heights have been calculated
+    // (after document renders)
+    window.setTimeout(function () {
+        var canvas = document.getElementById("canvas-subjects-@Model.PhotoId");
+
+        const hoverer = document.getElementById("hover-subjects-@Model.PhotoId");
+
+        const image = document.getElementById("game-image-@Model.PhotoId");
+
+        hoverer.addEventListener('mouseenter', function () {
+            canvas.className = "photo-subjects"
+        });
+        hoverer.addEventListener('mouseleave', function () {
+            canvas.className = "photo-subjects hide-subjects"
+        });
+
+        var context = canvas.getContext('2d');
+
+        const subjects = @Html.Raw(Json.Serialize(Model.Subjects.ToArray()));
+
+        canvas.width = image.offsetWidth;
+        canvas.height = image.clientHeight; // space for names to hang off
+
+        const w = canvas.width;
+        const h = canvas.height;
+
+        // halfwidth, halfheight
+        const hw = w / 2;
+        const hh = h / 2;
+
+        const colors = ["#a5599f", "#477f84", "#5fa559", "#a5595f"];
+
+        subjects.forEach((s, si) => {
+
+            const colour = colors[si % 4]
+
+            // Bounding box
+            const bounds = s.bounds.split(",").map(parseFloat);
+
+            const [x1, y1, x2, y2] = bounds.map(n => Math.min(Math.max(n, -1), 1));
+
+            const bx = hw - (x2 * hw);
+            const by = hh - (y2 * hh);
+            const bw = (x2 - x1) * hw;
+            const bh = (y2 - y1) * hh;
+
+            context.beginPath();
+            context.lineWidth = 3;
+            context.strokeStyle = colour;
+            context.rect(bx, by, bw, bh);
+            context.stroke();
+
+            // Move into relative coordinates from bounding box
+            context.translate(bx, by);
+
+            // Username label
+            context.font = "16px Arial";
+            context.fillStyle = colour;
+
+            // Text width/height for the label background
+            const tw = context.measureText(s.user.username).width;
+            const th = 24;
+
+            // Check if the label will flow off the bottom of the frame
+            const overflowBottom = (bounds[3] * hh) > (hh - 24);
+            // Check if the label will flow off the left of the frame
+            const overflowLeft = (bounds[2] * hw - tw) < (-hw);
+
+            // Text x / y
+            const lx = overflowLeft ? -bw + 6 : -6;
+            const ly = overflowBottom ? -bh - 6 : 16;
+
+            // Label background x / y
+            const lbx = overflowLeft ? -bw : -2;
+            const lby = overflowBottom ? bh : -24;
+
+            // Set alignment
+            context.textAlign = overflowLeft ? "start" : "end";
+
+            // Draw background
+            context.fillRect(lbx, lby, tw + 16, th);
+
+            // Draw text, rotated back upright (canvas draws rotated 180deg)
+            context.fillStyle = "white";
+            context.rotate(Math.PI);
+            context.fillText(s.user.username, lx, ly);
+
+            // reset transform
+            context.setTransform(1, 0, 0, 1, 0, 0);
+        })
+    }, 100)
+</script>
\ No newline at end of file
