Skip to content

Commit d8165a7

Browse files
YuriAlessandroYuriAlessandro
authored
Merge pull request #13 from isaacbatst/feat/migrate-to-react
Migrate to React
2 parents 98a4bf8 + efed856 commit d8165a7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+8313
-257
lines changed

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
110
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎Readme.md ‎README.md

File renamed without changes.

‎eslint.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎index.html

+16-257
Original file line numberDiff line numberDiff line change
@@ -1,259 +1,19 @@
1-
<html>
2-
<head>
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
37
<title>Placar Vôlei</title>
4-
<meta charset="utf-8">
5-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
6-
<script src="https://kit.fontawesome.com/15fce56598.js" crossorigin="anonymous"></script>
7-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
8-
<style>
9-
@font-face {
10-
font-family: Digital7;
11-
src: url("assets/digital_7.ttf");
12-
}
13-
.score-container {
14-
height: 5.2em;
15-
display: flex;
16-
justify-content: center;
17-
align-items: center;
18-
}
19-
.score-container p {
20-
padding: 0;
21-
margin: 0;
22-
font-size: 3em;
23-
font-family: Digital7;
24-
color: white;
25-
z-index: 0;
26-
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
27-
text-align: left;
28-
-webkit-user-select: none;
29-
-ms-user-select: none;
30-
user-select: none;
31-
min-width: 0.9em;
32-
}
33-
.score-container p::before {
34-
content: "88";
35-
position: absolute;
36-
color: #cecece;
37-
opacity: 0.1;
38-
-webkit-user-select: none;
39-
-ms-user-select: none;
40-
user-select: none;
41-
}
42-
43-
.select2-container {
44-
font-size: 1.5rem !important;
45-
}
46-
47-
.select2-search {
48-
display: flex !important;
49-
padding: 11px 17px !important;
50-
}
51-
52-
.select2-container--default .select2-selection--multiple {
53-
background-color: hsl(171deg, 100%,calc(9% + 0%));
54-
border-color: hsl(171deg, 100%,calc(41% + 0%));
55-
border-radius: var(--bulma-input-radius);
56-
color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
57-
}
58-
59-
.select2-dropdown {
60-
background-color: hsl(171deg, 100%,calc(9% + 0%));
61-
border-color: hsl(171deg, 100%,calc(41% + 0%));
62-
color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
63-
}
64-
65-
.select2-container--default .select2-results__option[aria-selected=true],
66-
.select2-container--default .select2-selection--multiple .select2-selection__choice {
67-
background-color: hsl(171deg, 100%,calc(41% + 0%));
68-
border-color: black;
69-
color: black;
70-
}
71-
72-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
73-
color: hsl(171deg, 100%,calc(9% + 0%));
74-
}
75-
76-
.select2-container--default .select2-search--inline .select2-search__field {
77-
color: white;
78-
}
79-
80-
.legend-box {
81-
padding: 3px;
82-
display: 'inline-block';
83-
font-size: 12px;
84-
}
85-
</style>
86-
87-
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
88-
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
89-
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
90-
<link rel="manifest" href="https://raw.githubusercontent.com/YuriAlessandro/peladaManager/main/manifest.json">
91-
</head>
92-
<body>
93-
<div id="new-match-day-button" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh; gap: 24px">
94-
<div class="is-flex is-align-items-center is-justify-content-center">
95-
<button id="new-match-day" class="button is-primary is-large" style="margin-right: 15px;"><i class="fa-solid fa-plus"></i>&ensp;Começar Nova Pelada</button>
96-
<button id="show-historic" class="button is-primary is-large"><i class="fa-regular fa-clock"></i></i>&ensp;Histórico</button>
97-
</div>
98-
<form class="is-flex is-flex-direction-column" id="join-match-day-form">
99-
<label for="join-code-input" class="label">
100-
Código da Pelada:
101-
</label>
102-
<input type="text" id="join-code-input" class="input is-primary is-large" />
103-
<button id="join-match-day" class="button is-primary is-large" style="margin-top: 15px;">Entrar em Pelada</button>
104-
</form>
105-
</div>
106-
<div class="container mobile" style="padding: 15px">
107-
108-
<div id="new-match-day-form" style="display: none">
109-
<div class="columns">
110-
<div class="column">
111-
<label>Jogadores por time:</label>
112-
<input type="number" id="players-per-team" placeholder="Jogadores por time" value="4" class="input is-primary is-large" />
113-
</div>
114-
<div class="column">
115-
<label>Pontos Máximos:</label>
116-
<input type="number" id="max-points" placeholder="Pontos máximos" value="11" class="input is-primary is-large" />
117-
</div>
118-
</div>
119-
<div class="columns">
120-
<div class="column is-size-3">
121-
<label class="checkbox">
122-
<input type="checkbox" id="auto-switch-teams" />
123-
Trocar times automaticamente
124-
</label>
125-
</div>
126-
<div class="column">
127-
<label>Trocar times a cada:</label>
128-
<input type="number" placeholder="Quantidade de pontos" id="auto-switch-teams-points" disabled class="input is-primary is-large" value="5" />
129-
</div>
130-
</div>
131-
<div class="columns">
132-
<div class="column">
133-
<label
134-
for="add-new-player-select"
135-
>Selecione os jogadores:</label>
136-
<select
137-
id="add-new-player-select"
138-
class="select is-primary is-large"
139-
style="width: 100%"
140-
data-placeholder="Selecione os jogadores"
141-
multiple="multiple"
142-
>
143-
</select>
144-
</div>
145-
<div class="column" style="display: flex; align-items: flex-end;">
146-
<button id="add-new-player" type="button" class="button is-secondary is-large">Confirmar Jogadores</button>
147-
</div>
148-
</div>
149-
150-
<ul id="player-list" class="content"></ul>
151-
<div class="is-flex is-align-items-center" style="gap: 8px">
152-
<button id="start-match-day" class="button is-primary is-large">Iniciar Pelada</button>
153-
<button id="update-match-day" class="button is-primary is-large" style="display: none; margin-bottom: 15px;">Atualizar Pelada</button>
154-
</div>
155-
</div>
156-
157-
<div id="match" style="display: none" class="box">
158-
<div class=" is-flex is-justify-content-space-between is-align-items-center mb-4">
159-
<div class="">Partida #<span id="match-number">0</span></div>
160-
<div class="is-flex is-align-items-center is-gap-2">
161-
<span class="has-text-centered">Código</span>
162-
<button id="copy-join-code" type="button" class="button is-small is-info">
163-
<i class="fa-solid fa-copy mr-2"></i><span id="join-code" class=" is-size-5"></span>
164-
</button>
165-
</div>
166-
</div>
167-
<div class="grid">
168-
<div class="cell has-text-centered">
169-
<h1 id="team-1-captain" class="title">TEAM 1 CAPTAIN</h1>
170-
<button id="undo-1" class="undo-point button is-danger is-large"><i class="fa-solid fa-undo"></i></button>
171-
<article class="message is-info score-point" style="cursor: pointer; margin-top: 15px;" id="score-1">
172-
<div class="message-header is-size-7"><i class="fa-solid fa-play" style="display: none" id="serving-1"></i></div>
173-
<div class="message-body is-size-1 score-container">
174-
<p id="score-team-1">00</p>
175-
</div>
176-
</article>
177-
<ul id="team-1-players"></ul>
178-
</div>
179-
<div class="cell is-row-span-2 has-text-centered">
180-
<h1 class="title">X</h1>
181-
<button id="start-next-match" class="button is-danger is-large" style="margin-top: 160px; display: none">Iniciar próxima partida</button>
182-
</div>
183-
<div class="cell has-text-centered">
184-
<h1 id="team-2-captain" class="title">TEAM 2 CAPTAIN</h1>
185-
<button id="undo-2" class="undo-point button is-danger is-large"><i class="fa-solid fa-undo"></i></button>
186-
<article class="message is-danger score-point" style="cursor: pointer; margin-top: 15px;" id="score-2">
187-
<div class="message-header is-size-7"><i class="fa-solid fa-play" style="display: none" id="serving-2"></i></div>
188-
<div class="message-body is-size-1 score-container">
189-
<p id="score-team-2">00</p>
190-
</div>
191-
</article>
192-
<ul id="team-2-players"></ul>
193-
</div>
194-
</div>
195-
196-
<div class="fixed-grid has-2-cols">
197-
<div class="grid">
198-
<div class="cell">
199-
<button id="swap-current-match" class="button is-warning is-large"><i class="fa-solid fa-right-left"></i></button>
200-
</div>
201-
<div class="cell is-col-from-end-1">
202-
<button id="change-match-day" class="button is-info is-large"><i class="fa-solid fa-gear"></i></button>
203-
</div>
204-
</div>
205-
</div>
206-
</div>
207-
208-
<nav class="panel" id="all-player-list" style="display: none; margin-top: 5px">
209-
<div class="panel-heading" style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
210-
<p>Jogadores
211-
<div style="display: flex; flex-direction: row; gap: 10px">
212-
<div class="legend-box has-background-success">Na partida atual</div>
213-
<div class="legend-box has-background-warning">Em outra quadra</div>
214-
<div class="legend-box has-background-info">Joga a próx.</div>
215-
</div>
216-
</div>
217-
<div class="table-container">
218-
<table class="table is-fullwidth">
219-
<thead>
220-
<tr>
221-
<th>Nome</th>
222-
<th>Partidas</th>
223-
<th>Vitórias</th>
224-
<th>Derrotas</th>
225-
<th>Última partida jogada</th>
226-
<th style="display: none;" id="elo-header">Elo</th>
227-
<th id="playing">Jogando</th>
228-
</tr>
229-
</thead>
230-
<tbody id="players"></tbody>
231-
</table>
232-
</div>
233-
</nav>
234-
235-
<div class="is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap" style="gap: 1rem">
236-
<button id="end-match-day" class="button is-danger is-large" style="display: none;">FINALIZAR PELADA</button>
237-
<button id="end-court" class="button is-danger is-large" style="display: none;">FINALIZAR QUADRA</button>
238-
<label class="checkbox">
239-
<input type="checkbox" id="dev-mode" />
240-
v6.Modo desenvolvedor
241-
</label>
242-
</div>
243-
</div>
244-
<div class="container mobile" id="history-container" style="padding: 15px; display: none;">
245-
<h1>Histórico de Partidas</h1>
246-
<div class="fixed-grid has-3-cols">
247-
<div class="grid" id="historic-days"></div>
248-
</div>
249-
</div>
250-
<script
251-
src="https://code.jquery.com/jquery-3.7.1.min.js"
252-
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
253-
crossorigin="anonymous"></script>
254-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
255-
<script type="module" src="./script.js?v=17"></script>
256-
<script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
<script>
25717
const options = window.location.hostname.includes('localhost') || window.location.hostname.includes('ngrok-free.app')
25818
? undefined : { scope: '/peladaManager/' };
25919
if('serviceWorker' in navigator) {
@@ -266,5 +26,4 @@ <h1>Histórico de Partidas</h1>
26626
});
26727
}
26828
</script>
269-
</body>
270-
</html>
29+
</html>

