Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Enhancement & Contract Update #67

Merged
merged 20 commits into from
Nov 13, 2024
Merged

UI Enhancement & Contract Update #67

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1937b11
Remove airdrop message if not init
Matth26 Nov 11, 2024
3bc845b
Put back check_row_coherence
Matth26 Nov 11, 2024
a689b28
Token zkube
ClanCo Nov 11, 2024
7261db0
compress img
ClanCo Nov 11, 2024
3b54f92
Merge branch 'dev' of github.com:z-korp/zkube into dev
Matth26 Nov 12, 2024
8be5e0a
fix number concat instead of add
ClanCo Nov 12, 2024
d6113bc
Merge branch 'dev' of https://github.com/z-korp/zkube into dev
ClanCo Nov 12, 2024
be73a09
Add vitest for testing
Matth26 Nov 13, 2024
41443df
Add toast on minting nft tx
Matth26 Nov 13, 2024
0318132
Add LORDS + nft image everywhere
Matth26 Nov 13, 2024
22f9e99
Remove pk in scarb for sepolia + upgrade contracts with check on swipe
Matth26 Nov 13, 2024
f763c1b
Merge branch 'dev' of github.com:z-korp/zkube into dev
Matth26 Nov 13, 2024
97bec70
blonk image
ClanCo Nov 13, 2024
d1d473e
Merge branch 'dev' of https://github.com/z-korp/zkube into dev
ClanCo Nov 13, 2024
58a31dd
Reduce size of nft
Matth26 Nov 13, 2024
689d406
Merge branch 'dev' of github.com:z-korp/zkube into dev
Matth26 Nov 13, 2024
3ffaa2d
Add rendering-quality-auto to try to fix weird image display for nft
Matth26 Nov 13, 2024
a104c62
Add animated chest
Matth26 Nov 13, 2024
9a9f59e
Update pwa
Matth26 Nov 13, 2024
f767d2e
fix test
Matth26 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zKube</title>
<meta
name="description"
content="Play this fun puzzle game and get rewarded!"
Expand All @@ -22,7 +22,36 @@
content="https://raw.githubusercontent.com/z-korp/zkube/d27a55867176c0e43426fef45e4194a698503ef0/client/public/assets/logo.png"
/>
<link rel="icon" type="image/svg+xml" href="favicon.ico" />
<title>zKube</title>

<!-- For iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/assets/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/assets/apple-icon-180x180.png"
/>
<link
rel="apple-touch-icon"
sizes="167x167"
href="/assets/apple-icon-167x167.png"
/>

<!-- For Android -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#080414" />
Comment on lines +48 to +50
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Add manifest.json and required Android icons to support PWA

  • manifest.json is missing in the repository.
  • Required Android icon files (android-icon-192x192.png, android-icon-512x512.png) are missing.
🔗 Analysis chain

Add Web App Manifest for complete PWA support

The Android PWA configuration is incomplete without a web app manifest file. This is essential for proper PWA installation and behavior.

Add the following to the head section:

 <!-- For Android -->
 <meta name="mobile-web-app-capable" content="yes" />
 <meta name="theme-color" content="#080414" />
+<link rel="manifest" href="/manifest.json" />

Create a manifest.json file in the public directory with:

{
  "name": "zKube",
  "short_name": "zKube",
  "theme_color": "#080414",
  "background_color": "#080414",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/android-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if manifest.json exists and android icons are present
if ! fd "manifest.json" public/; then
    echo "Warning: Missing manifest.json"
fi

for size in 192x192 512x512; do
    if ! fd "android-icon-${size}.png" public/assets/; then
        echo "Warning: Missing android-icon-${size}.png"
    fi
done

Length of output: 732

Script:

#!/bin/bash
# Search for manifest.json in the entire repository
fd "manifest.json"

# Search for android-icon-192x192.png and android-icon-512x512.png in the entire repository
fd "android-icon-192x192.png"
fd "android-icon-512x512.png"

Length of output: 78

<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
Comment on lines +51 to +54
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Accessibility concern: Disabling zoom can impact users with visual impairments

The viewport meta tag completely disables zooming with user-scalable=no. This can create accessibility issues for users who rely on zooming to read content.

Consider this more accessible configuration:

-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

</head>
<body>
<div id="root"></div>
Expand Down
12 changes: 8 additions & 4 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"preview": "vite preview",
"codegen": "graphql-codegen",
"gen:models": "npx create-models ../contracts/manifests/dev/manifest.json ./src/dojo/generated/contractModels.ts",
"test": "jest"
"test": "vitest",
"test:watch": "vitest watch"
},
"bin": {
"create-models": "./bin/models.cjs"
Expand Down Expand Up @@ -68,6 +69,7 @@
"framer-motion": "^11.2.10",
"graphql": "^16.8.2",
"graphql-request": "^6.1.0",
"gsap": "^3.12.5",
"html-to-image": "^1.11.11",
"lucide-react": "^0.394.0",
"mobx": "^6.13.2",
Expand Down Expand Up @@ -97,7 +99,8 @@
"@graphql-codegen/typescript": "^4.0.7",
"@graphql-codegen/typescript-graphql-request": "^5.0.0",
"@graphql-codegen/typescript-operations": "^4.2.1",
"@types/jest": "^29.5.12",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.0.1",
"@types/node": "^20.16.6",
"@types/react": "^18.3.9",
"@types/react-dom": "^18.3.0",
Expand All @@ -108,12 +111,13 @@
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.3.5",
"jest": "^29.7.0",
"jsdom": "^25.0.1",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.4",
"ts-jest": "^29.2.5",
"typescript": "^5.6.2",
"vite": "^4.5.5",
"vite-plugin-mkcert": "^1.17.5"
"vite-plugin-mkcert": "^1.17.5",
"vitest": "^2.1.4"
}
}
Loading
Loading