+606 -39

package-lock.json

reviewed

··· 16 16 "@sveltejs/adapter-static": "^3.0.10", 17 17 "@sveltejs/kit": "^2.49.1", 18 18 "@sveltejs/vite-plugin-svelte": "^6.2.1", 19 19 + "@types/sharp": "^0.31.1", 20 20 + "sharp": "^0.34.5", 19 21 "svelte": "^5.45.6", 20 22 "svelte-check": "^4.3.4", 21 23 "typescript": "^5.9.3", ··· 102 104 "dependencies": { 103 105 "@atproto/lexicon": "^0.6.0", 104 106 "zod": "^3.23.8" 107 107 + } 108 108 + }, 109 109 + "node_modules/@emnapi/runtime": { 110 110 + "version": "1.9.1", 111 111 + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", 112 112 + "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==", 113 113 + "dev": true, 114 114 + "license": "MIT", 115 115 + "optional": true, 116 116 + "dependencies": { 117 117 + "tslib": "^2.4.0" 105 118 } 106 119 }, 107 120 "node_modules/@esbuild/aix-ppc64": { ··· 544 557 "node": ">=18" 545 558 } 546 559 }, 560 560 + "node_modules/@img/colour": { 561 561 + "version": "1.1.0", 562 562 + "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", 563 563 + "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==", 564 564 + "dev": true, 565 565 + "license": "MIT", 566 566 + "engines": { 567 567 + "node": ">=18" 568 568 + } 569 569 + }, 570 570 + "node_modules/@img/sharp-darwin-arm64": { 571 571 + "version": "0.34.5", 572 572 + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", 573 573 + "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==", 574 574 + "cpu": [ 575 575 + "arm64" 576 576 + ], 577 577 + "dev": true, 578 578 + "license": "Apache-2.0", 579 579 + "optional": true, 580 580 + "os": [ 581 581 + "darwin" 582 582 + ], 583 583 + "engines": { 584 584 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 585 585 + }, 586 586 + "funding": { 587 587 + "url": "https://opencollective.com/libvips" 588 588 + }, 589 589 + "optionalDependencies": { 590 590 + "@img/sharp-libvips-darwin-arm64": "1.2.4" 591 591 + } 592 592 + }, 593 593 + "node_modules/@img/sharp-darwin-x64": { 594 594 + "version": "0.34.5", 595 595 + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", 596 596 + "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==", 597 597 + "cpu": [ 598 598 + "x64" 599 599 + ], 600 600 + "dev": true, 601 601 + "license": "Apache-2.0", 602 602 + "optional": true, 603 603 + "os": [ 604 604 + "darwin" 605 605 + ], 606 606 + "engines": { 607 607 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 608 608 + }, 609 609 + "funding": { 610 610 + "url": "https://opencollective.com/libvips" 611 611 + }, 612 612 + "optionalDependencies": { 613 613 + "@img/sharp-libvips-darwin-x64": "1.2.4" 614 614 + } 615 615 + }, 616 616 + "node_modules/@img/sharp-libvips-darwin-arm64": { 617 617 + "version": "1.2.4", 618 618 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", 619 619 + "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==", 620 620 + "cpu": [ 621 621 + "arm64" 622 622 + ], 623 623 + "dev": true, 624 624 + "license": "LGPL-3.0-or-later", 625 625 + "optional": true, 626 626 + "os": [ 627 627 + "darwin" 628 628 + ], 629 629 + "funding": { 630 630 + "url": "https://opencollective.com/libvips" 631 631 + } 632 632 + }, 633 633 + "node_modules/@img/sharp-libvips-darwin-x64": { 634 634 + "version": "1.2.4", 635 635 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", 636 636 + "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==", 637 637 + "cpu": [ 638 638 + "x64" 639 639 + ], 640 640 + "dev": true, 641 641 + "license": "LGPL-3.0-or-later", 642 642 + "optional": true, 643 643 + "os": [ 644 644 + "darwin" 645 645 + ], 646 646 + "funding": { 647 647 + "url": "https://opencollective.com/libvips" 648 648 + } 649 649 + }, 650 650 + "node_modules/@img/sharp-libvips-linux-arm": { 651 651 + "version": "1.2.4", 652 652 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", 653 653 + "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==", 654 654 + "cpu": [ 655 655 + "arm" 656 656 + ], 657 657 + "dev": true, 658 658 + "license": "LGPL-3.0-or-later", 659 659 + "optional": true, 660 660 + "os": [ 661 661 + "linux" 662 662 + ], 663 663 + "funding": { 664 664 + "url": "https://opencollective.com/libvips" 665 665 + } 666 666 + }, 667 667 + "node_modules/@img/sharp-libvips-linux-arm64": { 668 668 + "version": "1.2.4", 669 669 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", 670 670 + "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==", 671 671 + "cpu": [ 672 672 + "arm64" 673 673 + ], 674 674 + "dev": true, 675 675 + "license": "LGPL-3.0-or-later", 676 676 + "optional": true, 677 677 + "os": [ 678 678 + "linux" 679 679 + ], 680 680 + "funding": { 681 681 + "url": "https://opencollective.com/libvips" 682 682 + } 683 683 + }, 684 684 + "node_modules/@img/sharp-libvips-linux-ppc64": { 685 685 + "version": "1.2.4", 686 686 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", 687 687 + "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==", 688 688 + "cpu": [ 689 689 + "ppc64" 690 690 + ], 691 691 + "dev": true, 692 692 + "license": "LGPL-3.0-or-later", 693 693 + "optional": true, 694 694 + "os": [ 695 695 + "linux" 696 696 + ], 697 697 + "funding": { 698 698 + "url": "https://opencollective.com/libvips" 699 699 + } 700 700 + }, 701 701 + "node_modules/@img/sharp-libvips-linux-riscv64": { 702 702 + "version": "1.2.4", 703 703 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", 704 704 + "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==", 705 705 + "cpu": [ 706 706 + "riscv64" 707 707 + ], 708 708 + "dev": true, 709 709 + "license": "LGPL-3.0-or-later", 710 710 + "optional": true, 711 711 + "os": [ 712 712 + "linux" 713 713 + ], 714 714 + "funding": { 715 715 + "url": "https://opencollective.com/libvips" 716 716 + } 717 717 + }, 718 718 + "node_modules/@img/sharp-libvips-linux-s390x": { 719 719 + "version": "1.2.4", 720 720 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", 721 721 + "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==", 722 722 + "cpu": [ 723 723 + "s390x" 724 724 + ], 725 725 + "dev": true, 726 726 + "license": "LGPL-3.0-or-later", 727 727 + "optional": true, 728 728 + "os": [ 729 729 + "linux" 730 730 + ], 731 731 + "funding": { 732 732 + "url": "https://opencollective.com/libvips" 733 733 + } 734 734 + }, 735 735 + "node_modules/@img/sharp-libvips-linux-x64": { 736 736 + "version": "1.2.4", 737 737 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", 738 738 + "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==", 739 739 + "cpu": [ 740 740 + "x64" 741 741 + ], 742 742 + "dev": true, 743 743 + "license": "LGPL-3.0-or-later", 744 744 + "optional": true, 745 745 + "os": [ 746 746 + "linux" 747 747 + ], 748 748 + "funding": { 749 749 + "url": "https://opencollective.com/libvips" 750 750 + } 751 751 + }, 752 752 + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { 753 753 + "version": "1.2.4", 754 754 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", 755 755 + "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==", 756 756 + "cpu": [ 757 757 + "arm64" 758 758 + ], 759 759 + "dev": true, 760 760 + "license": "LGPL-3.0-or-later", 761 761 + "optional": true, 762 762 + "os": [ 763 763 + "linux" 764 764 + ], 765 765 + "funding": { 766 766 + "url": "https://opencollective.com/libvips" 767 767 + } 768 768 + }, 769 769 + "node_modules/@img/sharp-libvips-linuxmusl-x64": { 770 770 + "version": "1.2.4", 771 771 + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", 772 772 + "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==", 773 773 + "cpu": [ 774 774 + "x64" 775 775 + ], 776 776 + "dev": true, 777 777 + "license": "LGPL-3.0-or-later", 778 778 + "optional": true, 779 779 + "os": [ 780 780 + "linux" 781 781 + ], 782 782 + "funding": { 783 783 + "url": "https://opencollective.com/libvips" 784 784 + } 785 785 + }, 786 786 + "node_modules/@img/sharp-linux-arm": { 787 787 + "version": "0.34.5", 788 788 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", 789 789 + "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==", 790 790 + "cpu": [ 791 791 + "arm" 792 792 + ], 793 793 + "dev": true, 794 794 + "license": "Apache-2.0", 795 795 + "optional": true, 796 796 + "os": [ 797 797 + "linux" 798 798 + ], 799 799 + "engines": { 800 800 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 801 801 + }, 802 802 + "funding": { 803 803 + "url": "https://opencollective.com/libvips" 804 804 + }, 805 805 + "optionalDependencies": { 806 806 + "@img/sharp-libvips-linux-arm": "1.2.4" 807 807 + } 808 808 + }, 809 809 + "node_modules/@img/sharp-linux-arm64": { 810 810 + "version": "0.34.5", 811 811 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", 812 812 + "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==", 813 813 + "cpu": [ 814 814 + "arm64" 815 815 + ], 816 816 + "dev": true, 817 817 + "license": "Apache-2.0", 818 818 + "optional": true, 819 819 + "os": [ 820 820 + "linux" 821 821 + ], 822 822 + "engines": { 823 823 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 824 824 + }, 825 825 + "funding": { 826 826 + "url": "https://opencollective.com/libvips" 827 827 + }, 828 828 + "optionalDependencies": { 829 829 + "@img/sharp-libvips-linux-arm64": "1.2.4" 830 830 + } 831 831 + }, 832 832 + "node_modules/@img/sharp-linux-ppc64": { 833 833 + "version": "0.34.5", 834 834 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", 835 835 + "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==", 836 836 + "cpu": [ 837 837 + "ppc64" 838 838 + ], 839 839 + "dev": true, 840 840 + "license": "Apache-2.0", 841 841 + "optional": true, 842 842 + "os": [ 843 843 + "linux" 844 844 + ], 845 845 + "engines": { 846 846 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 847 847 + }, 848 848 + "funding": { 849 849 + "url": "https://opencollective.com/libvips" 850 850 + }, 851 851 + "optionalDependencies": { 852 852 + "@img/sharp-libvips-linux-ppc64": "1.2.4" 853 853 + } 854 854 + }, 855 855 + "node_modules/@img/sharp-linux-riscv64": { 856 856 + "version": "0.34.5", 857 857 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", 858 858 + "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==", 859 859 + "cpu": [ 860 860 + "riscv64" 861 861 + ], 862 862 + "dev": true, 863 863 + "license": "Apache-2.0", 864 864 + "optional": true, 865 865 + "os": [ 866 866 + "linux" 867 867 + ], 868 868 + "engines": { 869 869 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 870 870 + }, 871 871 + "funding": { 872 872 + "url": "https://opencollective.com/libvips" 873 873 + }, 874 874 + "optionalDependencies": { 875 875 + "@img/sharp-libvips-linux-riscv64": "1.2.4" 876 876 + } 877 877 + }, 878 878 + "node_modules/@img/sharp-linux-s390x": { 879 879 + "version": "0.34.5", 880 880 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", 881 881 + "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==", 882 882 + "cpu": [ 883 883 + "s390x" 884 884 + ], 885 885 + "dev": true, 886 886 + "license": "Apache-2.0", 887 887 + "optional": true, 888 888 + "os": [ 889 889 + "linux" 890 890 + ], 891 891 + "engines": { 892 892 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 893 893 + }, 894 894 + "funding": { 895 895 + "url": "https://opencollective.com/libvips" 896 896 + }, 897 897 + "optionalDependencies": { 898 898 + "@img/sharp-libvips-linux-s390x": "1.2.4" 899 899 + } 900 900 + }, 901 901 + "node_modules/@img/sharp-linux-x64": { 902 902 + "version": "0.34.5", 903 903 + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", 904 904 + "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==", 905 905 + "cpu": [ 906 906 + "x64" 907 907 + ], 908 908 + "dev": true, 909 909 + "license": "Apache-2.0", 910 910 + "optional": true, 911 911 + "os": [ 912 912 + "linux" 913 913 + ], 914 914 + "engines": { 915 915 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 916 916 + }, 917 917 + "funding": { 918 918 + "url": "https://opencollective.com/libvips" 919 919 + }, 920 920 + "optionalDependencies": { 921 921 + "@img/sharp-libvips-linux-x64": "1.2.4" 922 922 + } 923 923 + }, 924 924 + "node_modules/@img/sharp-linuxmusl-arm64": { 925 925 + "version": "0.34.5", 926 926 + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", 927 927 + "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==", 928 928 + "cpu": [ 929 929 + "arm64" 930 930 + ], 931 931 + "dev": true, 932 932 + "license": "Apache-2.0", 933 933 + "optional": true, 934 934 + "os": [ 935 935 + "linux" 936 936 + ], 937 937 + "engines": { 938 938 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 939 939 + }, 940 940 + "funding": { 941 941 + "url": "https://opencollective.com/libvips" 942 942 + }, 943 943 + "optionalDependencies": { 944 944 + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" 945 945 + } 946 946 + }, 947 947 + "node_modules/@img/sharp-linuxmusl-x64": { 948 948 + "version": "0.34.5", 949 949 + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", 950 950 + "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==", 951 951 + "cpu": [ 952 952 + "x64" 953 953 + ], 954 954 + "dev": true, 955 955 + "license": "Apache-2.0", 956 956 + "optional": true, 957 957 + "os": [ 958 958 + "linux" 959 959 + ], 960 960 + "engines": { 961 961 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 962 962 + }, 963 963 + "funding": { 964 964 + "url": "https://opencollective.com/libvips" 965 965 + }, 966 966 + "optionalDependencies": { 967 967 + "@img/sharp-libvips-linuxmusl-x64": "1.2.4" 968 968 + } 969 969 + }, 970 970 + "node_modules/@img/sharp-wasm32": { 971 971 + "version": "0.34.5", 972 972 + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", 973 973 + "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==", 974 974 + "cpu": [ 975 975 + "wasm32" 976 976 + ], 977 977 + "dev": true, 978 978 + "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", 979 979 + "optional": true, 980 980 + "dependencies": { 981 981 + "@emnapi/runtime": "^1.7.0" 982 982 + }, 983 983 + "engines": { 984 984 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 985 985 + }, 986 986 + "funding": { 987 987 + "url": "https://opencollective.com/libvips" 988 988 + } 989 989 + }, 990 990 + "node_modules/@img/sharp-win32-arm64": { 991 991 + "version": "0.34.5", 992 992 + "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", 993 993 + "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==", 994 994 + "cpu": [ 995 995 + "arm64" 996 996 + ], 997 997 + "dev": true, 998 998 + "license": "Apache-2.0 AND LGPL-3.0-or-later", 999 999 + "optional": true, 1000 1000 + "os": [ 1001 1001 + "win32" 1002 1002 + ], 1003 1003 + "engines": { 1004 1004 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 1005 1005 + }, 1006 1006 + "funding": { 1007 1007 + "url": "https://opencollective.com/libvips" 1008 1008 + } 1009 1009 + }, 1010 1010 + "node_modules/@img/sharp-win32-ia32": { 1011 1011 + "version": "0.34.5", 1012 1012 + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", 1013 1013 + "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==", 1014 1014 + "cpu": [ 1015 1015 + "ia32" 1016 1016 + ], 1017 1017 + "dev": true, 1018 1018 + "license": "Apache-2.0 AND LGPL-3.0-or-later", 1019 1019 + "optional": true, 1020 1020 + "os": [ 1021 1021 + "win32" 1022 1022 + ], 1023 1023 + "engines": { 1024 1024 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 1025 1025 + }, 1026 1026 + "funding": { 1027 1027 + "url": "https://opencollective.com/libvips" 1028 1028 + } 1029 1029 + }, 1030 1030 + "node_modules/@img/sharp-win32-x64": { 1031 1031 + "version": "0.34.5", 1032 1032 + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", 1033 1033 + "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", 1034 1034 + "cpu": [ 1035 1035 + "x64" 1036 1036 + ], 1037 1037 + "dev": true, 1038 1038 + "license": "Apache-2.0 AND LGPL-3.0-or-later", 1039 1039 + "optional": true, 1040 1040 + "os": [ 1041 1041 + "win32" 1042 1042 + ], 1043 1043 + "engines": { 1044 1044 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 1045 1045 + }, 1046 1046 + "funding": { 1047 1047 + "url": "https://opencollective.com/libvips" 1048 1048 + } 1049 1049 + }, 547 1050 "node_modules/@jridgewell/gen-mapping": { 548 1051 "version": "0.3.13", 549 1052 "dev": true, ··· 679 1182 "arm" 680 1183 ], 681 1184 "dev": true, 682 682 - "libc": [ 683 683 - "glibc" 684 684 - ], 685 1185 "license": "MIT", 686 1186 "optional": true, 687 1187 "os": [ ··· 696 1196 "arm" 697 1197 ], 698 1198 "dev": true, 699 699 - "libc": [ 700 700 - "musl" 701 701 - ], 702 1199 "license": "MIT", 703 1200 "optional": true, 704 1201 "os": [ ··· 713 1210 "arm64" 714 1211 ], 715 1212 "dev": true, 716 716 - "libc": [ 717 717 - "glibc" 718 718 - ], 719 1213 "license": "MIT", 720 1214 "optional": true, 721 1215 "os": [ ··· 730 1224 "arm64" 731 1225 ], 732 1226 "dev": true, 733 733 - "libc": [ 734 734 - "musl" 735 735 - ], 736 1227 "license": "MIT", 737 1228 "optional": true, 738 1229 "os": [ ··· 747 1238 "loong64" 748 1239 ], 749 1240 "dev": true, 750 750 - "libc": [ 751 751 - "glibc" 752 752 - ], 753 1241 "license": "MIT", 754 1242 "optional": true, 755 1243 "os": [ ··· 764 1252 "loong64" 765 1253 ], 766 1254 "dev": true, 767 767 - "libc": [ 768 768 - "musl" 769 769 - ], 770 1255 "license": "MIT", 771 1256 "optional": true, 772 1257 "os": [ ··· 781 1266 "ppc64" 782 1267 ], 783 1268 "dev": true, 784 784 - "libc": [ 785 785 - "glibc" 786 786 - ], 787 1269 "license": "MIT", 788 1270 "optional": true, 789 1271 "os": [ ··· 798 1280 "ppc64" 799 1281 ], 800 1282 "dev": true, 801 801 - "libc": [ 802 802 - "musl" 803 803 - ], 804 1283 "license": "MIT", 805 1284 "optional": true, 806 1285 "os": [ ··· 815 1294 "riscv64" 816 1295 ], 817 1296 "dev": true, 818 818 - "libc": [ 819 819 - "glibc" 820 820 - ], 821 1297 "license": "MIT", 822 1298 "optional": true, 823 1299 "os": [ ··· 832 1308 "riscv64" 833 1309 ], 834 1310 "dev": true, 835 835 - "libc": [ 836 836 - "musl" 837 837 - ], 838 1311 "license": "MIT", 839 1312 "optional": true, 840 1313 "os": [ ··· 849 1322 "s390x" 850 1323 ], 851 1324 "dev": true, 852 852 - "libc": [ 853 853 - "glibc" 854 854 - ], 855 1325 "license": "MIT", 856 1326 "optional": true, 857 1327 "os": [ ··· 866 1336 "x64" 867 1337 ], 868 1338 "dev": true, 869 869 - "libc": [ 870 870 - "glibc" 871 871 - ], 872 1339 "license": "MIT", 873 1340 "optional": true, 874 1341 "os": [ ··· 883 1350 "x64" 884 1351 ], 885 1352 "dev": true, 886 886 - "libc": [ 887 887 - "musl" 888 888 - ], 889 1353 "license": "MIT", 890 1354 "optional": true, 891 1355 "os": [ ··· 1011 1475 "version": "2.55.0", 1012 1476 "dev": true, 1013 1477 "license": "MIT", 1478 1478 + "peer": true, 1014 1479 "dependencies": { 1015 1480 "@standard-schema/spec": "^1.0.0", 1016 1481 "@sveltejs/acorn-typescript": "^1.0.5", ··· 1051 1516 "version": "6.2.4", 1052 1517 "dev": true, 1053 1518 "license": "MIT", 1519 1519 + "peer": true, 1054 1520 "dependencies": { 1055 1521 "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", 1056 1522 "deepmerge": "^4.3.1", ··· 1091 1557 "version": "1.0.8", 1092 1558 "dev": true, 1093 1559 "license": "MIT" 1560 1560 + }, 1561 1561 + "node_modules/@types/node": { 1562 1562 + "version": "25.5.0", 1563 1563 + "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz", 1564 1564 + "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==", 1565 1565 + "dev": true, 1566 1566 + "license": "MIT", 1567 1567 + "peer": true, 1568 1568 + "dependencies": { 1569 1569 + "undici-types": "~7.18.0" 1570 1570 + } 1571 1571 + }, 1572 1572 + "node_modules/@types/sharp": { 1573 1573 + "version": "0.31.1", 1574 1574 + "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.31.1.tgz", 1575 1575 + "integrity": "sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==", 1576 1576 + "dev": true, 1577 1577 + "license": "MIT", 1578 1578 + "dependencies": { 1579 1579 + "@types/node": "*" 1580 1580 + } 1094 1581 }, 1095 1582 "node_modules/@types/trusted-types": { 1096 1583 "version": "2.0.7", ··· 1113 1600 "version": "8.16.0", 1114 1601 "dev": true, 1115 1602 "license": "MIT", 1603 1603 + "peer": true, 1116 1604 "bin": { 1117 1605 "acorn": "bin/acorn" 1118 1606 }, ··· 1178 1666 "license": "MIT", 1179 1667 "engines": { 1180 1668 "node": ">=0.10.0" 1669 1669 + } 1670 1670 + }, 1671 1671 + "node_modules/detect-libc": { 1672 1672 + "version": "2.1.2", 1673 1673 + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", 1674 1674 + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", 1675 1675 + "dev": true, 1676 1676 + "license": "Apache-2.0", 1677 1677 + "engines": { 1678 1678 + "node": ">=8" 1181 1679 } 1182 1680 }, 1183 1681 "node_modules/devalue": { ··· 1365 1863 "version": "4.0.4", 1366 1864 "dev": true, 1367 1865 "license": "MIT", 1866 1866 + "peer": true, 1368 1867 "engines": { 1369 1868 "node": ">=12" 1370 1869 }, ··· 1465 1964 "node": ">=6" 1466 1965 } 1467 1966 }, 1967 1967 + "node_modules/semver": { 1968 1968 + "version": "7.7.4", 1969 1969 + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", 1970 1970 + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", 1971 1971 + "dev": true, 1972 1972 + "license": "ISC", 1973 1973 + "bin": { 1974 1974 + "semver": "bin/semver.js" 1975 1975 + }, 1976 1976 + "engines": { 1977 1977 + "node": ">=10" 1978 1978 + } 1979 1979 + }, 1468 1980 "node_modules/set-cookie-parser": { 1469 1981 "version": "3.1.0", 1470 1982 "dev": true, 1471 1983 "license": "MIT" 1472 1984 }, 1985 1985 + "node_modules/sharp": { 1986 1986 + "version": "0.34.5", 1987 1987 + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", 1988 1988 + "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==", 1989 1989 + "dev": true, 1990 1990 + "hasInstallScript": true, 1991 1991 + "license": "Apache-2.0", 1992 1992 + "dependencies": { 1993 1993 + "@img/colour": "^1.0.0", 1994 1994 + "detect-libc": "^2.1.2", 1995 1995 + "semver": "^7.7.3" 1996 1996 + }, 1997 1997 + "engines": { 1998 1998 + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 1999 1999 + }, 2000 2000 + "funding": { 2001 2001 + "url": "https://opencollective.com/libvips" 2002 2002 + }, 2003 2003 + "optionalDependencies": { 2004 2004 + "@img/sharp-darwin-arm64": "0.34.5", 2005 2005 + "@img/sharp-darwin-x64": "0.34.5", 2006 2006 + "@img/sharp-libvips-darwin-arm64": "1.2.4", 2007 2007 + "@img/sharp-libvips-darwin-x64": "1.2.4", 2008 2008 + "@img/sharp-libvips-linux-arm": "1.2.4", 2009 2009 + "@img/sharp-libvips-linux-arm64": "1.2.4", 2010 2010 + "@img/sharp-libvips-linux-ppc64": "1.2.4", 2011 2011 + "@img/sharp-libvips-linux-riscv64": "1.2.4", 2012 2012 + "@img/sharp-libvips-linux-s390x": "1.2.4", 2013 2013 + "@img/sharp-libvips-linux-x64": "1.2.4", 2014 2014 + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", 2015 2015 + "@img/sharp-libvips-linuxmusl-x64": "1.2.4", 2016 2016 + "@img/sharp-linux-arm": "0.34.5", 2017 2017 + "@img/sharp-linux-arm64": "0.34.5", 2018 2018 + "@img/sharp-linux-ppc64": "0.34.5", 2019 2019 + "@img/sharp-linux-riscv64": "0.34.5", 2020 2020 + "@img/sharp-linux-s390x": "0.34.5", 2021 2021 + "@img/sharp-linux-x64": "0.34.5", 2022 2022 + "@img/sharp-linuxmusl-arm64": "0.34.5", 2023 2023 + "@img/sharp-linuxmusl-x64": "0.34.5", 2024 2024 + "@img/sharp-wasm32": "0.34.5", 2025 2025 + "@img/sharp-win32-arm64": "0.34.5", 2026 2026 + "@img/sharp-win32-ia32": "0.34.5", 2027 2027 + "@img/sharp-win32-x64": "0.34.5" 2028 2028 + } 2029 2029 + }, 1473 2030 "node_modules/sirv": { 1474 2031 "version": "3.0.2", 1475 2032 "dev": true, ··· 1495 2052 "version": "5.55.1", 1496 2053 "dev": true, 1497 2054 "license": "MIT", 2055 2055 + "peer": true, 1498 2056 "dependencies": { 1499 2057 "@jridgewell/remapping": "^2.3.4", 1500 2058 "@jridgewell/sourcemap-codec": "^1.5.0", ··· 1581 2139 "version": "5.9.3", 1582 2140 "dev": true, 1583 2141 "license": "Apache-2.0", 2142 2142 + "peer": true, 1584 2143 "bin": { 1585 2144 "tsc": "bin/tsc", 1586 2145 "tsserver": "bin/tsserver" ··· 1598 2157 "multiformats": "^9.4.2" 1599 2158 } 1600 2159 }, 2160 2160 + "node_modules/undici-types": { 2161 2161 + "version": "7.18.2", 2162 2162 + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", 2163 2163 + "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", 2164 2164 + "dev": true, 2165 2165 + "license": "MIT" 2166 2166 + }, 1601 2167 "node_modules/unicode-segmenter": { 1602 2168 "version": "0.14.5", 1603 2169 "resolved": "https://registry.npmjs.org/unicode-segmenter/-/unicode-segmenter-0.14.5.tgz", ··· 1608 2174 "version": "7.3.1", 1609 2175 "dev": true, 1610 2176 "license": "MIT", 2177 2177 + "peer": true, 1611 2178 "dependencies": { 1612 2179 "esbuild": "^0.27.0", 1613 2180 "fdir": "^6.5.0",

+2

package.json

reviewed

··· 17 17 "@sveltejs/adapter-static": "^3.0.10", 18 18 "@sveltejs/kit": "^2.49.1", 19 19 "@sveltejs/vite-plugin-svelte": "^6.2.1", 20 20 + "@types/sharp": "^0.31.1", 21 21 + "sharp": "^0.34.5", 20 22 "svelte": "^5.45.6", 21 23 "svelte-check": "^4.3.4", 22 24 "typescript": "^5.9.3",

+158

scripts/create-game-sprites.mjs

reviewed

··· 1 1 + import sharp from 'sharp'; 2 2 + import { mkdir } from 'fs/promises'; 3 3 + 4 4 + async function createPresent(outPath, color = '#FF6B2C', ribbonColor = '#FFD93D') { 5 5 + // Create a 24x24 pixel-art present (gift box) 6 6 + const w = 24, h = 24; 7 7 + const pixels = Buffer.alloc(w * h * 4, 0); // RGBA 8 8 + 9 9 + function setPixel(x, y, r, g, b, a = 255) { 10 10 + if (x < 0 || x >= w || y < 0 || y >= h) return; 11 11 + const idx = (y * w + x) * 4; 12 12 + pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = a; 13 13 + } 14 14 + 15 15 + function hexToRgb(hex) { 16 16 + const n = parseInt(hex.slice(1), 16); 17 17 + return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; 18 18 + } 19 19 + 20 20 + const [cr, cg, cb] = hexToRgb(color); 21 21 + const [rr, rg, rb] = hexToRgb(ribbonColor); 22 22 + 23 23 + // Box body (8x8 to 16x20) 24 24 + for (let y = 6; y < 22; y++) { 25 25 + for (let x = 4; x < 20; x++) { 26 26 + setPixel(x, y, cr, cg, cb); 27 27 + } 28 28 + } 29 29 + 30 30 + // Lid top (wider, 2x20 to 22x6) 31 31 + for (let y = 4; y < 8; y++) { 32 32 + for (let x = 2; x < 22; x++) { 33 33 + setPixel(x, y, Math.min(cr + 40, 255), Math.min(cg + 20, 255), cb); 34 34 + } 35 35 + } 36 36 + 37 37 + // Vertical ribbon 38 38 + for (let y = 4; y < 22; y++) { 39 39 + setPixel(11, y, rr, rg, rb); 40 40 + setPixel(12, y, rr, rg, rb); 41 41 + } 42 42 + 43 43 + // Horizontal ribbon 44 44 + for (let x = 2; x < 22; x++) { 45 45 + setPixel(x, 12, rr, rg, rb); 46 46 + setPixel(x, 13, rr, rg, rb); 47 47 + } 48 48 + 49 49 + // Bow on top 50 50 + for (let x = 8; x < 16; x++) { 51 51 + setPixel(x, 2, rr, rg, rb); 52 52 + setPixel(x, 3, rr, rg, rb); 53 53 + } 54 54 + setPixel(9, 1, rr, rg, rb); 55 55 + setPixel(14, 1, rr, rg, rb); 56 56 + 57 57 + // Outline 58 58 + const outline = [0, 0, 0]; 59 59 + for (let x = 4; x < 20; x++) { setPixel(x, 3, ...outline); setPixel(x, 22, ...outline); } 60 60 + for (let x = 2; x < 22; x++) { setPixel(x, 3, ...outline); setPixel(x, 7, ...outline); } 61 61 + for (let y = 4; y < 8; y++) { setPixel(2, y, ...outline); setPixel(21, y, ...outline); } 62 62 + for (let y = 7; y < 22; y++) { setPixel(3, y, ...outline); setPixel(20, y, ...outline); } 63 63 + 64 64 + await sharp(pixels, { raw: { width: w, height: h, channels: 4 } }) 65 65 + .png() 66 66 + .toFile(outPath); 67 67 + } 68 68 + 69 69 + async function createTree(outPath) { 70 70 + const w = 32, h = 40; 71 71 + const pixels = Buffer.alloc(w * h * 4, 0); 72 72 + 73 73 + function setPixel(x, y, r, g, b, a = 255) { 74 74 + if (x < 0 || x >= w || y < 0 || y >= h) return; 75 75 + const idx = (y * w + x) * 4; 76 76 + pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = a; 77 77 + } 78 78 + 79 79 + // Trunk (brown) 80 80 + for (let y = 24; y < 40; y++) { 81 81 + for (let x = 13; x < 19; x++) { 82 82 + setPixel(x, y, 101, 67, 33); 83 83 + } 84 84 + } 85 85 + 86 86 + // Foliage layers (green with variation) 87 87 + const greens = [[34, 139, 34], [0, 100, 0], [50, 160, 50]]; 88 88 + // Bottom layer (widest) 89 89 + for (let y = 14; y < 28; y++) { 90 90 + const spread = Math.max(0, 14 - Math.abs(y - 20)); 91 91 + for (let x = 16 - spread; x < 16 + spread; x++) { 92 92 + const gi = (x + y) % 3; 93 93 + setPixel(x, y, greens[gi][0], greens[gi][1], greens[gi][2]); 94 94 + } 95 95 + } 96 96 + // Top layer 97 97 + for (let y = 4; y < 18; y++) { 98 98 + const spread = Math.max(0, 10 - Math.abs(y - 10)); 99 99 + for (let x = 16 - spread; x < 16 + spread; x++) { 100 100 + const gi = (x + y) % 3; 101 101 + setPixel(x, y, greens[gi][0], greens[gi][1], greens[gi][2]); 102 102 + } 103 103 + } 104 104 + 105 105 + await sharp(pixels, { raw: { width: w, height: h, channels: 4 } }).png().toFile(outPath); 106 106 + } 107 107 + 108 108 + async function createBush(outPath) { 109 109 + const w = 24, h = 16; 110 110 + const pixels = Buffer.alloc(w * h * 4, 0); 111 111 + 112 112 + function setPixel(x, y, r, g, b, a = 255) { 113 113 + if (x < 0 || x >= w || y < 0 || y >= h) return; 114 114 + const idx = (y * w + x) * 4; 115 115 + pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = a; 116 116 + } 117 117 + 118 118 + const greens = [[34, 139, 34], [0, 100, 0], [50, 160, 50]]; 119 119 + for (let y = 2; y < 14; y++) { 120 120 + const spread = Math.max(0, 10 - Math.abs(y - 8) * 1.5); 121 121 + for (let x = Math.floor(12 - spread); x < Math.ceil(12 + spread); x++) { 122 122 + const gi = (x * 3 + y * 7) % 3; 123 123 + setPixel(x, y, greens[gi][0], greens[gi][1], greens[gi][2]); 124 124 + } 125 125 + } 126 126 + 127 127 + await sharp(pixels, { raw: { width: w, height: h, channels: 4 } }).png().toFile(outPath); 128 128 + } 129 129 + 130 130 + async function main() { 131 131 + await mkdir('static/sprites/present', { recursive: true }); 132 132 + await mkdir('static/sprites/scenery', { recursive: true }); 133 133 + await mkdir('static/sprites/ship', { recursive: true }); 134 134 + await mkdir('static/sprites/terrain', { recursive: true }); 135 135 + 136 136 + // Create presents in different colors 137 137 + await createPresent('static/sprites/present/closed.png', '#FF6B2C', '#FFD93D'); 138 138 + await createPresent('static/sprites/present/closed-blue.png', '#4488FF', '#FFD93D'); 139 139 + await createPresent('static/sprites/present/closed-green.png', '#44BB44', '#FF6B2C'); 140 140 + console.log('Created present sprites'); 141 141 + 142 142 + // Create scenery 143 143 + await createTree('static/sprites/scenery/tree-1.png'); 144 144 + await createBush('static/sprites/scenery/bush-1.png'); 145 145 + console.log('Created scenery sprites'); 146 146 + 147 147 + // Copy ship.png to sprites dir 148 148 + await sharp('static/ship.png').png().toFile('static/sprites/ship/ship.png'); 149 149 + console.log('Copied ship sprite'); 150 150 + 151 151 + // Create a terrain tile from existing background 152 152 + await sharp('static/background.gif').resize(64, 64, { fit: 'cover' }).png().toFile('static/sprites/terrain/grass-tile.png'); 153 153 + console.log('Created terrain tile'); 154 154 + 155 155 + console.log('\nAll game sprites ready!'); 156 156 + } 157 157 + 158 158 + main().catch(console.error);

+85

scripts/extract-items.mjs

reviewed

··· 1 1 + import sharp from 'sharp'; 2 2 + import { mkdir } from 'fs/promises'; 3 3 + import { join } from 'path'; 4 4 + 5 5 + const ITEMS_SHEET = 'source-files/Sega Genesis - ToeJam & Earl - Miscellaneous - Items & Scenery.png'; 6 6 + const OPENING_SHEET = 'source-files/Sega Genesis - ToeJam & Earl - Miscellaneous - Opening & Ending.png'; 7 7 + 8 8 + // For sheets with alpha, detect sprites by non-transparent regions 9 9 + async function findAlphaSprites(sheetPath) { 10 10 + const { data, info } = await sharp(sheetPath).ensureAlpha().raw().toBuffer({ resolveWithObject: true }); 11 11 + const w = info.width, h = info.height; 12 12 + 13 13 + // Find row blocks (rows with any non-transparent pixels) 14 14 + const blocks = []; 15 15 + let inBlock = false, blockStart = -1; 16 16 + 17 17 + for (let y = 0; y < h; y++) { 18 18 + let hasContent = false; 19 19 + for (let x = 0; x < w; x++) { 20 20 + if (data[(y * w + x) * 4 + 3] > 10) { hasContent = true; break; } 21 21 + } 22 22 + if (hasContent && !inBlock) { blockStart = y; inBlock = true; } 23 23 + if (!hasContent && inBlock) { blocks.push({ start: blockStart, end: y - 1, height: y - blockStart }); inBlock = false; } 24 24 + } 25 25 + if (inBlock) blocks.push({ start: blockStart, end: h - 1, height: h - blockStart }); 26 26 + 27 27 + // For each block, find column sprites 28 28 + const allSprites = []; 29 29 + for (const block of blocks) { 30 30 + let inCol = false, colStart = -1; 31 31 + for (let x = 0; x < w; x++) { 32 32 + let colHasContent = false; 33 33 + for (let y = block.start; y <= block.end; y++) { 34 34 + if (data[(y * w + x) * 4 + 3] > 10) { colHasContent = true; break; } 35 35 + } 36 36 + if (colHasContent && !inCol) { colStart = x; inCol = true; } 37 37 + if (!colHasContent && inCol) { 38 38 + allSprites.push({ x: colStart, y: block.start, w: x - colStart, h: block.height }); 39 39 + inCol = false; 40 40 + } 41 41 + } 42 42 + if (inCol) allSprites.push({ x: colStart, y: block.start, w: w - colStart, h: block.height }); 43 43 + } 44 44 + 45 45 + return allSprites; 46 46 + } 47 47 + 48 48 + async function extractWithAlpha(sheetPath, region, outPath) { 49 49 + await sharp(sheetPath) 50 50 + .extract({ left: region.x, top: region.y, width: region.w, height: region.h }) 51 51 + .png() 52 52 + .toFile(outPath); 53 53 + } 54 54 + 55 55 + async function main() { 56 56 + // --- ITEMS & SCENERY --- 57 57 + console.log('=== Items & Scenery ==='); 58 58 + const itemSprites = await findAlphaSprites(ITEMS_SHEET); 59 59 + console.log(`Found ${itemSprites.length} sprites`); 60 60 + 61 61 + const itemsDir = '/tmp/items-alpha'; 62 62 + await mkdir(itemsDir, { recursive: true }); 63 63 + 64 64 + for (let i = 0; i < itemSprites.length; i++) { 65 65 + const s = itemSprites[i]; 66 66 + console.log(` Item ${i}: ${s.w}x${s.h} @ (${s.x},${s.y})`); 67 67 + await extractWithAlpha(ITEMS_SHEET, s, join(itemsDir, `item-${i}.png`)); 68 68 + } 69 69 + 70 70 + // --- OPENING & ENDING (for ship) --- 71 71 + console.log('\n=== Opening & Ending ==='); 72 72 + const openingSprites = await findAlphaSprites(OPENING_SHEET); 73 73 + console.log(`Found ${openingSprites.length} sprites`); 74 74 + 75 75 + const openDir = '/tmp/opening-sprites'; 76 76 + await mkdir(openDir, { recursive: true }); 77 77 + 78 78 + for (let i = 0; i < Math.min(openingSprites.length, 30); i++) { 79 79 + const s = openingSprites[i]; 80 80 + console.log(` Opening ${i}: ${s.w}x${s.h} @ (${s.x},${s.y})`); 81 81 + await extractWithAlpha(OPENING_SHEET, s, join(openDir, `opening-${i}.png`)); 82 82 + } 83 83 + } 84 84 + 85 85 + main().catch(console.error);

+302

scripts/extract-sprites.mjs

reviewed

··· 1 1 + import sharp from 'sharp'; 2 2 + import { writeFile, mkdir } from 'fs/promises'; 3 3 + import { join } from 'path'; 4 4 + 5 5 + const EARL_SHEET = 'source-files/Sega Genesis - ToeJam & Earl - Playable Characters - Earl.png'; 6 6 + const ITEMS_SHEET = 'source-files/Sega Genesis - ToeJam & Earl - Miscellaneous - Items & Scenery.png'; 7 7 + const OPENING_SHEET = 'source-files/Sega Genesis - ToeJam & Earl - Miscellaneous - Opening & Ending.png'; 8 8 + 9 9 + const OUT_DIR = 'static/sprites'; 10 10 + 11 11 + // Background colors used in the sprite sheets 12 12 + const BG_COLORS = [ 13 13 + [0, 130, 132], // teal 14 14 + [0, 128, 128], // dark teal 15 15 + [107, 0, 107], // purple (separator/label rows) 16 16 + ]; 17 17 + 18 18 + function isBgColor(r, g, b) { 19 19 + return BG_COLORS.some(([br, bg, bb]) => r === br && g === bg && b === bb); 20 20 + } 21 21 + 22 22 + async function loadSheet(path) { 23 23 + const result = await sharp(path).raw().toBuffer({ resolveWithObject: true }); 24 24 + return { 25 25 + data: result.data, 26 26 + width: result.info.width, 27 27 + height: result.info.height, 28 28 + channels: result.info.channels, 29 29 + }; 30 30 + } 31 31 + 32 32 + function findSpriteBlocks(sheet) { 33 33 + const { data, width, height, channels } = sheet; 34 34 + const threshold = Math.max(3, Math.floor(width * 0.01)); 35 35 + const blocks = []; 36 36 + let inBlock = false; 37 37 + let blockStart = -1; 38 38 + 39 39 + for (let y = 0; y < height; y++) { 40 40 + let nonBg = 0; 41 41 + for (let x = 0; x < width; x++) { 42 42 + const idx = (y * width + x) * channels; 43 43 + if (!isBgColor(data[idx], data[idx + 1], data[idx + 2])) { 44 44 + nonBg++; 45 45 + if (nonBg > threshold) break; 46 46 + } 47 47 + } 48 48 + const hasContent = nonBg > threshold; 49 49 + if (hasContent && !inBlock) { 50 50 + blockStart = y; 51 51 + inBlock = true; 52 52 + } 53 53 + if (!hasContent && inBlock) { 54 54 + blocks.push({ start: blockStart, end: y - 1, height: y - blockStart }); 55 55 + inBlock = false; 56 56 + } 57 57 + } 58 58 + if (inBlock) blocks.push({ start: blockStart, end: height - 1, height: height - blockStart }); 59 59 + return blocks; 60 60 + } 61 61 + 62 62 + function findSpritesInBlock(sheet, block) { 63 63 + const { data, width, channels } = sheet; 64 64 + const sprites = []; 65 65 + let inCol = false; 66 66 + let colStart = -1; 67 67 + 68 68 + for (let x = 0; x < width; x++) { 69 69 + let colNonBg = 0; 70 70 + for (let y = block.start; y <= block.end; y++) { 71 71 + const idx = (y * width + x) * channels; 72 72 + if (!isBgColor(data[idx], data[idx + 1], data[idx + 2])) { 73 73 + colNonBg++; 74 74 + if (colNonBg > 1) break; 75 75 + } 76 76 + } 77 77 + if (colNonBg > 1 && !inCol) { 78 78 + colStart = x; 79 79 + inCol = true; 80 80 + } 81 81 + if (colNonBg <= 1 && inCol) { 82 82 + sprites.push({ x: colStart, y: block.start, w: x - colStart, h: block.height }); 83 83 + inCol = false; 84 84 + } 85 85 + } 86 86 + if (inCol) sprites.push({ x: colStart, y: block.start, w: width - colStart, h: block.height }); 87 87 + return sprites; 88 88 + } 89 89 + 90 90 + async function extractSprite(sheetPath, region, outPath, uniformSize) { 91 91 + let pipeline = sharp(sheetPath).extract({ 92 92 + left: region.x, 93 93 + top: region.y, 94 94 + width: region.w, 95 95 + height: region.h, 96 96 + }); 97 97 + 98 98 + // Convert teal/dark-teal backgrounds to transparency 99 99 + // We'll use raw pixel manipulation for this 100 100 + const { data, info } = await pipeline.ensureAlpha().raw().toBuffer({ resolveWithObject: true }); 101 101 + const buf = Buffer.from(data); 102 102 + 103 103 + for (let i = 0; i < buf.length; i += 4) { 104 104 + const r = buf[i], g = buf[i + 1], b = buf[i + 2]; 105 105 + if (isBgColor(r, g, b)) { 106 106 + buf[i + 3] = 0; // make transparent 107 107 + } 108 108 + } 109 109 + 110 110 + let output = sharp(buf, { raw: { width: info.width, height: info.height, channels: 4 } }); 111 111 + 112 112 + if (uniformSize) { 113 113 + // Center the sprite in a uniform canvas 114 114 + const { width: uw, height: uh } = uniformSize; 115 115 + const offsetX = Math.floor((uw - info.width) / 2); 116 116 + const offsetY = uh - info.height; // bottom-align sprites (feet on ground) 117 117 + 118 118 + output = output.extend({ 119 119 + top: offsetY, 120 120 + bottom: 0, 121 121 + left: offsetX, 122 122 + right: uw - info.width - offsetX, 123 123 + background: { r: 0, g: 0, b: 0, alpha: 0 }, 124 124 + }); 125 125 + } 126 126 + 127 127 + await output.png().toFile(outPath); 128 128 + } 129 129 + 130 130 + async function analyzeAndExtractEarl() { 131 131 + console.log('=== Analyzing Earl sprite sheet ==='); 132 132 + const sheet = await loadSheet(EARL_SHEET); 133 133 + console.log(`Sheet: ${sheet.width}x${sheet.height}, ${sheet.channels}ch`); 134 134 + 135 135 + const blocks = findSpriteBlocks(sheet); 136 136 + console.log(`Found ${blocks.length} sprite blocks:`); 137 137 + 138 138 + const allSprites = []; 139 139 + for (let i = 0; i < blocks.length; i++) { 140 140 + const block = blocks[i]; 141 141 + const sprites = findSpritesInBlock(sheet, block); 142 142 + console.log(` Block ${i}: y=${block.start}-${block.end} (h=${block.height}), ${sprites.length} sprites`); 143 143 + sprites.forEach((s, j) => { 144 144 + console.log(` S${j}: ${s.w}x${s.h} @ (${s.x},${s.y})`); 145 145 + }); 146 146 + allSprites.push({ block, sprites }); 147 147 + } 148 148 + 149 149 + return allSprites; 150 150 + } 151 151 + 152 152 + async function analyzeAndExtractItems() { 153 153 + console.log('\n=== Analyzing Items & Scenery sheet ==='); 154 154 + const sheet = await loadSheet(ITEMS_SHEET); 155 155 + console.log(`Sheet: ${sheet.width}x${sheet.height}, ${sheet.channels}ch`); 156 156 + 157 157 + const blocks = findSpriteBlocks(sheet); 158 158 + console.log(`Found ${blocks.length} sprite blocks:`); 159 159 + 160 160 + for (let i = 0; i < blocks.length; i++) { 161 161 + const block = blocks[i]; 162 162 + const sprites = findSpritesInBlock(sheet, block); 163 163 + console.log(` Block ${i}: y=${block.start}-${block.end} (h=${block.height}), ${sprites.length} sprites`); 164 164 + sprites.forEach((s, j) => { 165 165 + console.log(` S${j}: ${s.w}x${s.h} @ (${s.x},${s.y})`); 166 166 + }); 167 167 + } 168 168 + } 169 169 + 170 170 + async function extractAllFromBlock(sheetPath, block, sprites, outDir, prefix) { 171 171 + await mkdir(outDir, { recursive: true }); 172 172 + 173 173 + // Find max dimensions for uniform sizing 174 174 + const maxW = Math.max(...sprites.map(s => s.w)); 175 175 + const maxH = block.height; 176 176 + const uniformSize = { width: maxW, height: maxH }; 177 177 + 178 178 + for (let i = 0; i < sprites.length; i++) { 179 179 + const outPath = join(outDir, `${prefix}-${i + 1}.png`); 180 180 + await extractSprite(sheetPath, sprites[i], outPath, uniformSize); 181 181 + } 182 182 + 183 183 + console.log(` Extracted ${sprites.length} sprites to ${outDir} at ${maxW}x${maxH}`); 184 184 + } 185 185 + 186 186 + async function main() { 187 187 + const earlData = await analyzeAndExtractEarl(); 188 188 + 189 189 + // Filter to content blocks only (skip label rows with h<=10) 190 190 + const contentBlocks = earlData.filter(b => b.block.height > 10 && b.sprites.length > 0); 191 191 + console.log(`\n=== ${contentBlocks.length} content blocks found ===`); 192 192 + 193 193 + // Extract ALL content blocks to temp dir for inspection 194 194 + const tempDir = '/tmp/earl-all-sprites'; 195 195 + await mkdir(tempDir, { recursive: true }); 196 196 + 197 197 + for (let i = 0; i < contentBlocks.length; i++) { 198 198 + const { block, sprites } = contentBlocks[i]; 199 199 + const blockDir = join(tempDir, `block${i}_h${block.height}_n${sprites.length}`); 200 200 + await extractAllFromBlock(EARL_SHEET, block, sprites, blockDir, 'frame'); 201 201 + console.log(` Block ${i} (y=${block.start}, h=${block.height}): ${sprites.length} sprites`); 202 202 + } 203 203 + 204 204 + // --- EARL WALK CYCLE EXTRACTION --- 205 205 + // Based on analysis: 206 206 + // Block 3 (y=81, h=40, 13 sprites) and Block 4 (y=123, h=40, 14 sprites) are walk cycles 207 207 + // Block 0 (y=2, h=44, 10 sprites) contains idle/standing poses 208 208 + // For a top-down game we need: walk-right, walk-left, walk-up, walk-down, idle 209 209 + 210 210 + // Extract block 3 (walk direction 1) - selecting 4 evenly-spaced frames for walk cycle 211 211 + const block3 = contentBlocks.find(b => b.block.start === 81); 212 212 + const block4 = contentBlocks.find(b => b.block.start === 123); 213 213 + const block0 = contentBlocks.find(b => b.block.start === 2); 214 214 + 215 215 + if (block3 && block4 && block0) { 216 216 + const earlDir = join(OUT_DIR, 'earl'); 217 217 + await mkdir(earlDir, { recursive: true }); 218 218 + 219 219 + const maxW3 = Math.max(...block3.sprites.map(s => s.w)); 220 220 + const maxW4 = Math.max(...block4.sprites.map(s => s.w)); 221 221 + const maxW0 = Math.max(...block0.sprites.map(s => s.w)); 222 222 + const uniformW = Math.max(maxW3, maxW4, maxW0); 223 223 + const uniformH = Math.max(block3.block.height, block4.block.height, block0.block.height); 224 224 + const uniform = { width: uniformW, height: uniformH }; 225 225 + 226 226 + // Walk right: take first 4 sprites from block 3 (these are the main walk frames) 227 227 + const walkRightFrames = [0, 1, 2, 3]; 228 228 + for (let i = 0; i < walkRightFrames.length; i++) { 229 229 + const sprite = block3.sprites[walkRightFrames[i]]; 230 230 + await extractSprite(EARL_SHEET, sprite, join(earlDir, `walk-right-${i + 1}.png`), uniform); 231 231 + } 232 232 + console.log(`\nExtracted walk-right (4 frames) at ${uniformW}x${uniformH}`); 233 233 + 234 234 + // Walk left: take first 4 sprites from block 4 235 235 + const walkLeftFrames = [0, 1, 2, 3]; 236 236 + for (let i = 0; i < walkLeftFrames.length; i++) { 237 237 + const sprite = block4.sprites[walkLeftFrames[i]]; 238 238 + await extractSprite(EARL_SHEET, sprite, join(earlDir, `walk-left-${i + 1}.png`), uniform); 239 239 + } 240 240 + console.log(`Extracted walk-left (4 frames) at ${uniformW}x${uniformH}`); 241 241 + 242 242 + // Walk down: take sprites 4-7 from block 3 (facing camera) 243 243 + const walkDownFrames = [4, 5, 6, 7]; 244 244 + for (let i = 0; i < walkDownFrames.length; i++) { 245 245 + const idx = Math.min(walkDownFrames[i], block3.sprites.length - 1); 246 246 + const sprite = block3.sprites[idx]; 247 247 + await extractSprite(EARL_SHEET, sprite, join(earlDir, `walk-down-${i + 1}.png`), uniform); 248 248 + } 249 249 + console.log(`Extracted walk-down (4 frames) at ${uniformW}x${uniformH}`); 250 250 + 251 251 + // Walk up: take sprites 8-11 from block 3 (facing away) 252 252 + const walkUpFrames = [8, 9, 10, 11]; 253 253 + for (let i = 0; i < walkUpFrames.length; i++) { 254 254 + const idx = Math.min(walkUpFrames[i], block3.sprites.length - 1); 255 255 + const sprite = block3.sprites[idx]; 256 256 + await extractSprite(EARL_SHEET, sprite, join(earlDir, `walk-up-${i + 1}.png`), uniform); 257 257 + } 258 258 + console.log(`Extracted walk-up (4 frames) at ${uniformW}x${uniformH}`); 259 259 + 260 260 + // Idle: take first 2 sprites from block 0 261 261 + for (let i = 0; i < 2; i++) { 262 262 + const sprite = block0.sprites[i]; 263 263 + await extractSprite(EARL_SHEET, sprite, join(earlDir, `idle-${i + 1}.png`), uniform); 264 264 + } 265 265 + console.log(`Extracted idle (2 frames) at ${uniformW}x${uniformH}`); 266 266 + } 267 267 + 268 268 + // --- ITEMS & SCENERY EXTRACTION --- 269 269 + console.log('\n=== Extracting Items & Scenery ==='); 270 270 + const itemsSheet = await loadSheet(ITEMS_SHEET); 271 271 + const itemsBlocks = findSpriteBlocks(itemsSheet); 272 272 + const itemsContent = itemsBlocks.filter(b => b.height > 10); 273 273 + 274 274 + for (let i = 0; i < itemsContent.length; i++) { 275 275 + const block = itemsContent[i]; 276 276 + const sprites = findSpritesInBlock(itemsSheet, block); 277 277 + if (sprites.length > 0) { 278 278 + const blockDir = join('/tmp/items-sprites', `block${i}_h${block.height}_n${sprites.length}`); 279 279 + await extractAllFromBlock(ITEMS_SHEET, block, sprites, blockDir, 'item'); 280 280 + } 281 281 + } 282 282 + 283 283 + // Extract present sprite (typically the gift box from the items sheet) 284 284 + // We'll extract all items and identify presents manually 285 285 + const presentDir = join(OUT_DIR, 'present'); 286 286 + await mkdir(presentDir, { recursive: true }); 287 287 + 288 288 + // Extract scenery items 289 289 + const sceneryDir = join(OUT_DIR, 'scenery'); 290 290 + await mkdir(sceneryDir, { recursive: true }); 291 291 + 292 292 + // Extract terrain tile from backgrounds 293 293 + const terrainDir = join(OUT_DIR, 'terrain'); 294 294 + await mkdir(terrainDir, { recursive: true }); 295 295 + 296 296 + console.log('\n=== Extraction complete ==='); 297 297 + console.log('Check /tmp/earl-all-sprites/ for all Earl frames'); 298 298 + console.log('Check /tmp/items-sprites/ for all items'); 299 299 + console.log('Check static/sprites/earl/ for game-ready walk sprites'); 300 300 + } 301 301 + 302 302 + main().catch(console.error);

+112

src/lib/game/GameHUD.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + let { 3 3 + totalPresents, 4 4 + nearbyPresent, 5 5 + }: { 6 6 + totalPresents: number; 7 7 + nearbyPresent: boolean; 8 8 + } = $props(); 9 9 + 10 10 + let showControls = $state(true); 11 11 + 12 12 + $effect(() => { 13 13 + const timer = setTimeout(() => { 14 14 + showControls = false; 15 15 + }, 5000); 16 16 + return () => clearTimeout(timer); 17 17 + }); 18 18 + </script> 19 19 + 20 20 + <div class="hud"> 21 21 + <div class="hud-top"> 22 22 + <div class="present-count"> 23 23 + 🎁 PRESENTS: {totalPresents} 24 24 + </div> 25 25 + </div> 26 26 + 27 27 + {#if nearbyPresent} 28 28 + <div class="interact-hint"> 29 29 + Press ENTER to open 30 30 + </div> 31 31 + {/if} 32 32 + 33 33 + <div class="controls-hint" class:fade-out={!showControls}> 34 34 + <span>Arrow keys / WASD to move</span> 35 35 + <span>·</span> 36 36 + <span>Enter to interact</span> 37 37 + </div> 38 38 + </div> 39 39 + 40 40 + <style> 41 41 + .hud { 42 42 + position: fixed; 43 43 + inset: 0; 44 44 + pointer-events: none; 45 45 + z-index: 100; 46 46 + font-family: 'Courier New', Courier, monospace; 47 47 + } 48 48 + 49 49 + .hud-top { 50 50 + position: absolute; 51 51 + top: 16px; 52 52 + left: 16px; 53 53 + } 54 54 + 55 55 + .present-count { 56 56 + background: rgba(0, 0, 0, 0.6); 57 57 + color: #ffd93d; 58 58 + padding: 8px 16px; 59 59 + border-radius: 8px; 60 60 + font-size: 1.1rem; 61 61 + font-weight: bold; 62 62 + letter-spacing: 0.05em; 63 63 + backdrop-filter: blur(4px); 64 64 + } 65 65 + 66 66 + .interact-hint { 67 67 + position: absolute; 68 68 + bottom: 80px; 69 69 + left: 50%; 70 70 + transform: translateX(-50%); 71 71 + background: rgba(0, 0, 0, 0.7); 72 72 + color: #ffd93d; 73 73 + padding: 10px 24px; 74 74 + border-radius: 8px; 75 75 + font-size: 1rem; 76 76 + font-weight: bold; 77 77 + letter-spacing: 0.05em; 78 78 + backdrop-filter: blur(4px); 79 79 + animation: pulse-glow 1.5s ease-in-out infinite; 80 80 + } 81 81 + 82 82 + @keyframes pulse-glow { 83 83 + 0%, 100% { 84 84 + box-shadow: 0 0 8px rgba(255, 217, 61, 0.3); 85 85 + } 86 86 + 50% { 87 87 + box-shadow: 0 0 20px rgba(255, 217, 61, 0.7); 88 88 + } 89 89 + } 90 90 + 91 91 + .controls-hint { 92 92 + position: absolute; 93 93 + bottom: 20px; 94 94 + left: 50%; 95 95 + transform: translateX(-50%); 96 96 + display: flex; 97 97 + gap: 8px; 98 98 + background: rgba(0, 0, 0, 0.5); 99 99 + color: #e8e0ff; 100 100 + padding: 6px 16px; 101 101 + border-radius: 6px; 102 102 + font-size: 0.8rem; 103 103 + backdrop-filter: blur(4px); 104 104 + opacity: 1; 105 105 + transition: opacity 1s ease-out; 106 106 + white-space: nowrap; 107 107 + } 108 108 + 109 109 + .controls-hint.fade-out { 110 110 + opacity: 0; 111 111 + } 112 112 + </style>

+121

src/lib/game/GameLoop.ts

reviewed

··· 1 1 + export type GameState = 'intro' | 'playing' | 'viewing-present' | 'watching-video'; 2 2 + export type UpdateCallback = (dt: number) => void; 3 3 + export type StateChangeCallback = (newState: GameState, oldState: GameState) => void; 4 4 + 5 5 + const MAX_DELTA = 0.1; 6 6 + const FPS_SAMPLE_COUNT = 60; 7 7 + 8 8 + export class GameLoop { 9 9 + private rafId: number | null = null; 10 10 + private lastTimestamp: number = 0; 11 11 + private elapsed: number = 0; 12 12 + private paused: boolean = false; 13 13 + private running: boolean = false; 14 14 + private state: GameState = 'intro'; 15 15 + 16 16 + private updateCb: UpdateCallback | null = null; 17 17 + private renderCb: UpdateCallback | null = null; 18 18 + private stateChangeCb: StateChangeCallback | null = null; 19 19 + 20 20 + private frameTimes: number[] = []; 21 21 + 22 22 + onUpdate(cb: UpdateCallback): void { 23 23 + this.updateCb = cb; 24 24 + } 25 25 + 26 26 + onRender(cb: UpdateCallback): void { 27 27 + this.renderCb = cb; 28 28 + } 29 29 + 30 30 + onStateChange(cb: StateChangeCallback): void { 31 31 + this.stateChangeCb = cb; 32 32 + } 33 33 + 34 34 + start(): void { 35 35 + if (this.running) return; 36 36 + this.running = true; 37 37 + this.paused = false; 38 38 + this.lastTimestamp = 0; 39 39 + this.elapsed = 0; 40 40 + this.frameTimes = []; 41 41 + this.rafId = requestAnimationFrame((ts) => this.loop(ts)); 42 42 + } 43 43 + 44 44 + stop(): void { 45 45 + this.running = false; 46 46 + if (this.rafId !== null) { 47 47 + cancelAnimationFrame(this.rafId); 48 48 + this.rafId = null; 49 49 + } 50 50 + } 51 51 + 52 52 + pause(): void { 53 53 + this.paused = true; 54 54 + } 55 55 + 56 56 + resume(): void { 57 57 + if (!this.paused) return; 58 58 + this.paused = false; 59 59 + // Reset timestamp so the next frame doesn't get a huge delta 60 60 + this.lastTimestamp = 0; 61 61 + } 62 62 + 63 63 + getState(): GameState { 64 64 + return this.state; 65 65 + } 66 66 + 67 67 + setState(state: GameState): void { 68 68 + if (state === this.state) return; 69 69 + const oldState = this.state; 70 70 + this.state = state; 71 71 + this.stateChangeCb?.(state, oldState); 72 72 + } 73 73 + 74 74 + isPaused(): boolean { 75 75 + return this.paused; 76 76 + } 77 77 + 78 78 + isRunning(): boolean { 79 79 + return this.running; 80 80 + } 81 81 + 82 82 + getFPS(): number { 83 83 + if (this.frameTimes.length === 0) return 0; 84 84 + const avg = this.frameTimes.reduce((sum, t) => sum + t, 0) / this.frameTimes.length; 85 85 + return avg > 0 ? 1 / avg : 0; 86 86 + } 87 87 + 88 88 + getElapsed(): number { 89 89 + return this.elapsed; 90 90 + } 91 91 + 92 92 + private loop(timestamp: number): void { 93 93 + if (!this.running) return; 94 94 + 95 95 + if (this.lastTimestamp === 0) { 96 96 + this.lastTimestamp = timestamp; 97 97 + this.rafId = requestAnimationFrame((ts) => this.loop(ts)); 98 98 + return; 99 99 + } 100 100 + 101 101 + const rawDt = (timestamp - this.lastTimestamp) / 1000; 102 102 + const dt = Math.min(rawDt, MAX_DELTA); 103 103 + this.lastTimestamp = timestamp; 104 104 + 105 105 + // Track frame times for rolling FPS 106 106 + this.frameTimes.push(dt); 107 107 + if (this.frameTimes.length > FPS_SAMPLE_COUNT) { 108 108 + this.frameTimes.shift(); 109 109 + } 110 110 + 111 111 + const shouldUpdate = !this.paused && this.state !== 'watching-video'; 112 112 + 113 113 + if (shouldUpdate) { 114 114 + this.elapsed += dt; 115 115 + this.updateCb?.(dt); 116 116 + this.renderCb?.(dt); 117 117 + } 118 118 + 119 119 + this.rafId = requestAnimationFrame((ts) => this.loop(ts)); 120 120 + } 121 121 + }

+295

src/lib/game/GameWorld.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import type { VideoRecord } from '$lib/api'; 3 3 + import { resolveHandle } from '$lib/api'; 4 4 + import type { GameState, Vec2, WorldConfig, WorldPresent, SceneryItem } from './types'; 5 5 + import { GAME_CONSTANTS } from './types'; 6 6 + import { InputManager } from './InputManager'; 7 7 + import { GameLoop } from './GameLoop'; 8 8 + import WorldMap from './WorldMap.svelte'; 9 9 + import PlayerCanvas from './PlayerCanvas.svelte'; 10 10 + import Present from './Present.svelte'; 11 11 + import GameHUD from './GameHUD.svelte'; 12 12 + 13 13 + let { 14 14 + videos, 15 15 + gameState, 16 16 + onpresentselect, 17 17 + onstatechange, 18 18 + focusVideoId 19 19 + }: { 20 20 + videos: VideoRecord[]; 21 21 + gameState: GameState; 22 22 + onpresentselect?: (present: WorldPresent) => void; 23 23 + onstatechange?: (state: GameState) => void; 24 24 + focusVideoId?: string; 25 25 + } = $props(); 26 26 + 27 27 + // --- Seeded PRNG --- 28 28 + function mulberry32(seed: number): number { 29 29 + let t = seed + 0x6d2b79f5; 30 30 + t = Math.imul(t ^ (t >>> 15), t | 1); 31 31 + t ^= t + Math.imul(t ^ (t >>> 7), t | 61); 32 32 + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; 33 33 + } 34 34 + 35 35 + // --- World dimensions --- 36 36 + const spacing = 250; 37 37 + 38 38 + let worldWidth = $derived.by(() => { 39 39 + const cols = Math.ceil(Math.sqrt(videos.length)) || 1; 40 40 + return Math.max(cols * spacing + GAME_CONSTANTS.WORLD_PADDING * 2, 1200); 41 41 + }); 42 42 + 43 43 + let worldHeight = $derived.by(() => { 44 44 + const cols = Math.ceil(Math.sqrt(videos.length)) || 1; 45 45 + const rows = Math.ceil(videos.length / cols) || 1; 46 46 + return Math.max(rows * spacing + GAME_CONSTANTS.WORLD_PADDING * 2, 900); 47 47 + }); 48 48 + 49 49 + let worldConfig: WorldConfig = $derived({ 50 50 + width: worldWidth, 51 51 + height: worldHeight, 52 52 + tileSize: GAME_CONSTANTS.TILE_SIZE, 53 53 + presentProximity: GAME_CONSTANTS.PRESENT_PROXIMITY, 54 54 + playerSpeed: GAME_CONSTANTS.PLAYER_SPEED, 55 55 + spawnPoint: { x: worldWidth / 2, y: worldHeight / 2 } 56 56 + }); 57 57 + 58 58 + // --- Present distribution --- 59 59 + function distributePresents(vids: VideoRecord[], worldW: number, worldH: number): WorldPresent[] { 60 60 + if (vids.length === 0) return []; 61 61 + 62 62 + const padding = GAME_CONSTANTS.WORLD_PADDING; 63 63 + const usableW = worldW - padding * 2; 64 64 + const usableH = worldH - padding * 2; 65 65 + const cols = Math.ceil(Math.sqrt(vids.length)); 66 66 + const cellW = usableW / cols; 67 67 + const cellH = usableH / Math.ceil(vids.length / cols); 68 68 + 69 69 + return vids.map((v, i) => { 70 70 + const col = i % cols; 71 71 + const row = Math.floor(i / cols); 72 72 + const rkey = v.uri.split('/').pop()!; 73 73 + const seed = rkey.split('').reduce((a, c) => a + c.charCodeAt(0), 0); 74 74 + const jitterX = (((seed * 7 + 13) % 100) - 50) / 50 * cellW * 0.3; 75 75 + const jitterY = (((seed * 13 + 7) % 100) - 50) / 50 * cellH * 0.3; 76 76 + 77 77 + return { 78 78 + id: rkey, 79 79 + uri: v.uri, 80 80 + position: { 81 81 + x: padding + col * cellW + cellW / 2 + jitterX, 82 82 + y: padding + row * cellH + cellH / 2 + jitterY 83 83 + }, 84 84 + title: v.value.title, 85 85 + creator: v.value.creator, 86 86 + duration: v.value.duration, 87 87 + createdAt: v.value.createdAt, 88 88 + isNearby: false, 89 89 + isOpen: false, 90 90 + livestream: v.value.livestream 91 91 + }; 92 92 + }); 93 93 + } 94 94 + 95 95 + // --- Scenery generation --- 96 96 + function generateScenery(worldW: number, worldH: number, presentPositions: Vec2[]): SceneryItem[] { 97 97 + const items: SceneryItem[] = []; 98 98 + const count = Math.floor((worldW * worldH) / 40000); 99 99 + for (let i = 0; i < count; i++) { 100 100 + const x = mulberry32(i * 37) * (worldW - 200) + 100; 101 101 + const y = mulberry32(i * 73 + 11) * (worldH - 200) + 100; 102 102 + const tooClose = presentPositions.some((p) => Math.hypot(p.x - x, p.y - y) < 80); 103 103 + if (tooClose) continue; 104 104 + const types = ['tree', 'bush'] as const; 105 105 + const type = types[Math.floor(mulberry32(i * 17) * types.length)]; 106 106 + items.push({ 107 107 + type, 108 108 + position: { x, y }, 109 109 + sprite: type === 'tree' ? '/sprites/scenery/tree-1.png' : '/sprites/scenery/bush-1.png', 110 110 + scale: 1.5 + mulberry32(i * 53) * 1.0, 111 111 + zOffset: 0 112 112 + }); 113 113 + } 114 114 + return items; 115 115 + } 116 116 + 117 117 + // --- Reactive state --- 118 118 + let presents: WorldPresent[] = $state([]); 119 119 + let sceneryItems: SceneryItem[] = $state([]); 120 120 + 121 121 + let playerPosition: Vec2 = $state({ x: 0, y: 0 }); 122 122 + let playerDirection: Vec2 = $state({ x: 0, y: 1 }); 123 123 + let playerMoving = $state(false); 124 124 + 125 125 + let containerEl: HTMLDivElement | undefined = $state(undefined); 126 126 + let playerCanvas: PlayerCanvas | undefined = $state(undefined); 127 127 + 128 128 + const inputManager = new InputManager(); 129 129 + const gameLoop = new GameLoop(); 130 130 + 131 131 + // Rebuild presents and scenery when videos or world size change 132 132 + $effect(() => { 133 133 + const distributed = distributePresents(videos, worldWidth, worldHeight); 134 134 + presents = distributed; 135 135 + sceneryItems = generateScenery( 136 136 + worldWidth, 137 137 + worldHeight, 138 138 + distributed.map((p) => p.position) 139 139 + ); 140 140 + }); 141 141 + 142 142 + // Set initial player position at world center (or focused present) 143 143 + $effect(() => { 144 144 + if (videos.length === 0) return; 145 145 + 146 146 + const spawnX = worldWidth / 2; 147 147 + const spawnY = worldHeight / 2; 148 148 + 149 149 + if (focusVideoId) { 150 150 + const target = presents.find((p) => p.id === focusVideoId); 151 151 + if (target) { 152 152 + playerPosition = { x: target.position.x, y: target.position.y }; 153 153 + // Auto-select after a brief delay so the world renders first 154 154 + setTimeout(() => { 155 155 + onpresentselect?.(target); 156 156 + }, 100); 157 157 + return; 158 158 + } 159 159 + } 160 160 + 161 161 + playerPosition = { x: spawnX, y: spawnY }; 162 162 + }); 163 163 + 164 164 + // Lazy handle resolution 165 165 + $effect(() => { 166 166 + if (presents.length === 0) return; 167 167 + 168 168 + const dids = [...new Set(presents.map((p) => p.creator))]; 169 169 + 170 170 + for (const did of dids) { 171 171 + resolveHandle(did).then((handle) => { 172 172 + for (let i = 0; i < presents.length; i++) { 173 173 + if (presents[i].creator === did && !presents[i].creatorHandle) { 174 174 + presents[i].creatorHandle = handle; 175 175 + } 176 176 + } 177 177 + }).catch(() => { 178 178 + // Silently ignore failed handle resolution 179 179 + }); 180 180 + } 181 181 + }); 182 182 + 183 183 + // --- Game loop callbacks --- 184 184 + gameLoop.onUpdate((dt: number) => { 185 185 + if (gameState !== 'playing') return; 186 186 + 187 187 + const direction = inputManager.getDirection(); 188 188 + const moving = inputManager.isMoving(); 189 189 + 190 190 + // Update player position 191 191 + if (moving) { 192 192 + const speed = GAME_CONSTANTS.PLAYER_SPEED; 193 193 + let newX = playerPosition.x + direction.x * speed * dt; 194 194 + let newY = playerPosition.y + direction.y * speed * dt; 195 195 + 196 196 + // Clamp to world bounds 197 197 + newX = Math.max(16, Math.min(worldWidth - 16, newX)); 198 198 + newY = Math.max(16, Math.min(worldHeight - 16, newY)); 199 199 + 200 200 + playerPosition = { x: newX, y: newY }; 201 201 + playerDirection = { x: direction.x, y: direction.y }; 202 202 + } 203 203 + 204 204 + playerMoving = moving; 205 205 + 206 206 + // Update proximity for each present 207 207 + for (let i = 0; i < presents.length; i++) { 208 208 + const dist = Math.hypot( 209 209 + presents[i].position.x - playerPosition.x, 210 210 + presents[i].position.y - playerPosition.y 211 211 + ); 212 212 + const nearby = dist < GAME_CONSTANTS.PRESENT_PROXIMITY; 213 213 + if (presents[i].isNearby !== nearby) { 214 214 + presents[i].isNearby = nearby; 215 215 + } 216 216 + } 217 217 + 218 218 + // Handle interact input 219 219 + if (inputManager.consumeInteract()) { 220 220 + const nearbyPresent = presents.find((p) => p.isNearby); 221 221 + if (nearbyPresent) { 222 222 + handlePresentSelect(nearbyPresent); 223 223 + } 224 224 + } 225 225 + }); 226 226 + 227 227 + gameLoop.onRender((dt: number) => { 228 228 + playerCanvas?.update(dt, playerDirection, playerMoving); 229 229 + }); 230 230 + 231 231 + gameLoop.onStateChange((newState, _oldState) => { 232 232 + onstatechange?.(newState); 233 233 + }); 234 234 + 235 235 + // --- Lifecycle: init input and start game loop --- 236 236 + $effect(() => { 237 237 + if (!containerEl) return; 238 238 + 239 239 + inputManager.init(containerEl); 240 240 + gameLoop.start(); 241 241 + 242 242 + return () => { 243 243 + inputManager.destroy(); 244 244 + gameLoop.stop(); 245 245 + }; 246 246 + }); 247 247 + 248 248 + // Sync external game state into the loop 249 249 + $effect(() => { 250 250 + gameLoop.setState(gameState); 251 251 + }); 252 252 + 253 253 + // --- Event handlers --- 254 254 + function handlePresentSelect(present: WorldPresent) { 255 255 + onpresentselect?.(present); 256 256 + } 257 257 + </script> 258 258 + 259 259 + <div class="game-world" bind:this={containerEl}> 260 260 + <WorldMap {worldConfig} {playerPosition}> 261 261 + {#each sceneryItems as item} 262 262 + <div 263 263 + class="scenery" 264 264 + style="position:absolute; left:{item.position.x}px; top:{item.position.y}px; z-index:{Math.floor(item.position.y)}; transform:scale({item.scale})" 265 265 + > 266 266 + <img src={item.sprite} alt="" style="image-rendering:pixelated" /> 267 267 + </div> 268 268 + {/each} 269 269 + {#each presents as present (present.id)} 270 270 + <Present {present} onselect={handlePresentSelect} /> 271 271 + {/each} 272 272 + </WorldMap> 273 273 + <PlayerCanvas bind:this={playerCanvas} /> 274 274 + <GameHUD totalPresents={presents.length} nearbyPresent={presents.some(p => p.isNearby)} /> 275 275 + </div> 276 276 + 277 277 + <style> 278 278 + .game-world { 279 279 + position: relative; 280 280 + width: 100vw; 281 281 + height: 100vh; 282 282 + overflow: hidden; 283 283 + touch-action: none; 284 284 + user-select: none; 285 285 + } 286 286 + 287 287 + .scenery { 288 288 + pointer-events: none; 289 289 + image-rendering: pixelated; 290 290 + } 291 291 + 292 292 + .scenery img { 293 293 + display: block; 294 294 + } 295 295 + </style>

+153

src/lib/game/InputManager.ts

reviewed

··· 1 1 + type Direction = { x: number; y: number }; 2 2 + 3 3 + const MOVE_KEYS: Record<string, Direction> = { 4 4 + ArrowUp: { x: 0, y: -1 }, 5 5 + ArrowDown: { x: 0, y: 1 }, 6 6 + ArrowLeft: { x: -1, y: 0 }, 7 7 + ArrowRight: { x: 1, y: 0 }, 8 8 + w: { x: 0, y: -1 }, 9 9 + s: { x: 0, y: 1 }, 10 10 + a: { x: -1, y: 0 }, 11 11 + d: { x: 1, y: 0 }, 12 12 + W: { x: 0, y: -1 }, 13 13 + S: { x: 0, y: 1 }, 14 14 + A: { x: -1, y: 0 }, 15 15 + D: { x: 1, y: 0 } 16 16 + }; 17 17 + 18 18 + const INTERACT_KEYS = new Set(['Enter', ' ']); 19 19 + 20 20 + function normalize(dir: Direction): Direction { 21 21 + const len = Math.sqrt(dir.x * dir.x + dir.y * dir.y); 22 22 + if (len === 0) return { x: 0, y: 0 }; 23 23 + return { x: dir.x / len, y: dir.y / len }; 24 24 + } 25 25 + 26 26 + export class InputManager { 27 27 + private pressedKeys = new Set<string>(); 28 28 + private touchDirection: Direction = { x: 0, y: 0 }; 29 29 + private touchActive = false; 30 30 + private interactQueued = false; 31 31 + private container: HTMLElement | null = null; 32 32 + 33 33 + private onKeyDown = (e: KeyboardEvent): void => { 34 34 + if (e.key in MOVE_KEYS) { 35 35 + e.preventDefault(); 36 36 + this.pressedKeys.add(e.key); 37 37 + } 38 38 + if (INTERACT_KEYS.has(e.key)) { 39 39 + e.preventDefault(); 40 40 + this.interactQueued = true; 41 41 + } 42 42 + }; 43 43 + 44 44 + private onKeyUp = (e: KeyboardEvent): void => { 45 45 + this.pressedKeys.delete(e.key); 46 46 + }; 47 47 + 48 48 + private onTouchStart = (e: TouchEvent): void => { 49 49 + e.preventDefault(); 50 50 + this.touchActive = true; 51 51 + this.updateTouchDirection(e.touches[0]); 52 52 + }; 53 53 + 54 54 + private onTouchMove = (e: TouchEvent): void => { 55 55 + e.preventDefault(); 56 56 + if (this.touchActive) { 57 57 + this.updateTouchDirection(e.touches[0]); 58 58 + } 59 59 + }; 60 60 + 61 61 + private onTouchEnd = (e: TouchEvent): void => { 62 62 + e.preventDefault(); 63 63 + if (e.touches.length === 0) { 64 64 + this.touchActive = false; 65 65 + this.touchDirection = { x: 0, y: 0 }; 66 66 + } else { 67 67 + this.updateTouchDirection(e.touches[0]); 68 68 + } 69 69 + }; 70 70 + 71 71 + private onClick = (e: MouseEvent): void => { 72 72 + // Only count clicks that aren't drags — treat as interact 73 73 + this.interactQueued = true; 74 74 + }; 75 75 + 76 76 + private updateTouchDirection(touch: Touch): void { 77 77 + const centerX = window.innerWidth / 2; 78 78 + const centerY = window.innerHeight / 2; 79 79 + const dx = touch.clientX - centerX; 80 80 + const dy = touch.clientY - centerY; 81 81 + this.touchDirection = normalize({ x: dx, y: dy }); 82 82 + } 83 83 + 84 84 + init(container: HTMLElement): void { 85 85 + this.container = container; 86 86 + window.addEventListener('keydown', this.onKeyDown); 87 87 + window.addEventListener('keyup', this.onKeyUp); 88 88 + container.addEventListener('touchstart', this.onTouchStart, { passive: false }); 89 89 + container.addEventListener('touchmove', this.onTouchMove, { passive: false }); 90 90 + container.addEventListener('touchend', this.onTouchEnd, { passive: false }); 91 91 + container.addEventListener('touchcancel', this.onTouchEnd, { passive: false }); 92 92 + container.addEventListener('click', this.onClick); 93 93 + } 94 94 + 95 95 + destroy(): void { 96 96 + window.removeEventListener('keydown', this.onKeyDown); 97 97 + window.removeEventListener('keyup', this.onKeyUp); 98 98 + if (this.container) { 99 99 + this.container.removeEventListener('touchstart', this.onTouchStart); 100 100 + this.container.removeEventListener('touchmove', this.onTouchMove); 101 101 + this.container.removeEventListener('touchend', this.onTouchEnd); 102 102 + this.container.removeEventListener('touchcancel', this.onTouchEnd); 103 103 + this.container.removeEventListener('click', this.onClick); 104 104 + } 105 105 + this.pressedKeys.clear(); 106 106 + this.touchDirection = { x: 0, y: 0 }; 107 107 + this.touchActive = false; 108 108 + this.interactQueued = false; 109 109 + this.container = null; 110 110 + } 111 111 + 112 112 + getDirection(): Direction { 113 113 + // Touch takes priority when active 114 114 + if (this.touchActive) { 115 115 + return { ...this.touchDirection }; 116 116 + } 117 117 + 118 118 + // Sum all pressed movement keys for diagonal support 119 119 + let x = 0; 120 120 + let y = 0; 121 121 + for (const key of this.pressedKeys) { 122 122 + const dir = MOVE_KEYS[key]; 123 123 + if (dir) { 124 124 + x += dir.x; 125 125 + y += dir.y; 126 126 + } 127 127 + } 128 128 + return normalize({ x, y }); 129 129 + } 130 130 + 131 131 + isMoving(): boolean { 132 132 + if (this.touchActive) { 133 133 + const d = this.touchDirection; 134 134 + return d.x !== 0 || d.y !== 0; 135 135 + } 136 136 + for (const key of this.pressedKeys) { 137 137 + if (key in MOVE_KEYS) return true; 138 138 + } 139 139 + return false; 140 140 + } 141 141 + 142 142 + consumeInteract(): boolean { 143 143 + if (this.interactQueued) { 144 144 + this.interactQueued = false; 145 145 + return true; 146 146 + } 147 147 + return false; 148 148 + } 149 149 + 150 150 + isTouchActive(): boolean { 151 151 + return this.touchActive; 152 152 + } 153 153 + }

+237

src/lib/game/IntroSequence.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + let { 3 3 + oncomplete 4 4 + }: { 5 5 + oncomplete?: () => void; 6 6 + } = $props(); 7 7 + 8 8 + let phase = $state(0); 9 9 + let particles: Array<{ 10 10 + id: number; 11 11 + x: number; 12 12 + y: number; 13 13 + dx: number; 14 14 + dy: number; 15 15 + delay: number; 16 16 + }> = $state([]); 17 17 + let completed = false; 18 18 + let containerEl: HTMLDivElement | undefined = $state(); 19 19 + 20 20 + function skip() { 21 21 + if (completed) return; 22 22 + completed = true; 23 23 + oncomplete?.(); 24 24 + } 25 25 + 26 26 + function generateParticles() { 27 27 + particles = Array.from({ length: 20 }, (_, i) => ({ 28 28 + id: i, 29 29 + x: window.innerWidth * 0.4, 30 30 + y: window.innerHeight * 0.35, 31 31 + dx: (Math.random() - 0.5) * 100, 32 32 + dy: (Math.random() - 0.5) * 100, 33 33 + delay: Math.random() * 1.5 34 34 + })); 35 35 + } 36 36 + 37 37 + $effect(() => { 38 38 + containerEl?.focus(); 39 39 + 40 40 + const timers = [ 41 41 + setTimeout(() => { 42 42 + phase = 1; 43 43 + generateParticles(); 44 44 + }, 1000), 45 45 + setTimeout(() => { 46 46 + phase = 2; 47 47 + }, 2000), 48 48 + setTimeout(() => { 49 49 + phase = 3; 50 50 + }, 3000), 51 51 + setTimeout(() => { 52 52 + phase = 4; 53 53 + }, 3500), 54 54 + setTimeout(() => { 55 55 + if (!completed) skip(); 56 56 + }, 4500) 57 57 + ]; 58 58 + 59 59 + return () => timers.forEach(clearTimeout); 60 60 + }); 61 61 + </script> 62 62 + 63 63 + <div 64 64 + class="intro-container" 65 65 + bind:this={containerEl} 66 66 + onclick={skip} 67 67 + onkeydown={skip} 68 68 + tabindex="-1" 69 69 + role="button" 70 70 + aria-label="Intro sequence — press any key to skip" 71 71 + > 72 72 + <!-- Starfield background --> 73 73 + <div class="starfield" style="background-image: url('/space.png')"></div> 74 74 + 75 75 + <!-- Ship with animation --> 76 76 + <div 77 77 + class="ship" 78 78 + class:shaking={phase >= 1 && phase < 2} 79 79 + class:spiraling={phase >= 2} 80 80 + > 81 81 + <img src="/sprites/ship/ship.png" alt="Ship" /> 82 82 + </div> 83 83 + 84 84 + <!-- Smoke particles --> 85 85 + {#each particles as p (p.id)} 86 86 + <div 87 87 + class="particle" 88 88 + style="left:{p.x}px;top:{p.y}px;--dx:{p.dx}px;--dy:{p.dy}px;animation-delay:{p.delay}s" 89 89 + ></div> 90 90 + {/each} 91 91 + 92 92 + <!-- Flash overlay --> 93 93 + <div class="flash" class:active={phase >= 3}></div> 94 94 + 95 95 + <!-- Fade to black --> 96 96 + <div class="fade" class:active={phase >= 4}></div> 97 97 + 98 98 + <!-- Skip text --> 99 99 + {#if phase < 3} 100 100 + <p class="skip-text">Press any key to skip</p> 101 101 + {/if} 102 102 + </div> 103 103 + 104 104 + <style> 105 105 + .intro-container { 106 106 + position: fixed; 107 107 + inset: 0; 108 108 + z-index: 1000; 109 109 + overflow: hidden; 110 110 + background: #000; 111 111 + outline: none; 112 112 + cursor: pointer; 113 113 + } 114 114 + 115 115 + .starfield { 116 116 + position: absolute; 117 117 + inset: 0; 118 118 + background-size: cover; 119 119 + background-position: center; 120 120 + opacity: 0.8; 121 121 + } 122 122 + 123 123 + .ship { 124 124 + position: absolute; 125 125 + top: 0; 126 126 + left: 0; 127 127 + image-rendering: pixelated; 128 128 + animation: fly-in 1s ease-out forwards; 129 129 + } 130 130 + 131 131 + .ship img { 132 132 + width: 132px; 133 133 + height: 102px; 134 134 + image-rendering: pixelated; 135 135 + } 136 136 + 137 137 + .ship.shaking { 138 138 + animation: 139 139 + fly-in 1s ease-out forwards, 140 140 + shake 0.1s linear infinite; 141 141 + } 142 142 + 143 143 + .ship.spiraling { 144 144 + animation: spiral-down 1s ease-in forwards; 145 145 + } 146 146 + 147 147 + @keyframes fly-in { 148 148 + from { 149 149 + transform: translate(100vw, -20vh) rotate(-15deg); 150 150 + } 151 151 + to { 152 152 + transform: translate(30vw, 30vh) rotate(-5deg); 153 153 + } 154 154 + } 155 155 + 156 156 + @keyframes shake { 157 157 + 0%, 158 158 + 100% { 159 159 + transform: translate(30vw, 30vh) rotate(-5deg) translate(0, 0); 160 160 + } 161 161 + 25% { 162 162 + transform: translate(30vw, 30vh) rotate(-5deg) translate(-3px, 2px); 163 163 + } 164 164 + 50% { 165 165 + transform: translate(30vw, 30vh) rotate(-5deg) translate(2px, -2px); 166 166 + } 167 167 + 75% { 168 168 + transform: translate(30vw, 30vh) rotate(-5deg) translate(-2px, -1px); 169 169 + } 170 170 + } 171 171 + 172 172 + @keyframes spiral-down { 173 173 + from { 174 174 + transform: translate(30vw, 30vh) rotate(-5deg); 175 175 + } 176 176 + to { 177 177 + transform: translate(40vw, 120vh) rotate(720deg); 178 178 + } 179 179 + } 180 180 + 181 181 + .particle { 182 182 + position: absolute; 183 183 + width: 4px; 184 184 + height: 4px; 185 185 + border-radius: 50%; 186 186 + background: #ff6b2c; 187 187 + animation: particle-fly 0.8s ease-out forwards; 188 188 + } 189 189 + 190 190 + @keyframes particle-fly { 191 191 + from { 192 192 + opacity: 1; 193 193 + transform: translate(0, 0); 194 194 + } 195 195 + to { 196 196 + opacity: 0; 197 197 + transform: translate(var(--dx), var(--dy)); 198 198 + } 199 199 + } 200 200 + 201 201 + .flash { 202 202 + position: absolute; 203 203 + inset: 0; 204 204 + background: white; 205 205 + opacity: 0; 206 206 + transition: opacity 0.15s; 207 207 + pointer-events: none; 208 208 + } 209 209 + 210 210 + .flash.active { 211 211 + opacity: 1; 212 212 + } 213 213 + 214 214 + .fade { 215 215 + position: absolute; 216 216 + inset: 0; 217 217 + background: black; 218 218 + opacity: 0; 219 219 + transition: opacity 1s; 220 220 + pointer-events: none; 221 221 + } 222 222 + 223 223 + .fade.active { 224 224 + opacity: 1; 225 225 + } 226 226 + 227 227 + .skip-text { 228 228 + position: absolute; 229 229 + bottom: 2rem; 230 230 + right: 2rem; 231 231 + color: rgba(255, 255, 255, 0.5); 232 232 + font-size: 0.9rem; 233 233 + font-family: monospace; 234 234 + pointer-events: none; 235 235 + margin: 0; 236 236 + } 237 237 + </style>

+65

src/lib/game/PlayerCanvas.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import { SpriteAnimator } from './SpriteAnimator'; 3 3 + import { GAME_CONSTANTS } from './types'; 4 4 + import type { Vec2 } from './types'; 5 5 + 6 6 + let canvas: HTMLCanvasElement; 7 7 + let ctx: CanvasRenderingContext2D | null = null; 8 8 + const animator = new SpriteAnimator({ walkFps: 8, idleFps: 2 }); 9 9 + let ready = $state(false); 10 10 + 11 11 + // Preload sprites 12 12 + $effect(() => { 13 13 + let cancelled = false; 14 14 + 15 15 + animator.preload().then(() => { 16 16 + if (!cancelled) ready = true; 17 17 + }); 18 18 + 19 19 + return () => { 20 20 + cancelled = true; 21 21 + }; 22 22 + }); 23 23 + 24 24 + // Initialize canvas once sprites are loaded and the element is bound 25 25 + $effect(() => { 26 26 + if (!ready || !canvas) return; 27 27 + 28 28 + const scale = GAME_CONSTANTS.SPRITE_SCALE; 29 29 + canvas.width = animator.getFrameWidth() * scale; 30 30 + canvas.height = animator.getFrameHeight() * scale; 31 31 + ctx = canvas.getContext('2d'); 32 32 + }); 33 33 + 34 34 + export function update(dt: number, direction: Vec2, isMoving: boolean): void { 35 35 + if (!ready || !ctx) return; 36 36 + 37 37 + animator.update(dt, direction, isMoving); 38 38 + 39 39 + const frame = animator.getCurrentFrame(); 40 40 + const scale = GAME_CONSTANTS.SPRITE_SCALE; 41 41 + 42 42 + ctx.clearRect(0, 0, canvas.width, canvas.height); 43 43 + ctx.imageSmoothingEnabled = false; 44 44 + ctx.drawImage(frame, 0, 0, frame.naturalWidth * scale, frame.naturalHeight * scale); 45 45 + } 46 46 + </script> 47 47 + 48 48 + <canvas bind:this={canvas} class="player-canvas" class:visible={ready}></canvas> 49 49 + 50 50 + <style> 51 51 + .player-canvas { 52 52 + position: fixed; 53 53 + left: 50%; 54 54 + top: 50%; 55 55 + transform: translate(-50%, -50%); 56 56 + pointer-events: none; 57 57 + z-index: 100; 58 58 + image-rendering: pixelated; 59 59 + visibility: hidden; 60 60 + } 61 61 + 62 62 + .player-canvas.visible { 63 63 + visibility: visible; 64 64 + } 65 65 + </style>

+168

src/lib/game/Present.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import type { WorldPresent } from './types'; 3 3 + 4 4 + let { 5 5 + present, 6 6 + onselect 7 7 + }: { 8 8 + present: WorldPresent; 9 9 + onselect?: (present: WorldPresent) => void; 10 10 + } = $props(); 11 11 + 12 12 + const colors = ['closed.png', 'closed-blue.png', 'closed-green.png']; 13 13 + 14 14 + let colorIndex = $derived( 15 15 + present.id.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0) % colors.length 16 16 + ); 17 17 + let spriteSrc = $derived(`/sprites/present/${colors[colorIndex]}`); 18 18 + let zIndex = $derived(Math.floor(present.position.y)); 19 19 + 20 20 + function formatDuration(ns: number): string { 21 21 + const totalSeconds = Math.floor(ns / 1_000_000_000); 22 22 + const h = Math.floor(totalSeconds / 3600); 23 23 + const m = Math.floor((totalSeconds % 3600) / 60); 24 24 + const s = totalSeconds % 60; 25 25 + if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`; 26 26 + return `${m}:${String(s).padStart(2, '0')}`; 27 27 + } 28 28 + 29 29 + function formatDate(iso: string): string { 30 30 + return new Date(iso).toLocaleDateString('en-US', { 31 31 + month: 'short', 32 32 + day: 'numeric', 33 33 + year: 'numeric' 34 34 + }); 35 35 + } 36 36 + 37 37 + function truncate(text: string, max: number): string { 38 38 + return text.length > max ? text.slice(0, max - 1) + '…' : text; 39 39 + } 40 40 + 41 41 + function handleClick() { 42 42 + onselect?.(present); 43 43 + } 44 44 + </script> 45 45 + 46 46 + <div 47 47 + id="video-{present.id}" 48 48 + class="present" 49 49 + class:nearby={present.isNearby} 50 50 + style="left: {present.position.x}px; top: {present.position.y}px; z-index: {zIndex};" 51 51 + onclick={handleClick} 52 52 + role="button" 53 53 + tabindex="0" 54 54 + onkeydown={(e) => { 55 55 + if (e.key === 'Enter' || e.key === ' ') handleClick(); 56 56 + }} 57 57 + > 58 58 + <div class="sprite-wrapper" class:bouncing={present.isNearby}> 59 59 + <img 60 60 + src={spriteSrc} 61 61 + alt={present.title} 62 62 + class="sprite" 63 63 + width="24" 64 64 + height="24" 65 65 + draggable="false" 66 66 + /> 67 67 + </div> 68 68 + 69 69 + <div class="tooltip" class:visible={present.isNearby}> 70 70 + <span class="tooltip-title">{truncate(present.title, 48)}</span> 71 71 + {#if present.creatorHandle} 72 72 + <span class="tooltip-creator">@{present.creatorHandle}</span> 73 73 + {/if} 74 74 + <span class="tooltip-meta"> 75 75 + {formatDuration(present.duration)} &bull; {formatDate(present.createdAt)} 76 76 + </span> 77 77 + </div> 78 78 + </div> 79 79 + 80 80 + <style> 81 81 + .present { 82 82 + position: absolute; 83 83 + cursor: pointer; 84 84 + transform: translate(-50%, -50%); 85 85 + } 86 86 + 87 87 + .sprite-wrapper { 88 88 + display: flex; 89 89 + align-items: center; 90 90 + justify-content: center; 91 91 + transition: filter 0.2s ease; 92 92 + } 93 93 + 94 94 + .sprite { 95 95 + width: 72px; 96 96 + height: 72px; 97 97 + image-rendering: pixelated; 98 98 + pointer-events: none; 99 99 + } 100 100 + 101 101 + .nearby .sprite-wrapper { 102 102 + filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.7)); 103 103 + } 104 104 + 105 105 + .bouncing { 106 106 + animation: bounce 0.6s ease-in-out infinite; 107 107 + } 108 108 + 109 109 + @keyframes bounce { 110 110 + 0%, 111 111 + 100% { 112 112 + transform: translateY(0); 113 113 + } 114 114 + 50% { 115 115 + transform: translateY(-6px); 116 116 + } 117 117 + } 118 118 + 119 119 + .tooltip { 120 120 + position: absolute; 121 121 + bottom: 100%; 122 122 + left: 50%; 123 123 + transform: translateX(-50%); 124 124 + margin-bottom: 8px; 125 125 + padding: 6px 10px; 126 126 + background: rgba(20, 18, 30, 0.88); 127 127 + border-radius: 6px; 128 128 + max-width: 200px; 129 129 + white-space: normal; 130 130 + word-wrap: break-word; 131 131 + display: flex; 132 132 + flex-direction: column; 133 133 + gap: 2px; 134 134 + text-align: center; 135 135 + pointer-events: none; 136 136 + 137 137 + opacity: 0; 138 138 + visibility: hidden; 139 139 + transition: 140 140 + opacity 0.18s ease, 141 141 + visibility 0.18s ease; 142 142 + } 143 143 + 144 144 + .tooltip.visible { 145 145 + opacity: 1; 146 146 + visibility: visible; 147 147 + } 148 148 + 149 149 + .tooltip-title { 150 150 + color: #fff; 151 151 + font-weight: 700; 152 152 + font-size: 0.75rem; 153 153 + line-height: 1.2; 154 154 + font-family: 'Press Start 2P', monospace, system-ui; 155 155 + } 156 156 + 157 157 + .tooltip-creator { 158 158 + color: rgba(255, 255, 255, 0.7); 159 159 + font-size: 0.65rem; 160 160 + font-family: 'Press Start 2P', monospace, system-ui; 161 161 + } 162 162 + 163 163 + .tooltip-meta { 164 164 + color: rgba(255, 255, 255, 0.5); 165 165 + font-size: 0.6rem; 166 166 + font-family: 'Press Start 2P', monospace, system-ui; 167 167 + } 168 168 + </style>

+216

src/lib/game/PresentDetail.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import type { WorldPresent } from './types'; 3 3 + import { resolveHandle } from '$lib/api'; 4 4 + 5 5 + let { 6 6 + present, 7 7 + onwatch, 8 8 + onclose 9 9 + }: { 10 10 + present: WorldPresent; 11 11 + onwatch?: () => void; 12 12 + onclose?: () => void; 13 13 + } = $props(); 14 14 + 15 15 + let handle = $state<string | null>(null); 16 16 + let thumbnailUrl = $state<string | null>(present.thumbnailUrl ?? null); 17 17 + 18 18 + $effect(() => { 19 19 + const did = present.creator; 20 20 + if (present.creatorHandle) { 21 21 + handle = present.creatorHandle; 22 22 + } else { 23 23 + resolveHandle(did) 24 24 + .then((h) => { 25 25 + handle = h; 26 26 + }) 27 27 + .catch(() => { 28 28 + handle = did; 29 29 + }); 30 30 + } 31 31 + }); 32 32 + 33 33 + $effect(() => { 34 34 + function onKeydown(e: KeyboardEvent) { 35 35 + if (e.key === 'Escape') onclose?.(); 36 36 + if (e.key === 'Enter') onwatch?.(); 37 37 + } 38 38 + window.addEventListener('keydown', onKeydown); 39 39 + return () => window.removeEventListener('keydown', onKeydown); 40 40 + }); 41 41 + 42 42 + function formatDuration(ns: number): string { 43 43 + const totalSeconds = Math.floor(ns / 1_000_000_000); 44 44 + const h = Math.floor(totalSeconds / 3600); 45 45 + const m = Math.floor((totalSeconds % 3600) / 60); 46 46 + const s = totalSeconds % 60; 47 47 + if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`; 48 48 + return `${m}:${String(s).padStart(2, '0')}`; 49 49 + } 50 50 + 51 51 + function formatDate(iso: string): string { 52 52 + return new Date(iso).toLocaleDateString('en-US', { 53 53 + month: 'short', 54 54 + day: 'numeric', 55 55 + year: 'numeric' 56 56 + }); 57 57 + } 58 58 + 59 59 + function handleOverlayClick(e: MouseEvent) { 60 60 + if (e.target === e.currentTarget) onclose?.(); 61 61 + } 62 62 + </script> 63 63 + 64 64 + <div 65 65 + class="present-detail-overlay" 66 66 + onclick={handleOverlayClick} 67 67 + role="dialog" 68 68 + aria-label="Video details" 69 69 + > 70 70 + <div class="present-detail" onclick={(e) => e.stopPropagation()} role="presentation"> 71 71 + <button class="close-btn" onclick={() => onclose?.()} aria-label="Close">✕</button> 72 72 + 73 73 + <div class="thumbnail"> 74 74 + {#if thumbnailUrl} 75 75 + <img src={thumbnailUrl} alt={present.title} /> 76 76 + {/if} 77 77 + </div> 78 78 + 79 79 + <div class="info"> 80 80 + <h2 class="title">{present.title}</h2> 81 81 + 82 82 + <div class="creator"> 83 83 + {#if handle} 84 84 + <a href="https://bsky.app/profile/{handle}" target="_blank" rel="noopener"> 85 85 + @{handle} 86 86 + </a> 87 87 + {:else} 88 88 + <span class="loading">Loading...</span> 89 89 + {/if} 90 90 + </div> 91 91 + 92 92 + <div class="meta"> 93 93 + <span class="duration">{formatDuration(present.duration)}</span> 94 94 + <span class="separator">•</span> 95 95 + <span class="date">{formatDate(present.createdAt)}</span> 96 96 + </div> 97 97 + 98 98 + <button class="watch-btn" onclick={() => onwatch?.()}>▶ Watch</button> 99 99 + </div> 100 100 + </div> 101 101 + </div> 102 102 + 103 103 + <style> 104 104 + .present-detail-overlay { 105 105 + position: fixed; 106 106 + inset: 0; 107 107 + z-index: 500; 108 108 + display: flex; 109 109 + align-items: center; 110 110 + justify-content: center; 111 111 + background: rgba(0, 0, 0, 0.7); 112 112 + animation: fade-in 0.2s ease; 113 113 + } 114 114 + 115 115 + .present-detail { 116 116 + background: #1a1a2e; 117 117 + border: 3px solid #e94560; 118 118 + border-radius: 8px; 119 119 + padding: 1.5rem; 120 120 + max-width: 420px; 121 121 + width: 90vw; 122 122 + color: #fff; 123 123 + position: relative; 124 124 + font-family: 'Press Start 2P', monospace, system-ui; 125 125 + box-shadow: 0 0 30px rgba(233, 69, 96, 0.3); 126 126 + } 127 127 + 128 128 + .close-btn { 129 129 + position: absolute; 130 130 + top: 0.5rem; 131 131 + right: 0.5rem; 132 132 + background: none; 133 133 + border: none; 134 134 + color: #fff; 135 135 + font-size: 1.2rem; 136 136 + cursor: pointer; 137 137 + padding: 0.25rem 0.5rem; 138 138 + z-index: 1; 139 139 + } 140 140 + 141 141 + .close-btn:hover { 142 142 + color: #e94560; 143 143 + } 144 144 + 145 145 + .thumbnail { 146 146 + width: 100%; 147 147 + aspect-ratio: 16 / 9; 148 148 + overflow: hidden; 149 149 + border-radius: 4px; 150 150 + margin-bottom: 1rem; 151 151 + background: linear-gradient(135deg, #16213e, #1a1a2e); 152 152 + } 153 153 + 154 154 + .thumbnail img { 155 155 + width: 100%; 156 156 + height: 100%; 157 157 + object-fit: cover; 158 158 + } 159 159 + 160 160 + .title { 161 161 + font-size: 0.85rem; 162 162 + margin: 0 0 0.5rem; 163 163 + line-height: 1.4; 164 164 + color: #fff; 165 165 + } 166 166 + 167 167 + .creator a { 168 168 + color: #e94560; 169 169 + text-decoration: none; 170 170 + font-size: 0.7rem; 171 171 + } 172 172 + 173 173 + .creator a:hover { 174 174 + text-decoration: underline; 175 175 + } 176 176 + 177 177 + .loading { 178 178 + color: #888; 179 179 + font-size: 0.7rem; 180 180 + } 181 181 + 182 182 + .meta { 183 183 + color: #888; 184 184 + font-size: 0.65rem; 185 185 + margin: 0.5rem 0 1rem; 186 186 + display: flex; 187 187 + gap: 0.4rem; 188 188 + align-items: center; 189 189 + } 190 190 + 191 191 + .watch-btn { 192 192 + background: #e94560; 193 193 + color: #fff; 194 194 + border: none; 195 195 + padding: 0.75rem 2rem; 196 196 + font-size: 0.8rem; 197 197 + font-family: 'Press Start 2P', monospace, system-ui; 198 198 + cursor: pointer; 199 199 + border-radius: 4px; 200 200 + width: 100%; 201 201 + transition: background 0.2s; 202 202 + } 203 203 + 204 204 + .watch-btn:hover { 205 205 + background: #ff6b81; 206 206 + } 207 207 + 208 208 + @keyframes fade-in { 209 209 + from { 210 210 + opacity: 0; 211 211 + } 212 212 + to { 213 213 + opacity: 1; 214 214 + } 215 215 + } 216 216 + </style>

+140

src/lib/game/SpriteAnimator.ts

reviewed

··· 1 1 + type Direction = { x: number; y: number }; 2 2 + type AnimationState = 'idle' | 'walk-up' | 'walk-down' | 'walk-left' | 'walk-right'; 3 3 + 4 4 + const WALK_STATES: AnimationState[] = ['walk-up', 'walk-down', 'walk-left', 'walk-right']; 5 5 + const ALL_STATES: AnimationState[] = ['idle', ...WALK_STATES]; 6 6 + 7 7 + const FRAME_COUNTS: Record<AnimationState, number> = { 8 8 + 'idle': 2, 9 9 + 'walk-up': 4, 10 10 + 'walk-down': 4, 11 11 + 'walk-left': 4, 12 12 + 'walk-right': 4, 13 13 + }; 14 14 + 15 15 + function resolveDirection(direction: Direction, isMoving: boolean): AnimationState { 16 16 + if (!isMoving) return 'idle'; 17 17 + 18 18 + const { x, y } = direction; 19 19 + 20 20 + if (Math.abs(y) > Math.abs(x)) { 21 21 + return y < 0 ? 'walk-up' : 'walk-down'; 22 22 + } 23 23 + 24 24 + // |x| >= |y| — horizontal takes priority on tie 25 25 + if (x < 0) return 'walk-left'; 26 26 + if (x > 0) return 'walk-right'; 27 27 + 28 28 + // Zero vector while isMoving is true — fall back to idle 29 29 + return 'idle'; 30 30 + } 31 31 + 32 32 + export class SpriteAnimator { 33 33 + private readonly walkFps: number; 34 34 + private readonly idleFps: number; 35 35 + private readonly frames: Map<AnimationState, HTMLImageElement[]> = new Map(); 36 36 + 37 37 + private state: AnimationState = 'idle'; 38 38 + private frameIndex = 0; 39 39 + private elapsed = 0; 40 40 + private loaded = false; 41 41 + 42 42 + // Cached from the first loaded image 43 43 + private frameWidth = 0; 44 44 + private frameHeight = 0; 45 45 + 46 46 + constructor(options?: { walkFps?: number; idleFps?: number }) { 47 47 + this.walkFps = options?.walkFps ?? 8; 48 48 + this.idleFps = options?.idleFps ?? 2; 49 49 + 50 50 + for (const state of ALL_STATES) { 51 51 + const count = FRAME_COUNTS[state]; 52 52 + const images: HTMLImageElement[] = []; 53 53 + 54 54 + for (let i = 1; i <= count; i++) { 55 55 + const img = new Image(); 56 56 + img.src = `/sprites/earl/${state}-${i}.png`; 57 57 + images.push(img); 58 58 + } 59 59 + 60 60 + this.frames.set(state, images); 61 61 + } 62 62 + } 63 63 + 64 64 + /** Preload every sprite image. Resolves once all are decoded. */ 65 65 + async preload(): Promise<void> { 66 66 + const promises: Promise<void>[] = []; 67 67 + 68 68 + for (const state of ALL_STATES) { 69 69 + const images = this.frames.get(state)!; 70 70 + for (const img of images) { 71 71 + promises.push( 72 72 + new Promise<void>((resolve, reject) => { 73 73 + if (img.complete && img.naturalWidth > 0) { 74 74 + resolve(); 75 75 + return; 76 76 + } 77 77 + img.onload = () => resolve(); 78 78 + img.onerror = () => 79 79 + reject(new Error(`Failed to load sprite: ${img.src}`)); 80 80 + }), 81 81 + ); 82 82 + } 83 83 + } 84 84 + 85 85 + await Promise.all(promises); 86 86 + 87 87 + // Cache dimensions from the first available image 88 88 + const first = this.frames.get('idle')![0]; 89 89 + this.frameWidth = first.naturalWidth; 90 90 + this.frameHeight = first.naturalHeight; 91 91 + 92 92 + this.loaded = true; 93 93 + } 94 94 + 95 95 + /** 96 96 + * Advance the animation clock. 97 97 + * @param dt Elapsed time since last call, in seconds. 98 98 + */ 99 99 + update(dt: number, direction: Direction, isMoving: boolean): void { 100 100 + const next = resolveDirection(direction, isMoving); 101 101 + 102 102 + if (next !== this.state) { 103 103 + this.state = next; 104 104 + this.frameIndex = 0; 105 105 + this.elapsed = 0; 106 106 + } 107 107 + 108 108 + const fps = this.state === 'idle' ? this.idleFps : this.walkFps; 109 109 + const frameDuration = 1 / fps; 110 110 + 111 111 + this.elapsed += dt; 112 112 + 113 113 + while (this.elapsed >= frameDuration) { 114 114 + this.elapsed -= frameDuration; 115 115 + const count = FRAME_COUNTS[this.state]; 116 116 + this.frameIndex = (this.frameIndex + 1) % count; 117 117 + } 118 118 + } 119 119 + 120 120 + /** Return the preloaded Image for the current animation frame. */ 121 121 + getCurrentFrame(): HTMLImageElement { 122 122 + return this.frames.get(this.state)![this.frameIndex]; 123 123 + } 124 124 + 125 125 + getAnimationState(): AnimationState { 126 126 + return this.state; 127 127 + } 128 128 + 129 129 + getFrameWidth(): number { 130 130 + return this.frameWidth; 131 131 + } 132 132 + 133 133 + getFrameHeight(): number { 134 134 + return this.frameHeight; 135 135 + } 136 136 + 137 137 + isLoaded(): boolean { 138 138 + return this.loaded; 139 139 + } 140 140 + }

+110

src/lib/game/WorldMap.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import type { Snippet } from 'svelte'; 3 3 + import type { Vec2, WorldConfig } from './types'; 4 4 + import { GAME_CONSTANTS } from './types'; 5 5 + 6 6 + let { 7 7 + worldConfig, 8 8 + playerPosition, 9 9 + children 10 10 + }: { 11 11 + worldConfig: WorldConfig; 12 12 + playerPosition: Vec2; 13 13 + children?: Snippet; 14 14 + } = $props(); 15 15 + 16 16 + function clamp(value: number, min: number, max: number): number { 17 17 + return Math.max(min, Math.min(max, value)); 18 18 + } 19 19 + 20 20 + // Camera state — start at player position 21 21 + let cameraX = $state(0); 22 22 + let cameraY = $state(0); 23 23 + let viewportWidth = $state(0); 24 24 + let viewportHeight = $state(0); 25 25 + let initialized = $state(false); 26 26 + 27 27 + let viewportEl: HTMLDivElement; 28 28 + 29 29 + // Track viewport dimensions via ResizeObserver 30 30 + $effect(() => { 31 31 + if (!viewportEl) return; 32 32 + 33 33 + const ro = new ResizeObserver((entries) => { 34 34 + const entry = entries[0]; 35 35 + if (entry) { 36 36 + viewportWidth = entry.contentRect.width; 37 37 + viewportHeight = entry.contentRect.height; 38 38 + } 39 39 + }); 40 40 + 41 41 + ro.observe(viewportEl); 42 42 + return () => ro.disconnect(); 43 43 + }); 44 44 + 45 45 + // Lerp camera toward player — runs reactively when playerPosition changes 46 46 + $effect(() => { 47 47 + const targetX = playerPosition.x; 48 48 + const targetY = playerPosition.y; 49 49 + 50 50 + if (!initialized) { 51 51 + cameraX = targetX; 52 52 + cameraY = targetY; 53 53 + initialized = true; 54 54 + return; 55 55 + } 56 56 + 57 57 + const lerp = GAME_CONSTANTS.CAMERA_LERP; 58 58 + cameraX += (targetX - cameraX) * lerp; 59 59 + cameraY += (targetY - cameraY) * lerp; 60 60 + }); 61 61 + 62 62 + // Clamped camera offsets so the view never leaves world bounds 63 63 + let cameraLeft = $derived( 64 64 + clamp(cameraX - viewportWidth / 2, 0, Math.max(0, worldConfig.width - viewportWidth)) 65 65 + ); 66 66 + let cameraTop = $derived( 67 67 + clamp(cameraY - viewportHeight / 2, 0, Math.max(0, worldConfig.height - viewportHeight)) 68 68 + ); 69 69 + </script> 70 70 + 71 71 + <div class="viewport" bind:this={viewportEl}> 72 72 + <div 73 73 + class="world" 74 74 + style=" 75 75 + width: {worldConfig.width}px; 76 76 + height: {worldConfig.height}px; 77 77 + transform: translate({-cameraLeft}px, {-cameraTop}px); 78 78 + background-size: {worldConfig.tileSize}px {worldConfig.tileSize}px; 79 79 + " 80 80 + > 81 81 + <div class="depth-container"> 82 82 + {@render children?.()} 83 83 + </div> 84 84 + </div> 85 85 + </div> 86 86 + 87 87 + <style> 88 88 + .viewport { 89 89 + position: relative; 90 90 + width: 100vw; 91 91 + height: 100vh; 92 92 + overflow: hidden; 93 93 + background-color: #1a1a2e; 94 94 + } 95 95 + 96 96 + .world { 97 97 + position: absolute; 98 98 + top: 0; 99 99 + left: 0; 100 100 + will-change: transform; 101 101 + background-image: url('/sprites/terrain/grass-tile.png'); 102 102 + background-repeat: repeat; 103 103 + } 104 104 + 105 105 + .depth-container { 106 106 + position: relative; 107 107 + width: 100%; 108 108 + height: 100%; 109 109 + } 110 110 + </style>

+78

src/lib/game/types.ts

reviewed

··· 1 1 + // Game state machine phases 2 2 + export type GameState = 'intro' | 'playing' | 'viewing-present' | 'watching-video'; 3 3 + 4 4 + // 2D vector 5 5 + export interface Vec2 { 6 6 + x: number; 7 7 + y: number; 8 8 + } 9 9 + 10 10 + // Player state 11 11 + export interface PlayerState { 12 12 + position: Vec2; // World position in pixels 13 13 + velocity: Vec2; // Current velocity 14 14 + speed: number; // Movement speed (pixels per second) 15 15 + direction: Vec2; // Facing direction (normalized) 16 16 + isMoving: boolean; 17 17 + } 18 18 + 19 19 + // A VOD present on the world map 20 20 + export interface WorldPresent { 21 21 + id: string; // rkey from AT URI for anchor linking 22 22 + uri: string; // Full AT URI 23 23 + position: Vec2; // World position 24 24 + title: string; 25 25 + creator: string; // DID 26 26 + creatorHandle?: string; // Resolved @handle 27 27 + duration: number; // Nanoseconds 28 28 + createdAt: string; // ISO timestamp 29 29 + thumbnailUrl?: string; 30 30 + isNearby: boolean; // Within interaction range 31 31 + isOpen: boolean; // Currently viewing detail 32 32 + livestream?: { 33 33 + // For thumbnail resolution 34 34 + cid: string; 35 35 + uri: string; 36 36 + }; 37 37 + } 38 38 + 39 39 + // World configuration 40 40 + export interface WorldConfig { 41 41 + width: number; // World width in pixels 42 42 + height: number; // World height in pixels 43 43 + tileSize: number; // Size of ground tiles 44 44 + presentProximity: number; // Distance to trigger present interaction 45 45 + playerSpeed: number; // Pixels per second 46 46 + spawnPoint: Vec2; // Where player starts after intro 47 47 + } 48 48 + 49 49 + // Camera state 50 50 + export interface CameraState { 51 51 + position: Vec2; // Camera center in world coordinates 52 52 + viewportWidth: number; 53 53 + viewportHeight: number; 54 54 + // Computed bounds 55 55 + left: number; 56 56 + top: number; 57 57 + right: number; 58 58 + bottom: number; 59 59 + } 60 60 + 61 61 + // Scenery decoration on the world map 62 62 + export interface SceneryItem { 63 63 + type: 'tree' | 'bush' | 'rock' | 'flower' | 'grass-patch'; 64 64 + position: Vec2; 65 65 + sprite: string; // Path to sprite image 66 66 + scale: number; // Size multiplier 67 67 + zOffset: number; // Depth sort adjustment 68 68 + } 69 69 + 70 70 + // Game constants 71 71 + export const GAME_CONSTANTS = { 72 72 + TILE_SIZE: 64, 73 73 + PLAYER_SPEED: 200, // pixels per second 74 74 + PRESENT_PROXIMITY: 80, // pixels to trigger interaction 75 75 + WORLD_PADDING: 200, // extra space around present bounds 76 76 + CAMERA_LERP: 0.1, // camera smoothing factor (0-1) 77 77 + SPRITE_SCALE: 2 // scale up pixel art sprites 78 78 + } as const;

+3 -30

src/routes/+layout.svelte

reviewed

··· 1 1 <script lang="ts"> 2 2 - import { onMount, onDestroy } from 'svelte'; 3 3 - import MeshBackground from '$lib/MeshBackground.svelte'; 4 4 - 5 2 let { children } = $props(); 6 6 - 7 7 - let cursorInterval: ReturnType<typeof setInterval>; 8 8 - 9 9 - onMount(() => { 10 10 - const frames = [ 11 11 - "url('/toe-jam-standing-1.png') 16 16, auto", 12 12 - "url('/toe-jam-standing-2.png') 16 16, auto", 13 13 - "url('/toe-jam-standing-3.png') 16 16, auto", 14 14 - ]; 15 15 - let i = 0; 16 16 - document.documentElement.style.cursor = frames[0]; 17 17 - cursorInterval = setInterval(() => { 18 18 - i = (i + 1) % frames.length; 19 19 - document.documentElement.style.cursor = frames[i]; 20 20 - }, 200); 21 21 - }); 22 22 - 23 23 - onDestroy(() => { 24 24 - if (cursorInterval) clearInterval(cursorInterval); 25 25 - }); 26 3 </script> 27 4 28 5 <svelte:head> ··· 42 19 font-style: normal; 43 20 font-display: swap; 44 21 } 45 45 - /* Animated cursor — body and descendants inherit from html (set via JS) */ 46 46 - body, body *, body *::before, body *::after { 47 47 - cursor: inherit !important; 48 48 - } 49 22 /* Font-switch animation for ToeJam & Earl color fonts */ 50 23 @keyframes font-switch { 51 24 0%, 49.9% { font-family: 'ToeJamEarl1', 'Comic Sans MS', 'Comic Sans', cursive, system-ui; } ··· 53 26 } 54 27 </style> 55 28 </svelte:head> 56 56 - 57 57 - <MeshBackground /> 58 29 59 30 {@render children()} 60 31 ··· 63 34 margin: 0; 64 35 padding: 0; 65 36 min-height: 100vh; 66 66 - overflow-x: hidden; 37 37 + overflow: hidden; 38 38 + background: #0b0e17; 67 39 } 68 40 69 41 :global(body) { 70 42 font-family: 'Comic Sans MS', 'Comic Sans', cursive, system-ui; 43 43 + color: #e8e0ff; 71 44 } 72 45 73 46 :global(*) {

+255 -316

src/routes/+page.svelte

reviewed

··· 1 1 <script lang="ts"> 2 2 - import { onMount } from "svelte"; 3 3 - import { 4 4 - listVideos, 5 5 - fetchAllVideos, 6 6 - getPlaylistUrl, 7 7 - formatDuration, 8 8 - formatDate, 9 9 - resolveHandle, 10 10 - getProfile, 11 11 - type VideoRecord, 12 12 - } from "$lib/api"; 13 13 - import VideoPlayer from "$lib/VideoPlayer.svelte"; 14 14 - import VideoCard from "$lib/VideoCard.svelte"; 15 15 - import VodjamHeader from "$lib/VodjamHeader.svelte"; 16 16 - import WavyBorder from "$lib/WavyBorder.svelte"; 17 17 - import WavyCircle from "$lib/WavyCircle.svelte"; 18 18 - import SpriteTime from "$lib/SpriteTime.svelte"; 19 19 - import Footer from "$lib/Footer.svelte"; 2 2 + import { 3 3 + fetchAllVideos, 4 4 + getPlaylistUrl, 5 5 + type VideoRecord, 6 6 + } from '$lib/api'; 7 7 + import type { GameState, WorldPresent } from '$lib/game/types'; 8 8 + import IntroSequence from '$lib/game/IntroSequence.svelte'; 9 9 + import GameWorld from '$lib/game/GameWorld.svelte'; 10 10 + import PresentDetail from '$lib/game/PresentDetail.svelte'; 11 11 + import VideoPlayer from '$lib/VideoPlayer.svelte'; 12 12 + import VodjamHeader from '$lib/VodjamHeader.svelte'; 20 13 21 21 - const PAGE_SIZE = 9; 14 14 + let videos: VideoRecord[] = $state([]); 15 15 + let loading = $state(true); 16 16 + let error = $state(''); 22 17 23 23 - let videos: VideoRecord[] = $state([]); 24 24 - let loading = $state(false); 25 25 - let selectedVideo: VideoRecord | null = $state(null); 26 26 - let selectedHandle = $state(""); 27 27 - let selectedAvatar = $state(""); 28 28 - let error = $state(""); 18 18 + let gameState: GameState = $state('intro'); 19 19 + let selectedPresent: WorldPresent | null = $state(null); 20 20 + let focusVideoId: string | undefined = $state(undefined); 29 21 30 30 - // Pagination state 31 31 - let pageIndex = $state(0); 32 32 - let hasMore = $state(true); 22 22 + // Load videos and check URL hash 23 23 + $effect(() => { 24 24 + fetchAllVideos() 25 25 + .then((all) => { 26 26 + videos = all; 27 27 + loading = false; 33 28 34 34 - async function loadPage() { 35 35 - loading = true; 36 36 - error = ""; 37 37 - try { 38 38 - const res = await listVideos(pageIndex, PAGE_SIZE); 39 39 - videos = res.records; 40 40 - hasMore = res.hasMore; 41 41 - } catch (e: any) { 42 42 - error = e.message; 43 43 - } 44 44 - loading = false; 45 45 - } 29 29 + // Check for hash-based deep link: #video-{rkey} 30 30 + const hash = window.location.hash; 31 31 + if (hash.startsWith('#video-')) { 32 32 + focusVideoId = hash.slice(7); // remove '#video-' 33 33 + gameState = 'playing'; // skip intro 34 34 + } 35 35 + }) 36 36 + .catch((e) => { 37 37 + error = e.message; 38 38 + loading = false; 39 39 + }); 40 40 + }); 46 41 47 47 - function nextPage() { 48 48 - if (!hasMore || loading) return; 49 49 - pageIndex++; 50 50 - loadPage(); 51 51 - window.scrollTo({ top: 0, behavior: "smooth" }); 52 52 - } 42 42 + function handleIntroComplete() { 43 43 + gameState = 'playing'; 44 44 + } 53 45 54 54 - function prevPage() { 55 55 - if (pageIndex <= 0 || loading) return; 56 56 - pageIndex--; 57 57 - loadPage(); 58 58 - window.scrollTo({ top: 0, behavior: "smooth" }); 59 59 - } 46 46 + function handlePresentSelect(present: WorldPresent) { 47 47 + selectedPresent = present; 48 48 + gameState = 'viewing-present'; 49 49 + window.history.pushState(null, '', `#video-${present.id}`); 50 50 + } 60 51 61 61 - function selectVideo(video: VideoRecord) { 62 62 - selectedVideo = video; 63 63 - selectedAvatar = ""; 64 64 - resolveHandle(video.value.creator).then((h) => { 65 65 - selectedHandle = h; 66 66 - // Fetch avatar from profile 67 67 - const handle = h.replace('@', ''); 68 68 - getProfile(handle).then((p) => { if (p.avatar) selectedAvatar = p.avatar; }).catch(() => {}); 69 69 - }); 70 70 - // Update URL with the video URI (at://did/collection/rkey) 71 71 - const url = new URL(window.location.href); 72 72 - url.searchParams.set("v", video.uri); 73 73 - window.history.pushState({}, "", url.toString()); 74 74 - window.scrollTo({ top: 0, behavior: "smooth" }); 75 75 - } 52 52 + function handleWatch() { 53 53 + gameState = 'watching-video'; 54 54 + } 76 55 77 77 - function closePlayer() { 78 78 - selectedVideo = null; 79 79 - const url = new URL(window.location.href); 80 80 - url.searchParams.delete("v"); 81 81 - window.history.pushState({}, "", url.toString()); 82 82 - } 56 56 + function handleCloseDetail() { 57 57 + selectedPresent = null; 58 58 + gameState = 'playing'; 59 59 + window.history.pushState(null, '', window.location.pathname); 60 60 + } 83 61 84 84 - // On mount: load first page, then check URL for a selected video 85 85 - onMount(async () => { 86 86 - await loadPage(); 87 87 - const params = new URLSearchParams(window.location.search); 88 88 - const videoUri = params.get("v"); 89 89 - if (videoUri) { 90 90 - // Search all videos, not just the current page 91 91 - const all = await fetchAllVideos(); 92 92 - const found = all.find((v) => v.uri === videoUri); 93 93 - if (found) { 94 94 - selectVideo(found); 95 95 - } 96 96 - } 97 97 - }); 62 62 + function handleCloseVideo() { 63 63 + gameState = 'viewing-present'; 64 64 + } 98 65 99 99 - // Handle browser back/forward 100 100 - async function onPopState() { 101 101 - const params = new URLSearchParams(window.location.search); 102 102 - const videoUri = params.get("v"); 103 103 - if (videoUri) { 104 104 - const all = await fetchAllVideos(); 105 105 - const found = all.find((v) => v.uri === videoUri); 106 106 - if (found) { 107 107 - selectedVideo = found; 108 108 - resolveHandle(found.value.creator).then( 109 109 - (h) => (selectedHandle = h), 110 110 - ); 111 111 - } 112 112 - } else { 113 113 - selectedVideo = null; 114 114 - } 115 115 - } 66 66 + function handleBackToGame() { 67 67 + selectedPresent = null; 68 68 + gameState = 'playing'; 69 69 + window.history.pushState(null, '', window.location.pathname); 70 70 + } 71 71 + 72 72 + function handleStateChange(state: GameState) { 73 73 + gameState = state; 74 74 + } 75 75 + 76 76 + // Browser back/forward 77 77 + function onPopState() { 78 78 + const hash = window.location.hash; 79 79 + if (hash.startsWith('#video-')) { 80 80 + const rkey = hash.slice(7); 81 81 + focusVideoId = rkey; 82 82 + // The GameWorld will handle finding and selecting this present 83 83 + } else { 84 84 + selectedPresent = null; 85 85 + if (gameState !== 'intro') { 86 86 + gameState = 'playing'; 87 87 + } 88 88 + } 89 89 + } 90 90 + 91 91 + function getSelectedVideoUri(): string { 92 92 + if (!selectedPresent) return ''; 93 93 + return selectedPresent.uri; 94 94 + } 116 95 </script> 117 96 118 97 <svelte:window onpopstate={onPopState} /> 119 98 120 99 <svelte:head> 121 121 - <title>VoD Jam</title> 100 100 + <title>VoD Jam</title> 122 101 </svelte:head> 123 102 124 124 - <div class="app"> 125 125 - <VodjamHeader onHomeClick={closePlayer} /> 103 103 + {#if loading} 104 104 + <div class="loading-screen"> 105 105 + <img src="/ship.png" alt="Loading..." class="loading-ship" /> 106 106 + <p class="loading-text">Loading VoDs...</p> 107 107 + </div> 108 108 + {:else if error} 109 109 + <div class="error-screen"> 110 110 + <p class="error-text">⚠ {error}</p> 111 111 + <button class="retry-btn" onclick={() => window.location.reload()}>Retry</button> 112 112 + </div> 113 113 + {:else} 114 114 + <!-- Intro sequence --> 115 115 + {#if gameState === 'intro'} 116 116 + <IntroSequence oncomplete={handleIntroComplete} /> 117 117 + {/if} 126 118 127 127 - {#if selectedVideo} 128 128 - <section class="player-section"> 129 129 - <WavyBorder seed="player-space" fillImage="/border.png" strokeColor="#0B0E17" strokeWidth={2.5} padding="clamp(24px, 4vw, 48px)"> 130 130 - <div class="player-inner"> 131 131 - <VideoPlayer src={getPlaylistUrl(selectedVideo.uri)} /> 132 132 - <div class="player-info"> 133 133 - <h2 class="player-title">{selectedVideo.value.title}</h2> 134 134 - <div class="player-meta-row"> 135 135 - {#if selectedAvatar} 136 136 - <a href="/profile/{selectedHandle?.replace('@', '') || selectedVideo.value.creator}" class="creator-avatar-link"> 137 137 - <WavyCircle seed={selectedVideo.value.creator} fill="#FFD93D" strokeColor="#0B0E17" strokeWidth={1.5} size={40}> 138 138 - <img src={selectedAvatar} alt="" /> 139 139 - </WavyCircle> 140 140 - </a> 141 141 - {/if} 142 142 - <p class="player-meta"> 143 143 - <a href="/profile/{selectedHandle?.replace('@', '') || selectedVideo.value.creator}" class="creator-tag" 144 144 - >{selectedHandle || 145 145 - selectedVideo.value.creator}</a 146 146 - > 147 147 - <span class="dot">·</span> 148 148 - {formatDate(selectedVideo.value.createdAt)} 149 149 - <span class="dot">·</span> 150 150 - <SpriteTime time={formatDuration(selectedVideo.value.duration)} height={16} /> 151 151 - </p> 152 152 - </div> 153 153 - </div> 154 154 - </div> 155 155 - </WavyBorder> 156 156 - </section> 157 157 - {/if} 119 119 + <!-- Game world (always rendered after videos load, hidden during intro) --> 120 120 + {#if gameState !== 'intro'} 121 121 + <GameWorld 122 122 + {videos} 123 123 + {gameState} 124 124 + onpresentselect={handlePresentSelect} 125 125 + onstatechange={handleStateChange} 126 126 + {focusVideoId} 127 127 + /> 128 128 + {/if} 158 129 159 159 - {#if error} 160 160 - <div class="error">{error}</div> 161 161 - {/if} 130 130 + <!-- Present detail popup --> 131 131 + {#if gameState === 'viewing-present' && selectedPresent} 132 132 + <PresentDetail 133 133 + present={selectedPresent} 134 134 + onwatch={handleWatch} 135 135 + onclose={handleCloseDetail} 136 136 + /> 137 137 + {/if} 162 138 163 163 - <section class="grid"> 164 164 - {#each videos as video (video.uri)} 165 165 - <VideoCard {video} onSelect={selectVideo} /> 166 166 - {/each} 167 167 - </section> 168 168 - 169 169 - <div class="pagination"> 170 170 - {#if pageIndex > 0} 171 171 - <button class="page-btn" onclick={prevPage} disabled={loading}> 172 172 - ← previous 173 173 - </button> 174 174 - {/if} 175 175 - <span class="page-num">page {pageIndex + 1}</span> 176 176 - {#if hasMore} 177 177 - <button class="page-btn" onclick={nextPage} disabled={loading}> 178 178 - next → 179 179 - </button> 180 180 - {/if} 181 181 - </div> 182 182 - 183 183 - <Footer /> 184 184 - </div> 139 139 + <!-- Video player overlay --> 140 140 + {#if gameState === 'watching-video' && selectedPresent} 141 141 + <div class="video-overlay"> 142 142 + <div class="video-overlay-header"> 143 143 + <VodjamHeader onHomeClick={handleBackToGame} /> 144 144 + <button class="video-close-btn" onclick={handleCloseVideo}>✕ Close</button> 145 145 + </div> 146 146 + <div class="video-container"> 147 147 + <VideoPlayer src={getPlaylistUrl(getSelectedVideoUri())} /> 148 148 + <div class="video-info"> 149 149 + <h2 class="video-title">{selectedPresent.title}</h2> 150 150 + <p class="video-meta"> 151 151 + {#if selectedPresent.creatorHandle} 152 152 + <a 153 153 + href="https://bsky.app/profile/{selectedPresent.creatorHandle.replace('@', '')}" 154 154 + target="_blank" 155 155 + rel="noopener" 156 156 + class="creator-link" 157 157 + > 158 158 + {selectedPresent.creatorHandle} 159 159 + </a> 160 160 + {/if} 161 161 + </p> 162 162 + </div> 163 163 + </div> 164 164 + </div> 165 165 + {/if} 166 166 + {/if} 185 167 186 168 <style> 187 187 - .app { 188 188 - max-width: 1300px; 189 189 - margin: 0 auto; 190 190 - padding: 0 clamp(24px, 7vw, 120px) 60px; 191 191 - } 169 169 + .loading-screen { 170 170 + display: flex; 171 171 + flex-direction: column; 172 172 + align-items: center; 173 173 + justify-content: center; 174 174 + height: 100vh; 175 175 + background: #0b0e17; 176 176 + color: #e8e0ff; 177 177 + } 192 178 193 193 - .player-section { 194 194 - margin-bottom: 40px; 195 195 - margin-top: 20px; 196 196 - padding: 0 10px; 197 197 - } 179 179 + .loading-ship { 180 180 + width: 88px; 181 181 + height: auto; 182 182 + image-rendering: pixelated; 183 183 + animation: float 2s ease-in-out infinite; 184 184 + } 198 185 199 199 - .player-inner { 200 200 - background: url('/space.png') center / cover no-repeat; 201 201 - padding: 24px; 202 202 - } 186 186 + @keyframes float { 187 187 + 0%, 100% { transform: translateY(0); } 188 188 + 50% { transform: translateY(-10px); } 189 189 + } 203 190 204 204 - .player-info { 205 205 - padding: 20px 4px; 206 206 - } 191 191 + .loading-text { 192 192 + margin-top: 1rem; 193 193 + font-family: monospace; 194 194 + font-size: 1.1rem; 195 195 + opacity: 0.7; 196 196 + animation: font-switch 4s steps(1) infinite; 197 197 + } 207 198 208 208 - .player-meta-row { 209 209 - display: flex; 210 210 - align-items: center; 211 211 - gap: 10px; 212 212 - margin-top: 6px; 213 213 - } 199 199 + .error-screen { 200 200 + display: flex; 201 201 + flex-direction: column; 202 202 + align-items: center; 203 203 + justify-content: center; 204 204 + height: 100vh; 205 205 + background: #0b0e17; 206 206 + color: #ff6b2c; 207 207 + gap: 1rem; 208 208 + } 214 209 215 215 - .creator-avatar-link { 216 216 - flex-shrink: 0; 217 217 - transition: transform 0.15s; 218 218 - } 210 210 + .error-text { 211 211 + font-family: monospace; 212 212 + font-size: 1.2rem; 213 213 + } 219 214 220 220 - .creator-avatar-link:hover { 221 221 - transform: scale(1.1); 222 222 - } 215 215 + .retry-btn { 216 216 + background: #ff6b2c; 217 217 + color: #fff; 218 218 + border: none; 219 219 + padding: 0.75rem 2rem; 220 220 + font-family: monospace; 221 221 + font-size: 1rem; 222 222 + cursor: pointer; 223 223 + border-radius: 4px; 224 224 + } 223 225 224 224 - .player-title { 225 225 - margin: 0; 226 226 - font-size: clamp(1.4rem, 3vw, 2rem); 227 227 - color: #E8E0FF; 228 228 - animation: font-switch 4s steps(1) infinite; 229 229 - text-shadow: 230 230 - -1px -1px 0 rgba(11, 14, 23, 0.8), 231 231 - 1px -1px 0 rgba(11, 14, 23, 0.8), 232 232 - -1px 1px 0 rgba(11, 14, 23, 0.8), 233 233 - 1px 1px 0 rgba(11, 14, 23, 0.8); 234 234 - } 226 226 + .video-overlay { 227 227 + position: fixed; 228 228 + inset: 0; 229 229 + z-index: 600; 230 230 + background: #0b0e17; 231 231 + overflow-y: auto; 232 232 + display: flex; 233 233 + flex-direction: column; 234 234 + } 235 235 236 236 - .player-meta { 237 237 - margin: 6px 0 0; 238 238 - animation: font-switch 4s steps(1) infinite; 239 239 - color: #E8E0FF; 240 240 - opacity: 0.7; 241 241 - font-size: 0.85rem; 242 242 - text-shadow: 243 243 - -1px -1px 0 rgba(11, 14, 23, 0.8), 244 244 - 1px -1px 0 rgba(11, 14, 23, 0.8), 245 245 - -1px 1px 0 rgba(11, 14, 23, 0.8), 246 246 - 1px 1px 0 rgba(11, 14, 23, 0.8); 247 247 - } 236 236 + .video-overlay-header { 237 237 + display: flex; 238 238 + align-items: center; 239 239 + justify-content: space-between; 240 240 + padding: 0.5rem 1rem; 241 241 + flex-shrink: 0; 242 242 + } 248 243 249 249 - .creator-tag { 250 250 - color: #FFD93D; 251 251 - text-decoration: underline; 252 252 - } 244 244 + .video-close-btn { 245 245 + background: none; 246 246 + border: 2px solid #e94560; 247 247 + color: #e94560; 248 248 + padding: 0.5rem 1rem; 249 249 + font-family: monospace; 250 250 + font-size: 0.9rem; 251 251 + cursor: pointer; 252 252 + border-radius: 4px; 253 253 + transition: all 0.2s; 254 254 + } 253 255 254 254 - .dot { 255 255 - margin: 0 4px; 256 256 - color: #E8E0FF; 257 257 - opacity: 0.4; 258 258 - } 256 256 + .video-close-btn:hover { 257 257 + background: #e94560; 258 258 + color: #fff; 259 259 + } 259 260 260 260 - .close-btn { 261 261 - background: #0B0E17; 262 262 - color: #FFD93D; 263 263 - border: 2px solid #FFD93D; 264 264 - border-radius: 50%; 265 265 - width: 36px; 266 266 - height: 36px; 267 267 - font-size: 1rem; 268 268 - cursor: pointer; 269 269 - flex-shrink: 0; 270 270 - font-family: 'Comic Sans MS', 'Comic Sans', cursive, system-ui; 271 271 - transition: 272 272 - background 0.15s, 273 273 - color 0.15s; 274 274 - } 275 275 - 276 276 - .close-btn:hover { 277 277 - background: #FF6B2C; 278 278 - border-color: #FF6B2C; 279 279 - color: #FFD93D; 280 280 - } 281 281 - 282 282 - .grid { 283 283 - display: grid; 284 284 - grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); 285 285 - gap: clamp(32px, 5vw, 50px); 286 286 - padding: 20px clamp(16px, 3vw, 24px); 287 287 - } 288 288 - 289 289 - .pagination { 290 290 - display: flex; 291 291 - justify-content: center; 292 292 - align-items: center; 293 293 - gap: 20px; 294 294 - padding: 30px; 295 295 - } 296 296 - 297 297 - .page-btn { 298 298 - background: #0B0E17; 299 299 - color: #FFD93D; 300 300 - border: 3px solid #0B0E17; 301 301 - padding: 12px 32px; 302 302 - border-radius: 40px; 303 303 - animation: font-switch 4s steps(1) infinite; 304 304 - font-size: 1.1rem; 305 305 - cursor: pointer; 306 306 - transition: all 0.2s ease; 307 307 - letter-spacing: 0.5px; 308 308 - text-shadow: 309 309 - -1px -1px 0 rgba(11, 14, 23, 0.8), 310 310 - 1px -1px 0 rgba(11, 14, 23, 0.8), 311 311 - -1px 1px 0 rgba(11, 14, 23, 0.8), 312 312 - 1px 1px 0 rgba(11, 14, 23, 0.8); 313 313 - } 261 261 + .video-container { 262 262 + flex: 1; 263 263 + max-width: 1000px; 264 264 + width: 100%; 265 265 + margin: 0 auto; 266 266 + padding: 0 1rem 2rem; 267 267 + } 314 268 315 315 - .page-btn:hover { 316 316 - background: #FFD93D; 317 317 - color: #0B0E17; 318 318 - border-color: #0B0E17; 319 319 - } 269 269 + .video-info { 270 270 + padding: 1rem 0; 271 271 + } 320 272 321 321 - .page-btn:disabled { 322 322 - background: #0B0E17; 323 323 - color: #E8E0FF; 324 324 - border-color: #0B0E17; 325 325 - cursor: wait; 326 326 - opacity: 0.6; 327 327 - } 273 273 + .video-title { 274 274 + margin: 0; 275 275 + color: #e8e0ff; 276 276 + font-size: 1.4rem; 277 277 + animation: font-switch 4s steps(1) infinite; 278 278 + } 328 279 329 329 - .page-num { 330 330 - animation: font-switch 4s steps(1) infinite; 331 331 - font-size: 1.1rem; 332 332 - color: #E8E0FF; 333 333 - text-shadow: 334 334 - -1px -1px 0 rgba(11, 14, 23, 0.8), 335 335 - 1px -1px 0 rgba(11, 14, 23, 0.8), 336 336 - -1px 1px 0 rgba(11, 14, 23, 0.8), 337 337 - 1px 1px 0 rgba(11, 14, 23, 0.8); 338 338 - } 280 280 + .video-meta { 281 281 + margin: 0.5rem 0 0; 282 282 + color: #888; 283 283 + font-family: monospace; 284 284 + font-size: 0.9rem; 285 285 + } 339 286 340 340 - .error { 341 341 - background: rgba(255, 107, 44, 0.15); 342 342 - color: #FF6B2C; 343 343 - padding: 12px 16px; 344 344 - border-radius: 8px; 345 345 - margin: 0 10px 20px; 346 346 - animation: font-switch 4s steps(1) infinite; 347 347 - border: 2px solid #FF6B2C; 348 348 - text-shadow: 349 349 - -1px -1px 0 rgba(11, 14, 23, 0.8), 350 350 - 1px -1px 0 rgba(11, 14, 23, 0.8), 351 351 - -1px 1px 0 rgba(11, 14, 23, 0.8), 352 352 - 1px 1px 0 rgba(11, 14, 23, 0.8); 353 353 - } 287 287 + .creator-link { 288 288 + color: #ffd93d; 289 289 + text-decoration: none; 290 290 + } 354 291 355 355 - /* Fluid values handle all sizes — no hard breakpoints needed */ 292 292 + .creator-link:hover { 293 293 + text-decoration: underline; 294 294 + } 356 295 </style>

-308

src/routes/profile/[handle]/+page.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import { onMount } from 'svelte'; 3 3 - import { page } from '$app/stores'; 4 4 - import { getProfile, type BskyProfile } from '$lib/api'; 5 5 - import WavyBorder from '$lib/WavyBorder.svelte'; 6 6 - import VodjamHeader from '$lib/VodjamHeader.svelte'; 7 7 - 8 8 - let profile: BskyProfile | null = $state(null); 9 9 - let loading = $state(true); 10 10 - let error = $state(''); 11 11 - 12 12 - let handle = $derived($page.params.handle); 13 13 - 14 14 - onMount(async () => { 15 15 - loading = true; 16 16 - error = ''; 17 17 - try { 18 18 - profile = await getProfile(handle); 19 19 - } catch (e: any) { 20 20 - error = e.message; 21 21 - } 22 22 - loading = false; 23 23 - }); 24 24 - </script> 25 25 - 26 26 - <svelte:head> 27 27 - <title>{profile?.displayName || handle} — VoD Jam</title> 28 28 - </svelte:head> 29 29 - 30 30 - <div class="profile-page"> 31 31 - <VodjamHeader /> 32 32 - 33 33 - {#if loading} 34 34 - <div class="loading"> 35 35 - <img src="/earl-walk-right-1.png" alt="loading" class="loading-vodjam" /> 36 36 - <p class="loading-text">hopping over to fetch profile...</p> 37 37 - </div> 38 38 - {:else if error} 39 39 - <div class="error">{error}</div> 40 40 - {:else if profile} 41 41 - <div class="profile-layout"> 42 42 - <!-- Banner --> 43 43 - {#if profile.banner} 44 44 - <WavyBorder seed="profile-banner" fill="#1E2952" strokeColor="#0B0E17" strokeWidth={2} padding={4}> 45 45 - <img src={profile.banner} alt="banner" class="banner-img" /> 46 46 - </WavyBorder> 47 47 - {/if} 48 48 - 49 49 - <!-- Profile card --> 50 50 - <div class="profile-card-area"> 51 51 - <WavyBorder seed="profile-card" fill="#141833" strokeColor="#0B0E17" strokeWidth={2} padding={48}> 52 52 - <div class="profile-card"> 53 53 - {#if profile.avatar} 54 54 - <div class="avatar-wrapper"> 55 55 - <WavyBorder seed="profile-avatar" fill="#FFD93D" strokeColor="#0B0E17" strokeWidth={1.5} padding={4}> 56 56 - <img src={profile.avatar} alt={profile.displayName || profile.handle} class="avatar" /> 57 57 - </WavyBorder> 58 58 - </div> 59 59 - {/if} 60 60 - 61 61 - <h1 class="display-name">{profile.displayName || profile.handle}</h1> 62 62 - <p class="handle">@{profile.handle}</p> 63 63 - 64 64 - {#if profile.description} 65 65 - <p class="description">{profile.description}</p> 66 66 - {/if} 67 67 - 68 68 - <div class="stats"> 69 69 - {#if profile.followersCount !== undefined} 70 70 - <div class="stat"> 71 71 - <span class="stat-num">{profile.followersCount}</span> 72 72 - <span class="stat-label">followers</span> 73 73 - </div> 74 74 - {/if} 75 75 - {#if profile.followsCount !== undefined} 76 76 - <div class="stat"> 77 77 - <span class="stat-num">{profile.followsCount}</span> 78 78 - <span class="stat-label">following</span> 79 79 - </div> 80 80 - {/if} 81 81 - {#if profile.postsCount !== undefined} 82 82 - <div class="stat"> 83 83 - <span class="stat-num">{profile.postsCount}</span> 84 84 - <span class="stat-label">posts</span> 85 85 - </div> 86 86 - {/if} 87 87 - </div> 88 88 - 89 89 - <a href="https://witchsky.app/profile/{profile.handle}" target="_blank" class="profile-link"> 90 90 - view on witchsky → 91 91 - </a> 92 92 - </div> 93 93 - </WavyBorder> 94 94 - </div> 95 95 - </div> 96 96 - {/if} 97 97 - 98 98 - <div class="back-link"> 99 99 - <a href="/">← back to vods</a> 100 100 - </div> 101 101 - </div> 102 102 - 103 103 - <style> 104 104 - .profile-page { 105 105 - max-width: 800px; 106 106 - margin: 0 auto; 107 107 - padding: 0 clamp(24px, 7vw, 80px) 60px; 108 108 - } 109 109 - 110 110 - .loading { 111 111 - text-align: center; 112 112 - padding: 60px 20px; 113 113 - } 114 114 - 115 115 - .loading-vodjam { 116 116 - width: 64px; 117 117 - height: auto; 118 118 - animation: hop 0.6s ease-in-out infinite alternate; 119 119 - } 120 120 - 121 121 - @keyframes hop { 122 122 - 0% { transform: translateY(0); } 123 123 - 100% { transform: translateY(-12px); } 124 124 - } 125 125 - 126 126 - .loading-text { 127 127 - animation: font-switch 4s steps(1) infinite; 128 128 - font-size: 1.2rem; 129 129 - color: #E8E0FF; 130 130 - margin-top: 12px; 131 131 - text-shadow: 132 132 - -1px -1px 0 rgba(11, 14, 23, 0.8), 133 133 - 1px -1px 0 rgba(11, 14, 23, 0.8), 134 134 - -1px 1px 0 rgba(11, 14, 23, 0.8), 135 135 - 1px 1px 0 rgba(11, 14, 23, 0.8); 136 136 - } 137 137 - 138 138 - .error { 139 139 - background: rgba(255, 107, 44, 0.15); 140 140 - color: #FF6B2C; 141 141 - padding: 12px 16px; 142 142 - border-radius: 8px; 143 143 - margin: 20px 0; 144 144 - animation: font-switch 4s steps(1) infinite; 145 145 - border: 2px solid #FF6B2C; 146 146 - text-shadow: 147 147 - -1px -1px 0 rgba(11, 14, 23, 0.8), 148 148 - 1px -1px 0 rgba(11, 14, 23, 0.8), 149 149 - -1px 1px 0 rgba(11, 14, 23, 0.8), 150 150 - 1px 1px 0 rgba(11, 14, 23, 0.8); 151 151 - } 152 152 - 153 153 - .profile-layout { 154 154 - display: flex; 155 155 - flex-direction: column; 156 156 - gap: 24px; 157 157 - } 158 158 - 159 159 - .banner-img { 160 160 - width: 100%; 161 161 - display: block; 162 162 - aspect-ratio: 3 / 1; 163 163 - object-fit: cover; 164 164 - } 165 165 - 166 166 - .profile-card-area { 167 167 - margin-top: -20px; 168 168 - } 169 169 - 170 170 - .profile-card { 171 171 - display: flex; 172 172 - flex-direction: column; 173 173 - align-items: center; 174 174 - text-align: center; 175 175 - gap: 8px; 176 176 - } 177 177 - 178 178 - .avatar-wrapper { 179 179 - width: clamp(80px, 15vw, 120px); 180 180 - margin-bottom: 8px; 181 181 - } 182 182 - 183 183 - .avatar { 184 184 - width: 100%; 185 185 - display: block; 186 186 - aspect-ratio: 1; 187 187 - object-fit: cover; 188 188 - border-radius: 0; 189 189 - } 190 190 - 191 191 - .display-name { 192 192 - font-size: clamp(1.8rem, 4vw, 2.8rem); 193 193 - color: #E8E0FF; 194 194 - margin: 0; 195 195 - line-height: 1.1; 196 196 - animation: font-switch 4s steps(1) infinite; 197 197 - text-shadow: 198 198 - -1px -1px 0 rgba(11, 14, 23, 0.8), 199 199 - 1px -1px 0 rgba(11, 14, 23, 0.8), 200 200 - -1px 1px 0 rgba(11, 14, 23, 0.8), 201 201 - 1px 1px 0 rgba(11, 14, 23, 0.8); 202 202 - } 203 203 - 204 204 - .handle { 205 205 - animation: font-switch 4s steps(1) infinite; 206 206 - font-size: 1rem; 207 207 - color: #E8E0FF; 208 208 - opacity: 0.7; 209 209 - margin: 0; 210 210 - text-shadow: 211 211 - -1px -1px 0 rgba(11, 14, 23, 0.8), 212 212 - 1px -1px 0 rgba(11, 14, 23, 0.8), 213 213 - -1px 1px 0 rgba(11, 14, 23, 0.8), 214 214 - 1px 1px 0 rgba(11, 14, 23, 0.8); 215 215 - } 216 216 - 217 217 - .description { 218 218 - animation: font-switch 4s steps(1) infinite; 219 219 - font-size: 0.95rem; 220 220 - color: #E8E0FF; 221 221 - margin: 8px 0; 222 222 - max-width: 500px; 223 223 - line-height: 1.5; 224 224 - text-shadow: 225 225 - -1px -1px 0 rgba(11, 14, 23, 0.8), 226 226 - 1px -1px 0 rgba(11, 14, 23, 0.8), 227 227 - -1px 1px 0 rgba(11, 14, 23, 0.8), 228 228 - 1px 1px 0 rgba(11, 14, 23, 0.8); 229 229 - } 230 230 - 231 231 - .stats { 232 232 - display: flex; 233 233 - gap: clamp(16px, 4vw, 32px); 234 234 - margin: 12px 0; 235 235 - } 236 236 - 237 237 - .stat { 238 238 - display: flex; 239 239 - flex-direction: column; 240 240 - align-items: center; 241 241 - } 242 242 - 243 243 - .stat-num { 244 244 - animation: font-switch 4s steps(1) infinite; 245 245 - font-size: 1.4rem; 246 246 - color: #E8E0FF; 247 247 - font-weight: bold; 248 248 - text-shadow: 249 249 - -1px -1px 0 rgba(11, 14, 23, 0.8), 250 250 - 1px -1px 0 rgba(11, 14, 23, 0.8), 251 251 - -1px 1px 0 rgba(11, 14, 23, 0.8), 252 252 - 1px 1px 0 rgba(11, 14, 23, 0.8); 253 253 - } 254 254 - 255 255 - .stat-label { 256 256 - animation: font-switch 4s steps(1) infinite; 257 257 - font-size: 0.75rem; 258 258 - color: #E8E0FF; 259 259 - opacity: 0.6; 260 260 - text-shadow: 261 261 - -1px -1px 0 rgba(11, 14, 23, 0.8), 262 262 - 1px -1px 0 rgba(11, 14, 23, 0.8), 263 263 - -1px 1px 0 rgba(11, 14, 23, 0.8), 264 264 - 1px 1px 0 rgba(11, 14, 23, 0.8); 265 265 - } 266 266 - 267 267 - .profile-link { 268 268 - animation: font-switch 4s steps(1) infinite; 269 269 - font-size: 1rem; 270 270 - color: #E8E0FF; 271 271 - text-decoration: underline; 272 272 - text-decoration-color: #FF6B2C; 273 273 - margin-top: 8px; 274 274 - transition: color 0.15s; 275 275 - text-shadow: 276 276 - -1px -1px 0 rgba(11, 14, 23, 0.8), 277 277 - 1px -1px 0 rgba(11, 14, 23, 0.8), 278 278 - -1px 1px 0 rgba(11, 14, 23, 0.8), 279 279 - 1px 1px 0 rgba(11, 14, 23, 0.8); 280 280 - } 281 281 - 282 282 - .profile-link:hover { 283 283 - color: #FF6B2C; 284 284 - } 285 285 - 286 286 - .back-link { 287 287 - text-align: center; 288 288 - padding: 30px; 289 289 - } 290 290 - 291 291 - .back-link a { 292 292 - animation: font-switch 4s steps(1) infinite; 293 293 - font-size: 1.1rem; 294 294 - color: #E8E0FF; 295 295 - text-decoration: underline; 296 296 - text-decoration-color: #FF6B2C; 297 297 - transition: color 0.15s; 298 298 - text-shadow: 299 299 - -1px -1px 0 rgba(11, 14, 23, 0.8), 300 300 - 1px -1px 0 rgba(11, 14, 23, 0.8), 301 301 - -1px 1px 0 rgba(11, 14, 23, 0.8), 302 302 - 1px 1px 0 rgba(11, 14, 23, 0.8); 303 303 - } 304 304 - 305 305 - .back-link a:hover { 306 306 - color: #FF6B2C; 307 307 - } 308 308 - </style>

-2

src/routes/profile/[handle]/+page.ts

reviewed

··· 1 1 - export const prerender = false; 2 2 - export const ssr = false;

static/sprites/earl/idle-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/idle-2.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-down-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-down-2.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-down-3.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-down-4.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-left-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-left-2.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-left-3.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-left-4.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-right-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-right-2.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-right-3.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-right-4.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-up-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-up-2.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-up-3.png

reviewed

This is a binary file and will not be displayed.

static/sprites/earl/walk-up-4.png

reviewed

This is a binary file and will not be displayed.

static/sprites/present/closed-blue.png

reviewed

This is a binary file and will not be displayed.

static/sprites/present/closed-green.png

reviewed

This is a binary file and will not be displayed.

static/sprites/present/closed.png

reviewed

This is a binary file and will not be displayed.

static/sprites/scenery/bush-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/scenery/tree-1.png

reviewed

This is a binary file and will not be displayed.

static/sprites/ship/ship.png

reviewed

This is a binary file and will not be displayed.

static/sprites/terrain/grass-tile.png

reviewed

This is a binary file and will not be displayed.