Skip to content

Commit 1aeb34e

Browse files
Andcool-SystemsAndcool-Systems
committed
changed
1 parent e009b9b commit 1aeb34e

File tree

6 files changed

+143
-57
lines changed

6 files changed

+143
-57
lines changed

‎src/app/me/page.tsx

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import React, { CSSProperties, JSX } from 'react';
4-
import { useEffect, useState, useRef } from 'react';
4+
import { useEffect, useState } from 'react';
55
import { useRouter, useSearchParams } from "next/navigation";
66
import styles from "@/app/styles/me/me.module.css";
77
import { Tooltip } from '@/app/modules/components/Tooltip';
@@ -19,6 +19,7 @@ import { httpStatusCodes } from '../modules/utils/StatusCodes';
1919
import { renderSkin } from '../modules/utils/SkinCardRender';
2020
import ApiManager from '../modules/utils/apiManager';
2121
import MinecraftConnect from '../modules/components/MinecraftConnect';
22+
import RolesDialog from '../modules/components/RolesDialog';
2223

2324
const Main = () => {
2425
const router = useRouter();
@@ -97,21 +98,6 @@ const Loading = ({ loadingStatus }: { loadingStatus: string }) => {
9798
}
9899

99100
const Login = () => {
100-
const [roles, setRoles] = useState<Role[]>([]);
101-
const dat = roles.map((role) => {
102-
return (
103-
<div key={role.id} className={styles.role_container}>
104-
<span style={{ backgroundColor: "#" + role.color.toString(16) }} className={styles.role_dot}>
105-
</span>
106-
<span className={styles.role_title}>{role.title}</span>
107-
</div>
108-
)
109-
})
110-
111-
useEffect(() => {
112-
ApiManager.getRoles().then(setRoles).catch(console.error);
113-
}, [])
114-
115101
const loginMinecraft = async (code: string): Promise<void> => {
116102
return new Promise((resolve, reject) => {
117103
ApiManager.loginMinecraft(code)
@@ -153,14 +139,8 @@ const Login = () => {
153139
</MinecraftConnect>
154140
</div>
155141

156-
<span className={styles.p} id="about_logging">Для регистрации вам нужно быть участником Discord сервера <a href='https://baad.pw/ds' className={styles.a}>Pwgood</a> и иметь одну из этих <Tooltip
157-
parent_id="about_logging"
158-
body={
159-
<div className={styles.roles_container}>
160-
{dat.length > 0 ? dat : <IconSvg width={86} height={86} className={style_workshop.loading} style={{ width: 'auto' }} />}
161-
</div>} timeout={0} className={styles.roles_text_container}>
162-
<span className={styles.roles_text}> ролей</span>
163-
</Tooltip>
142+
<span className={styles.p} id="about_logging">Для регистрации вам нужно быть участником Discord сервера <a href='https://baad.pw/ds' className={styles.a}>Pwgood</a> и иметь одну из этих&nbsp;
143+
<RolesDialog><span style={{ cursor: 'pointer', textDecoration: 'underline' }}>ролей</span></RolesDialog>.
164144
</span>
165145
<p style={{ color: "gray", marginBottom: 0 }}>Регистрируясь на сайте вы соглашаетесь с настоящими <a className={styles.a} href="/tos" style={{ color: "gray" }}>условиями пользования</a></p>
166146
</div>

‎src/app/modules/components/RolesDialog.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { CSSProperties, JSX, useEffect, useState } from "react";
2+
import style_base from '@/app/styles/minecraftConnect.module.css';
3+
import { IconBrandDiscord, IconBrandTwitch, IconFlag, IconX } from "@tabler/icons-react";
4+
import styles from "@/app/styles/me/me.module.css";
5+
import style_main from "@/app/styles/RolesDialog.module.css";
6+
import ReactCSSTransition from "./CSSTransition";
7+
import { Role } from "@/app/interfaces";
8+
import ApiManager from "../utils/apiManager";
9+
import IconBoosty from '@/app/resources/boosty.svg';
10+
11+
12+
const RolesDialog = ({ children }: { children: JSX.Element }) => {
13+
const [expanded, setExpanded] = useState<boolean>(false);
14+
const [roles, setRoles] = useState<Role[]>([]);
15+
16+
useEffect(() => {
17+
ApiManager.getRoles()
18+
.then(setRoles)
19+
.catch(console.error);
20+
}, [])
21+
22+
const roles_el = roles.map((role) => {
23+
return (
24+
<div key={role.id} className={styles.role_container}>
25+
<span style={{ backgroundColor: "#" + role.color.toString(16) }} className={styles.role_dot}>
26+
</span>
27+
<span className={styles.role_title}>{role.title}</span>
28+
</div>
29+
)
30+
})
31+
32+
return (
33+
<>
34+
<span onClick={() => setExpanded(true)}>
35+
{children}
36+
</span>
37+
<ReactCSSTransition
38+
state={expanded}
39+
timeout={150}
40+
classNames={{
41+
enter: style_base['background-enter'],
42+
exitActive: style_base['background-exit-active'],
43+
}}
44+
>
45+
<div className={style_base.background} />
46+
</ReactCSSTransition>
47+
48+
<ReactCSSTransition
49+
state={expanded}
50+
timeout={150}
51+
classNames={{
52+
enter: style_base['menu-enter'],
53+
exitActive: style_base['menu-exit-active'],
54+
}}>
55+
<div className={style_base.base}>
56+
<div className={style_base.container}>
57+
<div className={style_base.header}>
58+
<h3 style={{ margin: 0, display: 'flex', gap: '.5rem', alignItems: 'center' }}><IconFlag />Роли для регистрации</h3>
59+
<IconX className={style_base.close} onClick={() => setExpanded(false)} />
60+
</div>
61+
<p style={{ margin: 0, fontSize: '.9rem', opacity: .6 }}>Для регистрации Вы должны иметь одну из этих ролей на Discord сервере PWGood.</p>
62+
<div
63+
style={{
64+
display: 'flex',
65+
flexWrap: 'wrap'
66+
}}>
67+
{roles_el}
68+
</div>
69+
70+
<h4 style={{ margin: 0, marginTop: '.5rem' }}>Ссылки на соцсети Пугода:</h4>
71+
<div className={style_main.container}>
72+
<a
73+
className={style_main.link}
74+
href='https://baad.pw/twitch'
75+
style={{ '--accent': '#772ce8' } as CSSProperties}
76+
>
77+
<IconBrandTwitch />Twitch
78+
</a>
79+
<a
80+
className={style_main.link}
81+
href='https://baad.pw/ds'
82+
style={{ '--accent': '#4752c4' } as CSSProperties}
83+
>
84+
<IconBrandDiscord />Discord
85+
</a>
86+
<a
87+
className={style_main.link}
88+
href='https://baad.pw/boosty'
89+
style={{
90+
'--accent': '#f15f2c'
91+
} as CSSProperties}
92+
>
93+
<IconBoosty />Boosty
94+
</a>
95+
</div>
96+
</div>
97+
</div>
98+
</ReactCSSTransition>
99+
</>
100+
);
101+
}
102+
103+
export default RolesDialog;

‎src/app/resources/boosty.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/app/styles/RolesDialog.module.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.link {
2+
display: flex;
3+
justify-content: center;
4+
border: 2px solid rgb(38, 38, 38);
5+
border-radius: 10px;
6+
height: 2.3rem;
7+
align-items: center;
8+
box-sizing: border-box;
9+
text-decoration: none;
10+
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
11+
transition-duration: .15s;
12+
gap: .2rem;
13+
}
14+
15+
.link:hover {
16+
background-color: var(--accent);
17+
}
18+
19+
.container {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: stretch;
23+
gap: .4rem;
24+
}

‎src/app/styles/me/me.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.p {
22
margin-top: .5rem;
33
color: var(--main-text-color);
4-
transform: translateY(0);
54
transition: color 250ms;
65
display: block;
76
}

‎src/app/tutorials/page.tsx

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,18 @@
11
"use client";
22

3-
import React, { useEffect, useState } from "react";
3+
import React from "react";
44
import style from '@/app/styles/tutorials/common.module.css';
55
import ASide from "./header";
66
import InfoCard from "@/app/modules/components/InfoCard";
77
import { CategoryEl } from "@/app/modules/components/Card";
88
import { CustomLink } from "@/app/modules/components/Search";
99
import styles from "@/app/styles/me/me.module.css";
10-
import { Tooltip } from "@/app/modules/components/Tooltip";
11-
import { Role } from "@/app/interfaces";
12-
import style_workshop from "@/app/styles/workshop/page.module.css";
1310

1411
import { IconInfoCircle, IconAlertTriangle, IconBulb } from '@tabler/icons-react';
15-
import IconSvg from '@/app/resources/icon.svg';
1612
import Link from "next/link";
17-
import ApiManager from "../modules/utils/apiManager";
13+
import RolesDialog from "../modules/components/RolesDialog";
1814

1915
export default function Home() {
20-
const [roles, setRoles] = useState<Role[]>([]);
21-
22-
useEffect(() => {
23-
ApiManager.getRoles().then(setRoles).catch(console.error);
24-
}, [])
25-
26-
const roles_data = roles.map((role) => {
27-
return (
28-
<div key={role.id} className={styles.role_container}>
29-
<span style={{ backgroundColor: "#" + role.color.toString(16) }} className={styles.role_dot}>
30-
</span>
31-
<span className={styles.role_title}>{role.title}</span>
32-
</div>
33-
)
34-
})
3516
return (
3617
<main className={style.main}>
3718
<div className={style.main_container}>
@@ -46,17 +27,10 @@ export default function Home() {
4627

4728
<h2>Регистрация на сайте</h2>
4829
<span style={{ display: 'block', marginBottom: '1rem' }}>Регистрация разрешена только пользователям, являющимися членами Discord сервера PWGood,
49-
а так же имеющие определенные <Tooltip
50-
body={
51-
<div className={styles.roles_container}>
52-
{roles_data.length > 0 ? roles_data : <IconSvg width={86} height={86} className={style_workshop.loading} />}
53-
</div>
54-
}
55-
opacity="1"
56-
timeout={0}
57-
className={styles.roles_text_container}>
58-
<span className={styles.roles_text}> роли</span>
59-
</Tooltip>.
30+
а так же имеющие определенные&nbsp;
31+
<RolesDialog>
32+
<span className={styles.roles_text}>роли</span>
33+
</RolesDialog>.
6034
При регистрации сайт сохраняет ваш никнейм с учётной записи Discord.
6135
Дальнейшее его изменение возможно только через администрацию сайта.</span>
6236
<InfoCard color="#4493F8" title={

0 commit comments

Comments
 (0)