From 191fe47ae5a0d3080de1191212c086d09d38dd8d Mon Sep 17 00:00:00 2001
From: Kohei Futatsuka <futahei1108@icloud.com>
Date: Mon, 5 Sep 2022 18:24:09 +0900
Subject: [PATCH 1/3] wip

---
 index.html          |  1 +
 src/figni-viewer.js | 50 +++++++++++++++++++++++++++++++++------------
 src/style.scss      | 17 +++++++--------
 src/svg.js          |  4 ++--
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 6de2490..77a525b 100644
--- a/index.html
+++ b/index.html
@@ -121,6 +121,7 @@ <h4>タイトル</h4>
       <button onclick="viewer.openTipsPanel('drag')">
         openTipsPanel('drag')
       </button>
+      <button onclick="viewer.openTipsPanel('ar')">openTipsPanel('ar')</button>
       <button onclick="viewer.closeTipsPanel()">closeTipsPanel</button>
       <button onclick="viewer.openHelpPanel('top')">
         openHelpPanel('top')
diff --git a/src/figni-viewer.js b/src/figni-viewer.js
index bfbbd91..e2d6b1e 100644
--- a/src/figni-viewer.js
+++ b/src/figni-viewer.js
@@ -56,6 +56,7 @@ const HELP = {
 }
 const TIPS = {
   DRAG: 'drag',
+  AR: 'ar',
 }
 
 export default class FigniViewerElement extends HTMLElement {
@@ -90,7 +91,9 @@ export default class FigniViewerElement extends HTMLElement {
   #tipsHideCallback = null
   #toggleStates = {}
 
-  #ABTEST = {}
+  #ABTEST = {
+    IS_OPEN_AR_TIPS: true,
+  }
 
   get itemId() {
     return this.getAttribute('item-id')
@@ -201,13 +204,13 @@ export default class FigniViewerElement extends HTMLElement {
     })
 
     // AB TEST
-    // if (Math.random() > 0.5) {
-    //   this.#ABTEST['ABテスト名'] = true
-    //   this.base.registerABTestResult('abtest-name', true)
-    // } else {
-    //   this.#ABTEST['ABテスト名'] = false
-    //   this.base.registerABTestResult('abtest-name', false)
-    // }
+    if (Math.random() > 0.5) {
+      this.#ABTEST.IS_OPEN_AR_TIPS = true
+      this.base.registerABTestResult('is-open-ar-tips', true)
+    } else {
+      this.#ABTEST.IS_OPEN_AR_TIPS = true
+      this.base.registerABTestResult('is-open-ar-tips', false)
+    }
 
     // Figni Help Panel
     this.#showHelpPanel()
@@ -670,20 +673,34 @@ export default class FigniViewerElement extends HTMLElement {
   openTipsPanel(tips, delay = 6000) {
     this.closeTipsPanel()
     this.closeHelpPanel()
-    this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
-    this.#tipsPanel.classList.remove('figni-viewer-tips-panel-hidden')
     let text = null
     let animation = null
     let help = HELP.TOP
+    let style = ''
+    let minimizeHelpButton = true
     switch (tips) {
       case TIPS.DRAG: {
         text = 'ドラッグするとコンテンツを回転できます'
         animation = CONTENT_OPERATION_ANIMATION
         help = HELP.CONTENT
+        style = 'top: 0.75em; right: 0.75em; transform-origin: top right;'
+        minimizeHelpButton = true
+        break
+      }
+      case TIPS.AR: {
+        text = '目の前に実物大の商品を表示できます'
+        animation = HOW_TO_AR_ANIMATION
+        help = HELP.AR
+        style = 'bottom: 5.75em; left: 0.75em; transform-origin: bottom left;'
+        minimizeHelpButton = false
         break
       }
     }
     if (text && animation) {
+      if (minimizeHelpButton) {
+        this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
+      }
+      this.#tipsPanel.style = style
       this.#tipsPanel.querySelector('.figni-viewer-tips-panel-text').innerHTML =
         text
       const animationElement = this.#tipsPanel.querySelector(
@@ -705,9 +722,16 @@ export default class FigniViewerElement extends HTMLElement {
           once: true,
         }
       )
+      this.#tipsPanel.classList.remove('figni-viewer-tips-panel-hidden')
     }
   }
 
+  // TODO: TIPSごとに関数分ける
+  // TODO: ARではARボタンのテキストをなくしてボタンを丸くする
+  openDragTipsPanel() {
+    this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
+  }
+
   closeTipsPanel() {
     if (this.#tipsHideCallback) clearTimeout(this.#tipsHideCallback)
     this.#helpButton.innerHTML = `${SVG_HELP_ICON}<span>使い方</span>`
@@ -847,8 +871,6 @@ export default class FigniViewerElement extends HTMLElement {
     })
   }
 
-  count = 1
-
   #modifyHotspot(hotspot) {
     hotspot.classList.add('figni-viewer-hotspot')
     hotspot.classList.add('figni-viewer-hotspot-highlight')
@@ -1308,7 +1330,9 @@ export default class FigniViewerElement extends HTMLElement {
       })
       this.addEventListener('load', () => {
         this.#hideLoadingPanel()
-        this.openTipsPanel(TIPS.DRAG)
+        if (this.#ABTEST.IS_OPEN_AR_TIPS) {
+          this.openTipsPanel(TIPS.AR)
+        }
       })
     } else {
       this.#loadingPanel.style.display = ''
diff --git a/src/style.scss b/src/style.scss
index fb08618..dc4b182 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -263,7 +263,7 @@ figni-viewer {
   height: 2.5em;
   left: 0.5em;
   bottom: 0.5em;
-  background-color: white;
+  background-color: var(--figni-viewer-primary);
   border: none;
   border-radius: 2em;
   padding: 0 1.25em;
@@ -275,18 +275,18 @@ figni-viewer {
   svg {
     width: 0.875em;
     height: 0.875em;
-    margin-right: 0.3em;
     path {
-      fill: var(--figni-viewer-primary);
+      fill: white;
     }
   }
   span {
     display: block;
-    color: var(--figni-viewer-primary);
+    color: white;
     font-size: 12px;
     font-family: var(--figni-viewer-font);
     font-weight: bold;
     margin-bottom: 0.1em;
+    margin-left: 0.3em;
   }
 }
 
@@ -624,7 +624,7 @@ figni-viewer {
   padding: 0 0.5em;
   right: 0.5em;
   top: 0.5em;
-  background-color: var(--figni-viewer-primary);
+  background-color: #ffffff;
   border: none;
   border-radius: 1.25em;
   font-weight: bold;
@@ -646,7 +646,7 @@ figni-viewer {
 
 .figni-viewer-help-button span {
   display: block;
-  color: #ffffff;
+  color: var(--figni-viewer-primary);
   font-size: 0.75em;
   font-family: var(--figni-viewer-font);
   font-weight: bold;
@@ -657,15 +657,12 @@ figni-viewer {
 
 .figni-viewer-tips-panel {
   position: absolute;
-  top: 0.75em;
-  right: 0.75em;
   display: flex;
   flex-direction: row;
   border-radius: 0.5em;
   background-color: #ffffff;
-  transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
   z-index: 9997;
-  transform-origin: top right;
+  transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) transform;
   transform: scale(1);
   cursor: pointer;
 }
diff --git a/src/svg.js b/src/svg.js
index 6ff28fd..4845010 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -9,9 +9,9 @@ export const SVG_DOWNLOAD_SCREENSHOT_BUTTON =
 export const SVG_ERROR_ICON =
   '<svg width="64" height="59" viewBox="0 0 64 59" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.1489 58.5568H11.8413C7.56934 58.5568 3.74037 56.342 1.60441 52.641C-0.531548 48.94 -0.531548 44.5205 1.60441 40.8096L21.7533 5.91572C23.8892 2.2147 27.7182 0 31.9901 0C36.2621 0 40.091 2.2147 42.2368 5.91572L62.3956 40.8194C64.5315 44.5205 64.5315 48.94 62.3956 52.641C60.2596 56.342 56.4306 58.5568 52.1489 58.5568ZM32 5.90588C29.864 5.90588 27.9446 7.00831 26.8717 8.86866L6.72284 43.7724C5.64993 45.6229 5.64993 47.8376 6.72284 49.6881C7.79574 51.5386 9.7053 52.6509 11.8511 52.6509H52.1489C54.2848 52.6509 56.2042 51.5484 57.2771 49.6881C58.35 47.8376 58.35 45.6229 57.2771 43.7724L37.1283 8.86866C36.0554 7.01815 34.1458 5.90588 32 5.90588ZM34.7757 38.339L35.6419 19.952C35.6813 19.0169 34.9431 18.2393 34.008 18.2393H29.992C29.0569 18.2393 28.3187 19.0169 28.358 19.952L29.2242 38.339C29.2636 39.2052 29.9821 39.8942 30.8582 39.8942H33.1418C34.0178 39.8942 34.7265 39.2052 34.7757 38.339ZM35.2876 45.2095C35.2876 43.3983 33.821 41.9219 32 41.9219C30.1888 41.9219 28.7124 43.3885 28.7124 45.2095C28.7124 47.0206 30.179 48.4971 32 48.4971C33.8111 48.4971 35.2876 47.0305 35.2876 45.2095Z" fill="var(--figni-viewer-error)"/></svg>'
 export const SVG_HELP_ICON =
-  '<svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.59273 7.68718H3.08511C2.94999 7.68718 2.84017 7.57834 2.84017 7.44444V6.46491C2.84017 5.77693 3.40327 5.21889 4.09751 5.21889C5.90132 5.21889 6.00249 4.07775 6.00249 3.52961C6.00249 2.38649 4.96014 1.97885 3.98436 1.97885C3.24885 1.97885 2.64314 2.1985 2.32298 2.58108C2.05208 2.90429 1.94891 3.37592 2.01414 3.98607C2.03411 4.17604 1.90764 4.35017 1.71861 4.38513L0.415337 4.62721C0.239615 4.65953 0.0725459 4.53882 0.0492495 4.36337C-0.157756 2.8324 0.326145 1.86738 0.786749 1.31726C1.49829 0.467668 2.63383 0 3.98502 0C6.34928 0 8 1.45116 8 3.52961C8 5.43986 6.92437 6.70962 5.06331 7.08297C4.93219 7.10935 4.83767 7.22281 4.83767 7.35539V7.44378C4.83767 7.57768 4.72784 7.68718 4.59273 7.68718ZM3.83925 8.09152C3.12172 8.09152 2.53997 8.66803 2.53997 9.3791C2.53997 10.0902 3.12172 10.6667 3.83925 10.6667C4.55678 10.6667 5.13853 10.0902 5.13853 9.3791C5.13853 8.66803 4.55678 8.09152 3.83925 8.09152Z" fill="#ffffff"/></svg>'
+  '<svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.59273 7.68718H3.08511C2.94999 7.68718 2.84017 7.57834 2.84017 7.44444V6.46491C2.84017 5.77693 3.40327 5.21889 4.09751 5.21889C5.90132 5.21889 6.00249 4.07775 6.00249 3.52961C6.00249 2.38649 4.96014 1.97885 3.98436 1.97885C3.24885 1.97885 2.64314 2.1985 2.32298 2.58108C2.05208 2.90429 1.94891 3.37592 2.01414 3.98607C2.03411 4.17604 1.90764 4.35017 1.71861 4.38513L0.415337 4.62721C0.239615 4.65953 0.0725459 4.53882 0.0492495 4.36337C-0.157756 2.8324 0.326145 1.86738 0.786749 1.31726C1.49829 0.467668 2.63383 0 3.98502 0C6.34928 0 8 1.45116 8 3.52961C8 5.43986 6.92437 6.70962 5.06331 7.08297C4.93219 7.10935 4.83767 7.22281 4.83767 7.35539V7.44378C4.83767 7.57768 4.72784 7.68718 4.59273 7.68718ZM3.83925 8.09152C3.12172 8.09152 2.53997 8.66803 2.53997 9.3791C2.53997 10.0902 3.12172 10.6667 3.83925 10.6667C4.55678 10.6667 5.13853 10.0902 5.13853 9.3791C5.13853 8.66803 4.55678 8.09152 3.83925 8.09152Z" fill="var(--figni-viewer-primary)"/></svg>'
 export const SVG_HELP_CLOSE_ICON =
-  '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.314 1.72551L7.44537 4.85688H0.803386C0.630023 4.85688 0.5 4.99774 0.5 5.16027V6.85056C0.5 7.02393 0.640858 7.15395 0.803386 7.15395H7.44537L4.314 10.2853C4.19481 10.4045 4.19481 10.5995 4.314 10.7187L5.50587 11.9106C5.62506 12.0298 5.82009 12.0298 5.93928 11.9106L11.6278 6.22212C11.747 6.10293 11.747 5.9079 11.6278 5.78871L5.93928 0.0893905C5.82009 -0.0297968 5.62506 -0.0297968 5.50587 0.0893905L4.314 1.28126C4.19481 1.40045 4.19481 1.59549 4.314 1.71467V1.72551Z" fill="white"/></svg>'
+  '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.314 1.72551L7.44537 4.85688H0.803386C0.630023 4.85688 0.5 4.99774 0.5 5.16027V6.85056C0.5 7.02393 0.640858 7.15395 0.803386 7.15395H7.44537L4.314 10.2853C4.19481 10.4045 4.19481 10.5995 4.314 10.7187L5.50587 11.9106C5.62506 12.0298 5.82009 12.0298 5.93928 11.9106L11.6278 6.22212C11.747 6.10293 11.747 5.9079 11.6278 5.78871L5.93928 0.0893905C5.82009 -0.0297968 5.62506 -0.0297968 5.50587 0.0893905L4.314 1.28126C4.19481 1.40045 4.19481 1.59549 4.314 1.71467V1.72551Z" fill="var(--figni-viewer-primary)"/></svg>'
 export const SVG_CLOSE_ICON =
   '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="-6.10352e-05" y="10.7368" width="15.1843" height="1.78639" transform="rotate(-45 -6.10352e-05 10.7368)" fill="#ffffff"/><rect x="1.26306" width="15.1843" height="1.78639" transform="rotate(45 1.26306 0)" fill="#ffffff"/></svg>'
 export const SVG_INTERACTION_PROMPT =

From 09a92d184f9b0050db908b44e210feb777230e16 Mon Sep 17 00:00:00 2001
From: Futahei <futahei1108@icloud.com>
Date: Tue, 6 Sep 2022 21:54:35 +0900
Subject: [PATCH 2/3] fix

---
 src/figni-viewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/figni-viewer.js b/src/figni-viewer.js
index e2d6b1e..3345d2b 100644
--- a/src/figni-viewer.js
+++ b/src/figni-viewer.js
@@ -691,7 +691,7 @@ export default class FigniViewerElement extends HTMLElement {
         text = '目の前に実物大の商品を表示できます'
         animation = HOW_TO_AR_ANIMATION
         help = HELP.AR
-        style = 'bottom: 5.75em; left: 0.75em; transform-origin: bottom left;'
+        style = 'bottom: 3.75em; left: 0.75em; transform-origin: bottom left;'
         minimizeHelpButton = false
         break
       }

From 94fa5d993c345b63631be0093e1acc795a0ccb84 Mon Sep 17 00:00:00 2001
From: Futahei <futahei1108@icloud.com>
Date: Tue, 6 Sep 2022 21:55:38 +0900
Subject: [PATCH 3/3] fix

---
 src/figni-viewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/figni-viewer.js b/src/figni-viewer.js
index 3345d2b..8b2d285 100644
--- a/src/figni-viewer.js
+++ b/src/figni-viewer.js
@@ -208,7 +208,7 @@ export default class FigniViewerElement extends HTMLElement {
       this.#ABTEST.IS_OPEN_AR_TIPS = true
       this.base.registerABTestResult('is-open-ar-tips', true)
     } else {
-      this.#ABTEST.IS_OPEN_AR_TIPS = true
+      this.#ABTEST.IS_OPEN_AR_TIPS = false
       this.base.registerABTestResult('is-open-ar-tips', false)
     }