rebase:

- add tari-tower animation lib - remove old build files - update imports and uses - implement complete canvas removal - update workflows to include setting up npm credentials
tari-project · Jan 30, 2025 · 83f7242 · 83f7242
1 parent 332bb9e
commit 83f7242
Show file tree

Hide file tree

Showing 30 changed files with 183 additions and 4,977 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -64,7 +64,7 @@ jobs:
           AIRDROP_BASE_URL: http://localhost:4000
           AIRDROP_API_BASE_URL: http://localhost:3004
           AIRDROP_TWITTER_AUTH_URL: http://localhost:3004/auth/twitter
-          TELEMETRY_API_URL: http://localhost:3004  
+          TELEMETRY_API_URL: http://localhost:3004
         run: |
           cargo install cargo-lints
           cargo lints clippy --all-targets --all-features
@@ -115,6 +115,11 @@ jobs:
         with:
           node-version: lts/*
           cache: 'npm'
+      - name: Set up NPM credentials
+        run: |
+          printf -- "//npm.pkg.github.com/:_authToken=${PACKAGE_TOKEN}\n@tari-labs:registry=https://npm.pkg.github.com" > .npmrc
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
       - name: Install dependencies (node)
         run: npm ci
       - uses: dtolnay/rust-toolchain@stable

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -11,6 +11,11 @@ jobs:
         with:
           cache: 'npm'
           node-version: lts/*
+      - name: Set up NPM credentials
+        run: |
+          printf -- "//npm.pkg.github.com/:_authToken=${PACKAGE_TOKEN}\n@tari-labs:registry=https://npm.pkg.github.com" > .npmrc
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
       - name: Install Node.js dependencies
         run: npm ci
       - name: check lint/prettier errors

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -191,7 +191,11 @@ jobs:
               ./tauri.windows.conf.json
           cat ./tauri.windows.conf.json
           cargo install [email protected] --locked
-
+      - name: Set up NPM credentials
+        run: |
+          printf -- "//npm.pkg.github.com/:_authToken=${PACKAGE_TOKEN}\n@tari-labs:registry=https://npm.pkg.github.com" > .npmrc
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
       - name: Install Dependencies - Node
         run: |
           npm --version

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+@tari-labs:registry=https://npm.pkg.github.com
diff --git a/index.html b/index.html
@@ -57,7 +57,6 @@
             crossorigin
         />
 
-        <script type="module" crossorigin src="/assets/glApp.js"></script>
         <title>Tari Universe | Testnet</title>
         <style>
             /* Poppins Font Faces */
@@ -182,78 +181,14 @@
                 padding: 0;
                 margin: 0;
             }
-
-            #canvas {
+            #tower-canvas {
                 position: absolute;
                 pointer-events: auto;
             }
         </style>
     </head>
     <body>
-        <main id="main">
-            <div id="root"></div>
-            <canvas id="canvas"></canvas>
-            <script type="module" src="src/main.tsx"></script>
-            <script>
-                let time;
-                let lastRender;
-                let targetFPS = 40;
-                let frameInterval = 1 / targetFPS;
-
-                function preload() {
-                    glApp.preload(
-                        {
-                            canvas: document.getElementById('canvas'),
-                            orbitTarget: document.getElementById('canvas'),
-                            ASSETS_PATH: '/assets/',
-                        },
-                        () => {
-                            init();
-                        }
-                    );
-                }
-
-                function init() {
-                    glApp.init();
-                    time = performance.now() / 1000;
-                    lastRender = time;
-                    window.addEventListener('resize', onResize);
-
-                    onResize();
-                    animate();
-                }
-
-                function animate() {
-                    let newTime = performance.now() / 1000;
-                    let dt = newTime - time;
-                    if (newTime - lastRender >= frameInterval) {
-                        lastRender = newTime;
-                        update(dt);
-                        time = newTime;
-                    }
-
-                    requestAnimationFrame(animate);
-                }
-
-                function update(dt) {
-                    glApp.render(dt);
-                }
-
-                function onResize() {
-                    const sidebarOffset = 348 + 20; // sidebar + padding
-                    glApp.properties.cameraOffsetX = sidebarOffset / window.innerWidth;
-                    glApp.setSize(window.innerWidth, window.innerHeight);
-                }
-
-                document.addEventListener('DOMContentLoaded', () => {
-                    if (!window.WebGL2RenderingContext && !window.WebGLRenderingContext) {
-                        console.error('WebGL not supported!');
-                        return;
-                    }
-
-                    preload();
-                });
-            </script>
-        </main>
+        <div id="root"></div>
+        <script type="module" src="src/main.tsx"></script>
     </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "@floating-ui/react": "^0.26.28",
         "@lottiefiles/dotlottie-react": "^0.12.0",
         "@sentry/react": "^8.48.0",
+        "@tari-labs/tari-tower": "^0.0.11",
         "@tauri-apps/api": "^2.2.0",
         "@tauri-apps/plugin-clipboard-manager": "^2.2.0",
         "@tauri-apps/plugin-os": "^2.2.0",
@@ -72,4 +73,4 @@
         "typescript-eslint": "^8.19.1",
         "vite": "^5.4.14"
     }
