initial commit

src/App.tsx

@@ -0,0 +1,10 @@
+import './App.css'
+import Timers from './pages/Timers/Timers'
+
+function App() {
+  return (
+    <Timers/>
+  )
+}
+
+export default App

src/components/Button/Button.module.css

@@ -0,0 +1,23 @@
+button.button {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background-color: #AB71ED;
+    color: #FFFFFF;
+    font-size: 16px;
+    padding: 10px;
+    text-align: center;
+    outline: none;
+    border: none;
+    line-height: 16px;
+    font-weight: bold;
+    font-family: 'Montserrat';
+}
+
+button.button:hover {
+    background-color: #9B59E6;
+}
+
+button.button:active {
+    transform: translateY(1px);
+}

src/components/Button/Button.tsx

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
+import styles from './Button.module.css'
+
+type ButtonProps = DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+> & {
+    label: string
+}
+
+const Button = ({label, ...props}: ButtonProps) => {
+    return (
+        <button {...props} className={styles.button}>{label}</button>
+    )
+}
+
+export default Button

src/components/Timer/Timer.module.css

@@ -0,0 +1,55 @@
+.timer_container {
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    gap: 10px;
+    padding: 10px;
+}
+
+.top_buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.minute_buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.clock {
+    width: 256px;
+    height: 256px;
+    display: flex;
+    color: #000000;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 50%;
+    border-color: #DCC3F8;
+    border-width: 8px;
+    border-style: solid;
+}
+
+.clock_text {
+    font-family: 'Montserrat';
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.clock_text:hover {
+    cursor: pointer;
+}
+
+.clock_text:active {
+    transform: translateY(4px);
+}
+
+.presets_buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+}

src/components/Timer/Timer.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import TimeManager from '../../helpers/TimeManager';
+import Button from '../Button/Button';
+import styles from './Timer.module.css'
+
+const Timer = () => {
+    const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0))
+    const [remainingTime, setRemainingTime] = useState({ minutes: 0, seconds: 0 });
+
+    useEffect(() => {
+        timeManager.start()
+        console.log("timer started")
+        const interval = setInterval(() => {
+            setRemainingTime(timeManager.getRemainingTime())
+        }, 100);
+        
+        return () => {
+            clearInterval(interval);
+            timeManager.stop();
+        }
+    }, [timeManager])
+
+    const handlePause = () => timeManager.togglePause();
+    const handleAdd = () => timeManager.addTime(1);
+    const handleSubstract = () => timeManager.subtractTime(1);
+    const handleRecreation = (minutes: number) => recreateTimeManager(new TimeManager(minutes))
+
+    return (
+        <div className={styles.timer_container}>
+            <div className={styles.top_buttons}>
+                <div className={styles.minute_buttons}>
+                    <Button label='-1' onClick={handleSubstract}/>
+                    <Button label='+1' onClick={handleAdd}/>
+                </div>
+                <Button label='X'/>
+            </div>
+            <div className={styles.clock}>
+                <a onClick={handlePause} className={styles.clock_text}>{remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}</a>
+            </div>
+            <div className={styles.presets_buttons}>
+                <Button label='15' onClick={() => handleRecreation(15)}/>
+                <Button label='30' onClick={() => handleRecreation(30)}/>
+                <Button label='60' onClick={() => handleRecreation(60)}/>
+                <Button label='90' onClick={() => handleRecreation(90)}/>
+                <Button label='120' onClick={() => handleRecreation(120)}/>
+            </div>
+        </div>
+    )
+}
+
+export default Timer;

src/helpers/TimeManager.ts

