From e4b03a4f6581e219d31a1c6933ebf95efb0831c9 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <JLSaunders987@gmail.com>
Date: Wed, 15 Mar 2023 11:40:37 -0700
Subject: [PATCH] lens prototype

---
 src/js/lens.js               | 64 +++++++++++++++++++++++++++--------
 src/styles/_layout.scss      | 10 ++++++
 src/styles/_scaffolding.scss |  2 --
 src/styles/pages/home.scss   | 65 +++++++++++++++++++++++++++++++++---
 src/template.html            | 37 +++++++++++---------
 5 files changed, 142 insertions(+), 36 deletions(-)

diff --git a/src/js/lens.js b/src/js/lens.js
index 7f0e079..ae7ad8d 100644
--- a/src/js/lens.js
+++ b/src/js/lens.js
@@ -4,34 +4,72 @@
 // to be a lens and then you have to move the window around to be able to see the different
 // links on the page
 
+const FOCUS_SIZE = 400;
 
 function _init(){
-  let lens = document.querySelector('.lens');
+  let root = document.querySelector(':root');
+  let lens = document.getElementsByClassName('lens')[0];
+  let filter = document.getElementById('filter');
+  let hid_hint = false;
 
-  lens.style.setProperty(
+  // let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')
+
+  root.style.setProperty(
       '--screen-width',
       `${window.screen.availWidth}px`
   );
-  lens.style.setProperty(
+  root.style.setProperty(
       '--screen-height',
       `${window.screen.availHeight}px`
   );
   function set_position(){
-
     lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
-    // lens.style.setProperty(
-    // '--screen-left',
-    //
-    // )
-    // lens.style.setProperty(
-    //     '--screen-top',
-    //     `${window.screenY}px`
-    // )
-    // console.log('set vars')
     setTimeout(set_position, 10);
   }
 
+  function get_blur(){
+    return Math.max(
+        Math.sqrt(
+            (
+                Math.abs(window.innerHeight-FOCUS_SIZE) +
+                Math.abs(window.innerWidth-FOCUS_SIZE)
+            ) / 4)-5,
+        0)
+  }
+
+  function set_blur(){
+    let blur_radius = get_blur()
+    filter.style.setProperty(
+        '--blur-radius',
+        `${blur_radius}px`
+    )
+    setTimeout(set_blur, 50);
+  }
+
+  function show_hint(){
+    if (get_blur() > 3) {
+      let hint = document.getElementById('hint');
+      hint.classList.remove('hidden')
+
+      setTimeout(check_hint, 2000);
+    }
+  }
+
+  function check_hint(){
+    if (get_blur() < 3){
+      let hint = document.getElementById('hint');
+      hint.classList.add('rehidden');
+      hid_hint = true;
+
+    }
+    if (hid_hint === false){
+      setTimeout(check_hint, 100);
+    }
+  }
+
   set_position();
+  set_blur();
+  setTimeout(show_hint, 2000);
   // setTimeout(set_size,100);
   // set_size()
 }
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 0b859c8..c62e7f2 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -2,3 +2,13 @@ body {
   width: 100%;
   height: 100%
 }
+
+#container {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction:column;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/styles/_scaffolding.scss b/src/styles/_scaffolding.scss
index d793095..0252eaa 100644
--- a/src/styles/_scaffolding.scss
+++ b/src/styles/_scaffolding.scss
@@ -8,7 +8,6 @@ html {
 
 body {
   margin: auto;
-  text-align: center;
   max-width: $page-width;
 }
 
@@ -20,6 +19,5 @@ h1 {
   display: inline-block;
   height: 100px;
   width: 100px;
-  //background-image: url('~assets/example.png');
   background-size: cover;
 }
diff --git a/src/styles/pages/home.scss b/src/styles/pages/home.scss
index 46b1319..4324009 100644
--- a/src/styles/pages/home.scss
+++ b/src/styles/pages/home.scss
@@ -1,8 +1,13 @@
-
-
-.lens {
+:root {
   --screen-width: 100vw;
   --screen-height: 100vh;
+  --blur-radius: 100px;
+  --lens-size: 400px;
+  --hint-color: deeppink;
+}
+
+.lens {
+
   //--screen-left: 0;
   //--screen-top: 0;
   position: absolute;
@@ -16,6 +21,56 @@
   transition: transform ease 100ms;
 }
 
-.filter {
-
+#filter {
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  left:0;
+  top:0;
+  position:absolute;
+  backdrop-filter: blur(var(--blur-radius));
+  //background-color: #ffffffff;
 }
+
+#hint {
+  width: var(--lens-size);
+  height: var(--lens-size);
+  position: absolute;
+  border: 3px solid var(--hint-color);
+  top: calc(50% - var(--lens-size)/2);
+  left: calc(50% - var(--lens-size)/2);
+  border-radius: calc(var(--lens-size));
+  transition: opacity 1000ms;
+  opacity: 100%;
+  z-index: 10000;
+
+  text-align: center;
+  backdrop-filter: blur(10px);
+
+  p {
+    font-family: Times, "Times New Roman", serif;
+    background-color: deeppink;
+    font-weight: bold;
+    font-style: italic;
+    width: 50%;
+    color: white;
+    margin: auto;
+    font-size: 2em;
+    top: 40%;
+    position: relative;
+    //left: 50%;
+  }
+
+  &.hidden, &.rehidden {
+    border-color: #ff000000;
+    opacity: 0%;
+    //transition: all  1000ms;
+
+  }
+
+  &.hidden {
+    transition: all 0ms;
+  }
+}
+
+
diff --git a/src/template.html b/src/template.html
index aaee7ed..3924af1 100644
--- a/src/template.html
+++ b/src/template.html
@@ -10,23 +10,28 @@
 
   <body>
     <div id="root" class="lens">
+      <div id="container">
 
-      <h1>Internet Website 2.0</h1>
-      <h2>~Welcome to the net~</h2>
-      <ul class="categories">
-        <li>
-          <h3>These are the Things I like</h3>
-          <p>And some reasons that I like them</p>
-        </li>
-        <li>
-          <h3>Some are known</h3>
-          <p>Others cannot be known, or are illegal to know</p>
-        </li>
-        <li>
-          <h3>All are good</h3>
-          <p>Because I am not bad</p>
-        </li>
-      </ul>
+        <h1>Internet Website 2.0</h1>
+        <h2>~Welcome to the net~</h2>
+        <ul class="categories">
+          <li>
+            <h3>These are the Things I like</h3>
+            <p>And some reasons that I like them</p>
+          </li>
+          <li>
+            <h3>Some are known</h3>
+            <p>Others cannot be known, or are illegal to know</p>
+          </li>
+          <li>
+            <h3>All are good</h3>
+            <p>Because I am not bad</p>
+          </li>
+        </ul>
+      </div>
     </div>
+    <div id="filter"></div>
+    <div id="hint" class="hidden">
+      <p>(Your browser is out of focus)</p></div>
   </body>
 </html>