mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 16:55:37 +02:00
⭐ feat(www): Add logic to the homepage and Steam integration (#258)
## Description <!-- Briefly describe the purpose and scope of your changes --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Upgraded API and authentication services with dynamic scaling, enhanced load balancing, and real-time interaction endpoints. - Introduced new commands to streamline local development and container builds. - Added new endpoints for retrieving Steam account information and managing connections. - Implemented a QR code authentication interface for Steam, enhancing user login experiences. - **Database Updates** - Rolled out comprehensive schema migrations that improve data integrity and indexing. - Introduced new tables for managing Steam user credentials and machine information. - **UI Enhancements** - Added refreshed animated assets and an improved QR code login flow for a more engaging experience. - Introduced new styled components for displaying friends and games. - **Maintenance** - Completed extensive refactoring and configuration updates to optimize performance and development workflows. - Updated logging configurations and improved error handling mechanisms. - Streamlined resource definitions in the configuration files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Wanjohi
GitHub
@@ -39,6 +39,7 @@
|
||||
"focus-trap": "^7.6.4",
|
||||
"hono": "^4.7.4",
|
||||
"modern-normalize": "^3.0.1",
|
||||
"motion": "^12.6.2",
|
||||
"qrcode": "^1.5.4",
|
||||
"solid-js": "^1.9.5",
|
||||
"valibot": "^1.0.0-rc.3",
|
||||
|
||||
BIN
packages/www/src/assets/portal/play_button_disabled_bg.png
Normal file
BIN
packages/www/src/assets/portal/play_button_disabled_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
packages/www/src/assets/portal/play_button_focused_bg.png
Normal file
BIN
packages/www/src/assets/portal/play_button_focused_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
2316
packages/www/src/assets/portal/play_button_idle.json
Normal file
2316
packages/www/src/assets/portal/play_button_idle.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
packages/www/src/assets/portal/play_button_idle.png
Normal file
BIN
packages/www/src/assets/portal/play_button_idle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1022 KiB |
588
packages/www/src/assets/portal/play_button_intro.json
Normal file
588
packages/www/src/assets/portal/play_button_intro.json
Normal file
@@ -0,0 +1,588 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "intro_00000.png",
|
||||
"frame": {"x":1,"y":1,"w":3,"h":3},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":3,"h":3},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00001.png",
|
||||
"frame": {"x":911,"y":364,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00002.png",
|
||||
"frame": {"x":1063,"y":367,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00003.png",
|
||||
"frame": {"x":1215,"y":372,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00004.png",
|
||||
"frame": {"x":1367,"y":374,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00005.png",
|
||||
"frame": {"x":1519,"y":375,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00006.png",
|
||||
"frame": {"x":1671,"y":379,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00007.png",
|
||||
"frame": {"x":1823,"y":381,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00008.png",
|
||||
"frame": {"x":759,"y":362,"w":150,"h":149},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00009.png",
|
||||
"frame": {"x":456,"y":355,"w":148,"h":149},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":0,"w":148,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00010.png",
|
||||
"frame": {"x":607,"y":360,"w":148,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":0,"w":148,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00011.png",
|
||||
"frame": {"x":1,"y":349,"w":147,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":3,"y":0,"w":147,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00012.png",
|
||||
"frame": {"x":153,"y":351,"w":147,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":3,"y":0,"w":147,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00013.png",
|
||||
"frame": {"x":305,"y":353,"w":147,"h":149},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":1,"w":147,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00014.png",
|
||||
"frame": {"x":1867,"y":235,"w":144,"h":148},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":4,"y":2,"w":144,"h":148},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00015.png",
|
||||
"frame": {"x":1719,"y":235,"w":142,"h":146},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":5,"y":3,"w":142,"h":146},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00016.png",
|
||||
"frame": {"x":1574,"y":233,"w":140,"h":143},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":4,"w":140,"h":143},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00017.png",
|
||||
"frame": {"x":1432,"y":233,"w":139,"h":140},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":6,"w":139,"h":140},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00018.png",
|
||||
"frame": {"x":1292,"y":233,"w":138,"h":137},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":7,"w":138,"h":137},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00019.png",
|
||||
"frame": {"x":1154,"y":231,"w":136,"h":134},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":7,"y":9,"w":136,"h":134},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00020.png",
|
||||
"frame": {"x":1018,"y":229,"w":134,"h":133},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":8,"y":9,"w":134,"h":133},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00021.png",
|
||||
"frame": {"x":885,"y":229,"w":131,"h":131},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":9,"y":10,"w":131,"h":131},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00022.png",
|
||||
"frame": {"x":754,"y":229,"w":129,"h":129},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":10,"y":11,"w":129,"h":129},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00023.png",
|
||||
"frame": {"x":624,"y":229,"w":128,"h":127},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":11,"y":12,"w":128,"h":127},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00024.png",
|
||||
"frame": {"x":496,"y":227,"w":126,"h":126},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":12,"y":12,"w":126,"h":126},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00025.png",
|
||||
"frame": {"x":370,"y":227,"w":124,"h":124},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":13,"y":13,"w":124,"h":124},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00026.png",
|
||||
"frame": {"x":246,"y":227,"w":122,"h":122},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":14,"y":14,"w":122,"h":122},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00027.png",
|
||||
"frame": {"x":1,"y":227,"w":121,"h":120},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":14,"y":15,"w":121,"h":120},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00028.png",
|
||||
"frame": {"x":124,"y":227,"w":120,"h":120},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":15,"y":15,"w":120,"h":120},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00029.png",
|
||||
"frame": {"x":1855,"y":115,"w":118,"h":118},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":16,"y":16,"w":118,"h":118},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00030.png",
|
||||
"frame": {"x":1735,"y":115,"w":117,"h":118},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":16,"y":16,"w":117,"h":118},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00031.png",
|
||||
"frame": {"x":1381,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00032.png",
|
||||
"frame": {"x":1499,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00033.png",
|
||||
"frame": {"x":1617,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00034.png",
|
||||
"frame": {"x":685,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00035.png",
|
||||
"frame": {"x":801,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00036.png",
|
||||
"frame": {"x":917,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00037.png",
|
||||
"frame": {"x":1033,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00038.png",
|
||||
"frame": {"x":1149,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00039.png",
|
||||
"frame": {"x":1265,"y":115,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00040.png",
|
||||
"frame": {"x":1350,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00041.png",
|
||||
"frame": {"x":1464,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00042.png",
|
||||
"frame": {"x":1578,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00043.png",
|
||||
"frame": {"x":1692,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00044.png",
|
||||
"frame": {"x":1806,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00045.png",
|
||||
"frame": {"x":1920,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00046.png",
|
||||
"frame": {"x":1,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00047.png",
|
||||
"frame": {"x":115,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00048.png",
|
||||
"frame": {"x":229,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00049.png",
|
||||
"frame": {"x":343,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00050.png",
|
||||
"frame": {"x":457,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00051.png",
|
||||
"frame": {"x":571,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00052.png",
|
||||
"frame": {"x":6,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00053.png",
|
||||
"frame": {"x":118,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00054.png",
|
||||
"frame": {"x":230,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00055.png",
|
||||
"frame": {"x":342,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00056.png",
|
||||
"frame": {"x":454,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00057.png",
|
||||
"frame": {"x":566,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00058.png",
|
||||
"frame": {"x":678,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00059.png",
|
||||
"frame": {"x":790,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00060.png",
|
||||
"frame": {"x":902,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00061.png",
|
||||
"frame": {"x":1014,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00062.png",
|
||||
"frame": {"x":1126,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00063.png",
|
||||
"frame": {"x":1238,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_button_intro.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":2033,"h":532},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:c182f7ef1f119bbfd7cc0a11dba8aad6:0f1ccfe8fb1cdc864d87b7e8f6fb3197:356e3de40db0da0fa679697918a56687$"
|
||||
}
|
||||
}
|
||||
BIN
packages/www/src/assets/portal/play_button_intro.png
Normal file
BIN
packages/www/src/assets/portal/play_button_intro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
237
packages/www/src/assets/portal/play_icon_exit.json
Normal file
237
packages/www/src/assets/portal/play_icon_exit.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing_outro_190822_00000.png",
|
||||
"frame": {"x":82,"y":37,"w":25,"h":13},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":16,"w":25,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00001.png",
|
||||
"frame": {"x":173,"y":1,"w":27,"h":11},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":16,"w":27,"h":11},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00002.png",
|
||||
"frame": {"x":186,"y":1,"w":30,"h":15},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":50,"y":16,"w":30,"h":15},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00003.png",
|
||||
"frame": {"x":122,"y":35,"w":32,"h":27},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":58,"y":16,"w":32,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00004.png",
|
||||
"frame": {"x":1,"y":1,"w":22,"h":37},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":72,"y":23,"w":22,"h":37},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00005.png",
|
||||
"frame": {"x":25,"y":1,"w":17,"h":37},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":77,"y":40,"w":17,"h":37},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00006.png",
|
||||
"frame": {"x":1,"y":40,"w":31,"h":21},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":59,"y":63,"w":31,"h":21},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00007.png",
|
||||
"frame": {"x":34,"y":40,"w":29,"h":19},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":44,"y":65,"w":29,"h":19},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00008.png",
|
||||
"frame": {"x":65,"y":37,"w":15,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":41,"y":52,"w":15,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00009.png",
|
||||
"frame": {"x":186,"y":18,"w":19,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":47,"w":19,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00010.png",
|
||||
"frame": {"x":186,"y":38,"w":18,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":47,"y":46,"w":18,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00011.png",
|
||||
"frame": {"x":97,"y":37,"w":23,"h":24},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":45,"y":43,"w":23,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00012.png",
|
||||
"frame": {"x":156,"y":35,"w":27,"h":28},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":41,"w":27,"h":28},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00013.png",
|
||||
"frame": {"x":142,"y":1,"w":29,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":39,"w":29,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00014.png",
|
||||
"frame": {"x":110,"y":1,"w":30,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":39,"w":30,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00015.png",
|
||||
"frame": {"x":44,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00016.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00017.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00018.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00019.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00020.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00021.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00022.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00023.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00024.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_exit.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":217,"h":63},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:c3c530fe6905479b4ca8719a9d079c2e:313834a760df7f23cb3a698e4cd74589:0d545ddd0574d55083449defb59d19dc$"
|
||||
}
|
||||
}
|
||||
BIN
packages/www/src/assets/portal/play_icon_exit.png
Normal file
BIN
packages/www/src/assets/portal/play_icon_exit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
237
packages/www/src/assets/portal/play_icon_intro.json
Normal file
237
packages/www/src/assets/portal/play_icon_intro.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing-intro_190822_00000.png",
|
||||
"frame": {"x":1,"y":1,"w":35,"h":38},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":36,"w":35,"h":38},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00001.png",
|
||||
"frame": {"x":38,"y":1,"w":34,"h":38},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":36,"w":34,"h":38},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00002.png",
|
||||
"frame": {"x":74,"y":1,"w":29,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":39,"w":29,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00003.png",
|
||||
"frame": {"x":1,"y":41,"w":22,"h":24},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":43,"w":22,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00004.png",
|
||||
"frame": {"x":142,"y":43,"w":17,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":48,"y":46,"w":17,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00005.png",
|
||||
"frame": {"x":161,"y":40,"w":14,"h":14},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":49,"y":45,"w":14,"h":14},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00006.png",
|
||||
"frame": {"x":183,"y":1,"w":10,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":54,"y":42,"w":10,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00007.png",
|
||||
"frame": {"x":183,"y":37,"w":9,"h":9},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":62,"y":38,"w":9,"h":9},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00008.png",
|
||||
"frame": {"x":183,"y":25,"w":10,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":73,"y":38,"w":10,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00009.png",
|
||||
"frame": {"x":180,"y":13,"w":10,"h":12},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":82,"y":46,"w":10,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00010.png",
|
||||
"frame": {"x":168,"y":1,"w":10,"h":13},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":84,"y":59,"w":10,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00011.png",
|
||||
"frame": {"x":177,"y":48,"w":13,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":76,"y":72,"w":13,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00012.png",
|
||||
"frame": {"x":139,"y":13,"w":17,"h":12},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":63,"y":80,"w":17,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00013.png",
|
||||
"frame": {"x":158,"y":13,"w":20,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":49,"y":84,"w":20,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00014.png",
|
||||
"frame": {"x":160,"y":25,"w":21,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":81,"w":21,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00015.png",
|
||||
"frame": {"x":114,"y":27,"w":21,"h":18},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":26,"y":73,"w":21,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00016.png",
|
||||
"frame": {"x":94,"y":35,"w":18,"h":22},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":63,"w":18,"h":22},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00017.png",
|
||||
"frame": {"x":123,"y":1,"w":14,"h":24},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":53,"w":14,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00018.png",
|
||||
"frame": {"x":139,"y":1,"w":10,"h":27},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":42,"w":10,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00019.png",
|
||||
"frame": {"x":114,"y":50,"w":13,"h":26},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":34,"w":13,"h":26},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00020.png",
|
||||
"frame": {"x":75,"y":35,"w":17,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":27,"w":17,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00021.png",
|
||||
"frame": {"x":27,"y":41,"w":21,"h":22},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":22,"w":21,"h":22},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00022.png",
|
||||
"frame": {"x":50,"y":41,"w":23,"h":19},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":25,"y":19,"w":23,"h":19},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00023.png",
|
||||
"frame": {"x":105,"y":1,"w":24,"h":16},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":30,"y":17,"w":24,"h":16},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00024.png",
|
||||
"frame": {"x":134,"y":27,"w":24,"h":14},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":35,"y":16,"w":24,"h":14},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_intro.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":194,"h":64},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:a423de98fed1e06cc62611996868a2db:909cd8dbde93c0d2fca4402e7546ffd8:5ea08d4d7caaa5043281f5095baffab1$"
|
||||
}
|
||||
}
|
||||
BIN
packages/www/src/assets/portal/play_icon_intro.png
Normal file
BIN
packages/www/src/assets/portal/play_icon_intro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
237
packages/www/src/assets/portal/play_icon_loop.json
Normal file
237
packages/www/src/assets/portal/play_icon_loop.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing-loop_190822_00000.png",
|
||||
"frame": {"x":37,"y":97,"w":23,"h":11},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":16,"w":23,"h":11},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00001.png",
|
||||
"frame": {"x":37,"y":110,"w":23,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":16,"w":23,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00002.png",
|
||||
"frame": {"x":30,"y":257,"w":24,"h":12},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":51,"y":16,"w":24,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00003.png",
|
||||
"frame": {"x":34,"y":225,"w":25,"h":15},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":56,"y":16,"w":25,"h":15},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00004.png",
|
||||
"frame": {"x":1,"y":252,"w":27,"h":20},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":61,"y":17,"w":27,"h":20},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00005.png",
|
||||
"frame": {"x":35,"y":180,"w":24,"h":25},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":68,"y":19,"w":24,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00006.png",
|
||||
"frame": {"x":39,"y":39,"w":21,"h":30},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":74,"y":24,"w":21,"h":30},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00007.png",
|
||||
"frame": {"x":1,"y":120,"w":16,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":80,"y":30,"w":16,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00008.png",
|
||||
"frame": {"x":1,"y":58,"w":13,"h":36},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":83,"y":38,"w":13,"h":36},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00009.png",
|
||||
"frame": {"x":41,"y":1,"w":19,"h":36},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":77,"y":47,"w":19,"h":36},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00010.png",
|
||||
"frame": {"x":1,"y":151,"w":27,"h":33},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":68,"y":57,"w":27,"h":33},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00011.png",
|
||||
"frame": {"x":1,"y":73,"w":34,"h":26},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":57,"y":68,"w":34,"h":26},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00012.png",
|
||||
"frame": {"x":1,"y":1,"w":38,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":76,"w":38,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00013.png",
|
||||
"frame": {"x":1,"y":21,"w":38,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":81,"w":38,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00014.png",
|
||||
"frame": {"x":1,"y":36,"w":36,"h":20},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":27,"y":74,"w":36,"h":20},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00015.png",
|
||||
"frame": {"x":1,"y":197,"w":31,"h":27},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":66,"w":31,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00016.png",
|
||||
"frame": {"x":1,"y":226,"w":24,"h":31},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":57,"w":24,"h":31},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00017.png",
|
||||
"frame": {"x":1,"y":101,"w":17,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":47,"w":17,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00018.png",
|
||||
"frame": {"x":1,"y":138,"w":11,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":39,"w":11,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00019.png",
|
||||
"frame": {"x":1,"y":180,"w":15,"h":32},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":31,"w":15,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00020.png",
|
||||
"frame": {"x":37,"y":149,"w":20,"h":29},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":25,"w":20,"h":29},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00021.png",
|
||||
"frame": {"x":37,"y":122,"w":22,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":21,"w":22,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00022.png",
|
||||
"frame": {"x":39,"y":71,"w":24,"h":21},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":25,"y":18,"w":24,"h":21},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00023.png",
|
||||
"frame": {"x":34,"y":206,"w":25,"h":17},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":30,"y":16,"w":25,"h":17},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00024.png",
|
||||
"frame": {"x":34,"y":242,"w":25,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":16,"w":25,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_loop.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":61,"h":273},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:4d92719faa27cbc50926429a66fc808c:25af8a045fca3b76dba8d8d26ed4ccf7:9b86d3b10829102d2ccf1bd5942144f2$"
|
||||
}
|
||||
}
|
||||
BIN
packages/www/src/assets/portal/play_icon_loop.png
Normal file
BIN
packages/www/src/assets/portal/play_icon_loop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
packages/www/src/assets/portal/portal_background_placeholder.png
Normal file
BIN
packages/www/src/assets/portal/portal_background_placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
2316
packages/www/src/common/portal/assets/play_button_idle.json
Normal file
2316
packages/www/src/common/portal/assets/play_button_idle.json
Normal file
File diff suppressed because it is too large
Load Diff
588
packages/www/src/common/portal/assets/play_button_intro.json
Normal file
588
packages/www/src/common/portal/assets/play_button_intro.json
Normal file
@@ -0,0 +1,588 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "intro_00000.png",
|
||||
"frame": {"x":1,"y":1,"w":3,"h":3},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":3,"h":3},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00001.png",
|
||||
"frame": {"x":911,"y":364,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00002.png",
|
||||
"frame": {"x":1063,"y":367,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00003.png",
|
||||
"frame": {"x":1215,"y":372,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00004.png",
|
||||
"frame": {"x":1367,"y":374,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00005.png",
|
||||
"frame": {"x":1519,"y":375,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00006.png",
|
||||
"frame": {"x":1671,"y":379,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00007.png",
|
||||
"frame": {"x":1823,"y":381,"w":150,"h":150},
|
||||
"rotated": false,
|
||||
"trimmed": false,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00008.png",
|
||||
"frame": {"x":759,"y":362,"w":150,"h":149},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":0,"y":0,"w":150,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00009.png",
|
||||
"frame": {"x":456,"y":355,"w":148,"h":149},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":0,"w":148,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00010.png",
|
||||
"frame": {"x":607,"y":360,"w":148,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":0,"w":148,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00011.png",
|
||||
"frame": {"x":1,"y":349,"w":147,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":3,"y":0,"w":147,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00012.png",
|
||||
"frame": {"x":153,"y":351,"w":147,"h":150},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":3,"y":0,"w":147,"h":150},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00013.png",
|
||||
"frame": {"x":305,"y":353,"w":147,"h":149},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":2,"y":1,"w":147,"h":149},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00014.png",
|
||||
"frame": {"x":1867,"y":235,"w":144,"h":148},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":4,"y":2,"w":144,"h":148},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00015.png",
|
||||
"frame": {"x":1719,"y":235,"w":142,"h":146},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":5,"y":3,"w":142,"h":146},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00016.png",
|
||||
"frame": {"x":1574,"y":233,"w":140,"h":143},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":4,"w":140,"h":143},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00017.png",
|
||||
"frame": {"x":1432,"y":233,"w":139,"h":140},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":6,"w":139,"h":140},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00018.png",
|
||||
"frame": {"x":1292,"y":233,"w":138,"h":137},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":6,"y":7,"w":138,"h":137},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00019.png",
|
||||
"frame": {"x":1154,"y":231,"w":136,"h":134},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":7,"y":9,"w":136,"h":134},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00020.png",
|
||||
"frame": {"x":1018,"y":229,"w":134,"h":133},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":8,"y":9,"w":134,"h":133},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00021.png",
|
||||
"frame": {"x":885,"y":229,"w":131,"h":131},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":9,"y":10,"w":131,"h":131},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00022.png",
|
||||
"frame": {"x":754,"y":229,"w":129,"h":129},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":10,"y":11,"w":129,"h":129},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00023.png",
|
||||
"frame": {"x":624,"y":229,"w":128,"h":127},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":11,"y":12,"w":128,"h":127},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00024.png",
|
||||
"frame": {"x":496,"y":227,"w":126,"h":126},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":12,"y":12,"w":126,"h":126},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00025.png",
|
||||
"frame": {"x":370,"y":227,"w":124,"h":124},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":13,"y":13,"w":124,"h":124},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00026.png",
|
||||
"frame": {"x":246,"y":227,"w":122,"h":122},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":14,"y":14,"w":122,"h":122},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00027.png",
|
||||
"frame": {"x":1,"y":227,"w":121,"h":120},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":14,"y":15,"w":121,"h":120},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00028.png",
|
||||
"frame": {"x":124,"y":227,"w":120,"h":120},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":15,"y":15,"w":120,"h":120},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00029.png",
|
||||
"frame": {"x":1855,"y":115,"w":118,"h":118},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":16,"y":16,"w":118,"h":118},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00030.png",
|
||||
"frame": {"x":1735,"y":115,"w":117,"h":118},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":16,"y":16,"w":117,"h":118},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00031.png",
|
||||
"frame": {"x":1381,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00032.png",
|
||||
"frame": {"x":1499,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00033.png",
|
||||
"frame": {"x":1617,"y":115,"w":116,"h":116},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":17,"y":17,"w":116,"h":116},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00034.png",
|
||||
"frame": {"x":685,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00035.png",
|
||||
"frame": {"x":801,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00036.png",
|
||||
"frame": {"x":917,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00037.png",
|
||||
"frame": {"x":1033,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00038.png",
|
||||
"frame": {"x":1149,"y":113,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00039.png",
|
||||
"frame": {"x":1265,"y":115,"w":114,"h":114},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":18,"w":114,"h":114},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00040.png",
|
||||
"frame": {"x":1350,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00041.png",
|
||||
"frame": {"x":1464,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00042.png",
|
||||
"frame": {"x":1578,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00043.png",
|
||||
"frame": {"x":1692,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00044.png",
|
||||
"frame": {"x":1806,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00045.png",
|
||||
"frame": {"x":1920,"y":1,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00046.png",
|
||||
"frame": {"x":1,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00047.png",
|
||||
"frame": {"x":115,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00048.png",
|
||||
"frame": {"x":229,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00049.png",
|
||||
"frame": {"x":343,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00050.png",
|
||||
"frame": {"x":457,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00051.png",
|
||||
"frame": {"x":571,"y":113,"w":112,"h":112},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":19,"w":112,"h":112},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00052.png",
|
||||
"frame": {"x":6,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00053.png",
|
||||
"frame": {"x":118,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00054.png",
|
||||
"frame": {"x":230,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00055.png",
|
||||
"frame": {"x":342,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00056.png",
|
||||
"frame": {"x":454,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00057.png",
|
||||
"frame": {"x":566,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00058.png",
|
||||
"frame": {"x":678,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00059.png",
|
||||
"frame": {"x":790,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00060.png",
|
||||
"frame": {"x":902,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00061.png",
|
||||
"frame": {"x":1014,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00062.png",
|
||||
"frame": {"x":1126,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "intro_00063.png",
|
||||
"frame": {"x":1238,"y":1,"w":110,"h":110},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":20,"w":110,"h":110},
|
||||
"sourceSize": {"w":150,"h":150},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_button_intro.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":2033,"h":532},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:c182f7ef1f119bbfd7cc0a11dba8aad6:0f1ccfe8fb1cdc864d87b7e8f6fb3197:356e3de40db0da0fa679697918a56687$"
|
||||
}
|
||||
}
|
||||
237
packages/www/src/common/portal/assets/play_icon_exit.json
Normal file
237
packages/www/src/common/portal/assets/play_icon_exit.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing_outro_190822_00000.png",
|
||||
"frame": {"x":82,"y":37,"w":25,"h":13},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":16,"w":25,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00001.png",
|
||||
"frame": {"x":173,"y":1,"w":27,"h":11},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":16,"w":27,"h":11},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00002.png",
|
||||
"frame": {"x":186,"y":1,"w":30,"h":15},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":50,"y":16,"w":30,"h":15},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00003.png",
|
||||
"frame": {"x":122,"y":35,"w":32,"h":27},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":58,"y":16,"w":32,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00004.png",
|
||||
"frame": {"x":1,"y":1,"w":22,"h":37},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":72,"y":23,"w":22,"h":37},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00005.png",
|
||||
"frame": {"x":25,"y":1,"w":17,"h":37},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":77,"y":40,"w":17,"h":37},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00006.png",
|
||||
"frame": {"x":1,"y":40,"w":31,"h":21},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":59,"y":63,"w":31,"h":21},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00007.png",
|
||||
"frame": {"x":34,"y":40,"w":29,"h":19},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":44,"y":65,"w":29,"h":19},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00008.png",
|
||||
"frame": {"x":65,"y":37,"w":15,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":41,"y":52,"w":15,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00009.png",
|
||||
"frame": {"x":186,"y":18,"w":19,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":47,"w":19,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00010.png",
|
||||
"frame": {"x":186,"y":38,"w":18,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":47,"y":46,"w":18,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00011.png",
|
||||
"frame": {"x":97,"y":37,"w":23,"h":24},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":45,"y":43,"w":23,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00012.png",
|
||||
"frame": {"x":156,"y":35,"w":27,"h":28},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":41,"w":27,"h":28},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00013.png",
|
||||
"frame": {"x":142,"y":1,"w":29,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":39,"w":29,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00014.png",
|
||||
"frame": {"x":110,"y":1,"w":30,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":39,"w":30,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00015.png",
|
||||
"frame": {"x":44,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00016.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00017.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00018.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00019.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00020.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00021.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00022.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00023.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing_outro_190822_00024.png",
|
||||
"frame": {"x":77,"y":1,"w":31,"h":34},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":42,"y":38,"w":31,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_exit.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":217,"h":63},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:c3c530fe6905479b4ca8719a9d079c2e:313834a760df7f23cb3a698e4cd74589:0d545ddd0574d55083449defb59d19dc$"
|
||||
}
|
||||
}
|
||||
237
packages/www/src/common/portal/assets/play_icon_intro.json
Normal file
237
packages/www/src/common/portal/assets/play_icon_intro.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing-intro_190822_00000.png",
|
||||
"frame": {"x":1,"y":1,"w":35,"h":38},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":36,"w":35,"h":38},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00001.png",
|
||||
"frame": {"x":38,"y":1,"w":34,"h":38},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":36,"w":34,"h":38},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00002.png",
|
||||
"frame": {"x":74,"y":1,"w":29,"h":32},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":43,"y":39,"w":29,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00003.png",
|
||||
"frame": {"x":1,"y":41,"w":22,"h":24},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":43,"w":22,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00004.png",
|
||||
"frame": {"x":142,"y":43,"w":17,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":48,"y":46,"w":17,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00005.png",
|
||||
"frame": {"x":161,"y":40,"w":14,"h":14},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":49,"y":45,"w":14,"h":14},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00006.png",
|
||||
"frame": {"x":183,"y":1,"w":10,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":54,"y":42,"w":10,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00007.png",
|
||||
"frame": {"x":183,"y":37,"w":9,"h":9},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":62,"y":38,"w":9,"h":9},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00008.png",
|
||||
"frame": {"x":183,"y":25,"w":10,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":73,"y":38,"w":10,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00009.png",
|
||||
"frame": {"x":180,"y":13,"w":10,"h":12},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":82,"y":46,"w":10,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00010.png",
|
||||
"frame": {"x":168,"y":1,"w":10,"h":13},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":84,"y":59,"w":10,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00011.png",
|
||||
"frame": {"x":177,"y":48,"w":13,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":76,"y":72,"w":13,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00012.png",
|
||||
"frame": {"x":139,"y":13,"w":17,"h":12},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":63,"y":80,"w":17,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00013.png",
|
||||
"frame": {"x":158,"y":13,"w":20,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":49,"y":84,"w":20,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00014.png",
|
||||
"frame": {"x":160,"y":25,"w":21,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":81,"w":21,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00015.png",
|
||||
"frame": {"x":114,"y":27,"w":21,"h":18},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":26,"y":73,"w":21,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00016.png",
|
||||
"frame": {"x":94,"y":35,"w":18,"h":22},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":20,"y":63,"w":18,"h":22},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00017.png",
|
||||
"frame": {"x":123,"y":1,"w":14,"h":24},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":53,"w":14,"h":24},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00018.png",
|
||||
"frame": {"x":139,"y":1,"w":10,"h":27},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":42,"w":10,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00019.png",
|
||||
"frame": {"x":114,"y":50,"w":13,"h":26},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":34,"w":13,"h":26},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00020.png",
|
||||
"frame": {"x":75,"y":35,"w":17,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":19,"y":27,"w":17,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00021.png",
|
||||
"frame": {"x":27,"y":41,"w":21,"h":22},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":22,"w":21,"h":22},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00022.png",
|
||||
"frame": {"x":50,"y":41,"w":23,"h":19},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":25,"y":19,"w":23,"h":19},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00023.png",
|
||||
"frame": {"x":105,"y":1,"w":24,"h":16},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":30,"y":17,"w":24,"h":16},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-intro_190822_00024.png",
|
||||
"frame": {"x":134,"y":27,"w":24,"h":14},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":35,"y":16,"w":24,"h":14},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_intro.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":194,"h":64},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:a423de98fed1e06cc62611996868a2db:909cd8dbde93c0d2fca4402e7546ffd8:5ea08d4d7caaa5043281f5095baffab1$"
|
||||
}
|
||||
}
|
||||
237
packages/www/src/common/portal/assets/play_icon_loop.json
Normal file
237
packages/www/src/common/portal/assets/play_icon_loop.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{"frames": [
|
||||
|
||||
{
|
||||
"filename": "processing-loop_190822_00000.png",
|
||||
"frame": {"x":37,"y":97,"w":23,"h":11},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":40,"y":16,"w":23,"h":11},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00001.png",
|
||||
"frame": {"x":37,"y":110,"w":23,"h":10},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":16,"w":23,"h":10},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00002.png",
|
||||
"frame": {"x":30,"y":257,"w":24,"h":12},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":51,"y":16,"w":24,"h":12},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00003.png",
|
||||
"frame": {"x":34,"y":225,"w":25,"h":15},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":56,"y":16,"w":25,"h":15},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00004.png",
|
||||
"frame": {"x":1,"y":252,"w":27,"h":20},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":61,"y":17,"w":27,"h":20},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00005.png",
|
||||
"frame": {"x":35,"y":180,"w":24,"h":25},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":68,"y":19,"w":24,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00006.png",
|
||||
"frame": {"x":39,"y":39,"w":21,"h":30},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":74,"y":24,"w":21,"h":30},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00007.png",
|
||||
"frame": {"x":1,"y":120,"w":16,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":80,"y":30,"w":16,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00008.png",
|
||||
"frame": {"x":1,"y":58,"w":13,"h":36},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":83,"y":38,"w":13,"h":36},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00009.png",
|
||||
"frame": {"x":41,"y":1,"w":19,"h":36},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":77,"y":47,"w":19,"h":36},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00010.png",
|
||||
"frame": {"x":1,"y":151,"w":27,"h":33},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":68,"y":57,"w":27,"h":33},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00011.png",
|
||||
"frame": {"x":1,"y":73,"w":34,"h":26},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":57,"y":68,"w":34,"h":26},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00012.png",
|
||||
"frame": {"x":1,"y":1,"w":38,"h":18},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":46,"y":76,"w":38,"h":18},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00013.png",
|
||||
"frame": {"x":1,"y":21,"w":38,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":81,"w":38,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00014.png",
|
||||
"frame": {"x":1,"y":36,"w":36,"h":20},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":27,"y":74,"w":36,"h":20},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00015.png",
|
||||
"frame": {"x":1,"y":197,"w":31,"h":27},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":66,"w":31,"h":27},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00016.png",
|
||||
"frame": {"x":1,"y":226,"w":24,"h":31},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":57,"w":24,"h":31},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00017.png",
|
||||
"frame": {"x":1,"y":101,"w":17,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":47,"w":17,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00018.png",
|
||||
"frame": {"x":1,"y":138,"w":11,"h":34},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":39,"w":11,"h":34},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00019.png",
|
||||
"frame": {"x":1,"y":180,"w":15,"h":32},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":31,"w":15,"h":32},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00020.png",
|
||||
"frame": {"x":37,"y":149,"w":20,"h":29},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":18,"y":25,"w":20,"h":29},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00021.png",
|
||||
"frame": {"x":37,"y":122,"w":22,"h":25},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":21,"y":21,"w":22,"h":25},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00022.png",
|
||||
"frame": {"x":39,"y":71,"w":24,"h":21},
|
||||
"rotated": true,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":25,"y":18,"w":24,"h":21},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00023.png",
|
||||
"frame": {"x":34,"y":206,"w":25,"h":17},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":30,"y":16,"w":25,"h":17},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
},
|
||||
{
|
||||
"filename": "processing-loop_190822_00024.png",
|
||||
"frame": {"x":34,"y":242,"w":25,"h":13},
|
||||
"rotated": false,
|
||||
"trimmed": true,
|
||||
"spriteSourceSize": {"x":36,"y":16,"w":25,"h":13},
|
||||
"sourceSize": {"w":110,"h":110},
|
||||
"pivot": {"x":0.5,"y":0.5}
|
||||
}],
|
||||
"meta": {
|
||||
"app": "https://www.codeandweb.com/texturepacker",
|
||||
"version": "1.0",
|
||||
"image": "play_icon_loop.png",
|
||||
"format": "RGBA8888",
|
||||
"size": {"w":61,"h":273},
|
||||
"scale": "1",
|
||||
"smartupdate": "$TexturePacker:SmartUpdate:4d92719faa27cbc50926429a66fc808c:25af8a045fca3b76dba8d8d26ed4ccf7:9b86d3b10829102d2ccf1bd5942144f2$"
|
||||
}
|
||||
}
|
||||
309
packages/www/src/common/portal/button.ts
Normal file
309
packages/www/src/common/portal/button.ts
Normal file
@@ -0,0 +1,309 @@
|
||||
import PlayIconLoop from "./assets/play_icon_loop.json"
|
||||
import PlayIconExit from "./assets/play_icon_exit.json"
|
||||
import PlayIconIntro from "./assets/play_icon_intro.json"
|
||||
import PlayButtonIdle from "./assets/play_button_idle.json"
|
||||
import PlayButtonIntro from "./assets/play_button_intro.json"
|
||||
|
||||
const button_assets = {
|
||||
intro: {
|
||||
image: "/src/assets/portal/play_button_intro.png",
|
||||
json: PlayButtonIntro
|
||||
},
|
||||
idle: {
|
||||
image: "/src/assets/portal/play_button_idle.png",
|
||||
json: PlayButtonIdle
|
||||
}
|
||||
}
|
||||
|
||||
const icon_assets = {
|
||||
intro: {
|
||||
image: "/src/assets/portal/play_icon_intro.png",
|
||||
json: PlayIconIntro
|
||||
},
|
||||
loop: {
|
||||
image: "/src/assets/portal/play_icon_loop.png",
|
||||
json: PlayIconLoop
|
||||
},
|
||||
exit: {
|
||||
image: "/src/assets/portal/play_icon_exit.png",
|
||||
json: PlayIconExit
|
||||
}
|
||||
}
|
||||
|
||||
export class PortalButton {
|
||||
private canvas: HTMLCanvasElement;
|
||||
private currentFrame: number;
|
||||
private index: number;
|
||||
private buttonQueue: (() => void)[];
|
||||
private isButtonRunning: boolean;
|
||||
private animationSpeed: number;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.canvas = canvas;
|
||||
this.currentFrame = 0;
|
||||
this.index = 0;
|
||||
this.buttonQueue = [];
|
||||
this.isButtonRunning = false;
|
||||
this.animationSpeed = 50;
|
||||
}
|
||||
|
||||
render(type: "intro" | "idle", loop: boolean, image: HTMLImageElement, index?: number) {
|
||||
if (index) this.index = index
|
||||
return new Promise<void>((resolve) => {
|
||||
const buttonTask = () => {
|
||||
// Get the canvas element
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
|
||||
// Load the JSON data
|
||||
const animationData = button_assets[type].json;
|
||||
|
||||
// Play the animation
|
||||
const frames = animationData.frames;
|
||||
const totalFrames = frames.length;
|
||||
|
||||
if (this.index) this.currentFrame = this.index;
|
||||
|
||||
const targetDim = 100 //target dimensions of the output image (height, width)
|
||||
|
||||
// Start the animation
|
||||
const updateFrame = () => {
|
||||
|
||||
// Check if we have reached the last frame
|
||||
if (!loop && this.currentFrame === totalFrames - 1) {
|
||||
// Animation has reached the last frame, stop playing
|
||||
this.isButtonRunning = false;
|
||||
|
||||
// Resolve the Promise to indicate completion
|
||||
resolve();
|
||||
return null;
|
||||
}
|
||||
|
||||
// Clear the canvas
|
||||
ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
// Get the current frame details
|
||||
const singleFrame = frames[this.currentFrame];
|
||||
const { frame, sourceSize: ss, rotated, spriteSourceSize: sss, trimmed } = singleFrame;
|
||||
|
||||
this.canvas.width = targetDim;
|
||||
this.canvas.height = targetDim;
|
||||
this.canvas.style.borderRadius = `${ss.h / 2}px`
|
||||
|
||||
const newSize = {
|
||||
w: frame.w,
|
||||
h: frame.h
|
||||
};
|
||||
|
||||
const newPosition = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
if (rotated) {
|
||||
ctx?.save()
|
||||
ctx?.translate(this.canvas.width / 2, this.canvas.height / 2)
|
||||
ctx?.rotate(-Math.PI / 2);
|
||||
ctx?.translate(-this.canvas.height / 2, -this.canvas.width / 2);
|
||||
|
||||
newSize.w = frame.h;
|
||||
newSize.h = frame.w;
|
||||
}
|
||||
|
||||
if (trimmed) {
|
||||
newPosition.x = sss.x;
|
||||
newPosition.y = sss.y;
|
||||
|
||||
if (rotated) {
|
||||
newPosition.x = this.canvas.height - sss.h - sss.y;
|
||||
newPosition.y = sss.x;
|
||||
}
|
||||
}
|
||||
|
||||
const scaleFactor = Math.min(targetDim / newSize.w, targetDim / newSize.h);
|
||||
const scaledWidth = newSize.w * scaleFactor;
|
||||
const scaledHeight = newSize.h * scaleFactor;
|
||||
|
||||
// Calculate the center position to draw the resized image
|
||||
const x = (targetDim - scaledWidth) / 2;
|
||||
const y = (targetDim - scaledHeight) / 2;
|
||||
|
||||
ctx?.drawImage(
|
||||
image,
|
||||
frame.x,
|
||||
frame.y,
|
||||
newSize.w,
|
||||
newSize.h,
|
||||
x,
|
||||
y,
|
||||
scaledWidth,
|
||||
scaledHeight
|
||||
)
|
||||
|
||||
|
||||
if (rotated) {
|
||||
ctx?.restore()
|
||||
}
|
||||
// Increment the frame index
|
||||
this.currentFrame = (this.currentFrame + 1) % totalFrames
|
||||
|
||||
// Schedule the next frame update
|
||||
setTimeout(updateFrame, this.animationSpeed);
|
||||
};
|
||||
|
||||
return updateFrame()
|
||||
}
|
||||
// Check if the button function is already running
|
||||
if (this.isButtonRunning) {
|
||||
// If running, add the button task to the queue
|
||||
this.buttonQueue.push(buttonTask);
|
||||
|
||||
} else {
|
||||
// If not running, set the flag and execute the button task immediately
|
||||
this.isButtonRunning = true;
|
||||
buttonTask();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export class PortalIcon {
|
||||
private canvas: HTMLCanvasElement;
|
||||
private currentFrame: number;
|
||||
private index: number;
|
||||
private iconQueue: (() => void)[];
|
||||
private isIconRunning: boolean;
|
||||
private animationSpeed: number;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.canvas = canvas;
|
||||
this.currentFrame = 0;
|
||||
this.index = 0;
|
||||
this.iconQueue = [];
|
||||
this.isIconRunning = false;
|
||||
this.animationSpeed = 50;
|
||||
}
|
||||
|
||||
render(type: "loop" | "intro" | "exit", loop: boolean, image: HTMLImageElement, play: boolean) {
|
||||
return new Promise<void>((resolve) => {
|
||||
const iconTask = () => {
|
||||
// Get the canvas element
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
|
||||
// Load the JSON data
|
||||
const animationData = icon_assets[type].json;
|
||||
|
||||
// Load the image
|
||||
// const image = new Image();
|
||||
image.src = icon_assets[type].image; // Path to the sprite sheet image
|
||||
|
||||
// Play the animation
|
||||
const frames = animationData.frames;
|
||||
const totalFrames = frames.length;
|
||||
|
||||
if (!play) {
|
||||
this.currentFrame = totalFrames - 3
|
||||
} else { this.currentFrame = 0 }
|
||||
|
||||
// Start the animation
|
||||
const updateFrame = () => {
|
||||
|
||||
// Check if we have reached the last frame
|
||||
if (!loop && this.currentFrame === totalFrames - 1) {
|
||||
// Animation has reached the last frame, stop playing
|
||||
this.isIconRunning = false;
|
||||
|
||||
// Resolve the Promise to indicate completion
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear the canvas
|
||||
ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
// Get the current frame details
|
||||
const singleFrame = frames[this.currentFrame];
|
||||
const { frame, sourceSize: ss, rotated, spriteSourceSize: sss, trimmed } = singleFrame;
|
||||
|
||||
this.canvas.width = ss.w;
|
||||
this.canvas.height = ss.h
|
||||
this.canvas.style.borderRadius = `${ss.h / 2}px`
|
||||
|
||||
const newSize = {
|
||||
w: frame.w,
|
||||
h: frame.h
|
||||
};
|
||||
|
||||
const newPosition = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
if (rotated) {
|
||||
ctx?.save()
|
||||
ctx?.translate(this.canvas.width / 2, this.canvas.height / 2)
|
||||
ctx?.rotate(-Math.PI / 2);
|
||||
ctx?.translate(-this.canvas.height / 2, -this.canvas.width / 2);
|
||||
|
||||
newSize.w = frame.h;
|
||||
newSize.h = frame.w;
|
||||
}
|
||||
|
||||
if (trimmed) {
|
||||
newPosition.x = sss.x;
|
||||
newPosition.y = sss.y;
|
||||
|
||||
if (rotated) {
|
||||
newPosition.x = this.canvas.height - sss.h - sss.y;
|
||||
newPosition.y = sss.x;
|
||||
}
|
||||
}
|
||||
|
||||
ctx?.drawImage(
|
||||
image,
|
||||
frame.x,
|
||||
frame.y,
|
||||
newSize.w,
|
||||
newSize.h,
|
||||
newPosition.x,
|
||||
newPosition.y,
|
||||
newSize.w,
|
||||
newSize.h
|
||||
)
|
||||
|
||||
|
||||
if (rotated) {
|
||||
ctx?.restore()
|
||||
}
|
||||
// Increment the frame index
|
||||
this.currentFrame = (this.currentFrame + 1) % totalFrames
|
||||
|
||||
|
||||
// Schedule the next frame update
|
||||
if (!play) {
|
||||
this.isIconRunning = false;
|
||||
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(updateFrame, this.animationSpeed)
|
||||
};
|
||||
|
||||
return updateFrame();
|
||||
}
|
||||
// Check if the icon function is already running
|
||||
if (this.isIconRunning) {
|
||||
// If running, add the button icon to the queue
|
||||
this.iconQueue.push(iconTask);
|
||||
} else {
|
||||
// If not running, set the flag and execute the button task immediately
|
||||
this.isIconRunning = true;
|
||||
iconTask();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const portal = { assets: { button_assets, icon_assets } }
|
||||
export default portal;
|
||||
123
packages/www/src/common/portal/index.tsx
Normal file
123
packages/www/src/common/portal/index.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
import portalbtn, { PortalButton, PortalIcon } from "./button";
|
||||
import { styled } from "@macaron-css/solid";
|
||||
import { theme } from "@nestri/www/ui";
|
||||
|
||||
|
||||
const PlayBtn = styled("button", {
|
||||
base: {
|
||||
position: "relative",
|
||||
backgroundColor: "transparent",
|
||||
outline: "none",
|
||||
border: "none",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
height: 100,
|
||||
borderRadius: 999,
|
||||
":focus": {
|
||||
outline: `3px solid ${theme.color.brand}`
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const CanvasOne = styled("canvas", {
|
||||
base: {
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
borderRadius: 999,
|
||||
}
|
||||
})
|
||||
|
||||
const CanvasTwo = styled("canvas", {
|
||||
base: {
|
||||
position: "relative",
|
||||
inset: 0,
|
||||
zIndex: 1,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
borderRadius: 999,
|
||||
}
|
||||
})
|
||||
/**
|
||||
* Renders a portal play button with animated canvas icons.
|
||||
*
|
||||
* This Solid.js component manages two canvas elements that display an animated portal button and its icon. It asynchronously loads a set of image assets and uses instances of PortalButton and PortalIcon to render various animation states—including intro, idle, exit, and loop—on the canvases. Image loading errors are logged to the console.
|
||||
*
|
||||
* @returns A JSX element containing a styled button with two canvases for rendering animations.
|
||||
*/
|
||||
export function Portal() {
|
||||
const [iconRef, setIconRef] = createSignal<HTMLCanvasElement | undefined>();
|
||||
const [buttonRef, setButtonRef] = createSignal<HTMLCanvasElement | undefined>();
|
||||
|
||||
const imageUrls = [
|
||||
portalbtn.assets.button_assets["intro"].image,
|
||||
portalbtn.assets.button_assets["idle"].image,
|
||||
portalbtn.assets.icon_assets["exit"].image,
|
||||
portalbtn.assets.icon_assets["intro"].image,
|
||||
portalbtn.assets.icon_assets["loop"].image
|
||||
];
|
||||
|
||||
const loadImages = () => {
|
||||
return Promise.all(imageUrls.map(url => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = (e) => {
|
||||
console.error(`Failed to load image from ${url}:`, e);
|
||||
reject(new Error(`Failed to load image from ${url}`));
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
(async () => {
|
||||
const btnRef = buttonRef()
|
||||
const icnRef = iconRef()
|
||||
let isActive = true;
|
||||
|
||||
if (icnRef && btnRef) {
|
||||
try {
|
||||
|
||||
// Destructure images for each animation type - skipping introIconImg at index 3
|
||||
const [introImg, idleImg, exitImg, , loopImg] = await loadImages();
|
||||
|
||||
const button = new PortalButton(btnRef);
|
||||
const icon = new PortalIcon(icnRef)
|
||||
if (!isActive) return;
|
||||
|
||||
await button.render("intro", false, introImg as HTMLImageElement);
|
||||
await icon.render("exit", false, exitImg as HTMLImageElement, false);
|
||||
await button.render("idle", true, idleImg as HTMLImageElement, 3);
|
||||
|
||||
// Intro and loop animation
|
||||
await Promise.all([
|
||||
(async () => {
|
||||
if (icnRef) {
|
||||
await icon.render("loop", false, loopImg as HTMLImageElement, true);
|
||||
await icon.render("loop", false, loopImg as HTMLImageElement, true);
|
||||
await icon.render("exit", false, exitImg as HTMLImageElement, true);
|
||||
}
|
||||
})(),
|
||||
button.render("idle", true, idleImg as HTMLImageElement, 2),
|
||||
]);
|
||||
} catch (err) {
|
||||
console.error("Failed to load animation images:", err);
|
||||
}
|
||||
}
|
||||
onCleanup(() => {
|
||||
isActive = false;
|
||||
});
|
||||
})()
|
||||
});
|
||||
|
||||
return (
|
||||
<PlayBtn autofocus>
|
||||
<CanvasOne height={100} width={100} ref={setButtonRef} />
|
||||
<CanvasTwo height={100} width={100} ref={setIconRef} />
|
||||
</PlayBtn>
|
||||
)
|
||||
}
|
||||
1
packages/www/src/components/index.ts
Normal file
1
packages/www/src/components/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./qr-code"
|
||||
378
packages/www/src/components/qr-code.tsx
Normal file
378
packages/www/src/components/qr-code.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
import { theme } from "@nestri/www/ui";
|
||||
import { A } from "@solidjs/router";
|
||||
import { styled } from "@macaron-css/solid";
|
||||
import { useSteam } from "../providers/steam";
|
||||
import { keyframes } from "@macaron-css/core";
|
||||
import { QRCode } from "@nestri/www/ui/custom-qr";
|
||||
import { createEffect, createSignal, onCleanup, Show } from "solid-js";
|
||||
|
||||
const EmptyState = styled("div", {
|
||||
base: {
|
||||
padding: "0 40px",
|
||||
display: "flex",
|
||||
height: "100dvh",
|
||||
gap: 10,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
margin: "auto"
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const EmptyStateHeader = styled("h2", {
|
||||
base: {
|
||||
textAlign: "center",
|
||||
fontSize: theme.font.size["2xl"],
|
||||
fontFamily: theme.font.family.heading,
|
||||
fontWeight: theme.font.weight.semibold,
|
||||
letterSpacing: -0.5,
|
||||
}
|
||||
})
|
||||
|
||||
const EmptyStateSubHeader = styled("p", {
|
||||
base: {
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["base"],
|
||||
textAlign: "center",
|
||||
maxWidth: 380,
|
||||
letterSpacing: -0.4,
|
||||
lineHeight: 1.1,
|
||||
}
|
||||
})
|
||||
|
||||
const bgRotate = keyframes({
|
||||
'to': { transform: 'rotate(1turn)' },
|
||||
});
|
||||
|
||||
const QRContainer = styled("div", {
|
||||
base: {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
marginBottom: 20,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 25,
|
||||
padding: 5,
|
||||
isolation: "isolate",
|
||||
":after": {
|
||||
content: "",
|
||||
zIndex: -1,
|
||||
inset: 5,
|
||||
backgroundColor: theme.color.background.d100,
|
||||
borderRadius: 22,
|
||||
position: "absolute"
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
login: {
|
||||
true: {
|
||||
":before": {
|
||||
content: "",
|
||||
backgroundImage: `conic-gradient(from 0deg,transparent 0,${theme.color.blue.d600} 10%,${theme.color.blue.d600} 25%,transparent 35%)`,
|
||||
animation: `${bgRotate} 2.25s linear infinite`,
|
||||
width: "200%",
|
||||
height: "200%",
|
||||
zIndex: -2,
|
||||
top: "-50%",
|
||||
left: "-50%",
|
||||
position: "absolute"
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const QRWrapper = styled("div", {
|
||||
base: {
|
||||
backgroundColor: theme.color.background.d100,
|
||||
position: "relative",
|
||||
textWrap: "balance",
|
||||
border: `1px solid ${theme.color.gray.d400}`,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
borderRadius: 22,
|
||||
padding: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const QRBg = styled("div", {
|
||||
base: {
|
||||
backgroundColor: theme.color.background.d200,
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
margin: 5,
|
||||
borderRadius: 20
|
||||
}
|
||||
})
|
||||
|
||||
const QRReloadBtn = styled("button", {
|
||||
base: {
|
||||
background: "none",
|
||||
border: "none",
|
||||
width: 50,
|
||||
height: 50,
|
||||
position: "absolute",
|
||||
borderRadius: 25,
|
||||
zIndex: 5,
|
||||
right: 2,
|
||||
bottom: 2,
|
||||
cursor: "pointer",
|
||||
color: theme.color.blue.d700,
|
||||
transition: "color 200ms",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
":before": {
|
||||
zIndex: 3,
|
||||
content: "",
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
opacity: 0,
|
||||
transition: "opacity 200ms",
|
||||
background: "#FFF"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const QRRealoadContainer = styled("div", {
|
||||
base: {
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
isolation: "isolate",
|
||||
":before": {
|
||||
background: `conic-gradient( from 90deg, currentColor 10%, #FFF 80% )`,
|
||||
inset: 3,
|
||||
borderRadius: 16,
|
||||
position: "absolute",
|
||||
content: "",
|
||||
zIndex: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const QRReloadSvg = styled("svg", {
|
||||
base: {
|
||||
zIndex: 2,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
display: "block"
|
||||
}
|
||||
})
|
||||
|
||||
const LogoContainer = styled("div", {
|
||||
base: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}
|
||||
})
|
||||
|
||||
const LogoIcon = styled("svg", {
|
||||
base: {
|
||||
zIndex: 6,
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform: "translate(-50%,-50%)",
|
||||
overflow: "hidden",
|
||||
// width: "21%",
|
||||
// height: "21%",
|
||||
borderRadius: 17,
|
||||
// ":before": {
|
||||
// pointerEvents: "none",
|
||||
// zIndex: 2,
|
||||
// content: '',
|
||||
// position: "absolute",
|
||||
// inset: 0,
|
||||
// borderRadius: "inherit",
|
||||
// boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.02)",
|
||||
// }
|
||||
}
|
||||
})
|
||||
|
||||
const SteamMobileLink = styled(A, {
|
||||
base: {
|
||||
textUnderlineOffset: 2,
|
||||
textDecoration: "none",
|
||||
color: theme.color.blue.d900,
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
width: "max-content",
|
||||
textTransform: "capitalize",
|
||||
":hover": {
|
||||
textDecoration: "underline"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Manages the Steam authentication flow via a reactive hook.
|
||||
*
|
||||
* This hook connects to Steam's login stream for QR code authentication, updating the internal state through reactive signals. It sets up event listeners to capture authentication challenges (setting the login URL) and errors (flagging login errors), and it provides methods to initiate and re-establish the connection.
|
||||
*
|
||||
* The returned object includes:
|
||||
* - loginError: A signal that indicates whether an authentication error has occurred.
|
||||
* - loginUrl: A signal that holds the URL received on a successful authentication challenge.
|
||||
* - isConnecting: A signal that reflects whether the authentication process is currently in progress.
|
||||
* - authenticateSteam: A function that initiates the authentication process, sets up event listeners, and returns cleanup and reset functions.
|
||||
* - reconnect: A function that cleans up any existing connection and initiates a new authentication attempt.
|
||||
*
|
||||
* @returns An object with authentication state signals and functions to manage the connection.
|
||||
*/
|
||||
export function useSteamAuth() {
|
||||
const [loginError, setLoginError] = createSignal<boolean>(false);
|
||||
const [loginUrl, setLoginUrl] = createSignal<string | undefined>();
|
||||
const [isConnecting, setIsConnecting] = createSignal<boolean>(false);
|
||||
const [disconnectFn, setDisconnectFn] = createSignal<(() => void) | null>(null);
|
||||
const steam = useSteam()
|
||||
// Function to authenticate with Steam
|
||||
const authenticateSteam = async () => {
|
||||
try {
|
||||
setIsConnecting(true);
|
||||
setLoginError(false);
|
||||
|
||||
// Connect to the Steam login stream
|
||||
const steamConnection = await steam.client.login.connect();
|
||||
|
||||
// Set up event listeners for different event types
|
||||
const urlUnsubscribe = steamConnection.addEventListener('challenge', (data) => {
|
||||
setLoginUrl(data.url);
|
||||
});
|
||||
|
||||
const loginUnsuccessfulUnsubscribe = steamConnection.addEventListener('error', (data) => {
|
||||
setLoginError(true);
|
||||
});
|
||||
|
||||
// Store the disconnect function for later use
|
||||
const cleanupConnection = () => {
|
||||
urlUnsubscribe();
|
||||
loginUnsuccessfulUnsubscribe();
|
||||
steamConnection.disconnect();
|
||||
};
|
||||
|
||||
setDisconnectFn(() => cleanupConnection);
|
||||
setIsConnecting(false);
|
||||
|
||||
return {
|
||||
cleanup: cleanupConnection,
|
||||
resetConnection: () => {
|
||||
cleanupConnection();
|
||||
authenticateSteam();
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
setLoginError(true);
|
||||
setIsConnecting(false);
|
||||
console.error("Steam authentication error:", error);
|
||||
return {
|
||||
cleanup: () => { },
|
||||
resetConnection: () => authenticateSteam()
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Function to reconnect
|
||||
const reconnect = async () => {
|
||||
// Clean up existing connection if any
|
||||
const currentDisconnectFn = disconnectFn();
|
||||
if (currentDisconnectFn) {
|
||||
currentDisconnectFn();
|
||||
}
|
||||
|
||||
// Start a new connection
|
||||
return authenticateSteam();
|
||||
};
|
||||
|
||||
return {
|
||||
loginError,
|
||||
loginUrl,
|
||||
isConnecting,
|
||||
authenticateSteam,
|
||||
reconnect
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a Steam QR code authentication interface.
|
||||
*
|
||||
* On mount, the component initiates the Steam authentication process using a custom hook and sets up a cleanup routine upon unmounting. It conditionally displays a QR code for signing in when a valid login URL is available, a reload button if an error occurs, or a timeout message if the request times out.
|
||||
*
|
||||
* @example
|
||||
* <QrCodeComponent />
|
||||
*
|
||||
* @returns A Solid.js component that provides a QR code authentication UI for Steam.
|
||||
*/
|
||||
export function QrCodeComponent() {
|
||||
const { loginError, loginUrl, isConnecting, authenticateSteam, reconnect } = useSteamAuth();
|
||||
|
||||
createEffect(async () => {
|
||||
const { cleanup } = await authenticateSteam();
|
||||
onCleanup(() => cleanup());
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<EmptyState
|
||||
style={{
|
||||
"--nestri-qr-dot-color": theme.color.d1000.gray,
|
||||
"--nestri-body-background": theme.color.gray.d100
|
||||
}}
|
||||
>
|
||||
<QRContainer login={typeof loginUrl() === "string" && !loginError()}>
|
||||
<QRBg />
|
||||
<QRWrapper>
|
||||
<LogoContainer>
|
||||
<LogoIcon
|
||||
xmlns="http://www.w3.org/2000/svg" width={!loginError() && loginUrl() ? 32 : 60} height={!loginError() && loginUrl() ? 32 : 60} viewBox="0 0 16 16">
|
||||
<g fill="currentColor">
|
||||
<path d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006l4.304 1.769A2.2 2.2 0 0 1 5.62 8.88l1.96-2.844l-.001-.04a3.046 3.046 0 0 1 3.042-3.043a3.046 3.046 0 0 1 3.042 3.043a3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11a2.22 2.22 0 0 1-1.312-1.568L.33 10.333Z" /><path d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165a1.7 1.7 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029a2.03 2.03 0 0 0 2.027-2.029a2.03 2.03 0 0 0-2.027-2.027a2.03 2.03 0 0 0-2.027 2.027m2.03-1.527a1.524 1.524 0 1 1-.002 3.048a1.524 1.524 0 0 1 .002-3.048" />
|
||||
</g>
|
||||
</LogoIcon>
|
||||
</LogoContainer>
|
||||
<Show
|
||||
when={!loginError() && loginUrl()}
|
||||
fallback={
|
||||
<div style={{ height: "220px", width: "220px" }} />
|
||||
}
|
||||
>
|
||||
<QRCode
|
||||
uri={loginUrl()!}
|
||||
size={240}
|
||||
ecl="M"
|
||||
clearArea={true}
|
||||
/>
|
||||
</Show>
|
||||
</QRWrapper>
|
||||
<Show when={loginError()}>
|
||||
<QRReloadBtn onClick={() => reconnect()} disabled={isConnecting()}>
|
||||
<QRRealoadContainer>
|
||||
<QRReloadSvg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16ZM24.5001 8.74263C25.0834 8.74263 25.5563 9.21551 25.5563 9.79883V14.5997C25.5563 15.183 25.0834 15.6559 24.5001 15.6559H19.6992C19.1159 15.6559 18.643 15.183 18.643 14.5997C18.643 14.0164 19.1159 13.5435 19.6992 13.5435H21.8378L20.071 11.8798C20.0632 11.8724 20.0555 11.865 20.048 11.8574C19.1061 10.915 17.8835 10.3042 16.5643 10.1171C15.2452 9.92999 13.9009 10.1767 12.7341 10.82C11.5674 11.4634 10.6413 12.4685 10.0955 13.684C9.54968 14.8994 9.41368 16.2593 9.70801 17.5588C10.0023 18.8583 10.711 20.0269 11.7273 20.8885C12.7436 21.7502 14.0124 22.2582 15.3425 22.336C16.6726 22.4138 17.9919 22.0572 19.1017 21.3199C19.5088 21.0495 19.8795 20.7333 20.2078 20.3793C20.6043 19.9515 21.2726 19.9262 21.7004 20.3228C22.1282 20.7194 22.1534 21.3876 21.7569 21.8154C21.3158 22.2912 20.8176 22.7161 20.2706 23.0795C18.7793 24.0702 17.0064 24.5493 15.2191 24.4448C13.4318 24.3402 11.7268 23.6576 10.3612 22.4998C8.9956 21.3419 8.0433 19.7716 7.6478 18.0254C7.2523 16.2793 7.43504 14.4519 8.16848 12.8186C8.90192 11.1854 10.1463 9.83471 11.7142 8.97021C13.282 8.10572 15.0884 7.77421 16.861 8.02565C18.6282 8.27631 20.2664 9.09278 21.5304 10.3525L23.4439 12.1544V9.79883C23.4439 9.21551 23.9168 8.74263 24.5001 8.74263Z" fill="currentColor"></path></QRReloadSvg>
|
||||
</QRRealoadContainer>
|
||||
</QRReloadBtn>
|
||||
</Show>
|
||||
</QRContainer>
|
||||
<Show
|
||||
fallback={
|
||||
<>
|
||||
<EmptyStateHeader>Request Timed Out</EmptyStateHeader>
|
||||
<EmptyStateSubHeader>Click above to try again.</EmptyStateSubHeader>
|
||||
</>
|
||||
}
|
||||
when={!loginError() && loginUrl()} >
|
||||
<EmptyStateHeader>Sign in to your Steam account</EmptyStateHeader>
|
||||
<EmptyStateSubHeader>Use your Steam Mobile App to sign in via QR code. <SteamMobileLink href="https://store.steampowered.com/mobile" target="_blank">Learn More<svg data-testid="geist-icon" height="20" stroke-linejoin="round" viewBox="0 0 16 16" width="20" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z" fill="currentColor"></path></svg></SteamMobileLink></EmptyStateSubHeader>
|
||||
</Show>
|
||||
</EmptyState>
|
||||
)
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import { useNavigate } from "@solidjs/router";
|
||||
import { useOpenAuth } from "@openauthjs/solid";
|
||||
import { utility } from "@nestri/www/ui/utility";
|
||||
import { useAccount } from "../providers/account";
|
||||
import { Container, FullScreen } from "@nestri/www/ui/layout";
|
||||
import { Container, Screen as FullScreen } from "@nestri/www/ui/layout";
|
||||
import { FormField, Input, Select } from "@nestri/www/ui/form";
|
||||
import { createForm, getValue, setError, valiForm } from "@modular-forms/solid";
|
||||
|
||||
@@ -191,7 +191,6 @@ export function CreateTeamComponent() {
|
||||
</UrlTitle>
|
||||
<Input
|
||||
{...props}
|
||||
autofocus
|
||||
placeholder={
|
||||
getValue(form, "name")?.toString()
|
||||
.split(" ").join("-")
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Text } from "@nestri/www/ui/text";
|
||||
import { styled } from "@macaron-css/solid";
|
||||
import { theme } from "@nestri/www/ui/theme";
|
||||
import { Header } from "@nestri/www/pages/team/header";
|
||||
import { FullScreen, Container } from "@nestri/www/ui/layout";
|
||||
import { Screen as FullScreen, Container } from "@nestri/www/ui/layout";
|
||||
|
||||
const NotAllowedDesc = styled("div", {
|
||||
base: {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { animate, scroll } from "motion"
|
||||
import { A } from "@solidjs/router";
|
||||
import { Container } from "@nestri/www/ui";
|
||||
import Avatar from "@nestri/www/ui/avatar";
|
||||
@@ -5,12 +6,11 @@ import { styled } from "@macaron-css/solid";
|
||||
import { theme } from "@nestri/www/ui/theme";
|
||||
import { useAccount } from "@nestri/www/providers/account";
|
||||
import { TeamContext } from "@nestri/www/providers/context";
|
||||
import { Match, ParentProps, Show, Switch, useContext } from "solid-js";
|
||||
import { createEffect, createSignal, Match, onCleanup, ParentProps, Show, Switch, useContext } from "solid-js";
|
||||
|
||||
const PageWrapper = styled("div", {
|
||||
base: {
|
||||
minHeight: "100dvh",
|
||||
// paddingBottom: "4rem",
|
||||
backgroundColor: theme.color.background.d200
|
||||
}
|
||||
})
|
||||
@@ -139,7 +139,7 @@ const NavRoot = styled("div", {
|
||||
|
||||
const NavLink = styled(A, {
|
||||
base: {
|
||||
color: "#FFF",
|
||||
color: theme.color.d1000.gray,
|
||||
textDecoration: "none",
|
||||
height: 32,
|
||||
padding: "0 8px",
|
||||
@@ -160,14 +160,19 @@ const NavLink = styled(A, {
|
||||
|
||||
const NavWrapper = styled("div", {
|
||||
base: {
|
||||
// borderBottom: "1px solid white",
|
||||
zIndex: 10,
|
||||
zIndex: 100,
|
||||
position: "fixed",
|
||||
// backdropFilter: "saturate(60%) blur(3px)",
|
||||
height: theme.headerHeight.root,
|
||||
transition: "all 0.3s cubic-bezier(0.4,0,0.2,1)",
|
||||
width: "100%",
|
||||
backgroundColor: "transparent"
|
||||
},
|
||||
variants: {
|
||||
scrolled: {
|
||||
true: {
|
||||
backgroundColor: theme.color.background.d200,
|
||||
boxShadow: `0 2px 20px 1px ${theme.color.gray.d300}`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -195,16 +200,45 @@ const Nav = styled("nav", {
|
||||
}
|
||||
})
|
||||
|
||||
export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
const team = useContext(TeamContext)
|
||||
const account = useAccount()
|
||||
/**
|
||||
* Renders the application's header, featuring navigation, branding, and team details.
|
||||
*
|
||||
* This component displays a navigation bar that includes the logo, team avatar, team name, a badge
|
||||
* reflecting the team's plan type, and navigation links. It adjusts its styling based on the scroll
|
||||
* position by toggling visual effects on the navigation wrapper. A scroll event listener is added
|
||||
* on mount to update the header's appearance when the user scrolls and is removed on unmount.
|
||||
*
|
||||
* @param props.children - Optional child elements rendered below the header component.
|
||||
* @returns The header component element.
|
||||
*/
|
||||
export function Header(props: ParentProps) {
|
||||
// const team = useContext(TeamContext)
|
||||
const [hasScrolled, setHasScrolled] = createSignal(false)
|
||||
const [team,] = createSignal({
|
||||
id: "tea_01JPACSPYWTTJ66F32X3AWWFWE",
|
||||
slug: "wanjohiryan",
|
||||
name: "Wanjohi",
|
||||
planType: "BYOG"
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const handleScroll = () => { setHasScrolled(window.scrollY > 0); }
|
||||
|
||||
document.addEventListener("scroll", handleScroll);
|
||||
|
||||
onCleanup(() => {
|
||||
document.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// const account = useAccount()
|
||||
return (
|
||||
<PageWrapper>
|
||||
<NavWrapper style={{ color: props.whiteColor ? "#FFF" : theme.color.d1000.gray }} >
|
||||
{/* <Background /> */}
|
||||
<NavWrapper scrolled={hasScrolled()}>
|
||||
<Nav>
|
||||
<Container space="4" vertical="center">
|
||||
<Show when={team}
|
||||
{/* <Show when={team}
|
||||
fallback={
|
||||
<Link href="/">
|
||||
<NestriLogoBig
|
||||
@@ -228,70 +262,67 @@ export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
</LogoName>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<LogoRoot>
|
||||
<A href={`/${team!().slug}`} >
|
||||
<NestriLogo
|
||||
width={32}
|
||||
height={32}
|
||||
viewBox="0 0 12.8778 9.7377253"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
|
||||
style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</NestriLogo>
|
||||
</A>
|
||||
<LineSvg
|
||||
height="16"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width="16">
|
||||
> */}
|
||||
<LogoRoot>
|
||||
<A href={`/${team!().slug}`} >
|
||||
<NestriLogo
|
||||
width={32}
|
||||
height={32}
|
||||
viewBox="0 0 12.8778 9.7377253"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z" fill="currentColor"></path>
|
||||
</LineSvg>
|
||||
<TeamRoot>
|
||||
<Avatar size={21} name={team!().slug} />
|
||||
<TeamLabel style={{ color: props.whiteColor ? "#FFF" : theme.color.d1000.gray }}>{team!().name}</TeamLabel>
|
||||
<Switch>
|
||||
<Match when={team!().planType === "BYOG"}>
|
||||
<Badge style={{ "background-color": theme.color.purple.d700 }}>
|
||||
<span style={{ "line-height": 0 }} >BYOG</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
<Match when={team!().planType === "Hosted"}>
|
||||
<Badge style={{ "background-color": theme.color.blue.d700 }}>
|
||||
<span style={{ "line-height": 0 }}>Hosted</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
</Switch>
|
||||
<DropIcon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M72.61 83.06a8 8 0 0 1 1.73-8.72l48-48a8 8 0 0 1 11.32 0l48 48A8 8 0 0 1 176 88H80a8 8 0 0 1-7.39-4.94M176 168H80a8 8 0 0 0-5.66 13.66l48 48a8 8 0 0 0 11.32 0l48-48A8 8 0 0 0 176 168" />
|
||||
</DropIcon>
|
||||
</TeamRoot>
|
||||
</LogoRoot>
|
||||
</Show>
|
||||
d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
|
||||
style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</NestriLogo>
|
||||
</A>
|
||||
<LineSvg
|
||||
height="16"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z" fill="currentColor"></path>
|
||||
</LineSvg>
|
||||
<TeamRoot>
|
||||
<Avatar
|
||||
size={21}
|
||||
name={team!().slug}
|
||||
/>
|
||||
<TeamLabel style={{ color: theme.color.d1000.gray }}>{team!().name}</TeamLabel>
|
||||
<Switch>
|
||||
<Match when={team!().planType === "BYOG"}>
|
||||
<Badge style={{ "background-color": theme.color.purple.d700 }}>
|
||||
<span style={{ "line-height": 0 }} >BYOG</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
<Match when={team!().planType === "Hosted"}>
|
||||
<Badge style={{ "background-color": theme.color.blue.d700 }}>
|
||||
<span style={{ "line-height": 0 }}>Hosted</span>
|
||||
</Badge>
|
||||
</Match>
|
||||
</Switch>
|
||||
<DropIcon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M72.61 83.06a8 8 0 0 1 1.73-8.72l48-48a8 8 0 0 1 11.32 0l48 48A8 8 0 0 1 176 88H80a8 8 0 0 1-7.39-4.94M176 168H80a8 8 0 0 0-5.66 13.66l48 48a8 8 0 0 0 11.32 0l48-48A8 8 0 0 0 176 168" />
|
||||
</DropIcon>
|
||||
</TeamRoot>
|
||||
</LogoRoot>
|
||||
{/* </Show> */}
|
||||
</Container>
|
||||
<RightRoot>
|
||||
<Show when={team}>
|
||||
<NavRoot>
|
||||
<NavLink href={`/${team!().slug}/machines`}>
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.5 17.5L22 22m-2-11a9 9 0 1 0-18 0a9 9 0 0 0 18 0" color="currentColor" />
|
||||
</svg> */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3.441 9.956a4.926 4.926 0 0 0 6.233 7.571l4.256 4.257a.773.773 0 0 0 1.169-1.007l-.075-.087l-4.217-4.218A4.927 4.927 0 0 0 3.44 9.956m13.213 6.545c-.225 1.287-.548 2.456-.952 3.454l.03.028l.124.14c.22.295.344.624.378.952a10.03 10.03 0 0 0 4.726-4.574zM12.25 16.5l2.284 2.287c.202-.6.381-1.268.53-1.992l.057-.294zm-2.936-5.45a3.38 3.38 0 1 1-4.78 4.779a3.38 3.38 0 0 1 4.78-4.78M15.45 10h-3.7a5.94 5.94 0 0 1 .892 5h2.71a26 26 0 0 0 .132-4.512zm1.507 0a28 28 0 0 1-.033 4.42l-.057.58h4.703a10.05 10.05 0 0 0 .258-5zm-2.095-7.593c.881 1.35 1.536 3.329 1.883 5.654l.062.44h4.59a10.03 10.03 0 0 0-6.109-5.958l-.304-.1zm-2.836-.405c-1.277 0-2.561 2.382-3.158 5.839c.465.16.912.38 1.331.658l5.088.001c-.54-3.809-1.905-6.498-3.261-6.498m-2.837.405A10.03 10.03 0 0 0 2.654 8.5h.995a5.92 5.92 0 0 1 3.743-.968c.322-1.858.846-3.47 1.527-4.68l.162-.275z" />
|
||||
</svg>
|
||||
{/* Machines */}
|
||||
<NavLink style={{ "margin-right": "-8px" }} href={`/${team!().slug}/machines`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314" /></svg>
|
||||
</NavLink>
|
||||
<NavLink href={`/${team!().slug}/machines`}>
|
||||
<svg style={{ "margin-bottom": "1px" }} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
|
||||
@@ -304,14 +335,15 @@ export function Header(props: { whiteColor?: boolean } & ParentProps) {
|
||||
</NavRoot>
|
||||
</Show>
|
||||
<div style={{ "margin-bottom": "2px" }} >
|
||||
<Switch>
|
||||
<AvatarImg src={"https://avatars.githubusercontent.com/u/71614375?v=4"} alt={`Wanjohi's avatar`} />
|
||||
{/* <Switch>
|
||||
<Match when={account.current.avatarUrl} >
|
||||
<AvatarImg src={account.current.avatarUrl} alt={`${account.current.name}'s avatar`} />
|
||||
<AvatarImg src={account.current.avatarUrl} alt={`${account.current.name}'s avatar`} />
|
||||
</Match>
|
||||
<Match when={!account.current.avatarUrl}>
|
||||
<Avatar size={32} name={`${account.current.name}#${account.current.discriminator}`} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</Switch> */}
|
||||
</div>
|
||||
</RightRoot>
|
||||
</Nav>
|
||||
|
||||
@@ -3,111 +3,14 @@ import { styled } from "@macaron-css/solid";
|
||||
import { Header } from "@nestri/www/pages/team/header";
|
||||
import { useSteam } from "@nestri/www/providers/steam";
|
||||
import { Modal } from "@nestri/www/ui/modal";
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
import { createEffect, createSignal, Match, onCleanup, Switch } from "solid-js";
|
||||
import { Text } from "@nestri/www/ui/text"
|
||||
import { QRCode } from "@nestri/www/ui/custom-qr";
|
||||
import { globalStyle, keyframes } from "@macaron-css/core";
|
||||
import { A } from "@solidjs/router";
|
||||
import Avatar from "@nestri/www/ui/avatar";
|
||||
import { Portal } from "@nestri/www/common/portal";
|
||||
import { QrCodeComponent } from "@nestri/www/components"
|
||||
|
||||
const EmptyState = styled("div", {
|
||||
base: {
|
||||
padding: "0 40px",
|
||||
display: "flex",
|
||||
gap: 10,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
margin: "auto"
|
||||
}
|
||||
})
|
||||
|
||||
const EmptyStateHeader = styled("h2", {
|
||||
base: {
|
||||
textAlign: "center",
|
||||
fontSize: theme.font.size["2xl"],
|
||||
fontFamily: theme.font.family.heading,
|
||||
fontWeight: theme.font.weight.semibold,
|
||||
letterSpacing: -0.5,
|
||||
}
|
||||
})
|
||||
|
||||
const EmptyStateSubHeader = styled("p", {
|
||||
base: {
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["lg"],
|
||||
textAlign: "center",
|
||||
maxWidth: 380,
|
||||
letterSpacing: -0.4,
|
||||
lineHeight: 1.1,
|
||||
}
|
||||
})
|
||||
|
||||
const QRWrapper = styled("div", {
|
||||
base: {
|
||||
backgroundColor: theme.color.background.d100,
|
||||
position: "relative",
|
||||
marginBottom: 20,
|
||||
textWrap: "balance",
|
||||
border: `1px solid ${theme.color.gray.d400}`,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
borderRadius: 22,
|
||||
padding: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamMobileLink = styled(A, {
|
||||
base: {
|
||||
textUnderlineOffset: 2,
|
||||
textDecoration: "none",
|
||||
color: theme.color.blue.d900,
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
width: "max-content",
|
||||
textTransform: "capitalize",
|
||||
":hover": {
|
||||
textDecoration: "underline"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const LogoContainer = styled("div", {
|
||||
base: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}
|
||||
})
|
||||
|
||||
const LogoIcon = styled("svg", {
|
||||
base: {
|
||||
zIndex: 6,
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform: "translate(-50%,-50%)",
|
||||
overflow: "hidden",
|
||||
// width: "21%",
|
||||
// height: "21%",
|
||||
borderRadius: 17,
|
||||
// ":before": {
|
||||
// pointerEvents: "none",
|
||||
// zIndex: 2,
|
||||
// content: '',
|
||||
// position: "absolute",
|
||||
// inset: 0,
|
||||
// borderRadius: "inherit",
|
||||
// boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.02)",
|
||||
// }
|
||||
}
|
||||
})
|
||||
|
||||
const LastPlayedWrapper = styled("div", {
|
||||
base: {
|
||||
@@ -230,7 +133,8 @@ const GamesContainer = styled("div", {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
zIndex: 3,
|
||||
zIndex: 10,
|
||||
isolation: "isolate",
|
||||
backgroundColor: theme.color.background.d200,
|
||||
}
|
||||
})
|
||||
@@ -293,13 +197,13 @@ const SteamLibrary = styled("div", {
|
||||
display: "grid",
|
||||
// backgroundColor: "red",
|
||||
maxWidth: "70vw",
|
||||
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
|
||||
columnGap: 12,
|
||||
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
|
||||
columnGap: 20,
|
||||
rowGap: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamLibraryTitle = styled("h3", {
|
||||
const Title = styled("h3", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontFamily: theme.font.family.heading,
|
||||
@@ -311,104 +215,311 @@ const SteamLibraryTitle = styled("h3", {
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameTitle = styled("h3", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontFamily: theme.font.family.heading,
|
||||
fontWeight: theme.font.weight.medium,
|
||||
fontSize: theme.font.size["xl"],
|
||||
letterSpacing: -0.7,
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameSubTitle = styled("span", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["base"],
|
||||
letterSpacing: -0.4,
|
||||
}
|
||||
})
|
||||
|
||||
const SubTitle = styled("span", {
|
||||
base: {
|
||||
textAlign: "left",
|
||||
fontWeight: theme.font.weight.regular,
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size["base"],
|
||||
letterSpacing: -0.4,
|
||||
gridColumn: "1/-1",
|
||||
marginTop: -20,
|
||||
marginBottom: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsList = styled("div", {
|
||||
base: {
|
||||
borderTop: `1px solid ${theme.color.gray.d400}`,
|
||||
padding: "20px 0",
|
||||
margin: "20px auto",
|
||||
width: "100%",
|
||||
display: "grid",
|
||||
maxWidth: "70vw",
|
||||
gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
|
||||
columnGap: 12,
|
||||
rowGap: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendContainer = styled("div", {
|
||||
base: {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
minHeight: "calc(100% + 20px)",
|
||||
aspectRatio: "300/380",
|
||||
borderRadius: 15,
|
||||
position: "relative",
|
||||
padding: "35px 17px",
|
||||
border: `1px solid ${theme.color.gray.d500}`,
|
||||
backgroundColor: theme.color.background.d100,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsSubText = styled("span", {
|
||||
base: {
|
||||
color: theme.color.gray.d900,
|
||||
fontSize: theme.font.size.sm,
|
||||
marginTop: 10,
|
||||
}
|
||||
})
|
||||
const FriendsText = styled("h3", {
|
||||
base: {
|
||||
fontSize: theme.font.size["lg"],
|
||||
fontFamily: theme.font.family.heading,
|
||||
marginTop: 20,
|
||||
}
|
||||
})
|
||||
|
||||
const FriendsInviteButton = styled("button", {
|
||||
base: {
|
||||
minWidth: 48,
|
||||
borderRadius: 9999,
|
||||
textAlign: "center",
|
||||
padding: "0px 24px",
|
||||
fontSize: theme.font.size["base"],
|
||||
lineHeight: "1.75",
|
||||
marginTop: 20,
|
||||
cursor: "pointer",
|
||||
fontWeight: theme.font.weight.bold,
|
||||
fontFamily: theme.font.family.heading,
|
||||
border: `1px solid ${theme.color.gray.d100}`,
|
||||
backgroundColor: theme.color.blue.d700,
|
||||
transition: "all 0.2s cubic-bezier(0.4,0,0.2,1)",
|
||||
":hover": {
|
||||
transform: "scale(1.05)"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameContainer = styled("div", {
|
||||
base: {
|
||||
padding: "20px 0",
|
||||
width: "100%",
|
||||
minHeight: 72,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
selectors: {
|
||||
"&:not(:last-of-type)": {
|
||||
borderBottom: `1px solid ${theme.color.gray.d400}`
|
||||
},
|
||||
"&:not(:first-of-type)": {
|
||||
borderTop: `1px solid ${theme.color.gray.d400}`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameImg = styled("img", {
|
||||
base: {
|
||||
border: "none",
|
||||
outline: "none",
|
||||
aspectRatio: "1/1",
|
||||
height: 80,
|
||||
borderRadius: 8
|
||||
}
|
||||
})
|
||||
|
||||
const SteamGameText = styled("div", {
|
||||
base: {
|
||||
paddingRight: "3em",
|
||||
marginLeft: 30,
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
flexDirection: "column",
|
||||
alignSelf: "center",
|
||||
}
|
||||
})
|
||||
const SteamGameBtn = styled("button", {
|
||||
base: {
|
||||
minWidth: 48,
|
||||
borderRadius: 9999,
|
||||
textAlign: "center",
|
||||
padding: "0px 24px",
|
||||
fontSize: theme.font.size["base"],
|
||||
lineHeight: "1.75",
|
||||
// marginTop: 20,
|
||||
// marginRight: 1,
|
||||
margin: "0 1px 0 auto",
|
||||
cursor: "pointer",
|
||||
alignSelf: "center",
|
||||
fontWeight: theme.font.weight.bold,
|
||||
fontFamily: theme.font.family.heading,
|
||||
color: theme.color.blue.d900,
|
||||
border: `1px solid ${theme.color.gray.d100}`,
|
||||
backgroundColor: theme.color.blue.d300,
|
||||
transition: "all 0.2s cubic-bezier(0.4,0,0.2,1)",
|
||||
":hover": {
|
||||
transform: "scale(1.05)"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const PortalContainer = styled("div", {
|
||||
base: {
|
||||
zIndex: 4,
|
||||
isolation: "isolate",
|
||||
position: "fixed",
|
||||
bottom: "20vh",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Renders the home page layout for the gaming platform.
|
||||
*
|
||||
* This component wraps its content within a header and a full-screen container,
|
||||
* currently displaying a QR code component. Commented sections indicate planned
|
||||
* enhancements such as game previews, team mate suggestions, and a Steam library.
|
||||
*/
|
||||
export function HomeRoute() {
|
||||
|
||||
// const steam = useSteam();
|
||||
// const [loginUrl, setLoginUrl] = createSignal<string | null>(null);
|
||||
// const [loginStatus, setLoginStatus] = createSignal<string | null>("Not connected");
|
||||
// const [userData, setUserData] = createSignal<{ username?: string, steamId?: string } | null>(null);
|
||||
|
||||
// createEffect(async () => {
|
||||
// // Connect to the Steam login stream
|
||||
// const steamConnection = await steam.client.login.connect();
|
||||
|
||||
// // Set up event listeners for different event types
|
||||
// const urlUnsubscribe = steamConnection.addEventListener('url', (url) => {
|
||||
// setLoginUrl(url);
|
||||
// setLoginStatus('Scan QR code with Steam mobile app');
|
||||
// });
|
||||
|
||||
// const loginAttemptUnsubscribe = steamConnection.addEventListener('login-attempt', (data) => {
|
||||
// setLoginStatus(`Logging in as ${data.username}...`);
|
||||
// });
|
||||
|
||||
// const loginSuccessUnsubscribe = steamConnection.addEventListener('login-success', (data) => {
|
||||
// setUserData(data);
|
||||
// setLoginStatus(`Successfully logged in as ${data.username}`);
|
||||
// });
|
||||
|
||||
// const loginUnsuccessfulUnsubscribe = steamConnection.addEventListener('login-unsuccessful', (data) => {
|
||||
// setLoginStatus(`Login failed: ${data.error}`);
|
||||
// });
|
||||
|
||||
// const loggedOffUnsubscribe = steamConnection.addEventListener('logged-off', (data) => {
|
||||
// setLoginStatus(`Logged out of Steam: ${data.reason}`);
|
||||
// setUserData(null);
|
||||
// });
|
||||
|
||||
// onCleanup(() => {
|
||||
// urlUnsubscribe();
|
||||
// loginAttemptUnsubscribe();
|
||||
// loginSuccessUnsubscribe();
|
||||
// loginUnsuccessfulUnsubscribe();
|
||||
// loggedOffUnsubscribe();
|
||||
// steamConnection.disconnect();
|
||||
// });
|
||||
// })
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header whiteColor>
|
||||
<Header>
|
||||
<FullScreen >
|
||||
<EmptyState
|
||||
style={{
|
||||
"--nestri-qr-dot-color": theme.color.d1000.gray,
|
||||
"--nestri-body-background": theme.color.gray.d100
|
||||
}}
|
||||
>
|
||||
<QRWrapper>
|
||||
<LogoContainer>
|
||||
<LogoIcon
|
||||
xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
|
||||
<g fill="currentColor">
|
||||
<path d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006l4.304 1.769A2.2 2.2 0 0 1 5.62 8.88l1.96-2.844l-.001-.04a3.046 3.046 0 0 1 3.042-3.043a3.046 3.046 0 0 1 3.042 3.043a3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11a2.22 2.22 0 0 1-1.312-1.568L.33 10.333Z" /><path d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165a1.7 1.7 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029a2.03 2.03 0 0 0 2.027-2.029a2.03 2.03 0 0 0-2.027-2.027a2.03 2.03 0 0 0-2.027 2.027m2.03-1.527a1.524 1.524 0 1 1-.002 3.048a1.524 1.524 0 0 1 .002-3.048" />
|
||||
</g>
|
||||
</LogoIcon>
|
||||
</LogoContainer>
|
||||
<QRCode
|
||||
uri={"https://github.com/family/connectkit/blob/9a3c16c781d8a60853eff0c4988e22926a3f91ce"}
|
||||
size={180}
|
||||
ecl="M"
|
||||
clearArea={true}
|
||||
/>
|
||||
</QRWrapper>
|
||||
<EmptyStateHeader>Sign in to your Steam account</EmptyStateHeader>
|
||||
<EmptyStateSubHeader>Use your Steam Mobile App to sign in via QR code. <SteamMobileLink href="https://store.steampowered.com/mobile" target="_blank">Learn More<svg data-testid="geist-icon" height="20" stroke-linejoin="round" viewBox="0 0 16 16" width="20" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z" fill="currentColor"></path></svg></SteamMobileLink></EmptyStateSubHeader>
|
||||
</EmptyState>
|
||||
<QrCodeComponent />
|
||||
{/* <LastPlayedWrapper>
|
||||
<LastPlayedFader />
|
||||
<LogoBackgroundImage />
|
||||
<BackgroundImage />
|
||||
<Material />
|
||||
<JoeColor />
|
||||
</LastPlayedWrapper> */}
|
||||
{/* <GamesContainer>
|
||||
<PortalContainer>
|
||||
<Portal />
|
||||
</PortalContainer>
|
||||
</LastPlayedWrapper>
|
||||
<GamesContainer>
|
||||
<GamesWrapper>
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/05/15/acshadows-1715789601294.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2023/05/19/cataclismo-button-1684532710313.jpg" />
|
||||
<GameSquareImage alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/03/27/marvelrivals-1711557092104.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/05/15/acshadows-1715789601294.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2023/05/19/cataclismo-button-1684532710313.jpg" />
|
||||
<GameSquareImage draggable={false} alt="Assasin's Creed Shadows" src="https://assets-prd.ignimgs.com/2024/03/27/marvelrivals-1711557092104.jpg" />
|
||||
</GamesWrapper>
|
||||
<FriendsList>
|
||||
<Title>Team Mate Suggestions</Title>
|
||||
<SubTitle>Invite people to join your team and play together</SubTitle>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Wanjohi Ryan" />
|
||||
<FriendsText>Wanjohi Ryan</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Tracy Jones" />
|
||||
<FriendsText>Tracy Jones</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="The65th" />
|
||||
<FriendsText>The65th</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="Menstral" />
|
||||
<FriendsText>Menstral</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
<FriendContainer>
|
||||
<Avatar size={100} name="AstroHot" />
|
||||
<FriendsText>AstroHot</FriendsText>
|
||||
<FriendsSubText>From your Steam Friends</FriendsSubText>
|
||||
<FriendsInviteButton>Invite</FriendsInviteButton>
|
||||
</FriendContainer>
|
||||
</FriendsList>
|
||||
<SteamLibrary>
|
||||
<SteamLibraryTitle>Games we think you will like</SteamLibraryTitle>
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2625420/hero_capsule.jpg?t=1742853642" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2486740/hero_capsule.jpg?t=1742596243" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/870780/hero_capsule.jpg?t=1737800535" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2050650/hero_capsule.jpg?t=1737800535" />
|
||||
<Title>Your Steam library</Title>
|
||||
<SubTitle>These titles from your Steam Library are fully functional on Nestri</SubTitle>
|
||||
<div>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/05/27/alanwake2-1685200534966.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Alan Wake II</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure, Horror</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2022/09/22/slime-rancher-2-button-02-1663890048548.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Slime Rancher 2</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure, Casual, Indie</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets1.ignimgs.com/2019/07/17/doom-eternal---button-fin-1563400339680.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Doom Eternal</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
</div>
|
||||
<div>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2022/10/12/dead-space-2023-button-3-1665603079064.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Dead Space</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action, Adventure</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Update</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/01/25/hifirush-1674680068070.jpg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Hi-Fi Rush</SteamGameTitle>
|
||||
<SteamGameSubTitle>Action</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
<SteamGameContainer>
|
||||
<SteamGameImg draggable={false} src="https://assets-prd.ignimgs.com/2023/08/24/baldursg3-1692894717196.jpeg" />
|
||||
<SteamGameText>
|
||||
<SteamGameTitle>Baldur's Gate 3</SteamGameTitle>
|
||||
<SteamGameSubTitle>Adventure, RPG, Strategy</SteamGameSubTitle>
|
||||
</SteamGameText>
|
||||
<SteamGameBtn>Install</SteamGameBtn>
|
||||
</SteamGameContainer>
|
||||
</div>
|
||||
</SteamLibrary>
|
||||
</GamesContainer> */}
|
||||
</GamesContainer>*/}
|
||||
</FullScreen>
|
||||
</Header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2625420/hero_capsule.jpg?t=1742853642" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2486740/hero_capsule.jpg?t=1742596243" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/870780/hero_capsule.jpg?t=1737800535" />
|
||||
<GameImageCapsule alt="Assasin's Creed Shadows" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2050650/hero_capsule.jpg?t=1737800535" />
|
||||
*/
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import { createInitializedContext } from "@nestri/www/common/context";
|
||||
|
||||
|
||||
export const { use: useApi, provider: ApiProvider } = createInitializedContext(
|
||||
"Api",
|
||||
"ApiContext",
|
||||
() => {
|
||||
const team = useTeam();
|
||||
const auth = useOpenAuth();
|
||||
|
||||
@@ -4,23 +4,31 @@ import { useOpenAuth } from "@openauthjs/solid";
|
||||
import { createSignal, onCleanup } from "solid-js";
|
||||
import { createInitializedContext } from "../common/context";
|
||||
|
||||
// Global connection state to prevent multiple instances
|
||||
let globalEventSource: EventSource | null = null;
|
||||
let globalReconnectAttempts = 0;
|
||||
const MAX_RECONNECT_ATTEMPTS = 1;
|
||||
let isConnecting = false;
|
||||
let activeConnection: SteamConnection | null = null;
|
||||
|
||||
// FIXME: The redo button is not working as expected... it does not reinitialise the connection
|
||||
|
||||
// Type definitions for the events
|
||||
interface SteamEventTypes {
|
||||
'url': string;
|
||||
'login-attempt': { username: string };
|
||||
'login-success': { username: string; steamId: string };
|
||||
'login-unsuccessful': { error: string };
|
||||
'logged-off': { reason: string };
|
||||
'connected': { sessionID: string };
|
||||
'challenge': { sessionID: string; url: string };
|
||||
'error': { message: string };
|
||||
'completed': { sessionID: string };
|
||||
}
|
||||
|
||||
// Type for the connection
|
||||
type SteamConnection = {
|
||||
addEventListener: <T extends keyof SteamEventTypes>(
|
||||
event: T,
|
||||
event: T,
|
||||
callback: (data: SteamEventTypes[T]) => void
|
||||
) => () => void;
|
||||
removeEventListener: <T extends keyof SteamEventTypes>(
|
||||
event: T,
|
||||
event: T,
|
||||
callback: (data: SteamEventTypes[T]) => void
|
||||
) => void;
|
||||
disconnect: () => void;
|
||||
@@ -30,74 +38,67 @@ type SteamConnection = {
|
||||
interface SteamContext {
|
||||
ready: boolean;
|
||||
client: {
|
||||
// Regular API endpoints
|
||||
whoami: () => Promise<any>;
|
||||
games: () => Promise<any>;
|
||||
// SSE connection for login
|
||||
login: {
|
||||
connect: () => SteamConnection;
|
||||
connect: () => Promise<SteamConnection>;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// Create the initialized context
|
||||
export const { use: useSteam, provider: SteamProvider } = createInitializedContext(
|
||||
"Steam",
|
||||
"SteamContext",
|
||||
() => {
|
||||
const team = useTeam();
|
||||
const auth = useOpenAuth();
|
||||
|
||||
// Create the HTTP client for regular endpoints
|
||||
const client = {
|
||||
// Regular HTTP endpoints
|
||||
whoami: async () => {
|
||||
const token = await auth.access();
|
||||
const response = await fetch(`${import.meta.env.VITE_STEAM_URL}/whoami`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'x-nestri-team': team().id
|
||||
}
|
||||
});
|
||||
return response.json();
|
||||
},
|
||||
|
||||
games: async () => {
|
||||
const token = await auth.access();
|
||||
const response = await fetch(`${import.meta.env.VITE_STEAM_URL}/games`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'x-nestri-team': team().id
|
||||
}
|
||||
});
|
||||
return response.json();
|
||||
},
|
||||
|
||||
// SSE connection factory for login
|
||||
login: {
|
||||
connect: async (): Promise<SteamConnection> => {
|
||||
let eventSource: EventSource | null = null;
|
||||
// Return existing connection if active
|
||||
if (activeConnection && globalEventSource && globalEventSource.readyState !== 2) {
|
||||
return activeConnection;
|
||||
}
|
||||
|
||||
// Prevent multiple simultaneous connection attempts
|
||||
if (isConnecting) {
|
||||
console.log("Connection attempt already in progress, waiting...");
|
||||
// Wait for existing connection attempt to finish
|
||||
return new Promise((resolve) => {
|
||||
const checkInterval = setInterval(() => {
|
||||
if (!isConnecting && activeConnection) {
|
||||
clearInterval(checkInterval);
|
||||
resolve(activeConnection);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
isConnecting = true;
|
||||
|
||||
const [isConnected, setIsConnected] = createSignal(false);
|
||||
|
||||
|
||||
// Store event listeners
|
||||
const listeners: Record<string, Array<(data: any) => void>> = {
|
||||
'url': [],
|
||||
'login-attempt': [],
|
||||
'login-success': [],
|
||||
'login-unsuccessful': [],
|
||||
'logged-off': []
|
||||
'connected': [],
|
||||
'challenge': [],
|
||||
'error': [],
|
||||
'completed': []
|
||||
};
|
||||
|
||||
// Method to add event listeners
|
||||
const addEventListener = <T extends keyof SteamEventTypes>(
|
||||
event: T,
|
||||
event: T,
|
||||
callback: (data: SteamEventTypes[T]) => void
|
||||
) => {
|
||||
if (!listeners[event]) {
|
||||
listeners[event] = [];
|
||||
}
|
||||
|
||||
|
||||
listeners[event].push(callback as any);
|
||||
|
||||
|
||||
// Return a function to remove this specific listener
|
||||
return () => {
|
||||
removeEventListener(event, callback);
|
||||
@@ -106,7 +107,7 @@ export const { use: useSteam, provider: SteamProvider } = createInitializedConte
|
||||
|
||||
// Method to remove event listeners
|
||||
const removeEventListener = <T extends keyof SteamEventTypes>(
|
||||
event: T,
|
||||
event: T,
|
||||
callback: (data: SteamEventTypes[T]) => void
|
||||
) => {
|
||||
if (listeners[event]) {
|
||||
@@ -117,16 +118,39 @@ export const { use: useSteam, provider: SteamProvider } = createInitializedConte
|
||||
}
|
||||
};
|
||||
|
||||
// Handle notifying listeners safely
|
||||
const notifyListeners = (eventType: string, data: any) => {
|
||||
if (listeners[eventType]) {
|
||||
listeners[eventType].forEach(callback => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (error) {
|
||||
console.error(`Error in ${eventType} event handler:`, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize connection
|
||||
const initConnection = async () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
if (globalReconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
|
||||
console.log(`Maximum reconnection attempts (${MAX_RECONNECT_ATTEMPTS}) reached. Giving up.`);
|
||||
notifyListeners('error', { message: 'Connection to Steam authentication failed after multiple attempts' });
|
||||
isConnecting = false;
|
||||
disconnect()
|
||||
return;
|
||||
}
|
||||
|
||||
if (globalEventSource) {
|
||||
globalEventSource.close();
|
||||
globalEventSource = null;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = await auth.access();
|
||||
|
||||
eventSource = new EventSource(`${import.meta.env.VITE_STEAM_URL}/login`, {
|
||||
// Create new EventSource connection
|
||||
globalEventSource = new EventSource(`${import.meta.env.VITE_API_URL}/steam/login`, {
|
||||
fetch: (input, init) =>
|
||||
fetch(input, {
|
||||
...init,
|
||||
@@ -138,59 +162,74 @@ export const { use: useSteam, provider: SteamProvider } = createInitializedConte
|
||||
}),
|
||||
});
|
||||
|
||||
eventSource.onopen = () => {
|
||||
globalEventSource.onopen = () => {
|
||||
console.log('Connected to Steam login stream');
|
||||
setIsConnected(true);
|
||||
globalReconnectAttempts = 0; // Reset reconnect counter on successful connection
|
||||
isConnecting = false;
|
||||
};
|
||||
|
||||
// Set up event handlers for all specific events
|
||||
['url', 'login-attempt', 'login-success', 'login-unsuccessful', 'logged-off'].forEach((eventType) => {
|
||||
eventSource!.addEventListener(eventType, (event) => {
|
||||
['connected', 'challenge', 'completed'].forEach((eventType) => {
|
||||
globalEventSource!.addEventListener(eventType, (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log(`Received ${eventType} event:`, data);
|
||||
|
||||
// Notify all registered listeners for this event type
|
||||
if (listeners[eventType]) {
|
||||
listeners[eventType].forEach(callback => {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
notifyListeners(eventType, data);
|
||||
} catch (error) {
|
||||
console.error(`Error parsing ${eventType} event data:`, error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle generic messages (fallback)
|
||||
eventSource.onmessage = (event) => {
|
||||
console.log('Received generic message:', event.data);
|
||||
};
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('Steam login stream error:', error);
|
||||
// Handle connection errors (this is different from server-sent 'error' events)
|
||||
globalEventSource.onerror = (error) => {
|
||||
console.error('Steam login stream connection error:', error);
|
||||
setIsConnected(false);
|
||||
// Attempt to reconnect after a delay
|
||||
setTimeout(initConnection, 5000);
|
||||
|
||||
// Close the connection to prevent automatic browser reconnect
|
||||
if (globalEventSource) {
|
||||
globalEventSource.close();
|
||||
}
|
||||
|
||||
// Check if we should attempt to reconnect
|
||||
if (globalReconnectAttempts <= MAX_RECONNECT_ATTEMPTS) {
|
||||
const currentAttempt = globalReconnectAttempts + 1;
|
||||
console.log(`Reconnecting (attempt ${currentAttempt}/${MAX_RECONNECT_ATTEMPTS})...`);
|
||||
globalReconnectAttempts = currentAttempt;
|
||||
|
||||
// Exponential backoff for reconnection
|
||||
const delay = Math.min(1000 * Math.pow(2, globalReconnectAttempts), 30000);
|
||||
setTimeout(initConnection, delay);
|
||||
} else {
|
||||
console.error(`Maximum reconnection attempts (${MAX_RECONNECT_ATTEMPTS}) reached`);
|
||||
// Notify listeners about connection failure
|
||||
notifyListeners('error', { message: 'Connection to Steam authentication failed after multiple attempts' });
|
||||
disconnect();
|
||||
isConnecting = false;
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to connect to Steam login stream:', error);
|
||||
setIsConnected(false);
|
||||
isConnecting = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Disconnection function
|
||||
const disconnect = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
if (globalEventSource) {
|
||||
globalEventSource.close();
|
||||
globalEventSource = null;
|
||||
setIsConnected(false);
|
||||
console.log('Disconnected from Steam login stream');
|
||||
|
||||
|
||||
// Clear all listeners
|
||||
Object.keys(listeners).forEach(key => {
|
||||
listeners[key] = [];
|
||||
});
|
||||
|
||||
activeConnection = null;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -205,9 +244,17 @@ export const { use: useSteam, provider: SteamProvider } = createInitializedConte
|
||||
isConnected: () => isConnected()
|
||||
};
|
||||
|
||||
// Store the active connection
|
||||
activeConnection = connection;
|
||||
|
||||
// Clean up on context destruction
|
||||
onCleanup(() => {
|
||||
disconnect();
|
||||
// Instead of disconnecting on cleanup, we'll leave the connection
|
||||
// active for other components to use
|
||||
// Only disconnect if no components are using it
|
||||
if (!isConnected()) {
|
||||
disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
return connection;
|
||||
|
||||
1
packages/www/src/sst-env.d.ts
vendored
1
packages/www/src/sst-env.d.ts
vendored
@@ -7,7 +7,6 @@ interface ImportMetaEnv {
|
||||
readonly VITE_STAGE: string
|
||||
readonly VITE_AUTH_URL: string
|
||||
readonly VITE_ZERO_URL: string
|
||||
readonly VITE_STEAM_URL: string
|
||||
}
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
|
||||
@@ -28,6 +28,22 @@ type Props = {
|
||||
imageBackground?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders an SVG element displaying a QR code generated from a URI.
|
||||
*
|
||||
* This component creates a QR code matrix based on the provided URI and error correction level, then renders
|
||||
* the QR code using SVG elements. It highlights finder patterns and conditionally renders QR code dots,
|
||||
* while optionally embedding a logo in the center with a specified background and an adjustable clear area.
|
||||
*
|
||||
* @param ecl - The error correction level for the QR code (defaults to 'M').
|
||||
* @param size - The overall size (in pixels) of the QR code, including margins (defaults to 200).
|
||||
* @param uri - The URI to encode into the QR code.
|
||||
* @param clearArea - When true, reserves extra space in the QR code for an embedded logo.
|
||||
* @param image - An optional JSX element to render as a central logo within the QR code.
|
||||
* @param imageBackground - The background color for the logo area (defaults to 'transparent').
|
||||
*
|
||||
* @returns An SVG element representing the generated QR code.
|
||||
*/
|
||||
export function QRCode({
|
||||
ecl = 'M',
|
||||
size: sizeProp = 200,
|
||||
@@ -36,7 +52,7 @@ export function QRCode({
|
||||
image,
|
||||
imageBackground = 'transparent',
|
||||
}: Props) {
|
||||
const logoSize = clearArea ? 32 : 0;
|
||||
const logoSize = clearArea ? 38 : 0;
|
||||
const size = sizeProp - 10 * 2;
|
||||
|
||||
const dots = createMemo(() => {
|
||||
@@ -115,7 +131,6 @@ export function QRCode({
|
||||
(i < 7 && j > matrix.length - 8)
|
||||
)
|
||||
) {
|
||||
//if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
|
||||
if (
|
||||
image ||
|
||||
!(
|
||||
|
||||
@@ -4,7 +4,6 @@ import solidPlugin from "vite-plugin-solid";
|
||||
import { macaronVitePlugin } from "@macaron-css/vite";
|
||||
|
||||
export default defineConfig({
|
||||
//@ts-expect-error
|
||||
plugins: [macaronVitePlugin(), solidPlugin()],
|
||||
server: {
|
||||
port: 3000,
|
||||
|
||||
Reference in New Issue
Block a user