‎old/Readme.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Gerenciador de Peladas
2+
3+
Com esse APP fica muito mais fácil você gerenciar sua pelada, de qualquer esporte que seja.
4+
5+
É possível adicionar os jogadores, definir os placares e montar os times de forma extremamente rápida.
6+
7+
![Imagem do projeto](https://raw.githubusercontent.com/YuriAlessandro/peladaManager/main/assets/image.png)
8+
9+
## Para desenvolver
10+
11+
Você precisa rodar o backend, que está no seguinte repositório: [https://github.com/isaacbatst/pelada-manager-backend](https://github.com/isaacbatst/pelada-manager-backend)
12+
13+
Após isso, só colocar o `index.html` para rodar em qualquer live service.

‎assets/android-chrome-192x192.png ‎old/assets/android-chrome-192x192.png

File renamed without changes.

‎assets/android-chrome-512x512.png ‎old/assets/android-chrome-512x512.png

File renamed without changes.

‎assets/apple-touch-icon.png ‎old/assets/apple-touch-icon.png

File renamed without changes.

‎assets/digital_7.ttf ‎old/assets/digital_7.ttf

File renamed without changes.

‎assets/favicon-16x16.png ‎old/assets/favicon-16x16.png

File renamed without changes.

‎assets/favicon-32x32.png ‎old/assets/favicon-32x32.png

File renamed without changes.

‎assets/favicon.ico ‎old/assets/favicon.ico

File renamed without changes.

‎assets/image.png ‎old/assets/image.png

File renamed without changes.

‎elo.js ‎old/elo.js

File renamed without changes.

0 commit comments

Comments
 (0)