bsherriff/siren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjamin Sherriff
2023-12-10 11:28:43 -05:00
parent c825c73eb4
commit b474866e7e
11 changed files with 186 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
ui/package-lock.json generated
View File

@@ -8,18 +8,18 @@
"name": "siren-ui",
"version": "0.1.0",
"dependencies": {
"@mantine/core": "^7.1.5",
"@mantine/form": "^7.1.5",
"@mantine/hooks": "^7.1.5",
"@mantine/modals": "^7.1.5",
"@mantine/notifications": "^7.1.5",
"@mantine/core": "^7.2.2",
"@mantine/form": "^7.2.2",
"@mantine/hooks": "^7.2.2",
"@mantine/modals": "^7.2.2",
"@mantine/notifications": "^7.2.2",
"@pixi/react": "^7.1.1",
"js-cookie": "^3.0.5",
"next": "^13.5.6",
"next": "^14.0.3",
"pixi.js": "^7.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-icons": "^4.12.0",
"recoil": "^0.7.7"
},
"devDependencies": {
@@ -199,9 +199,9 @@
"dev": true
},
"node_modules/@mantine/core": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.1.5.tgz",
"integrity": "sha512-4jBuy26V4Wdrt7r2dT6d3SKSyU9Gfzxp0ycVTBd2FUb6PvsI/xyZIn8T/aHsJFQ1L5p7IHPcJCIThbmBpVvVtA==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.2.2.tgz",
"integrity": "sha512-cVGmLjYyKIzjn0LRwamj71O4HT43qCxPGAzMZqkMYGOako7xwBLYQNe7HjL/J0FXJDyfX8OdMylVhgsePWYbng==",
"dependencies": {
"@floating-ui/react": "^0.24.8",
"clsx": "2.0.0",
@@ -211,7 +211,7 @@
"type-fest": "^3.13.1"
},
"peerDependencies": {
"@mantine/hooks": "7.1.5",
"@mantine/hooks": "7.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
@@ -228,9 +228,9 @@
}
},
"node_modules/@mantine/form": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.1.5.tgz",
"integrity": "sha512-icBVvmkYdbD1Nea63GyPv0dF7Dq7kJUfIelFpG+BFLhCh/ctiCN+zL6PRGaXYtB9RDTN+/cyaHyvyRlCbtWQPg==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.2.2.tgz",
"integrity": "sha512-Tzux6WbUliK6id1I7lV8tmu6je0WFrJLPDg+0xVyW7Qk/zmju837kj7SSfvNcJa51dKAtYxf3FgqTRy6ap9QEA==",
"dependencies": {
"fast-deep-equal": "^3.1.3",
"klona": "^2.0.5"
@@ -240,35 +240,35 @@
}
},
"node_modules/@mantine/hooks": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.1.5.tgz",
"integrity": "sha512-LuKlJ5VDLYBMcleyKcL6nvcJZQaeJF4mIU5ryEiucy7IleZoD+lqWwNC1VAAN1fsjBRQfhFtFoRihUdIy/vDCA==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.2.2.tgz",
"integrity": "sha512-7CFSVP2aQHrBwLLAVf0q5dgj+6QTZmhLTNcuc3pE1du+HLFUdyVS6vvQC6kieZXxOd6UzwFGBlN4G+aDx95XeA==",
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/@mantine/modals": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.1.5.tgz",
"integrity": "sha512-VI3stQ2bqPQEhsqQdeBEhwK/Mi2iKlio+Y5TX1jaiYVbrB0WHdC2tGh2oY9W4ehsAkkX7OYbu8+L7hn9IGO3pw==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.2.2.tgz",
"integrity": "sha512-J65xJ5ZULUG8fvNU+UnHboqEs3ueNDTMITUiVucqw4lupt93JHfamuR/PIV2mrXMYqSaKd4NBnxvkmcpjs0uRg==",
"peerDependencies": {
"@mantine/core": "7.1.5",
"@mantine/hooks": "7.1.5",
"@mantine/core": "7.2.2",
"@mantine/hooks": "7.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
"node_modules/@mantine/notifications": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.1.5.tgz",
"integrity": "sha512-/WRxNNgPvRr4munHjCTZaMVjSIpz8ydheccpPGrqOgAN/zfPNWYYcv7kaqXdlb+ag9ZMFsixQB97svvhCRxPCA==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.2.2.tgz",
"integrity": "sha512-2MQ0jJi9HOspJOAq0sfE5QvacZytYoLB8k0GwnubnFilSACbpDYeoQXZWmKX0joYhHtKR15muTnF+P1s9kmr3Q==",
"dependencies": {
"@mantine/store": "7.1.5",
"@mantine/store": "7.2.2",
"react-transition-group": "4.4.5"
},
"peerDependencies": {
"@mantine/core": "7.1.5",
"@mantine/hooks": "7.1.5",
"@mantine/core": "7.2.2",
"@mantine/hooks": "7.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
@@ -298,17 +298,17 @@
}
},
"node_modules/@mantine/store": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.1.5.tgz",
"integrity": "sha512-iPAt8auWyUs5TyUr31MziCILlLCYCfw6fSqPvLxOwUYpSf9BvtCAoE9JmrRrVi2q5+xO0KPSyK+OHWyBwsAqcQ==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.2.2.tgz",
"integrity": "sha512-j8vR8whB332pGI8OXkM2/3rdh4LJxELJQTG+rTsCCd3VQuEJiRTQDKVaOvp9ONja3GU5b1Tk3zhKOrkpgxTJBA==",
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/@next/env": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
"integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
"integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
},
"node_modules/@next/eslint-plugin-next": {
"version": "13.5.6",
@@ -320,9 +320,9 @@
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
"integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.3.tgz",
"integrity": "sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==",
"cpu": [
"arm64"
],
@@ -335,9 +335,9 @@
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
"integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.3.tgz",
"integrity": "sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==",
"cpu": [
"x64"
],
@@ -350,9 +350,9 @@
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
"integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.3.tgz",
"integrity": "sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==",
"cpu": [
"arm64"
],
@@ -365,9 +365,9 @@
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
"integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.3.tgz",
"integrity": "sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==",
"cpu": [
"arm64"
],
@@ -380,9 +380,9 @@
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
"integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.3.tgz",
"integrity": "sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==",
"cpu": [
"x64"
],
@@ -395,9 +395,9 @@
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
"integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.3.tgz",
"integrity": "sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==",
"cpu": [
"x64"
],
@@ -410,9 +410,9 @@
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
"integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.3.tgz",
"integrity": "sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==",
"cpu": [
"arm64"
],
@@ -425,9 +425,9 @@
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
"integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.3.tgz",
"integrity": "sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==",
"cpu": [
"ia32"
],
@@ -440,9 +440,9 @@
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
"integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.3.tgz",
"integrity": "sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==",
"cpu": [
"x64"
],
@@ -3689,11 +3689,11 @@
"dev": true
},
"node_modules/next": {
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
"integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/next/-/next-14.0.3.tgz",
"integrity": "sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==",
"dependencies": {
"@next/env": "13.5.6",
"@next/env": "14.0.3",
"@swc/helpers": "0.5.2",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001406",
@@ -3705,18 +3705,18 @@
"next": "dist/bin/next"
},
"engines": {
"node": ">=16.14.0"
"node": ">=18.17.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "13.5.6",
"@next/swc-darwin-x64": "13.5.6",
"@next/swc-linux-arm64-gnu": "13.5.6",
"@next/swc-linux-arm64-musl": "13.5.6",
"@next/swc-linux-x64-gnu": "13.5.6",
"@next/swc-linux-x64-musl": "13.5.6",
"@next/swc-win32-arm64-msvc": "13.5.6",
"@next/swc-win32-ia32-msvc": "13.5.6",
"@next/swc-win32-x64-msvc": "13.5.6"
"@next/swc-darwin-arm64": "14.0.3",
"@next/swc-darwin-x64": "14.0.3",
"@next/swc-linux-arm64-gnu": "14.0.3",
"@next/swc-linux-arm64-musl": "14.0.3",
"@next/swc-linux-x64-gnu": "14.0.3",
"@next/swc-linux-x64-musl": "14.0.3",
"@next/swc-win32-arm64-msvc": "14.0.3",
"@next/swc-win32-ia32-msvc": "14.0.3",
"@next/swc-win32-x64-msvc": "14.0.3"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
@@ -4371,9 +4371,9 @@
}
},
"node_modules/react-icons": {
"version": "4.11.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
"integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
"peerDependencies": {
"react": "*"
}

14
ui/package.json
View File

@@ -9,18 +9,18 @@
"lint": "next lint"
},
"dependencies": {
"@mantine/core": "^7.1.5",
"@mantine/form": "^7.1.5",
"@mantine/hooks": "^7.1.5",
"@mantine/modals": "^7.1.5",
"@mantine/notifications": "^7.1.5",
"@mantine/core": "^7.2.2",
"@mantine/form": "^7.2.2",
"@mantine/hooks": "^7.2.2",
"@mantine/modals": "^7.2.2",
"@mantine/notifications": "^7.2.2",
"@pixi/react": "^7.1.1",
"js-cookie": "^3.0.5",
"next": "^13.5.6",
"next": "^14.0.3",
"pixi.js": "^7.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-icons": "^4.12.0",
"recoil": "^0.7.7"
},
"devDependencies": {

28
ui/src/app/campaigns/page.tsx
View File

@@ -1,5 +1,29 @@
import React from 'react';
'use client';
import { ActionIcon, Tooltip } from '@mantine/core';
import { FaPlus } from "react-icons/fa";
import React, { useEffect } from 'react';
import { getCampigns } from '@/api/campaigns';
import { Campaign } from '@/api/campaigns.types';
export default function Page() {
return <></>;
const [campaigns, setCampaigns] = React.useState<Campaign[]>([]);
useEffect(() => {
getCampigns().then((data) => setCampaigns(data));
}, []);
return (
<div>
<h1>Campaigns</h1>
<Tooltip label="Create a new campaign">
<ActionIcon variant="outline" color="blue">
<FaPlus />
</ActionIcon>
</Tooltip>
{campaigns && campaigns.map((campaign) => (
<div key={campaign.id}>{campaign.name}</div>
))}
</div>
);
}

7
ui/src/app/layout.tsx
View File

@@ -8,6 +8,7 @@ import { Notifications } from '@mantine/notifications';
import 'styles/globals.css';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import Loading from '@/components/Loading';
export const metadata = {
title: 'Siren',
@@ -27,8 +28,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<MantineProvider>
<Notifications />
<ModalsProvider>
<Header />
<Box>{children}</Box>
<Loading>
<Header />
<Box>{children}</Box>
</Loading>
</ModalsProvider>
</MantineProvider>
</RecoilRootWrapper>

13
ui/src/components/Header/index.tsx
View File

@@ -26,17 +26,8 @@ export default function Header() {
const router = useRouter();
useEffect(() => {
if (!user) {
hasSession().then((response) => {
if (response) {
refresh().then((response) => {
if (response) {
setUser(response.user);
updateUser(response.user);
}
});
}
});
if (user) {
updateUser(user);
}
}, [user]);

39
ui/src/components/Loading.tsx Normal file
View File

@@ -0,0 +1,39 @@
'use client';
import { hasSession, refresh } from "@/api/auth";
import { userState } from "@/state/auth";
import { Skeleton } from "@mantine/core";
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
export default function Loading({ children }: { children: React.ReactNode }) {
const [loading, setLoading] = useState(true);
const [user, setUser] = useRecoilState(userState);
useEffect(() => {
if (!user) {
hasSession().then((response) => {
if (response) {
refresh().then((response) => {
if (response) {
setUser(response.user);
setLoading(false);
} else {
setLoading(false);
}
});
} else {
setLoading(false);
}
});
} else {
setLoading(false);
}
}, []);
if (loading) {
return <Skeleton height={'100%'} />;
} else {
return <>{children}</>;
}
}

38
ui/src/components/TileGrid/index.tsx
View File

@@ -40,43 +40,44 @@ export default function TileGrid() {
e.preventDefault()
}
document.addEventListener('wheel', handleScroll, { passive: false })
// Prevent space from scrolling page
function handleSpace(e: any) {
if (e.key === ' ') {
e.preventDefault()
}
}
document.addEventListener('keydown', handleSpace, { passive: false })
return function cleanup() {
document.removeEventListener('contextmenu', handleContextmenu)
document.removeEventListener('wheel', handleScroll)
}
}, [])
}, [])
const drawGrid = useCallback(
(g: PixiGraphics) => {
g.clear();
// Draw edits
edits.forEach((edit) => {
g.beginFill(parseInt(edit.color.replace('#', ''), 16));
g.drawRect(edit.x * 32 * zoom, edit.y * 32 * zoom, 32 * zoom, 32 * zoom);
g.endFill();
});
// Draw dot in the corner of each tile
for (let x = 0; x < gridSize.width; x += 32 * zoom) {
for (let y = 0; y < gridSize.height; y += 32 * zoom) {
for (let x = 0; x < gridSize.width; x += (32 * zoom)) {
for (let y = 0; y < gridSize.height; y += (32 * zoom)) {
g.beginFill(0xffffff, 0.5);
g.drawCircle(x, y, 1);
g.endFill();
}
}
},
[gridSize, zoom]
);
const drawGridEdits = useCallback(
(g: PixiGraphics) => {
g.clear();
edits.forEach((edit) => {
g.beginFill(parseInt(edit.color.replace('#', ''), 16));
g.drawRect(edit.x * 32 * zoom, edit.y * 32 * zoom, 32 * zoom, 32 * zoom);
g.endFill();
});
},
[edits, zoom]
[gridSize, edits, zoom]
);
function drawSquare(button: number, clientX: number, clientY: number) {
// TODO: When zoomed in, the position is offset from above, when zoomed out, the position is offset from below
const x = Math.floor((clientX - position.x) / (32 * zoom));
// TODO: Fix y offset, currently appears to be 2 tiles down from mouse
const y = Math.floor((clientY - position.y) / (32 * zoom)) - 2;
const y = Math.floor((clientY - position.y) / (32 * zoom));
if (button === 1) {
// Add new edit if left mouse button is pressed
setEdits([...edits, { x, y, color: colors[selectedColor] }]);
@@ -162,7 +163,6 @@ export default function TileGrid() {
onWheel={(e) => zoomEvent(e)}
>
<Graphics x={position.x} y={position.y} draw={drawGrid} />
<Graphics x={position.x} y={position.y} draw={drawGridEdits} />
</Stage>
<TileControls
tool={tool}