From c2a170f7c0fcee1365527e5658eaafd7e2d9cfb3 Mon Sep 17 00:00:00 2001
From: Mycroft Kang <thkang0629@gmail.com>
Date: Sun, 25 Feb 2024 17:38:45 +0900
Subject: [PATCH] Add share button

---
 public/share.svg                          |  1 +
 src/lib/suikaGame/gameOverModal/index.tsx |  5 ++++
 src/lib/suikaGame/index.module.scss       |  6 +++++
 src/lib/suikaGame/index.tsx               | 31 +++++++++++++++++++++++
 src/lib/suikaGame/intro/index.tsx         |  2 +-
 5 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 public/share.svg

diff --git a/public/share.svg b/public/share.svg
new file mode 100644
index 0000000..9acd1ba
--- /dev/null
+++ b/public/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
\ No newline at end of file
diff --git a/src/lib/suikaGame/gameOverModal/index.tsx b/src/lib/suikaGame/gameOverModal/index.tsx
index 9ce358a..2ea82a4 100644
--- a/src/lib/suikaGame/gameOverModal/index.tsx
+++ b/src/lib/suikaGame/gameOverModal/index.tsx
@@ -72,6 +72,11 @@ const GameOverModal = ({ isVisible, onClick, score }: GameOverModalProps) => {
 
   return (
     <div className={cx('gameOverArea')}>
+      <div className="top-0 end-0 p-3" style={{position: "absolute", zIndex: 1, pointerEvents: "auto"}}>
+        <button type="button" className='btn' onClick={share} style={{width: "1.8em", height: "1.8em", padding: 0, opacity: "0.85"}}>
+        <img src="/share.svg" className="" alt="" style={{width: "1.8em"}}/>
+        </button>
+      </div>
       <span className={cx('text')}>GAME OVER</span>
       <span className={cx('score')}>SCORE: {score}</span>
       <div id='gframe' className={cx('gframe')}></div>
diff --git a/src/lib/suikaGame/index.module.scss b/src/lib/suikaGame/index.module.scss
index 0b0ebc4..41c5618 100644
--- a/src/lib/suikaGame/index.module.scss
+++ b/src/lib/suikaGame/index.module.scss
@@ -42,3 +42,9 @@
     cursor: pointer;
   }
 }
+
+// @media screen and (max-height: 739px) and (max-width: 484px) {
+//   .shareButton {
+//     display: none;
+//   }
+// }
diff --git a/src/lib/suikaGame/index.tsx b/src/lib/suikaGame/index.tsx
index 78c2faf..e8ef08e 100644
--- a/src/lib/suikaGame/index.tsx
+++ b/src/lib/suikaGame/index.tsx
@@ -116,8 +116,39 @@ const SuikaGame = () => {
     return score > bestScore ? score : bestScore;
   }
 
+  const share = () => {
+    if (navigator.share) {
+      navigator.share({
+        title: '수박 만들기 게임',
+        text: '폭탄과 과일들을 모아 수박을 만들어보세요.',
+        url: 'https://game.mulgyeol.com/',
+      })
+        .then(() => console.log('done'))
+        .catch((error) => console.log(error));
+    } else {
+      const urlToCopy = window.location.href;
+
+      // Clipboard API를 지원하는지 확인
+      if (document.queryCommandSupported("copy")) {
+        const input = document.createElement("input");
+        input.value = urlToCopy;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+      } else {
+        navigator.clipboard.writeText(urlToCopy)
+      }
+    }
+  }
+
   return (
     <div className={cx('gameArea')}>
+      <div className={`${cx('shareButton')} top-0 end-0 p-3`} style={{position: "absolute", zIndex: 1, pointerEvents: "auto", display: !isStart ? "block" : "none"}}>
+        <button type="button" className='btn' onClick={share} style={{width: "1.8em", height: "1.8em", padding: 0, opacity: "0.85"}}>
+        <img src="/share.svg" className="" alt="" style={{width: "1.8em"}}/>
+        </button>
+      </div>
       <div className={cx('gameWrap')} style={{ visibility: isStart ? 'visible' : 'hidden'}}>
         <div className={cx('canvasArea')}>
           <Header bestScore={bestScore} score={score} bombItemCount={bombItemCount} nextItem={nextItem} onClick={handleBombItem} isStart={isStart} />
diff --git a/src/lib/suikaGame/intro/index.tsx b/src/lib/suikaGame/intro/index.tsx
index d3e4377..ab0af14 100644
--- a/src/lib/suikaGame/intro/index.tsx
+++ b/src/lib/suikaGame/intro/index.tsx
@@ -181,7 +181,7 @@ const Intro = ({isVisible, loadUserInfo,handleGameStart, handleShowRankModal}: I
               홈 또는 앱스 화면에 바로가기를 추가하려면 크롬에서 계속하세요.
               </Card.Text>
             {/* <Button variant="primary" style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} onClick={handleInstall}>크롬에서 열기</Button> */}
-            <a className='btn btn-primary' style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} href="intent://game.mulgyeol.com#Intent;scheme=https;package=com.android.chrome;end">크롬에서 열기</a>
+            <a className='btn btn-secondary' style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} href="intent://game.mulgyeol.com#Intent;scheme=https;package=com.android.chrome;end">크롬에서 열기</a>
           </Card.Body>
         </Card>
       </ToastContainer>