tt

.github/workflows/static.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ["master"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

README.md

@@ -10,7 +10,7 @@ This is a basic and straightforward Telegram Mini App(TMA) implemented using pla
 
 - App is available via direct link: https://t.me/simple_telegram_mini_app_bot/app
 - Or you can launch app with a bot menu button: https://t.me/simple_telegram_mini_app_bot
-- Deployment URL: [https://twa-dev.github.io/simple-telegram-web-app/](https://telegram-mini-apps-dev.github.io/vanilla-js-boilerplate/)
+- Deployment URL: [https://twa-dev.github.io/simple-telegram-web-app/](https://telegram-mini-apps-dev.github.io/telegram-mini/)
 
 ## Features
 - Minimalistic user interface.
@@ -28,12 +28,12 @@ To run this example, you'll need a modern web browser with JavaScript enabled.
 1. Clone this repository to your local machine:
 
    ```bash
-   git clone https://github.com/Telegram-Mini-Apps-Dev/vanilla-js-boilerplate
+   git clone https://github.com/Telegram-Mini-Apps-Dev/telegram-mini
 
 2. Navigate to the project directory:
 
 	```bash
-	cd vanilla-js-boilerplate
+	cd telegram-mini
 
 Open index.html in your preferred code editor or IDE.
 

assets/game/index.scss

@@ -0,0 +1,155 @@
+.game-wrapper {
+  height: 100vh;
+  overflow: hidden;
+  width: 100%;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding-bottom: 5rem;
+    img {
+      width: 5rem;
+    }
+  }
+  .game-over-bots {
+    width: 100%;
+    position: relative;
+  }
+  .game-over {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 12px;
+    .game-over-top {
+      text-align: center;
+    }
+    .game-over-btns {
+      width: 100%;
+    }
+    .congrats-img {
+      width: 50vw;
+      margin-bottom: 22px;
+    }
+    .congrats {
+      font-family: 'bold';
+      font-size: 2rem;
+      line-height: 2.4rem;
+    }
+    .score-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 12px;
+      font-size: 3rem;
+      color: var(--highColor);
+      font-family: 'number';
+      text-shadow: -1px -1px 0 #fff;
+      img {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+      }
+    }
+
+    .game-over-btn {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      background: var(--highColor);
+      border-radius: 50px;
+      padding: 0 4px;
+      font-size: 1.3rem;
+      font-weight: bold;
+      height: 3.6rem;
+      margin-top: 12px;
+      color: #000;
+      text-align: center;
+      background-image: url('/assets/game/btnBg.png');
+      background-size: 100% 100%;
+      .avatar {
+        width: 32px;
+        object-fit: contain;
+      }
+      .game-over-bot-middle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        flex: 1;
+        color: #000;
+        .tomato {
+          width: 22px;
+          height: 22px;
+          object-fit: contain;
+        }
+      }
+    }
+    .play-btn {
+      background: #91D752;
+    }
+  }
+
+}
+.popup-result {
+  .popup-title {
+    position: relative;
+    text-align: center;
+    font-size: 1.3rem;
+    font-weight: bold;
+    line-height: 2.2rem;
+    margin-top: 12px;
+    color: #000;
+    .close-svg {
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+  }
+  .popup-content {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 18px 12px;
+    color: #000;
+    .popup-content-jb {
+      font-size: 5rem;
+    }
+    .score-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 12px;
+      font-size: 3rem;
+      color: red;
+      font-family: 'number';
+      text-shadow: -1px -1px 0 red;
+      img {
+        width: 18px;
+        height: 18px;
+        object-fit: contain;
+      }
+    }
+    .popup-content-btn {
+      height: 3.2rem;
+      border: 1px solid #000;
+      width: 100%;
+      text-align: center;
+      margin-top: 12px;
+      line-height: 3.2rem;
+      font-size: 1.3rem;
+      font-family: 'bold';
+      border-radius: 50px;
+    }
+    .btn-send {
+      background: var(--btnBg);
+      border: none;
+    }
+  }
+}

assets/game/index.tsx