-}
+}
diff --git a/public/assets/models/BASE.buf → public/assets/BASE.buf b/public/assets/models/BASE.buf → public/assets/BASE.buf
diff --git a/public/assets/models/BOX.buf → public/assets/BOX.buf b/public/assets/models/BOX.buf → public/assets/BOX.buf
diff --git a/public/assets/models/COIN.buf → public/assets/COIN.buf b/public/assets/models/COIN.buf → public/assets/COIN.buf
diff --git a/public/assets/models/COIN_PLACEMENT.buf → public/assets/COIN_PLACEMENT.buf b/public/assets/models/COIN_PLACEMENT.buf → public/assets/COIN_PLACEMENT.buf
diff --git a/public/assets/textures/LDR_RGB1_0.png → public/assets/LDR_RGB1_0.png b/public/assets/textures/LDR_RGB1_0.png → public/assets/LDR_RGB1_0.png
diff --git a/public/assets/glApp.js b/public/assets/glApp.js
diff --git a/public/assets/textures/gobo.jpg → public/assets/gobo.jpg b/public/assets/textures/gobo.jpg → public/assets/gobo.jpg
diff --git a/public/assets/models/lose_animation.buf → public/assets/lose_animation.buf b/public/assets/models/lose_animation.buf → public/assets/lose_animation.buf
diff --git a/public/assets/textures/matcap_gold.jpg → public/assets/matcap_gold.jpg b/public/assets/textures/matcap_gold.jpg → public/assets/matcap_gold.jpg
diff --git a/public/assets/textures/LICENSES.txt b/public/assets/textures/LICENSES.txt
diff --git a/src/App/AppWrapper.tsx b/src/App/AppWrapper.tsx
@@ -6,11 +6,13 @@ import { fetchAppConfig } from '../store/useAppConfigStore.ts';
 import setupLogger from '../utils/shared-logger.ts';
 import useListenForCriticalProblem from '@app/hooks/useListenForCriticalProblem.tsx';
 import { setMiningNetwork } from '@app/store/miningStoreActions.ts';
+import { loadTowerAnimation } from '@tari-labs/tari-tower';
+import { sidebarTowerOffset } from '@app/store/useUIStore.ts';
 import App from './App.tsx';
-
 // FOR ANYTHING THAT NEEDS TO BE INITIALISED
 
 setupLogger();
+
 export default function AppWrapper() {
     useDetectMode();
     useDisableRefresh();
@@ -20,7 +22,10 @@ export default function AppWrapper() {
 
     useEffect(() => {
         async function initialize() {
-            await fetchAppConfig();
+            const config = await fetchAppConfig();
+            if (config?.visual_mode) {
+                loadTowerAnimation('tower-canvas', sidebarTowerOffset);
+            }
             await setMiningNetwork();
         }
         void initialize();

diff --git a/src/containers/main/Dashboard/components/VisualMode.tsx b/src/containers/main/Dashboard/components/VisualMode.tsx
@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { ToggleSwitch } from '@app/components/elements/ToggleSwitch.tsx';
-import { useAppConfigStore } from '@app/store/useAppConfigStore';
-import { useUIStore } from '@app/store/useUIStore';
+import { setVisualMode, useAppConfigStore } from '@app/store/useAppConfigStore';
+import { sidebarTowerOffset, useUIStore } from '@app/store/useUIStore';
 import { Typography } from '@app/components/elements/Typography';
 import {
     SettingsGroup,
@@ -13,23 +13,41 @@ import {
     SettingsGroupWrapper,
 } from '@app/containers/floating/Settings/components/SettingsGroup.styles';
 
+import { loadTowerAnimation, removeTowerAnimation, setAnimationState } from '@tari-labs/tari-tower';
+
 export const ErrorTypography = styled(Typography)(({ theme }) => ({
     color: theme.palette.error.main,
 }));
 
 function VisualMode() {
     const visualMode = useAppConfigStore((s) => s.visual_mode);
-    const setVisualMode = useAppConfigStore((s) => s.setVisualMode);
+    const visualModeToggleLoading = useAppConfigStore((s) => s.visualModeToggleLoading);
     const isWebglNotSupported = useUIStore((s) => s.isWebglNotSupported);
     const { t } = useTranslation('settings', { useSuspense: false });
 
+    const handleDisable = useCallback(() => {
+        const canvas = document.getElementById('tower-canvas');
+        if (canvas) {
+            canvas.style.opacity = '0';
+        }
+        setVisualMode(false);
+        removeTowerAnimation('tower-canvas');
+    }, []);
+
+    const handleEnable = useCallback(() => {
+        loadTowerAnimation('tower-canvas', sidebarTowerOffset).then(() => {
+            setVisualMode(true);
+            setAnimationState('showVisual');
+        });
+    }, []);
+
     const handleSwitch = useCallback(() => {
-        const canvasElement = document.getElementById('canvas');
-        if (canvasElement) {
-            canvasElement.style.display = visualMode ? 'none' : 'block';
+        if (visualMode) {
+            handleDisable();
+        } else {
+            handleEnable();
         }
-        setVisualMode(!visualMode);
-    }, [setVisualMode, visualMode]);
+    }, [handleDisable, handleEnable, visualMode]);
 
     return (
         <SettingsGroupWrapper>
@@ -41,11 +59,14 @@ function VisualMode() {
                     {isWebglNotSupported && <ErrorTypography color="error">{t('webgl-not-supported')}</ErrorTypography>}
                 </SettingsGroupContent>
                 <SettingsGroupAction style={{ alignItems: 'center' }}>
-                    <ToggleSwitch disabled={isWebglNotSupported} checked={visualMode} onChange={handleSwitch} />
+                    <ToggleSwitch
+                        disabled={visualModeToggleLoading || isWebglNotSupported}
+                        checked={visualMode}
+                        onChange={handleSwitch}
+                    />
                 </SettingsGroupAction>
             </SettingsGroup>
         </SettingsGroupWrapper>
     );
 }
-
 export default VisualMode;