Skip to content

Commit 6babcc8

Browse files
brandonnorsworthybrandonnorsworthy
committed
resolve lints, add filters in settings, responsive everywhere
1 parent c6a34b1 commit 6babcc8

File tree

21 files changed

+258
-192
lines changed

21 files changed

+258
-192
lines changed

‎public/assets/text/news.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ __^^ let us know if this is a feature you'd like to see! ^^__
1717
# Other
1818

1919
## About
20-
This website was created by discord @[zcog] hope you enjoy it!
20+
This website was created by discord user **zcog** hope you enjoy it!

‎src/components/ConfirmDialog/ConfirmDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, description, onCan
4242
<h2 className="text-lg font-semibold text-muted-foreground">{title}</h2>
4343
<p className="text-text-secondary">{description}</p>
4444
</div>
45-
<div className="flex justify-between w-full mt-2">
45+
<div className="flex flex-col items-start w-full gap-2 mt-2 sm:items-center sm:flex-row sm:justify-between">
4646
<Button onClick={onCancel}>
4747
Cancel
4848
</Button>

‎src/components/LoginPanel/LoginPanel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ const LoginPanel: React.FC<LoginPanelProps> = (props) => {
162162
</div>
163163
}
164164

165-
<div className="flex justify-between mt-2">
165+
<div className="flex flex-col items-start w-full gap-2 sm:items-center sm:flex-row sm:justify-between">
166166
<Button
167167
htmlType="button"
168168
onClick={() => navigate("/")}