@@ -0,0 +1,90 @@
+class TimeManager {
+    private initialTime: number;
+    private endTime: number;
+    private pauseTime: number | null = null;
+    private remainingTimeOnPause: number | null = null;
+    private intervalId: number | null = null;
+    private isPaused: boolean = false;
+
+    constructor(minutes: number) {
+        this.initialTime = minutes * 60;
+        this.endTime = Date.now() + this.initialTime * 1000;
+    }
+
+    start(): void {
+        if (this.intervalId !== null || this.pauseTime !== null) return;
+
+        this.intervalId = setInterval(() => {
+            if (Date.now() >= this.endTime) {
+                this.stop();
+            }
+        }, 1000);
+    }
+
+    stop(): void {
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    pause(): void {
+        console.log(this.intervalId)
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+            this.pauseTime = Date.now();
+            this.remainingTimeOnPause = Math.max(0, this.endTime - this.pauseTime);
+            this.isPaused = true;
+            console.log(this.isPaused)
+        }
+    }
+
+    resume(): void {
+        if (this.pauseTime !== null && this.remainingTimeOnPause !== null) {
+            const pausedDuration = Date.now() - this.pauseTime;
+            this.endTime += pausedDuration;
+            this.pauseTime = null;
+            this.remainingTimeOnPause = null;
+            this.isPaused = false;
+            this.start();
+        }
+    }
+
+    addTime(minutes: number): void {
+        this.endTime += minutes * 60 * 1000;
+    }
+
+    subtractTime(minutes: number): void {
+        this.endTime = Math.max(Date.now(), this.endTime - minutes * 60 * 1000);
+    }
+
+    getRemainingTime(): { minutes: number; seconds: number } {
+        let remainingMs: number;
+
+        if (this.pauseTime !== null && this.remainingTimeOnPause !== null) {
+            remainingMs = this.remainingTimeOnPause;
+        } else {
+            remainingMs = Math.max(0, this.endTime - Date.now());
+        }
+
+        const remainingSeconds = Math.floor(remainingMs / 1000);
+        const minutes = Math.floor(remainingSeconds / 60);
+        const seconds = remainingSeconds % 60;
+        return { minutes, seconds };
+    }
+
+    togglePause(): void {
+        if (this.isPaused){
+            console.log("resuming")
+            this.resume()
+            return
+        }
+        else{
+            console.log("pause")
+            this.pause()
+        }
+    }
+}
+
+export default TimeManager

src/index.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/pages/Timers/Timers.module.css

@@ -0,0 +1,63 @@
+body, html {
+    margin: 0;
+    background-color: #341C63;
+    color: #FFFFFF;
+    font-family: 'Montserrat', serif;
+}
+
+.content {
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.header_text {
+    color: #FFFFFF;
+}
+
+.notes_text {
+    color: #000000;
+}
+
+.title {
+    font-size: 40px;
+    font-weight: bold;
+}
+
+.timers_container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.notes_container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    background-color: #FFFFFF;
+    border-radius: 32px;
+    padding: 32px;
+    height: 400px;
+}
+
+.notes_container textarea {
+    height: 100%;
+    border: 1px dashed #000;
+    resize: none;
+    font-size: 40px;
+}
+
+footer {
+    display: flex;
+    background-color: #FFF;
+    border-radius: 32px;
+    flex-direction: column;
+    padding: 32px;
+    color: #000;
+}
+
+footer a {
+    font-size: 24px;
+}

src/pages/Timers/Timers.tsx

@@ -0,0 +1,30 @@
+import Timer from '../../components/Timer/Timer';
+import styles from './Timers.module.css';
+
+const Timers = () => {
+    return (
+        <div className={styles.content}>
+            <header>
+                <a className={`${styles.header_text} ${styles.title}`}>ГринТаймер</a>
+            </header>
+            <div className={styles.timers_container}>
+                <Timer/>
+                <Timer/>
+                <Timer/>
+                <Timer/>
+            </div>
+            <div className={styles.notes_container}>
+                <a className={`${styles.title} ${styles.notes_text}`}>Заметки</a>
+                <textarea></textarea>
+            </div>
+            <footer>
+                <a className={`${styles.title} ${styles.notes_text}`}>Респекты</a>
+                <a>Лиза +вайбик за макет</a>
+                <a>Слава сигма за всё остальное</a>
+                <a>Игорь красава с нами рядом сидел</a>
+            </footer>
+        </div>
+    )
+}
+
+export default Timers;

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />