[+] Telegram and QQ join link

AquaNet/package.json

@@ -16,6 +16,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tsconfig/svelte": "^5.0.4",
     "@types/d3": "^7",
+    "@unocss/svelte-scoped": "^0.62.4",
     "chartjs-adapter-moment": "^1.0.1",
     "eslint": "^8.57.0",
     "eslint-plugin-svelte": "^2.37.0",
@@ -28,6 +29,7 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.7.0",
+    "unocss": "^0.62.4",
     "vite": "^5.2.10"
   },
   "dependencies": {

AquaNet/src/components/CommunityCard.svelte

@@ -0,0 +1,62 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  export let color: string = '179, 198, 255'
+  export let icon: string
+
+</script>
+
+<div class="action-card" style="--card-color: {color}" on:click role="button" tabindex="0" on:keydown>
+  <slot/>
+
+  <div class="icon">
+    <Icon icon={icon} />
+  </div>
+</div>
+
+<style lang="sass">
+  @import '../vars'
+
+  .action-card
+    overflow: hidden
+    padding: 1rem
+    border-radius: $border-radius
+    box-shadow: 0 5px 5px 1px $c-shadow
+    transition: all 0.2s ease
+    cursor: pointer
+    position: relative
+    background: linear-gradient(45deg, transparent 20%, rgba(var(--card-color), 0.5) 100%)
+    outline: 1px solid transparent
+    filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
+
+    &:hover
+      box-shadow: 0 0 0.5rem 0.2rem $c-shadow
+      transform: translateY(-3px)
+
+      // Drop shadow glow
+      filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
+      outline-color: rgba(var(--card-color), 0.5)
+
+    span
+      font-size: 1.2rem
+      display: block
+      margin-bottom: 0.5rem
+
+    .icon
+      position: absolute
+      display: flex
+      color: rgba(var(--card-color), 0.5)
+      font-size: 4rem
+      right: 0
+      bottom: 0
+      padding: .5rem
+      transition: all 0.2s ease
+      z-index: -1
+      mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
+      opacity: 0.8
+
+      @media (max-width: $w-mobile)
+        opacity: 0.6
+</style>

AquaNet/src/libs/config.ts

@@ -7,6 +7,8 @@ export const AQUA_CONNECTION = 'aquadx.hydev.org'
 
 export const TURNSTILE_SITE_KEY = '0x4AAAAAAASGA2KQEIelo9P9'
 export const DISCORD_INVITE = 'https://discord.gg/FNgveqFF7s'
+export const TELEGRAM_INVITE = 'https://t.me/+zBL4RZdyfvUzZGU1'
+export const QQ_INVITE = 'https://qm.qq.com/q/wvNXbXbHbO'
 
 // UI
 export const FADE_OUT = { duration: 200 }
@@ -14,4 +16,4 @@ export const FADE_IN = { delay: 400 }
 export const DEFAULT_PFP = '/assets/imgs/no_profile.png'
 
 // USERBOX_ASSETS
-export const HAS_USERBOX_ASSETS = true
+export const HAS_USERBOX_ASSETS = true

AquaNet/src/libs/i18n/en_ref.ts

@@ -80,8 +80,8 @@ export const EN_REF_HOME = {
   'home.manage-cards-description': 'Link, unlink, and manage your cards.',
   'home.link-card': 'Link Card',
   'home.link-cards-description': 'Link your Amusement IC / Aime card to play games.',
-  'home.join-discord': 'Join Discord',
+  'home.join-community': 'Join Community',
-  'home.join-discord-description': 'Join our Discord server to chat with other players and get help.',
+  'home.join-community-description': 'Join our community to chat with other players and get help.',
   'home.setup': 'Setup Connection',
   'home.setup-description': 'If you own a cab or arcade setup, begin setting up the connection.',
   'home.import': 'Import Player Data',

AquaNet/src/libs/i18n/zh.ts

@@ -89,8 +89,8 @@ const zhHome: typeof EN_REF_HOME = {
   'home.manage-cards-description': '绑定、解绑、管理游戏数据卡',
   'home.link-card': '绑定游戏卡',
   'home.link-cards-description':'绑定游戏数据卡 (Amusement IC 或 Aime 卡) 后才可以访问游戏存档哦',
-  'home.join-discord': '加入 Discord',
+  'home.join-community': '加入群组',
-  'home.join-discord-description': '加入我们的 Discord 群，与其他玩家聊天、获取帮助',
+  'home.join-community-description': '加入我们的聊天群组，与其他玩家聊天、获取帮助',
   'home.setup': '连接到 AquaDX',
   'home.setup-description': '如果您有街机框体或者手台，点击这里设置服务器的连接',
   'home.import': '导入玩家数据',

AquaNet/src/pages/Home.svelte

@@ -9,6 +9,7 @@
   import ActionCard from "../components/ActionCard.svelte";
   import { t } from "../libs/i18n";
   import ImportDataAction from "./Home/ImportDataAction.svelte";
+  import Communities from "./Home/Communities.svelte";
 
   USER.ensureLoggedIn();
 
@@ -46,9 +47,9 @@
         {/if}
       </ActionCard>
 
-      <ActionCard color="82, 93, 233" icon="ic:baseline-discord" on:click={() => window.location.href = DISCORD_INVITE}>
+      <ActionCard color="82, 93, 233" icon="fluent:chat-12-filled" on:click={() => tab = 3}>
-        <h3>{t('home.join-discord')}</h3>
+        <h3>{t('home.join-community')}</h3>
-        <span>{t('home.join-discord-description')}</span>
+        <span>{t('home.join-community-description')}</span>
       </ActionCard>
 
       <ActionCard on:click={() => tab = 2} icon="uil:link-alt">
@@ -66,6 +67,10 @@
     <div out:fade={FADE_OUT} in:fade={FADE_IN}>
       <SetupInstructions/>
     </div>
+  {:else if tab === 3}
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+      <Communities/>
+    </div>
   {/if}
 </main>
 

AquaNet/src/pages/Home/Communities.svelte

@@ -0,0 +1,26 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import { t } from "../../libs/i18n";
+  import CommunityCard from "../../components/CommunityCard.svelte";
+  import { DISCORD_INVITE, QQ_INVITE, TELEGRAM_INVITE } from "../../libs/config";
+</script>
+
+<div class="setup-instructions">
+  <h2>{t('home.join-community')}</h2>
+  <div class="grid cols-3 gap-4">
+    <CommunityCard color="82, 93, 233" icon="ic:baseline-discord" on:click={() => window.location.href = DISCORD_INVITE}>
+      <h3>Discord</h3>
+    </CommunityCard>
+    <CommunityCard color="46, 163, 224" icon="mingcute:telegram-fill" on:click={() => window.location.href = TELEGRAM_INVITE}>
+      <h3>Telegram</h3>
+    </CommunityCard>
+    <CommunityCard color="226, 60, 68" icon="ri:qq-fill" on:click={() => window.location.href = QQ_INVITE}>
+      <h3>QQ</h3>
+    </CommunityCard>
+  </div>
+</div>
+
+<style lang="sass">
+
+</style>

AquaNet/uno.config.ts

@@ -0,0 +1,11 @@
+import {
+	defineConfig, presetTypography,
+	presetUno
+} from 'unocss';
+
+export default defineConfig({
+	presets: [
+		presetUno(),
+		presetTypography()
+	]
+});

AquaNet/vite.config.ts

@@ -1,9 +1,13 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import UnoCSS from '@unocss/svelte-scoped/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [
+    UnoCSS(),
+    svelte()
+  ],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
   },