@@ -0,0 +1,170 @@
+import { useRef, useState } from 'react';
+import { IRefPhaserGame, PhaserGame } from '@/game/PhaserGame';
+import './index.scss'
+import { Popup, Toast } from 'antd-mobile';
+import { initUtils } from '@telegram-apps/sdk';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { beginGameReq, endGameReq } from '@/api/game';
+import { setUserInfoAction } from '@/redux/slices/userSlice';
+import loginConfig from "@/constants/config/login.config";
+import EventBus from '@/utils/eventBus';
+import Loading from '@/components/Loading';
+
+function GamePage() {
+  //  References to the PhaserGame component (game and scene are exposed)
+  const phaserRef = useRef<IRefPhaserGame | null>(null);
+  const userInfo = useSelector((state: any) => state.user.info);
+  const [currentScene, setCurrentScene] = useState('Preloader')
+  const [score, setScore] = useState(0)
+  const link = `${loginConfig.TG_LINK}?startapp=${btoa(userInfo.user_id)}SHAREGAME`
+  const [showPopUp, setShowPopUp] = useState(false)
+  const utils = initUtils()
+  const navigate = useNavigate();
+  const dispatch = useDispatch()
+  const eventBus = EventBus.getInstance()
+  const [isShowInvite, setShowInvite] = useState(false)
+
+  // Event emitted from the PhaserGame component
+  const currentActiveScene = async (scene: Phaser.Scene) => {
+    setCurrentScene(scene.scene.key);
+    if (scene.scene.key == 'GameOver') {
+      const _score = (localStorage.getItem('currentScore') || 0) as any
+      if (parseInt(_score)) {
+        eventBus.emit('showCongrates', { time: 1000, visible: true })
+        setScore(_score as any)
+        endGameReq({ score: _score * 1 }).then(res => {
+          if (res.code == 0) {
+            dispatch(setUserInfoAction(res.data))
+          }
+        }).catch(error => {
+          console.error(error)
+        })
+      }
+    }
+    if (scene.scene.key == 'MainGame') {
+      const res = await beginGameReq()
+      if (res.code != 0) {
+        navigate(-1)
+      } else {
+        dispatch(setUserInfoAction(res.data))
+      }
+    }
+  }
+
+  const restartGame = () => {
+    if (userInfo.ticket == 0) {
+      setShowInvite(true)
+      return
+    }
+    setCurrentScene('Preloader')
+    // phaserRef?.current?.game?.scene?.start('Preloader')
+  }
+
+  const shareResult = () => {
+    setShowPopUp(true)
+  }
+
+  const handleCopyLink = () => {
+    const textToCopy = link; // 替换为你想要复制的内容  
+    const textArea = document.createElement("textarea");
+    textArea.value = textToCopy;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+    Toast.show({ content: 'copied', position: 'top' })
+  }
+
+  const handleSendLink = () => {
+    const text = `I scored ${score} points in Cat Game!\nI dare you to challenge me!\nFarm 🍅 $CAT with me and secure your token allocation through Tomarket.ai.\nUse my link to get 2,000 🍅 $CAT!`
+    utils.shareURL(link, text)
+  }
+
+  return (
+    <div className='game-wrapper'>
+      {
+        currentScene == 'Preloader' ? <Loading /> : null
+      }
+      {
+        currentScene == 'GameOver' ? <div className='game-over'>
+          <div className='game-over-top'>
+            <img src='/assets/game/reward.png' alt='gif' className='congrats-img' />
+            <div className='congrats'>Congrats!</div>
+            <div className='congrats'>bountiful harvest</div>
+            <div className='score-wrapper'>
+              <span>+</span>
+              <span>{score} </span>
+              <img src="/assets/common/cat.webp" alt="tomato" />
+            </div>
+          </div>
+          <div className='game-over-bots'>
+            <div className='game-over-btn' onClick={() => shareResult()}>
+              Share Your Results +50
+            </div>
+            <div className='game-over-btn play-btn' onClick={() => restartGame()}>
+              <div className='game-over-bot-middle'>Play ({userInfo.ticket} Attempts Left)</div>
+            </div>
+          </div>
+        </div> : <PhaserGame ref={phaserRef} currentActiveScene={currentActiveScene} />
+      }
+
+      <Popup
+        visible={showPopUp}
+        onMaskClick={() => {
+          setShowPopUp(false)
+        }}
+        bodyStyle={{
+          borderTopLeftRadius: '8px',
+          borderTopRightRadius: '8px',
+        }}>
+        <div className='popup-result'>
+          <div className='popup-title'>
+            Share Results
+            <svg onClick={() => setShowPopUp(false)} className="close-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5777" width="16" height="16"><path d="M597.795527 511.488347 813.564755 295.718095c23.833825-23.833825 23.833825-62.47489 0.001023-86.307691-23.832801-23.832801-62.47489-23.833825-86.307691 0L511.487835 425.180656 295.717583 209.410404c-23.833825-23.833825-62.475913-23.833825-86.307691 0-23.832801 23.832801-23.833825 62.47489 0 86.308715l215.769228 215.769228L209.410915 727.258599c-23.833825 23.833825-23.833825 62.47489 0 86.307691 23.832801 23.833825 62.473867 23.833825 86.307691 0l215.768205-215.768205 215.769228 215.769228c23.834848 23.833825 62.475913 23.832801 86.308715 0 23.833825-23.833825 23.833825-62.47489 0-86.307691L597.795527 511.488347z" fill="#272636" p-id="5778"></path></svg>
+          </div>
+          <div className='popup-content'>
+            <div className='popup-content-jb'>🏆</div>
+            <div className='score-wrapper'>
+              <span>+</span>
+              <span>{score} </span>
+              <img src="/assets/common/cat.webp" alt="tomato" />
+            </div>
+            <div>I scored {score} points in Cat Game!</div>
+            <div>I dare you to challenge me!</div>
+            <div className='popup-content-btn' onClick={() => handleCopyLink()}>Copy link</div>
+            <div className='popup-content-btn btn-send' onClick={() => handleSendLink()}>Send</div>
+          </div>
+        </div>
+      </Popup>
+      <Popup
+        visible={isShowInvite}
+        onMaskClick={() => {
+          setShowInvite(false)
+        }}
+        bodyStyle={{
+          borderTopLeftRadius: '8px',
+          borderTopRightRadius: '8px',
+        }}
+        className='popup-invite'
+      >
+        <div className='popup-frens'>
+          <div className='title'>
+            Invite a Fren
+            <svg onClick={() => setShowInvite(false)} className="close-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5777" width="18" height="18"><path d="M597.795527 511.488347 813.564755 295.718095c23.833825-23.833825 23.833825-62.47489 0.001023-86.307691-23.832801-23.832801-62.47489-23.833825-86.307691 0L511.487835 425.180656 295.717583 209.410404c-23.833825-23.833825-62.475913-23.833825-86.307691 0-23.832801 23.832801-23.833825 62.47489 0 86.308715l215.769228 215.769228L209.410915 727.258599c-23.833825 23.833825-23.833825 62.47489 0 86.307691 23.832801 23.833825 62.473867 23.833825 86.307691 0l215.768205-215.768205 215.769228 215.769228c23.834848 23.833825 62.475913 23.832801 86.308715 0 23.833825-23.833825 23.833825-62.47489 0-86.307691L597.795527 511.488347z" fill="#272636" p-id="5778"></path></svg>
+          </div>
+          <div className='content'>
+            <div className='content-desc'>
+              <div>Get 2000 <img src='/assets/common/cat.webp' />and 1 <img src='/assets/common/ticket.webp' />（Invite a Friend）</div>
+              <div>Get 20000 <img src='/assets/common/cat.webp' />and 5 <img src='/assets/common/ticket.webp' />（Invite a Telegram Premium）</div>
+            </div>
+            <div className='popup-content-btn' onClick={() => handleCopyLink()}>Copy link</div>
+            <div className='popup-content-btn btn-send' onClick={() => handleSendLink()}>Send</div>
+          </div>
+        </div>
+      </Popup>
+    </div>
+  )
+}
+
+export default GamePage