dane/venture-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add typescript checking

Browse Source
This commit is contained in:
Dane Johnson 2023-02-13 14:59:00 -06:00
parent 366238748e
commit 57a065abd1
10 changed files with 69 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dir-locals.el
View File

@ -2,5 +2,5 @@
;;; For more information see (info "(emacs) Directory Variables")
((js-mode . ((js-indent-level . 2)))
(web-mode . ((mode . prettier)
(web-mode . ((mode . prettier-js)
(indent-tabs-mode . nil))))

31
.eslintrc.cjs Normal file
View File

@ -0,0 +1,31 @@
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json",
"tsconfigRootDir": __dirname,
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {},
"settings": {
"react": {
"version": "detect",
},
},
}

17
.eslintrc.yml
View File

@ -1,17 +0,0 @@
env:
browser: true
es2021: true
extends:
- eslint:recommended
- plugin:react/recommended
- plugin:react/jsx-runtime
- plugin:@typescript-eslint/recommended
overrides: []
parser: '@typescript-eslint/parser'
parserOptions:
ecmaVersion: latest
sourceType: module
plugins:
- react
- '@typescript-eslint'
rules: {}

137
package-lock.json generated
View File

@ -10,18 +10,17 @@
"dependencies": {
"@reduxjs/toolkit": "^1.9.2",
"bootstrap": "^5.2.3",
"konva": "^8.4.2",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-konva": "^18.2.3",
"react-redux": "^8.0.5",
"react-router": "^6.7.0",
"react-router-dom": "^6.7.0",
"socket.io-client": "^4.5.4"
},
"devDependencies": {
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@typescript-eslint/eslint-plugin": "^5.49.0",
@ -1045,6 +1044,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
"node_modules/@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
"dev": true
},
"node_modules/@types/node": {
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
@ -1077,14 +1082,6 @@
"@types/react": "*"
}
},
"node_modules/@types/react-reconciler": {
"version": "0.28.2",
"resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.2.tgz",
"integrity": "sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -3046,17 +3043,6 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"node_modules/its-fine": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.0.8.tgz",
"integrity": "sha512-MagTA9/J6kN3aEQsQu6by3nyrttCm0whCOYo4SfiNzOfYgcr1cb29mJ3zgluaJboaWOL/lHzJeMXi/QGSCfX1Q==",
"dependencies": {
"@types/react-reconciler": "^0.28.0"
},
"peerDependencies": {
"react": ">=18.0"
}
},
"node_modules/js-sdsl": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@ -3133,25 +3119,6 @@
"node": ">=4.0"
}
},
"node_modules/konva": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/konva/-/konva-8.4.2.tgz",
"integrity": "sha512-4VQcrgj/PI8ydJjtLcTuinHBE8o0WGX0YoRwbiN5mpYQiC52aOzJ0XbpKNDJdRvORQphK5LP+jeM0hQJEYIuUA==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/lavrton"
},
{
"type": "opencollective",
"url": "https://opencollective.com/konva"
},
{
"type": "github",
"url": "https://github.com/sponsors/lavrton"
}
]
},
"node_modules/levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@ -3681,55 +3648,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-konva": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.3.tgz",
"integrity": "sha512-OPxjBTgaEGU9pt/VJSVM7QNXYHEZ5CkulX+4fTTvbaH+Wh+vMLbXmH3yjWw4kT/5Qi6t0UQKHPPmirCv8/9sdg==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/lavrton"
},
{
"type": "opencollective",
"url": "https://opencollective.com/konva"
},
{
"type": "github",
"url": "https://github.com/sponsors/lavrton"
}
],
"dependencies": {
"its-fine": "^1.0.6",
"react-reconciler": "~0.29.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"konva": "^8.0.1 || ^7.2.5",
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-reconciler": {
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
"integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"engines": {
"node": ">=0.10.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-redux": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@ -5201,6 +5124,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
"@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
"dev": true
},
"@types/node": {
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
@ -5233,14 +5162,6 @@
"@types/react": "*"
}
},
"@types/react-reconciler": {
"version": "0.28.2",
"resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.2.tgz",
"integrity": "sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==",
"requires": {
"@types/react": "*"
}
},
"@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -6643,14 +6564,6 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"its-fine": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.0.8.tgz",
"integrity": "sha512-MagTA9/J6kN3aEQsQu6by3nyrttCm0whCOYo4SfiNzOfYgcr1cb29mJ3zgluaJboaWOL/lHzJeMXi/QGSCfX1Q==",
"requires": {
"@types/react-reconciler": "^0.28.0"
}
},
"js-sdsl": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@ -6705,11 +6618,6 @@
"object.assign": "^4.1.3"
}
},
"konva": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/konva/-/konva-8.4.2.tgz",
"integrity": "sha512-4VQcrgj/PI8ydJjtLcTuinHBE8o0WGX0YoRwbiN5mpYQiC52aOzJ0XbpKNDJdRvORQphK5LP+jeM0hQJEYIuUA=="
},
"levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@ -7079,30 +6987,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-konva": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.3.tgz",
"integrity": "sha512-OPxjBTgaEGU9pt/VJSVM7QNXYHEZ5CkulX+4fTTvbaH+Wh+vMLbXmH3yjWw4kT/5Qi6t0UQKHPPmirCv8/9sdg==",
"requires": {
"its-fine": "^1.0.6",
"react-reconciler": "~0.29.0",
"scheduler": "^0.23.0"
}
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-reconciler": {
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
"integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
"requires": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
}
},
"react-redux": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",

