diff --git a/src/components/Bar/Sidebar/Sidebar.module.css b/src/components/Bar/Sidebar/Sidebar.module.css
index b3660d4..b680eb0 100644
--- a/src/components/Bar/Sidebar/Sidebar.module.css
+++ b/src/components/Bar/Sidebar/Sidebar.module.css
@@ -1,23 +1,20 @@
.sidebar {
- position: absolute;
- right: 10px;
- top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
- /* max-width: 100%; */
- /* width: 100%; */
pointer-events: none;
+ flex: 1 1 auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border-radius: 8px;
+ align-self: flex-end;
}
@media screen and (max-width: 600px) {
.sidebar {
position: static;
- /* width: 100%; */
box-sizing: border-box;
padding: 10px;
- /* margin-right: 10px; */
- /* max-width: calc(100% - 20px); */
}
}
\ No newline at end of file
diff --git a/src/components/Bar/Sidebar/Sidebar.tsx b/src/components/Bar/Sidebar/Sidebar.tsx
index 68aab08..6d808ce 100644
--- a/src/components/Bar/Sidebar/Sidebar.tsx
+++ b/src/components/Bar/Sidebar/Sidebar.tsx
@@ -3,13 +3,16 @@ import styles from "./Sidebar.module.css";
import { Profile } from "../../Windows/Profile/Profile";
import { NotificationList } from "../../Notifications/NotificationList/NotificationList";
import { Overlay } from "../../Windows/Overlay/Overlay";
-
+import { Snapshot } from "../../Windows/Snapshot/Snapshot";
export function Sidebar() {
- return
+ return (
+
+ );
}
diff --git a/src/components/Bar/TitleBar/TitleBar.module.css b/src/components/Bar/TitleBar/TitleBar.module.css
index dbbf953..dc9e35b 100644
--- a/src/components/Bar/TitleBar/TitleBar.module.css
+++ b/src/components/Bar/TitleBar/TitleBar.module.css
@@ -1,87 +1,144 @@
-.wrapper {
- background-color: var(--window-background);
- border-radius: 8px;
- position: absolute;
- left: 10px;
- top: 10px;
- pointer-events: auto;
- transform-origin: top left;
- animation: scale-down 0.2s ease-in-out ;
- /* transform: translateX(-50%); */
-}
-
-.wrapper[open] {
- animation: scale-up 0.2s ease-in-out;
-}
-
-@keyframes scale-up {
- from {
- transform: scale(0.4);
- opacity: 0;
- }
- to {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes scale-down {
- from {
- transform: scale(1.4);
- opacity: 0;
- }
- to {
- transform: scale(1);
- opacity: 1;
- }
+.window {
+ background-color: var(--window-background);
+ border-radius: 8px;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ pointer-events: auto;
+}
+
+.opened {
+ animation: windowOpen 0.75s ease-out forwards;
+}
+
+.opened .title {
+ margin-left: 10px;
+}
+
+.opened .content {
+ animation: windowContentOpen 0.75s ease-out forwards;
+}
+
+.closed {
+ animation: windowClose 0.75s ease-out forwards;
+}
+
+.closed .content {
+ animation: windowContentClose 0.75s ease-out forwards;
}
.content,
.title {
- padding: 12px;
- user-select: none;
+ padding: 12px;
+ user-select: none;
}
.content {
- padding-top: 0;
+ padding-top: 0;
+ transform-origin: 50% 0;
+ overflow: hidden;
+ transition: height 0.5s ease;
+}
+
+.container {
+ padding-top: 10px;
}
.params {
- padding-top: 0;
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: flex-start;
+ padding-top: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: flex-start;
}
.media {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- gap: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ gap: 10px;
}
.title {
- cursor: pointer;
- font-weight: 600;
- font-size: 28px;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 28px;
+ transition: margin 150ms ease-out;
+ display: flex;
+ padding-top: 10px;
+ padding-bottom: 0;
}
.title::marker {
- content: '';
+ content: "";
}
@media screen and (max-width: 600px) {
- .wrapper {
- position: static;
- width: 100%;
- border-radius: 0;
- }
+ .window {
+ position: static;
+ width: 100%;
+ border-radius: 0;
+ }
}
.icons {
- display: flex;
- margin-top: 20px;
- justify-content: space-between;
- align-items: center;
-}
\ No newline at end of file
+ display: flex;
+ margin-top: 20px;
+ justify-content: space-between;
+ align-items: center;
+}
+
+@keyframes windowContentClose {
+ 0% {
+ transform: scaleY(1);
+ max-height: 400px;
+ max-width: 400px;
+ background-color: var(--window-background-selected);
+ }
+ 25% {
+ max-height: 0;
+ }
+ 100% {
+ transform: scaleY(0);
+ max-height: 0;
+ max-width: 0;
+ background-color: var(--window-background);
+ }
+}
+
+@keyframes windowContentOpen {
+ 0% {
+ background-color: var(--window-background);
+ max-width: 0;
+ max-height: 0;
+ }
+ 50% {
+ max-height: 0;
+ transform: scaleY(0);
+ }
+ 75% {
+ max-width: 400px;
+ transform: scaleY(1);
+ }
+ 100% {
+ background-color: var(--window-background-selected);
+ max-height: 400px;
+ }
+}
+
+@keyframes windowOpen {
+ 0% {
+ background-color: var(--window-background);
+ }
+ 100% {
+ background-color: var(--window-background-selected);
+ }
+}
+@keyframes windowClose {
+ 0% {
+ background-color: var(--window-background-selected);
+ }
+ 100% {
+ background-color: var(--window-background);
+ }
+}
diff --git a/src/components/Bar/TitleBar/TitleBar.tsx b/src/components/Bar/TitleBar/TitleBar.tsx
index 302869c..f47ac0e 100644
--- a/src/components/Bar/TitleBar/TitleBar.tsx
+++ b/src/components/Bar/TitleBar/TitleBar.tsx
@@ -8,50 +8,62 @@ import { Snowflake } from "../../Snow/Snowflake/Snowflake";
import { Icon } from "../../General/Icon/Icon";
export function TitleBar() {
- const info = useContext(InfoContext)
- const place = useContext(PlaceContext)
- const [infoIntervalId, setInfoIntervalId] = useState
()
-
- useEffect(() => {
- info.fetch();
-
- setInfoIntervalId(setInterval(info.fetch, config.time.update.info))
- }, [])
-
- if (info.info.value === null || place.image.value === null) {
- return null
- }
-
-
- const isFinished = info.info.value.ended
-
- const name = info.info.value.name === "season:blank" ? "Без названия" : info.info.value.name
- const icon = isFinished ? "🏁" : "⚔️";
-
-
- return (
-
- {name} {icon}
-
-
-
-
- {Object.entries(config.media).map(([name, url]) => (
-
-
- {/* 
*/}
-
- ))}
-
-
-
-
-
-
- )
-}
\ No newline at end of file
+ const info = useContext(InfoContext);
+ const place = useContext(PlaceContext);
+ const [_infoIntervalId, setInfoIntervalId] = useState();
+ const [opened, setOpened] = useState(false);
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ info.fetch();
+
+ setInfoIntervalId(setInterval(info.fetch, config.time.update.info));
+
+ setTimeout(() => {
+ setShow(true);
+ }, 1000);
+ }, []);
+
+ if (info.info.value === null || place.image.value === null) {
+ return null;
+ }
+
+ const isFinished = info.info.value.ended;
+
+ const name = info.info.value.name === "season:blank" ? "Без названия" : info.info.value.name;
+ const icon = isFinished ? "🏁" : "⚔️";
+
+ const click = () => {
+ setOpened(!opened);
+ };
+
+ return (
+
+
+
+ {show && (
+
+
+
+
+ {Object.entries(config.media).map(([name, url]) => (
+
+
+ {/* */}
+
+ ))}
+
+
+
+
+ )}
+
+
-
+
)
diff --git a/src/components/Cooldown/Cooldown.tsx b/src/components/Cooldown/Cooldown.tsx
index 7dfb4a4..f4aee21 100644
--- a/src/components/Cooldown/Cooldown.tsx
+++ b/src/components/Cooldown/Cooldown.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "preact/hooks";
+import { useContext } from "preact/hooks";
import styles from "./Cooldown.module.css";
import { CooldownContext } from "../../managers/cooldown";
diff --git a/src/components/Coordinates/Coordinates.module.css b/src/components/Coordinates/Coordinates.module.css
index a9eaccc..f831d88 100644
--- a/src/components/Coordinates/Coordinates.module.css
+++ b/src/components/Coordinates/Coordinates.module.css
@@ -2,16 +2,8 @@
background-color: var(--window-background);
border-radius: 4px;
padding: 5px 10px;
- animation: appear 0.2s ease-in-out forwards;
-
}
-@keyframes appear {
- from {
- transform: scale(0.2);
- }
-
- to {
- transform: scale(1);
- }
+.empty {
+ opacity: 0;
}
\ No newline at end of file
diff --git a/src/components/Coordinates/Coordinates.tsx b/src/components/Coordinates/Coordinates.tsx
index f8df720..7b9ccb7 100644
--- a/src/components/Coordinates/Coordinates.tsx
+++ b/src/components/Coordinates/Coordinates.tsx
@@ -5,11 +5,21 @@ import { CoordinatesContext } from "../../managers/coordinates";
export function Coordinates() {
const coordinates = useContext(CoordinatesContext);
- if (!coordinates.areCoordinatesSet.value) return null
+ if (!coordinates.areCoordinatesSet.value) {
+ // Fixes jumping when sidebar in scroll mode
+ return
+ Пусто
+
+ }
return (
-
+
{coordinates.coordinates.value.x + ", " + coordinates.coordinates.value.y}
- )
+ );
}
\ No newline at end of file
diff --git a/src/components/General/Button/Button.module.css b/src/components/General/Button/Button.module.css
index 8eac948..1b447c4 100644
--- a/src/components/General/Button/Button.module.css
+++ b/src/components/General/Button/Button.module.css
@@ -23,4 +23,9 @@
.danger {
--background-color: var(--danger);
+}
+
+.disabled {
+ pointer-events: none;
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/src/components/General/Button/Button.tsx b/src/components/General/Button/Button.tsx
index 47d16b0..41b2e14 100644
--- a/src/components/General/Button/Button.tsx
+++ b/src/components/General/Button/Button.tsx
@@ -3,7 +3,8 @@ import styles from "./Button.module.css";
interface BaseButton {
children: ComponentChildren;
- type?: "primary" | "danger"
+ type?: "primary" | "danger";
+ disabled?: boolean;
}
interface LinkButton {
@@ -17,18 +18,18 @@ interface ActionButton {
type ButtonProps = BaseButton & (LinkButton | ActionButton);
export function Button(props: ButtonProps) {
- const className = [styles.button, styles[props.type ?? "primary"]].join(" ")
+ const className = [styles.button, styles[props.type ?? "primary"], props.disabled ? styles.disabled : null].join(" ")
if ("href" in props) {
return (
-
+
{props.children}
)
}
return (
-
)
: (
-
+
)
)
diff --git a/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.module.css b/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.module.css
new file mode 100644
index 0000000..bb8bece
--- /dev/null
+++ b/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.module.css
@@ -0,0 +1,20 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ align-items: flex-start;
+}
+
+.checkboxes {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.checkboxes a {
+ color: var(--white);
+}
+
+.checkboxes a:hover {
+ opacity: 0.9;
+}
\ No newline at end of file
diff --git a/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.tsx b/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.tsx
new file mode 100644
index 0000000..b19b8ba
--- /dev/null
+++ b/src/components/Windows/Profile/ProfileLoginBody/ProfileLoginBody.tsx
@@ -0,0 +1,34 @@
+import { useComputed, useSignal } from "@preact/signals";
+import { Button } from "../../../General/Button/Button";
+import { Checkbox } from "../../../General/Checkbox/Checkbox";
+import styles from "./ProfileLoginBody.module.css"
+import { config } from "../../../../config";
+
+export function ProfileLoginBody() {
+ const agreement = useSignal({
+ terms: false,
+ rules: false
+ })
+
+ const isAllowed = useComputed(() => !Object.values(agreement.value).includes(false))
+
+
+ return
+}
\ No newline at end of file
diff --git a/src/components/Windows/Snapshot/Snapshot.module.css b/src/components/Windows/Snapshot/Snapshot.module.css
new file mode 100644
index 0000000..bcdad47
--- /dev/null
+++ b/src/components/Windows/Snapshot/Snapshot.module.css
@@ -0,0 +1,25 @@
+.wrapper {
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ flex-direction: column;
+ gap: 12px;
+ padding: 20px;
+ border-radius: 5px;
+}
+
+.wrapperActive {
+ background-color: var(--window-background-2);
+}
+
+.input {
+ display: none;
+}
+
+.or {
+ color: var(--grey-text);
+}
+
+.label {
+ font-weight: bold;
+}
diff --git a/src/components/Windows/Snapshot/Snapshot.tsx b/src/components/Windows/Snapshot/Snapshot.tsx
new file mode 100644
index 0000000..2ff22d5
--- /dev/null
+++ b/src/components/Windows/Snapshot/Snapshot.tsx
@@ -0,0 +1,38 @@
+import { SnapshotManager } from "../../../managers/snapshot";
+import { Button } from "../../General/Button/Button";
+import { TextField } from "../../General/TextField/TextField";
+import { WindowBox } from "../../WindowBox/WindowBox";
+import styles from "./Snapshot.module.css";
+
+export function Snapshot() {
+ return (
+
+
+
+
или
+
+
+ {SnapshotManager.empty.value ? (
+ <>
+ ) : (
+ <>
+
Действия
+
+
+ )}
+
+
Множитель масштаба
+
{
+ !isNaN(v as any) ? (SnapshotManager.scale.value = Number(v)) : "";
+ }}
+ type="number"
+ min={1}
+ max={100}
+ value={SnapshotManager.scale.value + ""}
+ >
+
+ );
+}
diff --git a/src/components/Windows/Tags/Tags.tsx b/src/components/Windows/Tags/Tags.tsx
index 927d657..f8a9983 100644
--- a/src/components/Windows/Tags/Tags.tsx
+++ b/src/components/Windows/Tags/Tags.tsx
@@ -14,7 +14,7 @@ import { isTagCreateOpened } from "../../Tags/OpenTagSignal";
export function Tags() {
- const [tagsInterval, setTagsInterval] = useState
()
+ const [_tagsInterval, setTagsInterval] = useState()
const tags = useContext(TagsContext)
const profile = useContext(ProfileContext)
diff --git a/src/index.tsx b/src/index.tsx
index e91a95b..b50592e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
import { render } from 'preact';
-import { LocationProvider, Router, Route } from 'preact-iso';
+import { Switch, Route } from 'wouter-preact';
+import { Suspense } from "preact/compat";
import { Home } from './pages/Home';
import { NotFound } from './pages/NotFound';
@@ -9,17 +10,27 @@ import { Logout } from './pages/Auth/Logout';
import "./styles/reset.css";
import "./styles/font.css";
import "./styles/index.css";
+import styles from "./styles/index.module.css";
export function App() {
return (
-
-
+
+
+ 
+ Loading
+
+ }>