‎src/components/MarkdownViewer/MarkdownViewer.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ interface MarkdownViewerProps {
88
const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ markdownFile }) => {
99
const [markdownContent, setMarkdownContent] = useState<string>('');
1010

11-
const loadMarkdown = async () => {
12-
try {
13-
const response = await fetch(markdownFile);
14-
const text = await response.text();
15-
setMarkdownContent(text);
16-
} catch (error) {
17-
console.error('Error loading markdown file:', error);
18-
}
19-
};
20-
2111
useEffect(() => {
12+
const loadMarkdown = async () => {
13+
try {
14+
const response = await fetch(markdownFile);
15+
const text = await response.text();
16+
setMarkdownContent(text);
17+
} catch (error) {
18+
console.error('Error loading markdown file:', error);
19+
}
20+
};
21+
2222
loadMarkdown();
2323
}, [markdownFile]);
2424

‎src/components/Modal/Modal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const QuestModal: React.FC<ModalProps> = ({ onClose, isOpen = true, children, hi
3737
return (
3838
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
3939
<div ref={modalRef} className={`p-2 max-h-[90dvh] shadow-lg ${hideContainer ? "" : "bg-secondary"}`}>
40-
<div className="max-w-full m-0 h-full max-h-[85dvh] overflow-y-auto sm:m-2 md:m-0 md:max-w-[42rem] text-text scrollbar-modern">
40+
<div className="max-w-full m-0 h-full max-h-[85dvh] overflow-y-auto sm:m-2 md:m-0 overflow-x-hidden md:max-w-[42rem] text-text scrollbar-modern">
4141
{children}
4242
</div>
4343
</div>

‎src/components/MultiSelect/MultiSelect.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Category } from '@/models/CategoryModels/categoryResponse';
2+
import React from 'react';
3+
4+
interface MultiSelectProps {
5+
categories: Category[];
6+
selectedCategories: number[];
7+
setSelectedCategories: React.Dispatch<React.SetStateAction<number[]>>;
8+
}
9+
10+
const MultiSelect: React.FC<MultiSelectProps> = (props) => {
11+
const { categories, selectedCategories, setSelectedCategories } = props;
12+
13+
const toggleCategory = (id: number) => {
14+
setSelectedCategories((prevSelected) => {
15+
if (prevSelected.includes(id)) {
16+
return prevSelected.filter(categoryId => categoryId !== id);
17+
} else {
18+
return [...prevSelected, id];
19+
}
20+
});
21+
};
22+
23+
return (
24+
<div className="w-full max-w-full mt-5">
25+
<div className="p-3 space-y-2 border-2 rounded-md border-buttonBackground-confirm">
26+
{categories.map(category => (
27+
<div
28+
key={category.id}
29+
onClick={() => toggleCategory(category.id)}
30+
className={`cursor-pointer p-2 rounded-md text-center
31+
${selectedCategories.includes(category.id)
32+
? 'bg-buttonBackground-confirm text-buttonText-confirm font-bold border-buttonBackground-confirm'
33+
: 'bg-white text-gray-800 border-gray-300'}
34+
hover:bg-buttonText-confirm hover:text-buttonBackground-confirm select-none`}
35+
>
36+
{category.name}
37+
</div>
38+
))}
39+
</div>
40+
41+
<input
42+
type="hidden"
43+
value={selectedCategories.join(',')}
44+
name="selectedCategories"
45+
/>
46+
</div>
47+
);
48+
};
49+
50+
export default MultiSelect;

‎src/components/MultiSelect/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import MultiSelect from "./MultiSelect";
2+
3+
export default MultiSelect;

‎src/components/SpinningWheel/SpinningWheel.tsx

+98-98
Original file line numberDiff line numberDiff line change
@@ -42,118 +42,118 @@ const wedges = [
4242

4343
const SpinningWheel: React.FC<SpinningWheelProps> = ({ size = 500, onDoneSpinning, onClick }) => {
4444
const canvasRef = useRef<HTMLCanvasElement>(null);
45-
let rotation = 0;
46-
let velocity = 0; // Spin velocity
47-
const maxVelocity = 0.025; // Maximum spin velocity
48-
const acceleration = 1.000 + (Math.random() * 0.001); // How fast the wheel ramps up
49-
const deceleration = 0.999; // How fast the wheel slows down
50-
let spinning = false; // Whether the wheel is currently spinning
51-
let phase = 'stopped';
52-
53-
// Draw the wheel
54-
const drawWheel = (ctx: CanvasRenderingContext2D) => {
55-
const numWedges = wedges.length;
56-
const arcSize = (2 * Math.PI) / numWedges;
57-
const borderWidth = 5;
58-
59-
wedges.forEach((wedge, i) => {
60-
const angle = i * arcSize;
61-
62-
// Draw wedge
63-
ctx.beginPath();
64-
ctx.moveTo(size / 2, size / 2);
65-
ctx.arc(size / 2, size / 2, size / 2, angle, angle + arcSize, false);
66-
ctx.fillStyle = wedge.color;
67-
ctx.fill();
6845

69-
// Add border around each wedge
70-
ctx.lineWidth = 3; // Adjust the thickness of the wedge border
71-
ctx.strokeStyle = "black"; // Set the border color for wedges
72-
ctx.stroke(); // Draw the border
73-
74-
// Draw text
75-
ctx.save();
76-
ctx.translate(size / 2, size / 2);
77-
ctx.rotate(angle + arcSize / 2);
78-
ctx.textAlign = "center";
79-
ctx.fillStyle = "black"; // Text color
80-
ctx.font = "16px Arial";
81-
ctx.fillText(wedge.label, size / 2.5, 10);
82-
ctx.restore();
83-
});
84-
85-
// Add a border around the wheel
86-
ctx.beginPath();
87-
ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
88-
ctx.lineWidth = borderWidth; // Set the border thickness (adjust this as needed)
89-
ctx.strokeStyle = "black"; // Set the border color
90-
ctx.stroke(); // Draw the border
91-
92-
// Draw the middle circle
93-
const centerX = size / 2;
94-
const centerY = size / 2;
95-
const centerRadius = size / 4; // Adjust the size of the middle circle
96-
97-
ctx.beginPath();
98-
ctx.arc(centerX, centerY, centerRadius, 0, 2 * Math.PI, false);
99-
ctx.fillStyle = "gray"; // Color of the middle circle
100-
ctx.fill();
101-
};
102-
103-
// Animation frame to handle spinning
104-
const updateRotation = () => {
105-
const canvas = canvasRef.current;
106-
if (canvas) {
107-
const ctx = canvas.getContext("2d");
108-
if (ctx) {
109-
// Clear the canvas and re-draw the wheel
110-
ctx.clearRect(0, 0, size, size);
46+
useEffect(() => {
47+
let rotation = 0;
48+
let velocity = 0; // Spin velocity
49+
const maxVelocity = 0.025; // Maximum spin velocity
50+
const acceleration = 1.000 + (Math.random() * 0.001); // How fast the wheel ramps up
51+
const deceleration = 0.999; // How fast the wheel slows down
52+
let spinning = false; // Whether the wheel is currently spinning
53+
let phase = 'stopped';
54+
55+
// Draw the wheel
56+
const drawWheel = (ctx: CanvasRenderingContext2D) => {
57+
const numWedges = wedges.length;
58+
const arcSize = (2 * Math.PI) / numWedges;
59+
const borderWidth = 5;
60+
61+
wedges.forEach((wedge, i) => {
62+
const angle = i * arcSize;
63+
64+
// Draw wedge
65+
ctx.beginPath();
66+
ctx.moveTo(size / 2, size / 2);
67+
ctx.arc(size / 2, size / 2, size / 2, angle, angle + arcSize, false);
68+
ctx.fillStyle = wedge.color;
69+
ctx.fill();
70+
71+
// Add border around each wedge
72+
ctx.lineWidth = 3; // Adjust the thickness of the wedge border
73+
ctx.strokeStyle = "black"; // Set the border color for wedges
74+
ctx.stroke(); // Draw the border
75+
76+
// Draw text
11177
ctx.save();
11278
ctx.translate(size / 2, size / 2);
113-
ctx.rotate(rotation); // Apply current rotation
114-
ctx.translate(-size / 2, -size / 2);
115-
drawWheel(ctx);
79+
ctx.rotate(angle + arcSize / 2);
80+
ctx.textAlign = "center";
81+
ctx.fillStyle = "black"; // Text color
82+
ctx.font = "16px Arial";
83+
ctx.fillText(wedge.label, size / 2.5, 10);
11684
ctx.restore();
85+
});
86+
87+
// Add a border around the wheel
88+
ctx.beginPath();
89+
ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
90+
ctx.lineWidth = borderWidth; // Set the border thickness (adjust this as needed)
91+
ctx.strokeStyle = "black"; // Set the border color
92+
ctx.stroke(); // Draw the border
93+
94+
// Draw the middle circle
95+
const centerX = size / 2;
96+
const centerY = size / 2;
97+
const centerRadius = size / 4; // Adjust the size of the middle circle
98+
99+
ctx.beginPath();
100+
ctx.arc(centerX, centerY, centerRadius, 0, 2 * Math.PI, false);
101+
ctx.fillStyle = "gray"; // Color of the middle circle
102+
ctx.fill();
103+
};
104+
105+
// Animation frame to handle spinning
106+
const updateRotation = () => {
107+
const canvas = canvasRef.current;
108+
if (canvas) {
109+
const ctx = canvas.getContext("2d");
110+
if (ctx) {
111+
// Clear the canvas and re-draw the wheel
112+
ctx.clearRect(0, 0, size, size);
113+
ctx.save();
114+
ctx.translate(size / 2, size / 2);
115+
ctx.rotate(rotation); // Apply current rotation
116+
ctx.translate(-size / 2, -size / 2);
117+
drawWheel(ctx);
118+
ctx.restore();
119+
}
117120
}
118-
}
119121

120-
if (phase === 'accelerating') {
121-
if (velocity < maxVelocity) {
122-
if (velocity === 0) {
123-
velocity = velocity + 0.02;
122+
if (phase === 'accelerating') {
123+
if (velocity < maxVelocity) {
124+
if (velocity === 0) {
125+
velocity = velocity + 0.02;
126+
}
127+
velocity = velocity * acceleration;
128+
} else {
129+
phase = 'decelerating';
124130
}
125-
velocity = velocity * acceleration;
126-
} else {
127-
phase = 'decelerating';
128131
}
129-
}
130-
131-
if (phase === 'decelerating') {
132-
if (velocity > 0.02) {
133-
velocity = velocity * deceleration;
134-
} else if (velocity > 0.001) {
135-
const fastDeceleration = 3;
136-
velocity = velocity * (1 - ((1 - deceleration) * fastDeceleration));
137-
} else {
138-
phase = 'stopped';
139-
spinning = false;
140-
velocity = 0;
141-
setTimeout(() => onDoneSpinning(), 2000);
132+
133+
if (phase === 'decelerating') {
134+
if (velocity > 0.02) {
135+
velocity = velocity * deceleration;
136+
} else if (velocity > 0.001) {
137+
const fastDeceleration = 3;
138+
velocity = velocity * (1 - ((1 - deceleration) * fastDeceleration));
139+
} else {
140+
phase = 'stopped';
141+
spinning = false;
142+
velocity = 0;
143+
setTimeout(() => onDoneSpinning(), 2000);
144+
}
142145
}
143-
}
144146

145-
if (spinning) {
146-
rotation = rotation + (velocity);
147-
requestAnimationFrame(updateRotation); // Continue the animation loop
148-
}
149-
};
147+
if (spinning) {
148+
rotation = rotation + (velocity);
149+
requestAnimationFrame(updateRotation); // Continue the animation loop
150+
}
151+
};
150152

151-
useEffect(() => {
152153
spinning = true;
153154
phase = 'accelerating';
154155
updateRotation();
155-
}, []);
156-
156+
}, [onDoneSpinning, size]);
157157

158158
return (
159159
<div className="text-white" onClick={onClick}>

‎src/components/SuggestionsPanel/SuggestionsPanel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const SuggestionsPanel: React.FC<SuggestionsPanelProps> = (props) => {
106106
</div>
107107
}
108108

109-
<div className="flex justify-between mt-2">
109+
<div className="flex flex-col items-start w-full gap-2 mt-2 sm:items-center sm:flex-row sm:justify-between">
110110
<Button
111111
htmlType="button"
112112
onClick={onClose}

‎src/components/Table/Table.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ const Table = <T extends { id: number | string }>({
2525
}, [page]);
2626

2727
return (
28-
<div className="w-full h-full">
28+
<div className="w-full h-full p-2">
2929
{data.length === 0 ? (
3030
<div className="flex justify-center w-full mt-8">
3131
<h1 className="text-2xl font-bold text-white">No data available</h1>
3232
</div>
3333
) : (
3434
<div className="flex flex-col items-center h-full mt-8 text-xl">
35-
<div className="flex items-start justify-center w-full max-h-[80%] overflow-y-auto">
35+
<div className="flex items-start justify-center w-full max-h-[80%] overflow-auto">
3636
<table className="text-gray-200 bg-secondary/50">
3737
<thead ref={theadRef}>
3838
<tr>
@@ -49,10 +49,10 @@ const Table = <T extends { id: number | string }>({
4949
key={row.id + rowIndex.toString()}
5050
onClick={() => rowClick && rowClick(rowIndex)}
5151
aria-disabled={!rowClick}
52-
className={`bg-secondary/50 even:bg-secondary/25 hover:bg-buttonBackground-confirm ${rowClick ? "hover:cursor-pointer select-none" : ""}`}
52+
className={`bg-secondary/90 even:bg-secondary/25 hover:bg-buttonBackground-confirm ${rowClick ? "hover:cursor-pointer select-none" : ""}`}
5353
>
5454
{columns.map((column, colIndex) => (
55-
<td key={colIndex} className="p-2">
55+
<td key={colIndex} className="p-1 md:p-2">
5656
{String(row[column.accessor])}
5757
</td>
5858
))}
@@ -62,7 +62,7 @@ const Table = <T extends { id: number | string }>({
6262
</table>
6363
</div>
6464

65-
<div className="flex justify-center w-full gap-2 mt-8 max-h-[20%]">
65+
<div className="flex flex-col items-start w-full sm:items-center sm:flex-row sm:justify-center gap-2 py-2 max-h-[25%] md:max-h-[20%]">
6666
<Button
6767
type="confirm"
6868
disabled={page === 1}

‎src/components/UsernameBubble/UsernameBubble.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type UsernameBubbleProps = {
99

1010
const UsernameBubble: React.FC<UsernameBubbleProps> = ({ user }) => {
1111
return (
12-
<div className="fixed flex flex-col justify-end p-2 rounded top-8 right-8 text-black/50 bg-white/50">
12+
<div className="fixed flex flex-col justify-end p-2 rounded top-4 md:top-8 right-4 md:right-8 text-black/50 bg-white/50">
1313
<p className="text-right">
1414
<span className="font-bold">Hello, {user.username}</span>
1515
{

0 commit comments

Comments
 (0)