6
package.json
View File

@ -7,23 +7,23 @@
"start": "vite --host",
"build": "tsc && vite build",
"preview": "vite preview",
"pretty": "prettier -w src"
"pretty": "prettier -w src",
"lint": "eslint src"
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.2",
"bootstrap": "^5.2.3",
"konva": "^8.4.2",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-konva": "^18.2.3",
"react-redux": "^8.0.5",
"react-router": "^6.7.0",
"react-router-dom": "^6.7.0",
"socket.io-client": "^4.5.4"
},
"devDependencies": {
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@typescript-eslint/eslint-plugin": "^5.49.0",

5
src/Contestant.tsx
View File

@ -15,11 +15,6 @@ const Contestant = () => {
useEffect(() => {
socket.emit("contestant-join", { room, signature });
}, []);
useEffect(() => {
if (parent.current) {
setWidth(parent.current.getBoundingClientRect().width);
}
}, [parent]);
const handleBuzz = debounce(
() => {

20
src/DrawPad.tsx
View File

@ -1,20 +1,22 @@
import { useRef, useState, useEffect } from "react";
import type { PointerEvent } from "react";
type Props = {
height: number,
lines: number[][],
onUpdateImage?: (path: number[]) => unknown,
readonly?: boolean,
height: number;
lines: number[][];
onUpdateImage?: (path: number[]) => unknown;
readonly?: boolean;
};
const cursorPos = (e) => {
const rect = e.target.getBoundingClientRect();
const cursorPos = (e: PointerEvent<HTMLCanvasElement>) => {
const target = e.target as HTMLCanvasElement;
const rect: DOMRect = target.getBoundingClientRect();
return [e.clientX - rect.left, e.clientY - rect.top];
};
const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
const parent = useRef();
const canvas = useRef();
const parent = useRef<HTMLElement>();
const canvas = useRef<HTMLCanvasElement>();
const [width, setWidth] = useState(0);
const [down, setDown] = useState(false);
const [path, setPath] = useState([]);
@ -51,7 +53,7 @@ const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
setDown(true);
};
const drawLine = (e) => {
const drawLine = (e: PointerEvent<HTMLCanvasElement>) => {
if (!down) return;
const [x, y] = cursorPos(e);
setPath([...path, x, y]);

2
src/main.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { setup } from './socket';
import { setup } from "./socket";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>

11
src/socket.ts
View File

@ -11,15 +11,18 @@ export const setup = () => {
console.log("Connected to socket");
});
socket.on("set-code", ({ code }) => {
socket.on("set-code", ({ code }: { code: string }) => {
store.dispatch(setRoomCode(code));
});
socket.on("contestant-joined", (data) => {
socket.on(
"contestant-joined",
(data: { sid: string; signature: number[][] }) => {
store.dispatch(addContestant(data));
});
}
);
socket.on("categories", (data) =>
socket.on("categories", (data: string[]) =>
data.forEach((category) => store.dispatch(addCategory(category)))
);
};

2
src/store/displaySlice.ts
View File

@ -5,7 +5,7 @@ interface DisplayState {
contestants: Record<string, Contestant>;
}
interface Contestant {
export interface Contestant {
signature: number[][];
score: number;
active: boolean;