2 |
3 |
10 |
11 |
12 |
13 | **For the v2 we merged frontend and backend.**
14 |
15 | **Head to [github.com/chesspecker/chesspecker](https://github.com/chesspecker/chesspecker)**
16 |
--------------------------------------------------------------------------------
/components/button/index.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './index.module.scss';
2 |
3 | export default function Button({onClick, children}) {
4 | return (
5 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/button/index.module.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | align-self: center;
3 | text-decoration: none;
4 | text-align: center;
5 | display: block;
6 | width: 100%;
7 | line-height: 58px;
8 | padding-top: 2px;
9 | border-radius: 20px;
10 | color: #004e92;
11 | background: white;
12 | border: none;
13 | font-size: 18px;
14 | font-family: 'Merriweather Sans', sans-serif;
15 | font-weight: bold;
16 | cursor: pointer;
17 | @media screen and (max-width: 450px) {
18 | transform: scale(0.9);
19 | }
20 |
21 | &_secondary {
22 | margin: 1rem;
23 | color: white;
24 | font-size: 2rem;
25 | background-color: rgb(104, 104, 104);
26 | border: none;
27 | padding: 1rem 2rem;
28 | border-radius: 5px;
29 | cursor: pointer;
30 | }
31 |
32 | &_warning {
33 | margin: 1rem;
34 | color: white;
35 | font-size: 2rem;
36 | background-color: #dd3333;
37 | border: none;
38 | padding: 1rem 2rem;
39 | border-radius: 5px;
40 | cursor: pointer;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/components/button/secondary.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './index.module.scss';
2 |
3 | export default function Secondary({onClick, children}) {
4 | return (
5 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/button/warning.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './index.module.scss';
2 |
3 | export default function Warning({onClick, children}) {
4 | return (
5 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/chessground/index.jsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic.js';
2 | import STYLE from './index.module.scss';
3 |
4 | const Chessground = dynamic(() => import('react-chessground'), {ssr: false});
5 |
6 | function ChessGround({
7 | onMove,
8 | fen,
9 | turnColor,
10 | movable,
11 | orientation,
12 | lastMove,
13 | check,
14 | background,
15 | wrongMoveVisible,
16 | rightMoveVisible,
17 | finishMoveVisible,
18 | }) {
19 | return (
20 |
3 |
4 | 
5 |
6 | chesspecker
7 |
8 |
9 |
10 |
11 |
31 |
45 | );
46 | }
47 |
48 | export default ChessGround;
49 |
--------------------------------------------------------------------------------
/components/chessground/index.module.scss:
--------------------------------------------------------------------------------
1 | .wrong_move {
2 | animation-name: wrongMoveFlash;
3 | animation-duration: 0.6s;
4 | animation-iteration-count: 1;
5 | }
6 |
7 | @keyframes wrongMoveFlash {
8 | 0% {
9 | box-shadow: 0 0 100px 8px red;
10 | }
11 | 100% {
12 | box-shadow: none;
13 | }
14 | }
15 |
16 | .right_move {
17 | animation-name: rightMoveFlash;
18 | animation-duration: 0.6s;
19 | animation-iteration-count: 1;
20 | }
21 |
22 | @keyframes rightMoveFlash {
23 | 0% {
24 | box-shadow: 0 0 60px 2px green;
25 | }
26 | 100% {
27 | box-shadow: none;
28 | }
29 | }
30 |
31 | .finish_move {
32 | animation-name: finishMoveFlash;
33 | animation-duration: 1.2s;
34 | animation-iteration-count: 1;
35 | }
36 |
37 | @keyframes finishMoveFlash {
38 | 0% {
39 | box-shadow: 0 0 100px 8px yellow;
40 | }
41 | 100% {
42 | box-shadow: none;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/components/choice/index.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './index.module.scss';
2 |
3 | function Choice({onClick, selected, id, title, description}) {
4 | const setActiveTitle = () =>
5 | selected.includes(id) ? `${STYLE.title_active}` : `${STYLE.title}`;
6 |
7 | const setActiveDesc = () =>
8 | selected.includes(id) ? `${STYLE.desc_active}` : `${STYLE.desc}`;
9 |
10 | const setActiveChoice = () =>
11 | selected.includes(id) ? `${STYLE.choice_active}` : `${STYLE.choice}`;
12 |
13 | return (
14 | onClick(id)}
18 | >
19 |
22 | );
23 | }
24 |
25 | export default Choice;
26 |
--------------------------------------------------------------------------------
/components/choice/index.module.scss:
--------------------------------------------------------------------------------
1 | .choice {
2 | height: fit-content;
3 | width: 30rem;
4 | flex-wrap: wrap;
5 | border: solid 1px white;
6 | border-radius: 10px;
7 | cursor: pointer;
8 | margin: 1rem;
9 | &_active {
10 | flex-wrap: wrap;
11 | background-color: white;
12 | height: fit-content;
13 | width: 30rem;
14 | border: solid 1px white;
15 | border-radius: 10px;
16 | cursor: pointer;
17 | margin: 1rem;
18 | }
19 | }
20 |
21 | .title {
22 | color: white;
23 | font-size: 2rem;
24 | margin: 1rem;
25 | &_active {
26 | color: black;
27 | font-size: 2rem;
28 | margin: 1rem;
29 | }
30 | }
31 |
32 | .desc {
33 | color: white;
34 | margin: 1rem;
35 | font-size: 1.5rem;
36 | font-weight: 300;
37 | &_active {
38 | color: black;
39 | margin: 1rem;
40 | font-size: 1.5rem;
41 | font-weight: 300;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/components/footer/index.jsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image.js';
2 | import Link from 'next/link.js';
3 | import STYLE from './index.module.scss';
4 | import github from '@/public/images/github.svg';
5 |
6 | function Footer() {
7 | return (
8 | {title}
20 |{description}
21 |
9 |
23 | );
24 | }
25 |
26 | export default Footer;
27 |
--------------------------------------------------------------------------------
/components/footer/index.module.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | background: #000c3f;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 10rem;
7 | width: 100%;
8 | z-index: 9999;
9 | box-shadow: 0px 0px 12px 0px black;
10 | }
11 |
12 | .content {
13 | width: 95%;
14 | display: flex;
15 | justify-content: space-between;
16 | }
17 |
18 | .buyACoffee {
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | &_desc {
23 | color: white;
24 | font-size: 1.5rem;
25 | border-bottom: 1px solid white;
26 | padding-bottom: 1.5rem;
27 | cursor: pointer;
28 | }
29 | }
30 |
31 | .bugReport {
32 | display: flex;
33 | justify-content: center;
34 | align-items: center;
35 | &_desc {
36 | color: white;
37 | font-size: 1.5rem;
38 | border-bottom: 1px solid white;
39 | padding-bottom: 1.5rem;
40 | margin-right: 2rem;
41 | cursor: pointer;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/components/navbar/index.jsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image.js';
2 | import Link from 'next/link.js';
3 | import STYLE from './index.module.scss';
4 | import logo from '@/public/images/logo.svg';
5 |
6 | function NavBar() {
7 | const api = process.env.API;
8 |
9 | return (
10 |
10 |
11 |
22 |
12 |
14 |
15 |
16 | Buy us coffee
13 |
17 |
20 |
21 | Bug report or ideas? 💡
18 |
11 |
25 | );
26 | }
27 |
28 | export default NavBar;
29 |
--------------------------------------------------------------------------------
/components/navbar/index.module.scss:
--------------------------------------------------------------------------------
1 | .navBar {
2 | background: #004e92;
3 | display: flex;
4 | align-items: center;
5 | justify-content: space-between;
6 | position: fixed;
7 | top: 0;
8 | width: 100%;
9 | z-index: 9999;
10 | box-shadow: 0px 0px 12px 0px black;
11 | }
12 |
13 | .navBar_logo {
14 | font-size: 2rem;
15 | display: flex;
16 | cursor: pointer;
17 | }
18 |
19 | .navBar_title {
20 | align-self: center;
21 | font-size: 2rem;
22 | margin: 0 0 0 1rem;
23 | color: white;
24 | }
25 |
26 | .logo {
27 | max-width: 3.5rem;
28 | margin: 0.5rem;
29 | }
30 |
31 | .user {
32 | color: white;
33 | font-size: 1.6rem;
34 | margin-right: 2rem;
35 | }
36 |
37 | @media screen and (min-width: 745px) {
38 | .navBar_logo {
39 | align-items: center;
40 | }
41 |
42 | .navBar_title {
43 | font-size: 1.8rem;
44 | margin: 1rem;
45 | }
46 |
47 | .logo {
48 | max-width: 4.5rem;
49 | }
50 | }
51 |
52 | @media screen and (min-width: 1024px) {
53 | .logo {
54 | max-width: 5.5rem;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/components/option/level.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './level.module.scss';
2 |
3 | export default function OptionLevel({handleChange}) {
4 | return (
5 |
12 |
13 |
21 |
14 |
19 |
20 |
15 |
17 | — Chesspecker
18 |
22 | Logout
23 |
24 |
6 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/components/option/level.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | text-align: left;
3 | display: flex;
4 | flex-direction: column;
5 | width: 100%;
6 | justify-content: space-between;
7 | align-items: stretch;
8 | margin-top: 2rem;
9 | border-bottom: solid 1px white;
10 |
11 | &_input {
12 | display: flex;
13 | justify-content: space-between;
14 | }
15 |
16 | &_description {
17 | font-size: 2rem;
18 | margin: 0;
19 | color: white;
20 | align-self: center;
21 | margin-right: 1rem;
22 | @media screen and (max-width: 450px) {
23 | font-size: 1.5rem;
24 | }
25 | }
26 | }
27 |
28 | .input_container {
29 | width: 64%;
30 | }
31 |
32 | /* class applies to select element itself, not a wrapper element */
33 | .select_css {
34 | display: block;
35 | font-size: 1.6rem;
36 | font-family: sans-serif;
37 | font-weight: 600;
38 | color: #444;
39 | line-height: 1.3;
40 | padding: 0.6em 1.4em 0.5em 0.8em;
41 | width: 100%;
42 | max-width: 100%; /* useful when width is set to anything other than 100% */
43 | box-sizing: border-box;
44 | margin: 0;
45 | box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
46 | border-radius: 0.4em;
47 | -moz-appearance: none;
48 | -webkit-appearance: none;
49 | appearance: none;
50 | background-color: #fff;
51 | /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
52 | */
53 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
54 | linear-gradient(to bottom, #ffffff 0%, #eee 100%);
55 | background-repeat: no-repeat, repeat;
56 | /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
57 | background-position: right 0.7em top 50%, 0 0;
58 | /* icon size, then gradient */
59 | background-size: 0.65em auto, 100%;
60 | }
61 | /* Hide arrow icon in IE browsers */
62 | .select_css::-ms-expand {
63 | display: none;
64 | }
65 | /* Hover style */
66 | .select_css:hover {
67 | border-color: #888;
68 | }
69 | /* Focus style */
70 | .select_css:focus {
71 | border-color: #aaa;
72 | /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
73 | box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
74 | box-shadow: 0 0 0 3px -moz-mac-focusring;
75 | color: #222;
76 | outline: none;
77 | }
78 |
79 | /* Set options to normal weight */
80 | .select_css option {
81 | font-weight: normal;
82 | }
83 |
84 | /* Support for rtl text, explicit support for Arabic and Hebrew */
85 | *[dir='rtl'] .select_css,
86 | :root:lang(ar) .select_css,
87 | :root:lang(iw) .select_css {
88 | background-position: left 0.7em top 50%, 0 0;
89 | padding: 0.6em 0.8em 0.5em 1.4em;
90 | }
91 |
92 | /* Disabled styles */
93 | .select_css:disabled,
94 | .select_css[aria-disabled='true'] {
95 | color: graytext;
96 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
97 | linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
98 | }
99 |
100 | .select_css:disabled:hover,
101 | .select_css[aria-disabled='true'] {
102 | border-color: #aaa;
103 | }
104 |
105 | .placeHolder {
106 | color: white;
107 | font-size: 1.5rem;
108 | }
109 |
--------------------------------------------------------------------------------
/components/option/size.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from 'react';
2 | import Slider from 'react-input-slider';
3 | import STYLE from './size.module.scss';
4 |
5 | export default function OptionSize({handleChange}) {
6 | const [state, setState] = useState({x: 500});
7 | return (
8 |
7 |
10 |
34 |
11 |
32 |
33 | 35 | Difficulty is based on your average Lichess rating 36 |
37 |
9 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/option/size.module.scss:
--------------------------------------------------------------------------------
1 | .option {
2 | text-align: left;
3 | display: flex;
4 | flex-direction: column;
5 | width: 100%;
6 | justify-content: space-between;
7 | align-items: stretch;
8 | margin-top: 2rem;
9 | border-bottom: solid 1px white;
10 |
11 | &_description {
12 | font-size: 2rem;
13 | margin: 0;
14 | color: white;
15 | align-self: center;
16 | margin-right: 1rem;
17 | @media screen and (max-width: 450px) {
18 | font-size: 1.5rem;
19 | }
20 | }
21 |
22 | &_input {
23 | display: flex;
24 | justify-content: space-between;
25 | }
26 | }
27 |
28 | .container {
29 | margin-top: 0.7rem;
30 | }
31 |
32 | .placeHolder {
33 | color: white;
34 | font-size: 1.5rem;
35 | }
36 |
--------------------------------------------------------------------------------
/components/option/text-input.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './text-input.module.scss';
2 |
3 | export default function OptionTextInput({onChange, setName, children, value}) {
4 | return (
5 |
10 |
13 |
26 |
14 | {
20 | handleChange(x);
21 | return setState(state => ({...state, x}));
22 | }}
23 | />
24 |
25 | Recommended number is around 500
27 |
6 |
9 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/components/option/text-input.module.scss:
--------------------------------------------------------------------------------
1 | .option {
2 | text-align: left;
3 | display: flex;
4 | width: 100%;
5 | justify-content: space-between;
6 | align-items: center;
7 | padding-bottom: 1rem;
8 | margin-top: 2rem;
9 | border-bottom: solid 1px white;
10 | overflow: hidden;
11 |
12 | &_description {
13 | font-size: 2rem;
14 | margin: 0;
15 | color: white;
16 | align-self: center;
17 | margin-right: 1rem;
18 | @media screen and (max-width: 450px) {
19 | font-size: 1.5rem;
20 | }
21 | }
22 |
23 | &_secondary {
24 | width: 60%;
25 | align-self: flex-end;
26 | @media screen and (max-width: 450px) {
27 | font-size: 1.5rem;
28 | }
29 | }
30 | }
31 |
32 | .input_text {
33 | background-color: white;
34 | color: var(--color-primary);
35 | font-size: 2rem;
36 | border: none;
37 | border-radius: 5px;
38 | height: 4rem;
39 | width: 80%;
40 | justify-self: center;
41 | align-self: center;
42 | text-align: center;
43 | &::placeholder {
44 | font-size: 1.5rem;
45 | }
46 | @media screen and (max-width: 450px) {
47 | transform: scale(0.8);
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/components/playing/left-column.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable-next-line */
2 | import {BsFillVolumeUpFill, BsFillVolumeMuteFill} from 'react-icons/bs';
3 | import Image from 'next/image.js';
4 | import Tippy from '@tippyjs/react';
5 | import STYLE from './left-column.module.scss';
6 | import rotate from '@/public/images/rotate.svg';
7 | import fastForward from '@/public/images/fast-forward.svg';
8 | import 'tippy.js/dist/tippy.css';
9 |
10 | export default function LeftColumn({
11 | changeSoundStatus,
12 | soundStatus,
13 | switchOrientation,
14 | toggleAutoMove,
15 | autoMove,
16 | }) {
17 | return (
18 |
19 |
34 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/components/playing/left-column.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | @media screen and (max-width: 1100px) {
3 | display: flex;
4 | flex-direction: row;
5 | width: 100%;
6 | align-items: center;
7 | justify-content: center;
8 | margin: 1rem;
9 | }
10 | @media screen and (max-width: 450px) {
11 | transform: scale(0.5);
12 | margin: 0;
13 | }
14 | }
15 |
16 | .content {
17 | background-color: rgb(245, 245, 245);
18 | border-radius: 10px;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | height: 5rem;
24 | width: 5rem;
25 | margin-top: 2rem;
26 | margin-bottom: 2rem;
27 | @media screen and (max-width: 1100px) {
28 | align-self: center;
29 | margin: 0.5rem;
30 | }
31 | }
32 |
33 | .icon_mute {
34 | margin-top: 10%;
35 | margin-left: 10%;
36 | * {
37 | height: 4rem;
38 | width: 4rem;
39 | }
40 | }
41 |
42 | .icon_rotate {
43 | margin-top: 5%;
44 | margin-left: 2%;
45 | * {
46 | height: 4rem;
47 | width: 4rem;
48 | }
49 | }
50 |
51 | .icon_enabled {
52 | margin-top: 8%;
53 | margin-left: 6%;
54 | * {
55 | height: 4rem;
56 | width: 4rem;
57 | fill: #004e92;
58 | }
59 | }
60 |
61 | .icon_disabled {
62 | margin-top: 8%;
63 | margin-left: 6%;
64 | * {
65 | height: 4rem;
66 | width: 4rem;
67 | fill: rgb(245, 245, 245);
68 | }
69 | }
70 |
71 | .autoMove {
72 | &_enabled {
73 | background-color: rgb(245, 245, 245);
74 | }
75 | &_disabled {
76 | background-color: #ccc;
77 | }
78 | }
79 |
80 | .btn_lichess {
81 | margin: 1rem;
82 | color: rgb(104, 104, 104);
83 | font-size: 2rem;
84 | background-color: rgb(245, 245, 245);
85 | border: none;
86 | padding: 1rem 2rem;
87 | border-radius: 5px;
88 | cursor: pointer;
89 | }
90 |
--------------------------------------------------------------------------------
/components/playing/promotion-container.jsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image.js';
2 | import STYLE from './promotion-container.module.scss';
3 | import queenW from '@/public/pieces/wQ.svg';
4 | import rookW from '@/public/pieces/wR.svg';
5 | import bishopW from '@/public/pieces/wB.svg';
6 | import knightW from '@/public/pieces/wN.svg';
7 | import queenB from '@/public/pieces/bQ.svg';
8 | import rookB from '@/public/pieces/bR.svg';
9 | import bishopB from '@/public/pieces/bB.svg';
10 | import knightB from '@/public/pieces/bN.svg';
11 |
12 | function PromotionContainer({chess, promotion, selectVisible}) {
13 | if (!chess) return null;
14 | return (
15 |
20 |
21 |
22 | {soundStatus ?
25 |
26 |
27 |
28 |
29 |
32 |
33 |
41 |
45 |
48 |
19 |
52 | );
53 | }
54 |
55 | export default PromotionContainer;
56 |
--------------------------------------------------------------------------------
/components/playing/promotion-container.module.scss:
--------------------------------------------------------------------------------
1 | .promotion_container {
2 | position: absolute;
3 | top: 5rem;
4 | z-index: 999;
5 | display: flex;
6 | background-color: rgb(245, 245, 245);
7 | justify-content: center;
8 | width: 50%;
9 | height: 15%;
10 | align-items: center;
11 | border-radius: 5px;
12 | box-shadow: 0 0 3rem 3rem rgba(0, 0, 0, 0.5);
13 | }
14 |
--------------------------------------------------------------------------------
/components/playing/right-column.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from 'react';
2 | import ProgressBarCircle from '../progress-bar/index.jsx';
3 | import ButtonSecondary from '../button/secondary.jsx';
4 | import STYLE from './right-column.module.scss';
5 |
6 | export default function RightColumn({
7 | percentage,
8 | text,
9 | isComplete,
10 | solutionVisible,
11 | nextMove,
12 | moveToNext,
13 | autoMove,
14 | gameLink,
15 | }) {
16 | const [solutionDisplayed, setSolutionDisplayed] = useState(false);
17 | if (!text) return null;
18 | if (!gameLink) return null;
19 |
20 | const handleClick = () => {
21 | if (solutionDisplayed) {
22 | setSolutionDisplayed(() => false);
23 | } else {
24 | setSolutionDisplayed(() => true);
25 | setTimeout(() => {
26 | setSolutionDisplayed(() => false);
27 | }, 3000);
28 | }
29 | };
30 |
31 | return (
32 | promotion('q')}>
20 |
27 | promotion('r')}>
28 |
35 | promotion('b')}>
36 |
43 | promotion('n')}>
44 |
51 |
33 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/components/playing/right-column.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | flex: 1;
3 | justify-self: center;
4 | z-index: 10;
5 |
6 | @media screen and (max-width: 1100px) {
7 | margin: 3rem 50%;
8 | justify-self: center;
9 | }
10 | @media screen and (max-width: 450px) {
11 | margin: 3rem 0;
12 | }
13 | }
14 |
15 | .content {
16 | background-color: rgb(245, 245, 245);
17 | border-radius: 10px;
18 | display: flex;
19 | flex-direction: column;
20 | align-items: center;
21 | justify-content: center;
22 | @media screen and (min-width: 450px) {
23 | width: 35rem;
24 | }
25 | }
26 |
27 | .progression_title {
28 | font-size: 2rem;
29 | font-weight: 500;
30 | display: flex;
31 | justify-content: center;
32 | align-items: center;
33 | text-align: center;
34 | }
35 |
36 | .turn {
37 | font-size: 2rem;
38 | font-weight: 500;
39 | line-height: 3rem;
40 | align-items: center;
41 | text-align: center;
42 | }
43 |
44 | .text_title {
45 | font-weight: 700;
46 | margin-bottom: -20px;
47 | }
48 |
49 | .btn_lichess {
50 | margin: 1rem;
51 | color: rgb(104, 104, 104);
52 | font-size: 2rem;
53 | background-color: rgb(245, 245, 245);
54 | border: none;
55 | padding: 1rem 2rem;
56 | border-radius: 5px;
57 | cursor: pointer;
58 | }
59 |
--------------------------------------------------------------------------------
/components/playing/timer.jsx:
--------------------------------------------------------------------------------
1 | import STYLE from './timer.module.scss';
2 | import useClock from '@/hooks/use-clock.jsx';
3 |
4 | function Timer({value}) {
5 | return (
6 |
34 |
76 | Progression
35 |
41 |
44 | {text.title}
42 |{text.subtitle}
43 |
45 | {!solutionVisible && !isComplete && (
46 | NO CHEATING
47 | )}
48 |
49 |
50 | {solutionVisible && !isComplete && !solutionDisplayed && (
51 | SOLUTION 🧩
52 | )}
53 |
54 |
55 | {solutionVisible && !isComplete && solutionDisplayed && (
56 | {nextMove}
57 | )}
58 |
59 |
60 | {isComplete && (
61 | NEXT PUZZLE
62 | )}
63 |
64 |
65 | {isComplete && !autoMove && (
66 |
73 | )}
74 |
75 |
7 |
9 | );
10 | }
11 |
12 | export default Timer;
13 |
--------------------------------------------------------------------------------
/components/playing/timer.module.scss:
--------------------------------------------------------------------------------
1 | .timer {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | border: solid 3px rgb(245, 245, 245);
6 | height: 4.5rem;
7 | width: 16rem;
8 | border-radius: 10px;
9 | color: rgb(245, 245, 245);
10 | font-size: 2rem;
11 | }
12 |
--------------------------------------------------------------------------------
/components/popup/confirm-remove.jsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image.js';
2 | import ButtonWarning from '../button/warning.jsx';
3 | import ButtonSecondary from '../button/secondary.jsx';
4 | import INDEX_STYLE from './confirm-remove.module.scss';
5 | import trash from '@/public/images/trash.svg';
6 | import PopupContainer from '@/layouts/popup/container.jsx';
7 | import PopupBackground from '@/layouts/popup/background.jsx';
8 |
9 | export default function ConfirmRemovePopup({onRemove}) {
10 | return (
11 | ⏲ {useClock(value)}
8 |
14 |
16 | 17 | Are you sure you want to remove this set? 18 |
19 |
20 | onRemove(false)}>
21 | NO! GO BACK!
22 |
23 | onRemove(true)}>YES
24 |
25 | 14 | You can't choose Healthy Mix and other themes. We will fill your 15 | set with various puzzles from random themes. 16 |
17 |14 | You can't choose more than three themes. It's time to be 15 | specific about what you want to improve! 16 |
17 |Sorry your set must have a name.
14 |Try to solve all the puzzles as fast as possible! ⏲
10 |🎉 Good game 🎉
13 |Time spent : {useClock(counter)}
14 |
15 | RESTART
16 |
17 | DASHBOARD
18 |
19 |
20 |
12 |
13 |
19 |
75 | );
76 | }
77 |
78 | export default GameSet;
79 |
--------------------------------------------------------------------------------
/components/puzzle-set/index.module.scss:
--------------------------------------------------------------------------------
1 | .set {
2 | border: 3px solid white;
3 | border-radius: 30px;
4 | height: 35rem;
5 | width: 25rem;
6 | display: flex;
7 | flex-direction: column;
8 | color: white;
9 | margin: 1rem;
10 | padding: 1rem;
11 | }
12 |
13 | .title {
14 | margin: 1rem;
15 | margin-top: 0rem;
16 | font-size: 3rem;
17 | font-weight: 500;
18 | }
19 |
20 | .list {
21 | height: 100%;
22 | display: flex;
23 | position: relative;
24 | justify-content: space-around;
25 | list-style: none;
26 | &_element {
27 | font-size: 2.2rem;
28 | margin-top: 1rem;
29 | font-weight: 300;
30 | }
31 | }
32 |
33 | .supress {
34 | width: 3rem;
35 | position: absolute;
36 | top: -4.5rem;
37 | right: 0;
38 | cursor: pointer;
39 | }
40 |
41 | .informations {
42 | font-size: 1.5rem;
43 | margin-bottom: 3rem;
44 | }
45 |
46 | .badge {
47 | color: white;
48 | padding: 0.5rem 1rem;
49 | border-radius: 5px;
50 | &_primary {
51 | background-color: green;
52 | }
53 | &_secondary {
54 | background-color: grey;
55 | }
56 | &_yellow {
57 | background-color: yellow;
58 | color: black;
59 | }
60 | &_warning {
61 | background-color: red;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/context/new-set-context.jsx:
--------------------------------------------------------------------------------
1 | import {createContext, useContext} from 'react';
2 |
3 | export const NewSetContext = createContext({
4 | newSet: {},
5 | updateNewSetOptions: () => {},
6 | updateNewSetSize: () => {},
7 | updateNewSetTitle: () => {},
8 | });
9 |
10 | export const useNewSetContext = () => useContext(NewSetContext);
11 |
--------------------------------------------------------------------------------
/context/user-context.jsx:
--------------------------------------------------------------------------------
1 | import {createContext, useContext} from 'react';
2 |
3 | export const UserContext = createContext({
4 | currentUser: {},
5 | updateCurrentUserName: () => {},
6 | updateCurrentSet: () => {},
7 | });
8 |
9 | export const useUserContext = () => useContext(UserContext);
10 |
--------------------------------------------------------------------------------
/data/categories.js:
--------------------------------------------------------------------------------
1 | const categories = [
2 | {name: 'Recommended', id: '1'},
3 | {name: 'Phases', id: '2'},
4 | {name: 'Motifs', id: '3'},
5 | {name: 'Advanced', id: '4'},
6 | {name: 'Mates', id: '5'},
7 | {name: 'Special moves', id: '6'},
8 | {name: 'Goals', id: '7'},
9 | {name: 'Lengths', id: '8'},
10 | {name: 'Origin', id: '9'},
11 | ];
12 |
13 | export default categories;
14 |
--------------------------------------------------------------------------------
/data/themes.js:
--------------------------------------------------------------------------------
1 | const themes = [
2 | {
3 | title: 'Advanced pawn',
4 | id: 'advancedPawn',
5 | description:
6 | 'One of your pawns is deep into the opponent position, maybe threatening to promote.',
7 | category: {name: 'Motifs', id: '3'},
8 | },
9 | {
10 | title: 'Advantage',
11 | id: 'advantage',
12 | description:
13 | 'Seize your chance to get a decisive advantage. (200cp ≤ eval ≤ 600cp)',
14 | category: {name: 'Goals', id: '7'},
15 | },
16 | {
17 | title: "Anastasia's mate",
18 | id: 'anastasiaMate',
19 | description:
20 | 'A knight and rook or queen team up to trap the opposing king between the side of the board and a friendly piece.',
21 | category: {name: 'Mates', id: '5'},
22 | },
23 | {
24 | title: 'Arabian mate',
25 | id: 'arabianMate',
26 | description:
27 | 'A knight and a rook team up to trap the opposing king on a corner of the board.',
28 | category: {name: 'Mates', id: '5'},
29 | },
30 | {
31 | title: 'Attacking f2 or f7',
32 | id: 'attackingF2F7',
33 | description:
34 | 'An attack focusing on the f2 or f7 pawn, such as in the fried liver opening.',
35 | category: {name: 'Motifs', id: '3'},
36 | },
37 | {
38 | title: 'Attraction',
39 | id: 'attraction',
40 | description:
41 | 'An exchange or sacrifice encouraging or forcing an opponent piece to a square that allows a follow-up tactic.',
42 | category: {name: 'Advanced', id: '4'},
43 | },
44 | {
45 | title: 'Back rank mate',
46 | id: 'backRankMate',
47 | description:
48 | 'Checkmate the king on the home rank, when it is trapped there by its own pieces.',
49 | category: {name: 'Mates', id: '5'},
50 | },
51 | {
52 | title: 'Bishop endgame',
53 | id: 'bishopEndgame',
54 | description: 'An endgame with only bishops and pawns.',
55 | category: {name: 'Phases', id: '2'},
56 | },
57 | {
58 | title: "Boden's mate",
59 | id: 'bodenMate',
60 | description:
61 | 'Two attacking bishops on criss-crossing diagonals deliver mate to a king obstructed by friendly pieces.',
62 | category: {name: 'Mates', id: '5'},
63 | },
64 | {
65 | title: 'Castling',
66 | id: 'castling',
67 | description: 'Bring the king to safety, and deploy the rook for attack.',
68 | category: {name: 'Special moves', id: '6'},
69 | },
70 | {
71 | title: 'Capture the defender',
72 | id: 'capturingDefender',
73 | description:
74 | 'Removing a piece that is critical to defence of another piece, allowing the now undefended piece to be captured on a following move.',
75 | category: {name: 'Motifs', id: '3'},
76 | },
77 | {
78 | title: 'Crushing',
79 | id: 'crushing',
80 | description:
81 | 'Spot the opponent blunder to obtain a crushing advantage. (eval ≥ 600cp)',
82 | category: {name: 'Goals', id: '7'},
83 | },
84 | {
85 | title: 'Double bishop mate',
86 | id: 'doubleBishopMate',
87 | description:
88 | 'Two attacking bishops on adjacent diagonals deliver mate to a king obstructed by friendly pieces.',
89 | category: {name: 'Mates', id: '5'},
90 | },
91 | {
92 | title: 'Dovetail mate',
93 | id: 'dovetailMate',
94 | description:
95 | 'A queen delivers mate to an adjacent king, whose only two escape squares are obstructed by friendly pieces.',
96 | category: {name: 'Mates', id: '5'},
97 | },
98 | {
99 | title: 'Equality',
100 | id: 'equality',
101 | description:
102 | 'Come back from a losing position, and secure a draw or a balanced position. (eval ≤ 200cp)',
103 | category: {name: 'Goals', id: '7'},
104 | },
105 | {
106 | title: 'Kingside attack',
107 | id: 'kingsideAttack',
108 | description:
109 | "An attack of the opponent's king, after they castled on the king side.",
110 | category: {name: 'Motifs', id: '3'},
111 | },
112 | {
113 | title: 'Clearance',
114 | id: 'clearance',
115 | description:
116 | 'A move, often with tempo, that clears a square, file or diagonal for a follow-up tactical idea.',
117 | category: {name: 'Advanced', id: '4'},
118 | },
119 | {
120 | title: 'Defensive move',
121 | id: 'defensiveMove',
122 | description:
123 | 'A precise move or sequence of moves that is needed to avoid losing material or another advantage.',
124 | category: {name: 'Advanced', id: '4'},
125 | },
126 | {
127 | title: 'Deflection',
128 | id: 'deflection',
129 | description:
130 | 'A move that distracts an opponent piece from another duty that it performs, such as guarding a key square. Sometimes also called « overloading. »',
131 | category: {name: 'Advanced', id: '4'},
132 | },
133 | {
134 | title: 'Discovered attack',
135 | id: 'discoveredAttack',
136 | description:
137 | 'Moving a piece (such as a knight), that previously blocked an attack by a long range piece (such as a rook), out of the way of that piece.',
138 | category: {name: 'Motifs', id: '3'},
139 | },
140 | {
141 | title: 'Double check',
142 | id: 'doubleCheck',
143 | description:
144 | "Checking with two pieces at once, as a result of a discovered attack where both the moving piece and the unveiled piece attack the opponent's king.",
145 | category: {name: 'Motifs', id: '3'},
146 | },
147 | {
148 | title: 'Endgame',
149 | id: 'endgame',
150 | description: 'A tactic during the last phase of the game.',
151 | category: {name: 'Phases', id: '2'},
152 | },
153 | {
154 | title: 'En passant',
155 | id: 'enPassant',
156 | description:
157 | 'A tactic involving the en passant rule, where a pawn can capture an opponent pawn that has bypassed it using its initial two-square move.',
158 | category: {name: 'Special moves', id: '6'},
159 | },
160 | {
161 | title: 'Exposed king',
162 | id: 'exposedKing',
163 | description:
164 | 'A tactic involving a king with few defenders around it, often leading to checkmate.',
165 | category: {name: 'Motifs', id: '3'},
166 | },
167 | {
168 | title: 'Fork',
169 | id: 'fork',
170 | description:
171 | 'A move where the moved piece attacks two opponent pieces at once.',
172 | category: {name: 'Motifs', id: '3'},
173 | },
174 | {
175 | title: 'Hanging piece',
176 | id: 'hangingPiece',
177 | description:
178 | 'A tactic involving an opponent piece being undefended or insufficiently defended and free to capture.',
179 | category: {name: 'Motifs', id: '3'},
180 | },
181 | {
182 | title: 'Hook mate',
183 | id: 'hookMate',
184 | description:
185 | "Checkmate with a rook, knight, and pawn along with one enemy pawn to limit the enemy king's escape.",
186 | category: {name: 'Mates', id: '5'},
187 | },
188 | {
189 | title: 'Interference',
190 | id: 'interference',
191 | description:
192 | 'Moving a piece between two opponent pieces to leave one or both opponent pieces undefended, such as a knight on a defended square between two rooks.',
193 | category: {name: 'Advanced', id: '4'},
194 | },
195 | {
196 | title: 'Intermezzo',
197 | id: 'intermezzo',
198 | description:
199 | 'Instead of playing the expected move, first interpose another move posing an immediate threat that the opponent must answer. Also known as « Zwischenzug » or « In between. »',
200 | category: {name: 'Advanced', id: '4'},
201 | },
202 | {
203 | title: 'Knight endgame',
204 | id: 'knightEndgame',
205 | description: 'An endgame with only knights and pawns.',
206 | category: {name: 'Phases', id: '2'},
207 | },
208 | {
209 | title: 'Long puzzle',
210 | id: 'long',
211 | description: 'Three moves to win.',
212 | category: {name: 'Lengths', id: '8'},
213 | },
214 | {
215 | title: 'Master games',
216 | id: 'master',
217 | description: 'Puzzles from games played by titled players.',
218 | category: {name: 'Origin', id: '9'},
219 | },
220 | {
221 | title: 'Master vs Master games',
222 | id: 'masterVsMaster',
223 | description: 'Puzzles from games between two titled players.',
224 | category: {name: 'Origin', id: '9'},
225 | },
226 | {
227 | title: 'Checkmate',
228 | id: 'mate',
229 | description: 'Win the game with style.',
230 | category: {name: 'Mates', id: '5'},
231 | },
232 | {
233 | title: 'Mate in 1',
234 | id: 'mateIn1',
235 | description: 'Deliver checkmate in one move.',
236 | category: {name: 'Mates', id: '5'},
237 | },
238 | {
239 | title: 'Mate in 2',
240 | id: 'mateIn2',
241 | description: 'Deliver checkmate in two moves.',
242 | category: {name: 'Mates', id: '5'},
243 | },
244 | {
245 | title: 'Mate in 3',
246 | id: 'mateIn3',
247 | description: 'Deliver checkmate in three moves.',
248 | category: {name: 'Mates', id: '5'},
249 | },
250 | {
251 | title: 'Mate in 4',
252 | id: 'mateIn4',
253 | description: 'Deliver checkmate in four moves.',
254 | category: {name: 'Mates', id: '5'},
255 | },
256 | {
257 | title: 'Mate in 5 or more',
258 | id: 'mateIn5',
259 | description: 'Figure out a long mating sequence.',
260 | category: {name: 'Mates', id: '5'},
261 | },
262 | {
263 | title: 'Middlegame',
264 | id: 'middlegame',
265 | description: 'A tactic during the second phase of the game.',
266 | category: {name: 'Phases', id: '2'},
267 | },
268 | {
269 | title: 'One-move puzzle',
270 | id: 'oneMove',
271 | description: 'A puzzle that is only one move long.',
272 | category: {name: 'Lengths', id: '8'},
273 | },
274 | {
275 | title: 'Opening',
276 | id: 'opening',
277 | description: 'A tactic during the first phase of the game.',
278 | category: {name: 'Phases', id: '2'},
279 | },
280 | {
281 | title: 'Pawn endgame',
282 | id: 'pawnEndgame',
283 | description: 'An endgame with only pawns.',
284 | category: {name: 'Phases', id: '2'},
285 | },
286 | {
287 | title: 'Pin',
288 | id: 'pin',
289 | description:
290 | 'A tactic involving pins, where a piece is unable to move without revealing an attack on a higher value piece.',
291 | category: {name: 'Motifs', id: '3'},
292 | },
293 | {
294 | title: 'Promotion',
295 | id: 'promotion',
296 | description: 'Promote one of your pawn to a queen or minor piece.',
297 | category: {name: 'Special moves', id: '6'},
298 | },
299 | {
300 | title: 'Queen endgame',
301 | id: 'queenEndgame',
302 | description: 'An endgame with only queens and pawns.',
303 | category: {name: 'Phases', id: '2'},
304 | },
305 | {
306 | title: 'Queen and Rook',
307 | id: 'queenRookEndgame',
308 | description: 'An endgame with only queens, rooks and pawns.',
309 | category: {name: 'Phases', id: '2'},
310 | },
311 | {
312 | title: 'Queenside attack',
313 | id: 'queensideAttack',
314 | description:
315 | "An attack of the opponent's king, after they castled on the queen side.",
316 | category: {name: 'Motifs', id: '3'},
317 | },
318 | {
319 | title: 'Quiet move',
320 | id: 'quietMove',
321 | description:
322 | 'A move that does neither make a check or capture, nor an immediate threat to capture, but does prepare a more hidden unavoidable threat for a later move.',
323 | category: {name: 'Advanced', id: '4'},
324 | },
325 | {
326 | title: 'Rook endgame',
327 | id: 'rookEndgame',
328 | description: 'An endgame with only rooks and pawns.',
329 | category: {name: 'Phases', id: '2'},
330 | },
331 | {
332 | title: 'Sacrifice',
333 | id: 'sacrifice',
334 | description:
335 | 'A tactic involving giving up material in the short-term, to gain an advantage again after a forced sequence of moves.',
336 | category: {name: 'Motifs', id: '3'},
337 | },
338 | {
339 | title: 'Short puzzle',
340 | id: 'short',
341 | description: 'Two moves to win.',
342 | category: {name: 'Lengths', id: '8'},
343 | },
344 | {
345 | title: 'Skewer',
346 | id: 'skewer',
347 | description:
348 | 'A motif involving a high value piece being attacked, moving out the way, and allowing a lower value piece behind it to be captured or attacked, the inverse of a pin.',
349 | category: {name: 'Motifs', id: '3'},
350 | },
351 | {
352 | title: 'Smothered mate',
353 | id: 'smotheredMate',
354 | description:
355 | 'A checkmate delivered by a knight in which the mated king is unable to move because it is surrounded (or smothered) by its own pieces.',
356 | category: {name: 'Mates', id: '5'},
357 | },
358 | {
359 | title: 'Super GM games',
360 | id: 'superGM',
361 | description: 'Puzzles from games played by the best players in the world.',
362 | category: {name: 'Origin', id: '9'},
363 | },
364 | {
365 | title: 'Trapped piece',
366 | id: 'trappedPiece',
367 | description: 'A piece is unable to escape capture as it has limited moves.',
368 | category: {name: 'Motifs', id: '3'},
369 | },
370 | {
371 | title: 'Underpromotion',
372 | id: 'underPromotion',
373 | description: 'Promotion to a knight, bishop, or rook.',
374 | category: {name: 'Special moves', id: '6'},
375 | },
376 | {
377 | title: 'Very long puzzle',
378 | id: 'veryLong',
379 | description: 'Four moves or more to win.',
380 | category: {name: 'Lengths', id: '8'},
381 | },
382 | {
383 | title: 'X-Ray attack',
384 | id: 'xRayAttack',
385 | description: 'A piece attacks or defends a square, through an enemy piece.',
386 | category: {name: 'Advanced', id: '4'},
387 | },
388 | {
389 | title: 'Zugzwang',
390 | id: 'zugzwang',
391 | description:
392 | 'The opponent is limited in the moves they can make, and all moves worsen their position.',
393 | category: {name: 'Advanced', id: '4'},
394 | },
395 | {
396 | title: 'Healthy mix',
397 | id: 'healthyMix',
398 | description:
399 | "A bit of everything. You don't know what to expect, so you remain ready for anything! Just like in real games.",
400 | category: {name: 'Recommended', id: '1'},
401 | },
402 | ];
403 |
404 | export default themes;
405 |
--------------------------------------------------------------------------------
/hooks/use-clock.jsx:
--------------------------------------------------------------------------------
1 | const useClock = count => {
2 | return count < 10
3 | ? '00:0' + count
4 | : count < 60
5 | ? '00:' + count
6 | : count < 600
7 | ? '0' +
8 | Math.floor(count / 60) +
9 | ':' +
10 | (count % 60 < 10 ? '0' + (count % 60) : count % 60)
11 | : count < 3600
12 | ? Math.floor(count / 60) +
13 | ':' +
14 | (count % 60 < 10 ? '0' + (count % 60) : count % 60)
15 | : count < 36_000
16 | ? '0' +
17 | Math.floor(count / 3600) +
18 | ':' +
19 | (count % 3600 < 10
20 | ? '00:0' + (count % 3600)
21 | : count % 3600 < 60
22 | ? '00:' + (count % 3600)
23 | : count % 3600 < 600
24 | ? '0' +
25 | Math.floor((count % 3600) / 60) +
26 | ':' +
27 | ((count % 3600) % 60 < 10
28 | ? '0' + ((count % 3600) % 60)
29 | : (count % 3600) % 60)
30 | : Math.floor((count % 3600) / 60) +
31 | ':' +
32 | ((count % 3600) % 60 < 10
33 | ? '0' + ((count % 3600) % 60)
34 | : (count % 3600) % 60))
35 | : Math.floor(count / 3600) +
36 | ':' +
37 | (count % 3600 < 10
38 | ? '00:0' + (count % 3600)
39 | : count % 3600 < 60
40 | ? '00:' + (count % 3600)
41 | : count % 3600 < 600
42 | ? '0' +
43 | Math.floor((count % 3600) / 60) +
44 | ':' +
45 | ((count % 3600) % 60 < 10
46 | ? '0' + ((count % 3600) % 60)
47 | : (count % 3600) % 60)
48 | : Math.floor((count % 3600) / 60) +
49 | ':' +
50 | ((count % 3600) % 60 < 10
51 | ? '0' + ((count % 3600) % 60)
52 | : (count % 3600) % 60));
53 | };
54 |
55 | export default useClock;
56 |
--------------------------------------------------------------------------------
/hooks/use-conffeti.jsx:
--------------------------------------------------------------------------------
1 | import Confetti from 'react-confetti';
2 | import useWindowSize from './use-window-size.jsx';
3 |
4 | export default function useConfetti() {
5 | const {width, height} = useWindowSize();
6 | return (
7 | 14 | {sets.title.length > 12 15 | ? sets.title.slice(0, 11) + ' ...' 16 | : sets.title} 17 |
18 |
20 |
24 |
28 |
29 |
33 |
34 |
21 | onDelete(sets._id)} />
22 |
23 |
25 | ⏲: {useClock(sets.currentTime)}
26 |
27 |
30 | 🎯 : {Math.round(sets.accuracy * 100)} %
31 |
32 |
35 |
71 |
74 | Best time : {useClock(sets.bestTime)}
36 |
37 |
70 | 38 | Completed :{' '} 39 | 50 | {sets.cycles} time{sets.cycles > 1 && 's'} 51 | 52 |
53 |54 | Difficulty :{' '} 55 | 66 | {sets.level} 67 | 68 |
69 |
8 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/layouts/container/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | background: rgb(71, 43, 186);
3 | background: linear-gradient(0deg, #000428 0%, #004e92 70%);
4 | display: flex;
5 | min-height: 100vh;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | }
10 |
--------------------------------------------------------------------------------
/layouts/create/index.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from 'react';
2 | import Router from 'next/router.js';
3 | import STYLE from './index.module.scss';
4 | import {useNewSetContext} from '@/context/new-set-context.jsx';
5 | import Container from '@/layouts/container/index.jsx';
6 | import CATEGORIES from '@/data/categories.js';
7 | import THEMES from '@/data/themes.js';
8 | import Button from '@/components/button/index.jsx';
9 | import Choice from '@/components/choice/index.jsx';
10 | import ErrorPopupNewSet from '@/components/popup/error-new-set.jsx';
11 | import ErrorPopupNumerousChoices from '@/components/popup/error-numerous-choices.jsx';
12 |
13 | function NewSet() {
14 | const [choicesSelected, setChoicesSelected] = useState([]);
15 | const {updateNewSetOptions} = useNewSetContext();
16 | const [toggleHealthyMixPopup, setToggleHealthyMixPopup] = useState(false);
17 | const [toggleNumerousChoicesPopup, setToggleNumerousChoicesPopup] =
18 | useState(false);
19 |
20 | const handleClick = id => {
21 | const selectingHealthyMixWithOther =
22 | choicesSelected.length > 0 &&
23 | id === 'healthyMix' &&
24 | !choicesSelected.includes(id);
25 | const healthyMixAlreadySelected =
26 | choicesSelected[0] === 'healthyMix' && id !== 'healthyMix';
27 | const healthyMixError =
28 | selectingHealthyMixWithOther || healthyMixAlreadySelected;
29 |
30 | if (healthyMixError) return setToggleHealthyMixPopup(() => true);
31 |
32 | if (choicesSelected.includes(id)) {
33 | setChoicesSelected(oldArray => {
34 | const index = oldArray.indexOf(id);
35 | const array = [...oldArray];
36 | array.splice(index, 1);
37 | return array;
38 | });
39 | return;
40 | }
41 |
42 | if (choicesSelected.length > 2)
43 | return setToggleNumerousChoicesPopup(() => true);
44 |
45 | setChoicesSelected(oldArray => {
46 | const newArray = [...oldArray];
47 | newArray.push(id);
48 | return newArray;
49 | });
50 | };
51 |
52 | const handleNextClick = () => {
53 | if (choicesSelected.length === 0) setChoicesSelected(() => ['healthyMix']);
54 | updateNewSetOptions([...choicesSelected]);
55 | Router.push('/options');
56 | };
57 |
58 | return (
59 |
71 |
97 | 72 | Select one or more category to create your set! 73 |
74 |
75 | {CATEGORIES.map(c => (
76 |
93 |
77 |
91 | ))}
92 | {c.name}
78 |
79 | {THEMES.filter(p => p.category.name === c.name).map(p => (
80 |
90 |
94 |
95 |
96 |
54 | {toggleConfirm &&
88 |
56 |
87 | Here are your sets!
57 |58 | Solve the same puzzles again and again, only faster. It’s not a lazy 59 | shortcut to success – hard work is required. But the reward can be 60 | re-programming your unconscious mind. Benefits include sharper 61 | tactical vision, fewer blunders, better play when in time trouble 62 | and improved intuition. 63 |
64 |
65 | {sets &&
66 | sets.map(s => (
67 | handleCurrentSet(s._id)}
73 | onDelete={handleConfirm}
74 | />
75 | ))}
76 |
86 |
77 |
78 |
85 |
79 |
82 |
83 |
84 | Create a set
81 |
9 |
28 | );
29 | }
30 |
31 | export default LoginRegister;
32 |
--------------------------------------------------------------------------------
/layouts/login/index.module.scss:
--------------------------------------------------------------------------------
1 | .page {
2 | background: rgb(71, 43, 186);
3 | background: linear-gradient(0deg, #000428 0%, #004e92 70%);
4 | display: flex;
5 | min-height: 100vh;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | }
10 |
11 | .container {
12 | height: 100vh;
13 | margin: 0;
14 | color: #222;
15 | font-family: 'Merriweather Sans', sans-serif;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | display: flex;
20 | flex-direction: column;
21 | }
22 |
23 | .title {
24 | font-family: 'Merriweather Sans', sans-serif;
25 | font-size: 26px;
26 | margin: 32px auto 24px;
27 | line-height: 40px;
28 | color: white;
29 | text-align: center;
30 | padding: 20px;
31 | }
32 |
33 | .logo {
34 | display: block;
35 | margin-top: 32px;
36 | margin-left: auto;
37 | margin-right: auto;
38 | width: 160px;
39 | height: 160px;
40 | }
41 |
42 | .contentBottom {
43 | width: 100%;
44 | margin: 10px 0;
45 | text-align: center;
46 | color: white;
47 | }
48 |
49 | .btn {
50 | text-decoration: none;
51 | text-align: center;
52 | display: block;
53 | width: 250px;
54 | line-height: 58px;
55 | padding-top: 2px;
56 | border-radius: 20px;
57 | color: #004e92;
58 | background: white;
59 | margin: 0 auto;
60 | border: none;
61 | font-size: 18px;
62 | font-family: 'Merriweather Sans', sans-serif;
63 | font-weight: bold;
64 | }
65 |
--------------------------------------------------------------------------------
/layouts/options/index.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from 'react';
2 | import Router from 'next/router.js';
3 | import STYLE from './index.module.scss';
4 | import {useNewSetContext} from '@/context/new-set-context.jsx';
5 | import http from '@/lib/http.js';
6 | import Container from '@/layouts/container/index.jsx';
7 |
8 | import OptionTextInput from '@/components/option/text-input.jsx';
9 | import OptionSize from '@/components/option/size.jsx';
10 | import OptionDifficulty from '@/components/option/level.jsx';
11 |
12 | import Button from '@/components/button/index.jsx';
13 | import ErrorPopup from '@/components/popup/error.jsx';
14 |
15 | function Options() {
16 | const api = process.env.API;
17 | const {newSet} = useNewSetContext();
18 | const [isDisabled, setIsDisabled] = useState(false);
19 | const [toggleError, setToggleError] = useState(false);
20 |
21 | const [title, setTitle] = useState('');
22 | const handleTitleChange = title => setTitle(() => title.target.value);
23 |
24 | const [level, setLevel] = useState('normal');
25 | const handleLevelChange = element => setLevel(() => element.target.value);
26 |
27 | const [size, setSize] = useState(500);
28 | const handleSizeChange = value => setSize(() => value);
29 |
30 | const handleSubmit = () => {
31 | http
32 | .post(
33 | `${api}/set`,
34 | {title, themeArray: newSet.themeArray, size, level},
35 | {withCredentials: true},
36 | )
37 | .then(() => {
38 | Router.push('/dashboard');
39 | })
40 | .catch(error => console.error(error));
41 | };
42 |
43 | const validate = () => {
44 | if (isDisabled) return;
45 | if (title === '') return setToggleError(() => true);
46 | setIsDisabled(() => true);
47 | handleSubmit();
48 | };
49 |
50 | const handleClickError = () => setToggleError(() => false);
51 |
52 | return (
53 |
10 |
17 | Happy to see you
18 |
21 |
27 |
17 | Happy to see you
18 |
19 | newcomer 👋
20 |
21 |
22 |
23 |
24 |
25 |
26 |
56 |
76 | One last thing...
57 |
58 |
63 | Give your set a name
64 |
65 |
66 |
75 |
70 |
73 |
74 |
543 |
594 |
544 |
551 |
546 |
547 | LEAVE 🧨
548 |
549 |
550 |
552 |
593 |
553 |
554 |
592 |
562 |
576 | {children}
;
5 | }
6 |
--------------------------------------------------------------------------------
/layouts/popup/background.module.scss:
--------------------------------------------------------------------------------
1 | .popup {
2 | position: fixed;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | width: 100%;
7 | height: 100%;
8 | background-color: rgb(0, 0, 0, 0.5);
9 | z-index: 3;
10 | top: 0;
11 | }
12 |
--------------------------------------------------------------------------------
/layouts/popup/container.jsx:
--------------------------------------------------------------------------------
1 | import INDEX_STYLE from './container.module.scss';
2 |
3 | export default function ContainerPopup({children}) {
4 | return {children}
;
5 | }
6 |
--------------------------------------------------------------------------------
/layouts/popup/container.module.scss:
--------------------------------------------------------------------------------
1 | .content {
2 | background-color: white;
3 | padding: 2rem;
4 | border-radius: 20px;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: space-around;
8 | align-items: center;
9 | text-align: center;
10 | font-size: 3rem;
11 | width: 80%;
12 | @media screen and (min-width: 450px) {
13 | width: 60%;
14 | }
15 |
16 | @media screen and (min-width: 750px) {
17 | width: 40%;
18 | }
19 |
20 | @media screen and (min-width: 1024px) {
21 | width: 30%;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/layouts/success-login/index.jsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link.js';
2 | import STYLE from './index.module.scss';
3 | import Container from '@/layouts/container/index.jsx';
4 | import useConffeti from '@/hooks/use-conffeti.jsx';
5 | import Button from '@/components/button/index.jsx';
6 | import useUserName from '@/hooks/use-username.jsx';
7 |
8 | export default function SuccessLogin() {
9 | return (
10 |
13 |
22 |
14 |
15 | Hello {useUserName()} 👋
17 |
18 |
19 |
20 |
21 |