sheptikhinv/timers
1
0
Fork 0
mirror of https://github.com/sheptikhinv/timers.git synced 2026-02-07 07:41:36 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Вячеслав 2024-10-30 02:40:19 +05:00
commit b120143726
23 changed files with 3710 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

50
README.md Normal file
View file

@ -0,0 +1,50 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
```

28
eslint.config.js Normal file
View file

@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Гринтаймер</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3152
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

29
package.json Normal file
View file

@ -0,0 +1,29 @@
{
"name": "timers",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.3",
"eslint": "^9.13.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.13",
"globals": "^15.11.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.10.0",
"vite": "^5.4.9"
}
}

1
public/vite.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

0
src/App.css Normal file
View file

10
src/App.tsx Normal file
View file

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

23
src/components/Button/Button.module.css Normal file
View file

@ -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);
}

17
src/components/Button/Button.tsx Normal file
View file

@ -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

55
src/components/Timer/Timer.module.css Normal file
View file

@ -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;
}

51
src/components/Timer/Timer.tsx Normal file
View file

@ -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;

90
src/helpers/TimeManager.ts Normal file
View file

@ -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

1
src/index.css Normal file
View file

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

10
src/main.tsx Normal file
View file

@ -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>,
)

63
src/pages/Timers/Timers.module.css Normal file
View file

@ -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;
}

30
src/pages/Timers/Timers.tsx Normal file
View file

@ -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;

1
src/vite-env.d.ts vendored Normal file
View file

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

25
tsconfig.app.json Normal file
View file

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

23
tsconfig.node.json Normal file
View file

@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})