├── public ├── _redirects ├── robots.txt ├── favicon.ico ├── assets │ ├── logo.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ └── android-chrome-512x512.png ├── fonts │ └── Shapes.ttf ├── manifest.json └── index.html ├── .prettierrc ├── cypress ├── e2e │ └── spec.cy.ts ├── tsconfig.json └── support │ ├── e2e.ts │ └── commands.ts ├── .env ├── src ├── setupTests.ts ├── hooks │ ├── useAppDispatch.ts │ ├── useAppSelector.ts │ ├── usePaletteMode.ts │ └── useCriteriaCard.ts ├── global.d.ts ├── App.tsx ├── react-app-env.d.ts ├── reportWebVitals.ts ├── components │ ├── SingleCharLabel.tsx │ ├── ClearButton.tsx │ ├── ShapeIcon.tsx │ ├── Comment.tsx │ ├── TextField.tsx │ ├── Card.tsx │ ├── Round.tsx │ └── LanguageSelect.tsx ├── index.tsx ├── store │ ├── storage.ts │ ├── slices │ │ ├── settingsSlice.ts │ │ ├── digitCodeSlice.ts │ │ ├── registrationSlice.ts │ │ ├── savesSlice.ts │ │ ├── commentsSlice.ts │ │ └── roundsSlice.ts │ ├── __test__ │ │ ├── store.test.tsx │ │ └── __snapshots__ │ │ │ └── store.test.tsx.snap │ └── index.ts └── views │ ├── Rounds.tsx │ ├── Comments.tsx │ ├── DigitCode.tsx │ ├── Saves.tsx │ ├── Registration.tsx │ └── Root.tsx ├── cypress.config.ts ├── .github └── workflows │ ├── jest.yml │ └── cypress.yml ├── .gitignore ├── tsconfig.json ├── README.md ├── LICENSE └── package.json /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /cypress/e2e/spec.cy.ts: -------------------------------------------------------------------------------- 1 | describe('template spec', () => { 2 | it('passes', () => { 3 | 4 | }) 5 | }) -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_STORE_VERSION=1695655881142 2 | REACT_APP_API_END_POINT="https://turingmachine.info/api/api.php" 3 | -------------------------------------------------------------------------------- /public/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/logo.png -------------------------------------------------------------------------------- /public/fonts/Shapes.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/fonts/Shapes.ttf -------------------------------------------------------------------------------- /public/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/favicon-16x16.png -------------------------------------------------------------------------------- /public/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/favicon-32x32.png -------------------------------------------------------------------------------- /public/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /public/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/assets/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zyle87/turing-machine-interactive-sheet/HEAD/public/assets/android-chrome-512x512.png -------------------------------------------------------------------------------- /cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "baseUrl": "../node_modules", 5 | "target": "es5", 6 | "lib": ["es5", "dom"], 7 | "types": ["cypress"] 8 | }, 9 | "include": ["**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/hooks/useAppDispatch.ts: -------------------------------------------------------------------------------- 1 | import { useDispatch } from 'react-redux' 2 | import type { AppDispatch } from '../store' 3 | 4 | // Use throughout your app instead of plain `useDispatch` to get strongly typed dispatch 5 | export const useAppDispatch = () => useDispatch() 6 | -------------------------------------------------------------------------------- /src/hooks/useAppSelector.ts: -------------------------------------------------------------------------------- 1 | import { TypedUseSelectorHook, useSelector } from 'react-redux' 2 | import type { RootState } from '../store' 3 | 4 | // Use throughout your app instead of plain `useSelector` to get strongly typed state 5 | export const useAppSelector: TypedUseSelectorHook = useSelector 6 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare type Nullable = T | null 2 | declare type Undefinable = T | undefined 3 | declare type PaletteMode = 'dark' | 'light' 4 | 5 | declare type Verifier = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' 6 | declare type Digit = 1 | 2 | 3 | 4 | 5 7 | declare type Shape = 'triangle' | 'square' | 'circle' 8 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin' 3 | 4 | export default defineConfig({ 5 | e2e: { 6 | baseUrl: 'http://localhost:3000', 7 | setupNodeEvents(on, config) { 8 | addMatchImageSnapshotPlugin(on, config) 9 | }, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import { Provider as StoreProvider } from 'react-redux' 3 | import { store } from './store' 4 | import Root from './views/Root' 5 | 6 | const App: FC = () => { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare global { 4 | namespace NodeJS { 5 | interface ProcessEnv { 6 | NODE_ENV: 'development' | 'production' 7 | REACT_APP_STORE_VERSION: string 8 | REACT_APP_API_END_POINT: string 9 | } 10 | } 11 | } 12 | 13 | // If this file has no import/export statements (i.e. is a script) 14 | // convert it into a module by adding an empty export statement. 15 | export {} 16 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /.github/workflows/jest.yml: -------------------------------------------------------------------------------- 1 | name: Jest 2 | 3 | on: 4 | push: 5 | branches: 6 | - develop 7 | pull_request: 8 | branches: 9 | - develop 10 | 11 | jobs: 12 | jest: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@master 16 | - uses: actions/setup-node@master 17 | with: 18 | node-version: ${{ matrix.node-version }} 19 | cache: 'yarn' 20 | - name: Install dependencies 21 | run: yarn 22 | - name: Jest run 23 | run: yarn test 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | /cypress/videos 11 | /cypress/screenshots 12 | /cypress/snapshots/__diff_output__ 13 | /cypress/snapshots/*/__diff_output__ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Turing Machine Interactive Sheet", 3 | "name": "Turing Machine Interactive Sheet", 4 | "icons": [ 5 | { 6 | "src": "/assets/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/assets/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /src/components/SingleCharLabel.tsx: -------------------------------------------------------------------------------- 1 | import Typography from '@mui/material/Typography' 2 | import { FC, PropsWithChildren } from 'react' 3 | 4 | type Props = PropsWithChildren & { 5 | white?: boolean 6 | } 7 | 8 | const SingleCharLabel: FC = props => ( 9 | ({ 13 | color: props.white 14 | ? theme.palette.common.white 15 | : theme.palette.primary.main, 16 | fontWeight: 800, 17 | })} 18 | > 19 | {props.children} 20 | 21 | ) 22 | 23 | export default SingleCharLabel 24 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | // import { StrictMode } from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import reportWebVitals from './reportWebVitals' 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) 7 | 8 | root.render( 9 | // 10 | 11 | // 12 | ) 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals() 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": "./src", 6 | "downlevelIteration": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "isolatedModules": true, 10 | "jsx": "react-jsx", 11 | "lib": ["dom", "dom.iterable", "esnext"], 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "noEmit": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "resolveJsonModule": true, 17 | "skipLibCheck": true, 18 | "strict": true, 19 | "target": "ES5" 20 | }, 21 | "include": ["src"] 22 | } 23 | -------------------------------------------------------------------------------- /.github/workflows/cypress.yml: -------------------------------------------------------------------------------- 1 | name: Cypress 2 | 3 | on: 4 | push: 5 | branches: 6 | - develop 7 | pull_request: 8 | branches: 9 | - develop 10 | 11 | jobs: 12 | cypress: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@master 16 | - uses: actions/setup-node@master 17 | with: 18 | node-version: ${{ matrix.node-version }} 19 | cache: 'yarn' 20 | - name: Cypress run 21 | uses: cypress-io/github-action@master 22 | with: 23 | start: yarn start 24 | wait-on: 'http://localhost:3000' 25 | wait-on-timeout: 240 26 | config: baseUrl=http://localhost:3000 27 | -------------------------------------------------------------------------------- /src/store/storage.ts: -------------------------------------------------------------------------------- 1 | import { RootState } from '.' 2 | 3 | export const loadState: () => Undefinable = () => { 4 | const serializedState = localStorage.getItem('state') 5 | 6 | const preloadedState = 7 | serializedState === null 8 | ? undefined 9 | : (JSON.parse(serializedState) as RootState) 10 | 11 | return preloadedState && 12 | preloadedState.settings.storeVersion === 13 | parseInt(process.env.REACT_APP_STORE_VERSION) 14 | ? preloadedState 15 | : undefined 16 | } 17 | 18 | export const saveState = (state: RootState) => { 19 | const serializedState = JSON.stringify(state) 20 | 21 | localStorage.setItem('state', serializedState) 22 | } 23 | -------------------------------------------------------------------------------- /cypress/support/e2e.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/e2e.ts is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Turing Machine Interactive Sheet 2 | 3 | [![Cypress](https://github.com/zyle87/turing-machine-interactive-sheet/actions/workflows/cypress.yml/badge.svg)](https://github.com/zyle87/turing-machine-interactive-sheet/actions/workflows/cypress.yml) 4 | [![Jest](https://github.com/zyle87/turing-machine-interactive-sheet/actions/workflows/jest.yml/badge.svg)](https://github.com/zyle87/turing-machine-interactive-sheet/actions/workflows/jest.yml) 5 | ![Netlify Status](https://api.netlify.com/api/v1/badges/d0488dea-2e43-40f7-bb89-6675803a1926/deploy-status) 6 | 7 | ⚙️ [Turing Machine Interactive Sheet](https://turingmachine-is.netlify.app/) is a web application that allows you to play [Turing Machine](https://www.turingmachine.info/) board game w/o the need of a physical paper. 8 | -------------------------------------------------------------------------------- /src/components/ClearButton.tsx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box' 2 | import Button from '@mui/material/Button' 3 | import Divider from '@mui/material/Divider' 4 | import { FC, ReactNode } from 'react' 5 | 6 | type Props = { 7 | prefixId: string 8 | iconRender: ReactNode 9 | onClick: () => void 10 | } 11 | 12 | const ClearButton: FC = props => ( 13 | 14 | 15 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | 32 | export default ClearButton 33 | -------------------------------------------------------------------------------- /src/store/slices/settingsSlice.ts: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit' 2 | 3 | export type SettingsState = { 4 | paletteMode: PaletteMode 5 | storeVersion: number 6 | language: string; 7 | } 8 | 9 | const initialState: SettingsState = { 10 | paletteMode: 'light', 11 | storeVersion: parseInt(process.env.REACT_APP_STORE_VERSION), 12 | language: "EN", 13 | } 14 | 15 | export const settingsSlice = createSlice({ 16 | name: 'settings', 17 | initialState, 18 | reducers: { 19 | togglePaletteMode: state => { 20 | state.paletteMode = state.paletteMode === 'light' ? 'dark' : 'light' 21 | }, 22 | updateLanguage: (state, action) => { 23 | state.language = action.payload 24 | } 25 | }, 26 | }) 27 | 28 | export const settingsActions = settingsSlice.actions 29 | 30 | export default settingsSlice.reducer 31 | -------------------------------------------------------------------------------- /src/store/__test__/store.test.tsx: -------------------------------------------------------------------------------- 1 | import { renderHook } from '@testing-library/react' 2 | import { useAppDispatch } from 'hooks/useAppDispatch' 3 | import { PropsWithChildren } from 'react' 4 | import { Provider } from 'react-redux' 5 | import { settingsActions } from 'store/slices/settingsSlice' 6 | import { store } from '..' 7 | 8 | describe('store', () => { 9 | const wrapper = ({ children }: PropsWithChildren) => ( 10 | {children} 11 | ) 12 | 13 | it('should match initial state', () => { 14 | expect(store.getState()).toMatchSnapshot() 15 | }) 16 | 17 | it('should toggle palette mode', () => { 18 | const appDispatch = renderHook(useAppDispatch, { wrapper }) 19 | 20 | appDispatch.result.current(settingsActions.togglePaletteMode()) 21 | 22 | expect(store.getState()).toMatchSnapshot() 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { configureStore, StateFromReducersMapObject } from '@reduxjs/toolkit' 2 | import comments from './slices/commentsSlice' 3 | import digitCode from './slices/digitCodeSlice' 4 | import registration from './slices/registrationSlice' 5 | import rounds from './slices/roundsSlice' 6 | import saves from './slices/savesSlice' 7 | import settings from './slices/settingsSlice' 8 | import { loadState, saveState } from './storage' 9 | 10 | const preloadedState = loadState() 11 | const reducer = { 12 | comments, 13 | digitCode, 14 | registration, 15 | rounds, 16 | saves, 17 | settings, 18 | } 19 | 20 | export const store = configureStore({ 21 | preloadedState, 22 | reducer, 23 | }) 24 | 25 | store.subscribe(() => { 26 | saveState(store.getState()) 27 | }) 28 | 29 | export type RootState = StateFromReducersMapObject 30 | export type AppDispatch = typeof store.dispatch 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Ely Zucca 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/store/slices/digitCodeSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit' 2 | 3 | export type DigitCodeState = { 4 | shape: Shape 5 | digit: Digit 6 | state: 'correct' | 'incorrect' 7 | }[] 8 | 9 | const initialState: DigitCodeState = [] 10 | 11 | export const digitCodeSlice = createSlice({ 12 | name: 'digitCode', 13 | initialState, 14 | reducers: { 15 | load: (_, action: PayloadAction) => action.payload, 16 | reset: () => initialState, 17 | toggleDigitState: ( 18 | state, 19 | action: PayloadAction<{ shape: Shape; digit: Digit }> 20 | ) => { 21 | const { shape, digit } = action.payload 22 | 23 | const index = state.findIndex( 24 | entry => entry.shape === shape && entry.digit === digit 25 | ) 26 | 27 | if (index >= 0) { 28 | switch (state[index].state) { 29 | case 'incorrect': 30 | state[index].state = 'correct' 31 | break 32 | case 'correct': 33 | state.splice(index, 1) 34 | break 35 | } 36 | } else { 37 | state.push({ shape, digit, state: 'incorrect' }) 38 | } 39 | }, 40 | }, 41 | }) 42 | 43 | export const digitCodeActions = digitCodeSlice.actions 44 | 45 | export default digitCodeSlice.reducer 46 | -------------------------------------------------------------------------------- /src/components/ShapeIcon.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | 3 | type Props = { 4 | shape: Shape 5 | sizeMultiplier?: number 6 | } 7 | 8 | const ShapeIcon: FC = ({ shape, sizeMultiplier = 1 }) => { 9 | switch (shape) { 10 | default: 11 | case 'triangle': 12 | return ( 13 | 18 | 22 | 23 | ) 24 | case 'square': 25 | return ( 26 | 31 | 32 | 33 | ) 34 | case 'circle': 35 | return ( 36 | 41 | 42 | 43 | ) 44 | } 45 | } 46 | 47 | export default ShapeIcon 48 | -------------------------------------------------------------------------------- /src/views/Rounds.tsx: -------------------------------------------------------------------------------- 1 | import AddIcon from '@mui/icons-material/AddTaskRounded' 2 | import Box from '@mui/material/Box' 3 | import Button from '@mui/material/Button' 4 | import Paper from '@mui/material/Paper' 5 | import Round from 'components/Round' 6 | import { useAppDispatch } from 'hooks/useAppDispatch' 7 | import { useAppSelector } from 'hooks/useAppSelector' 8 | import { FC } from 'react' 9 | import { roundsActions } from 'store/slices/roundsSlice' 10 | 11 | const Rounds: FC = () => { 12 | const dispatch = useAppDispatch() 13 | const rounds = useAppSelector(state => state.rounds) 14 | 15 | return ( 16 | 21 | 22 | {rounds.map((round, index) => ( 23 | 24 | ))} 25 | 26 | 27 | 38 | 39 | 40 | ) 41 | } 42 | 43 | export default Rounds 44 | -------------------------------------------------------------------------------- /src/store/slices/registrationSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit' 2 | 3 | export type RegistrationState = { 4 | name: string 5 | hash: string 6 | status: 'new' | 'fetch' | 'ready' 7 | } 8 | 9 | const initialState: RegistrationState = { 10 | name: '', 11 | hash: '', 12 | status: 'new', 13 | } 14 | 15 | export const registrationSlice = createSlice({ 16 | name: 'registration', 17 | initialState, 18 | reducers: { 19 | load: (_, action: PayloadAction) => action.payload, 20 | reset: () => initialState, 21 | fetch: state => ({ 22 | ...state, 23 | status: 'fetch', 24 | }), 25 | fetchBad: state => ({ 26 | ...state, 27 | status: 'new', 28 | }), 29 | fetchDone: state => ({ 30 | ...state, 31 | status: 'ready', 32 | }), 33 | updateName: (state, action: PayloadAction) => { 34 | state.name = action.payload 35 | }, 36 | updateHash: (state, action: PayloadAction) => { 37 | state.hash = action.payload 38 | .replace("#", "") 39 | .replaceAll(" ", "") 40 | .split(/(.{3})/) 41 | .filter(e => e) 42 | .join(" "); 43 | }, 44 | }, 45 | }) 46 | 47 | export const registrationActions = registrationSlice.actions 48 | 49 | export default registrationSlice.reducer 50 | -------------------------------------------------------------------------------- /cypress/support/commands.ts: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************** 3 | // This example commands.ts shows you how to 4 | // create various custom commands and overwrite 5 | // existing commands. 6 | // 7 | // For more comprehensive examples of custom 8 | // commands please read more here: 9 | // https://on.cypress.io/custom-commands 10 | // *********************************************** 11 | // 12 | // 13 | // -- This is a parent command -- 14 | // Cypress.Commands.add('login', (email, password) => { ... }) 15 | // 16 | // 17 | // -- This is a child command -- 18 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 19 | // 20 | // 21 | // -- This is a dual command -- 22 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 23 | // 24 | // 25 | // -- This will overwrite an existing command -- 26 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 27 | // 28 | // declare global { 29 | // namespace Cypress { 30 | // interface Chainable { 31 | // login(email: string, password: string): Chainable 32 | // drag(subject: string, options?: Partial): Chainable 33 | // dismiss(subject: string, options?: Partial): Chainable 34 | // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable 35 | // } 36 | // } 37 | // } 38 | 39 | import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command' 40 | 41 | addMatchImageSnapshotCommand() 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "turing-machine-interactive-sheet", 3 | "version": "0.26.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.6", 7 | "@emotion/styled": "^11.10.6", 8 | "@mui/icons-material": "^5.11.11", 9 | "@mui/material": "^5.11.11", 10 | "@reduxjs/toolkit": "^1.9.3", 11 | "@testing-library/jest-dom": "^5.14.1", 12 | "@testing-library/react": "^13.0.0", 13 | "@testing-library/react-hooks": "^8.0.1", 14 | "@testing-library/user-event": "^13.2.1", 15 | "@types/cypress-image-snapshot": "^3.1.6", 16 | "@types/jest": "^27.0.1", 17 | "@types/node": "^16.7.13", 18 | "@types/react": "^18.0.0", 19 | "@types/react-dom": "^18.0.0", 20 | "axios": "^1.5.0", 21 | "cypress": "^12.9.0", 22 | "cypress-image-snapshot": "^4.0.1", 23 | "react": "^18.2.0", 24 | "react-circle-flags": "^0.0.20", 25 | "react-dom": "^18.2.0", 26 | "react-redux": "^8.0.5", 27 | "react-scripts": "5.0.1", 28 | "react-use": "^17.4.0", 29 | "typescript": "^4.4.2", 30 | "web-vitals": "^2.1.0" 31 | }, 32 | "scripts": { 33 | "start": "react-scripts start", 34 | "build": "react-scripts build", 35 | "test": "react-scripts test", 36 | "cypress:run": "cypress run", 37 | "cypress:open": "cypress open" 38 | }, 39 | "eslintConfig": { 40 | "extends": [ 41 | "react-app", 42 | "react-app/jest" 43 | ] 44 | }, 45 | "browserslist": { 46 | "production": [ 47 | ">0.2%", 48 | "not dead", 49 | "not op_mini all" 50 | ], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/store/slices/savesSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit' 2 | import { CommentsState } from './commentsSlice' 3 | import { DigitCodeState } from './digitCodeSlice' 4 | import { RegistrationState } from './registrationSlice' 5 | import { RoundsState } from './roundsSlice' 6 | 7 | export type Save = { 8 | comments: CommentsState 9 | date: number 10 | digitCode: DigitCodeState 11 | registration: RegistrationState 12 | rounds: RoundsState 13 | } 14 | 15 | type SavesState = Save[] 16 | 17 | const initialState: SavesState = [] 18 | 19 | export const savesSlice = createSlice({ 20 | name: 'saves', 21 | initialState, 22 | reducers: { 23 | save: (state, action: PayloadAction) => { 24 | const { comments, date, digitCode, registration, rounds } = action.payload 25 | 26 | if (registration.hash === '') return state 27 | 28 | const saveIndex = state.findIndex( 29 | save => save.registration.hash === registration.hash 30 | ) 31 | 32 | if (state[saveIndex]) { 33 | state[saveIndex].comments = comments 34 | state[saveIndex].digitCode = digitCode 35 | state[saveIndex].registration = registration 36 | state[saveIndex].rounds = rounds 37 | return state 38 | } else { 39 | state.push({ 40 | comments, 41 | date, 42 | digitCode, 43 | registration, 44 | rounds, 45 | }) 46 | } 47 | }, 48 | deleteSave: (state, action: PayloadAction) => { 49 | const saveIndex = state.findIndex(save => save.date === action.payload) 50 | 51 | state.splice(saveIndex, 1) 52 | }, 53 | }, 54 | }) 55 | 56 | export const savesActions = savesSlice.actions 57 | 58 | export default savesSlice.reducer 59 | -------------------------------------------------------------------------------- /src/views/Comments.tsx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box' 2 | import Grid from '@mui/material/Grid' 3 | import Paper from '@mui/material/Paper' 4 | import { useTheme } from '@mui/material/styles' 5 | import useMediaQuery from '@mui/material/useMediaQuery' 6 | import Comment from 'components/Comment' 7 | import { useAppSelector } from 'hooks/useAppSelector' 8 | import { FC } from 'react' 9 | 10 | const Comments: FC = () => { 11 | const comments = useAppSelector(state => state.comments) 12 | const theme = useTheme() 13 | const isUpMd = useMediaQuery(theme.breakpoints.up('md')) 14 | 15 | return ( 16 | 20 | 21 | 22 | 23 | {(isUpMd 24 | ? (['A', 'C', 'E'] as Verifier[]) 25 | : (['A', 'B', 'C', 'D', 'E', 'F'] as Verifier[]) 26 | ).map(verifier => ( 27 | 32 | ))} 33 | 34 | {isUpMd && ( 35 | 36 | {(['B', 'D', 'F'] as Verifier[]).map(verifier => ( 37 | 42 | ))} 43 | 44 | )} 45 | 46 | 47 | 48 | ) 49 | } 50 | 51 | export default Comments 52 | -------------------------------------------------------------------------------- /src/hooks/usePaletteMode.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import { useMemo } from 'react' 3 | import { settingsActions } from '../store/slices/settingsSlice' 4 | import { useAppDispatch } from './useAppDispatch' 5 | import { useAppSelector } from './useAppSelector' 6 | 7 | declare module '@mui/material/styles' { 8 | interface Palette { 9 | languageSwitch: Palette['primary']; 10 | } 11 | 12 | interface PaletteOptions { 13 | languageSwitch?: PaletteOptions['primary']; 14 | } 15 | } 16 | 17 | export const usePaletteMode = () => { 18 | const dispatch = useAppDispatch() 19 | const settings = useAppSelector(state => state.settings) 20 | 21 | const togglePaletteMode = () => { 22 | dispatch(settingsActions.togglePaletteMode()) 23 | } 24 | 25 | const theme = useMemo( 26 | () => 27 | createTheme({ 28 | breakpoints: { 29 | values: { 30 | xs: 0, 31 | sm: 600, 32 | md: 704, 33 | lg: 1384, 34 | xl: 1920, 35 | }, 36 | }, 37 | palette: { 38 | primary: { 39 | main: '#35b663', 40 | }, 41 | secondary: { 42 | main: '#ff1744', 43 | }, 44 | languageSwitch: { 45 | 100: '#E5EAF2', 46 | 300: '#C7D0DD', 47 | 800: '#303740', 48 | 900: '#1C2025', 49 | }, 50 | mode: settings.paletteMode, 51 | }, 52 | typography: { 53 | fontFamily: 'Plus Jakarta Sans', 54 | fontSize: 16, 55 | button: { 56 | fontWeight: 700, 57 | }, 58 | body1: { 59 | fontWeight: 700, 60 | fontFamily: 'Kalam', 61 | }, 62 | body2: { 63 | fontFamily: 'Kalam', 64 | }, 65 | }, 66 | shape: { 67 | borderRadius: 16, 68 | }, 69 | }), 70 | [settings.paletteMode] 71 | ) 72 | return { theme, togglePaletteMode } 73 | } 74 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | 25 | 26 | 30 | Turing Machine Interactive Sheet 31 | 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/Comment.tsx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box' 2 | import { useCriteriaCard } from 'hooks/useCriteriaCard' 3 | import { FC } from 'react' 4 | import Card from './Card' 5 | import SingleCharLabel from './SingleCharLabel' 6 | 7 | type Props = { 8 | verifier: Verifier 9 | noDivider?: boolean 10 | } 11 | 12 | const Comment: FC = ({ verifier, noDivider }) => { 13 | const { 14 | card: firstCard, 15 | cardImage: firstCardImage, 16 | toggleCriteria: toggleFirstCardCriteria, 17 | } = useCriteriaCard(verifier, 0) 18 | const { 19 | card: secondCard, 20 | cardImage: secondCardImage, 21 | toggleCriteria: togglesecondCardCriteria, 22 | } = useCriteriaCard(verifier, 1) 23 | 24 | return ( 25 | 26 | 27 | {firstCard && ( 28 | <> 29 | {!firstCard.nightmare && ( 30 | ({ 35 | background: theme.palette.primary.main, 36 | color: theme.palette.common.white, 37 | borderTopLeftRadius: theme.spacing(1), 38 | borderBottomRightRadius: theme.spacing(3), 39 | })} 40 | > 41 | {verifier} 42 | 43 | )} 44 | 49 | 50 | )} 51 | {secondCard && ( 52 | 53 | ({ 58 | background: theme.palette.primary.main, 59 | color: theme.palette.common.white, 60 | borderTopLeftRadius: theme.spacing(1), 61 | borderBottomRightRadius: theme.spacing(3), 62 | })} 63 | > 64 | {verifier} 65 | 66 | 71 | 72 | )} 73 | 74 | 75 | ) 76 | } 77 | 78 | export default Comment 79 | -------------------------------------------------------------------------------- /src/store/slices/commentsSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit' 2 | import { CriteriaCard, criteriaCardPool } from 'hooks/useCriteriaCard' 3 | 4 | const verifiers: Verifier[] = ['A', 'B', 'C', 'D', 'E', 'F'] 5 | 6 | const shuffle = (array: number[]) => { 7 | for (let i = array.length - 1; i > 0; i--) { 8 | const j = Math.floor(Math.random() * (i + 1)) 9 | ;[array[i], array[j]] = [array[j], array[i]] 10 | } 11 | return array 12 | } 13 | 14 | type Comment = { 15 | verifier: Verifier 16 | criteriaCards: CriteriaCard[] 17 | } 18 | 19 | export type CommentsState = Comment[] 20 | 21 | const initialState: CommentsState = [] 22 | 23 | export const commentsSlice = createSlice({ 24 | name: 'comments', 25 | initialState, 26 | reducers: { 27 | load: (_, action: PayloadAction) => action.payload, 28 | reset: () => initialState, 29 | setCards: ( 30 | state, 31 | action: PayloadAction<{ 32 | fake?: number[] 33 | ind: number[] 34 | m?: number 35 | }> 36 | ) => { 37 | const { fake, ind, m } = action.payload 38 | 39 | const addAdditionalCardAttributes = (card: number) => { 40 | return { 41 | ...criteriaCardPool.find((cc) => cc.id === card)!, 42 | nightmare: m === 2 43 | } 44 | } 45 | 46 | for (let i = 0; i < ind.length; i++) { 47 | if (fake) { 48 | const cards = [ind[i], fake[i]] 49 | const shuffledCards = shuffle(cards) 50 | 51 | state.push({ 52 | verifier: verifiers[i], 53 | criteriaCards: [ 54 | addAdditionalCardAttributes(shuffledCards[0]), 55 | addAdditionalCardAttributes(shuffledCards[1]), 56 | ], 57 | }) 58 | } else { 59 | const card = ind.sort((n1, n2) => n1 - n2)[i] 60 | 61 | state.push({ 62 | verifier: verifiers[i], 63 | criteriaCards: [ 64 | addAdditionalCardAttributes(card), 65 | ], 66 | }) 67 | } 68 | } 69 | }, 70 | updateCard: ( 71 | state, 72 | action: PayloadAction<{ 73 | verifier: Verifier 74 | index: number 75 | card?: CriteriaCard 76 | }> 77 | ) => { 78 | const { verifier, index, card } = action.payload 79 | 80 | if (!card) return 81 | 82 | const comment = state.find(comment => comment.verifier === verifier) 83 | if (comment) { 84 | comment.criteriaCards[index] = card 85 | } else { 86 | state.push({ 87 | criteriaCards: [card], 88 | verifier, 89 | }) 90 | } 91 | }, 92 | }, 93 | }) 94 | 95 | export const commentsActions = commentsSlice.actions 96 | 97 | export default commentsSlice.reducer 98 | -------------------------------------------------------------------------------- /src/store/slices/roundsSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit' 2 | 3 | type Query = { 4 | verifier: Verifier 5 | state: 'solved' | 'unsolved' | 'unknown' 6 | } 7 | 8 | type Code = { 9 | shape: Shape 10 | digit: Nullable 11 | } 12 | 13 | export type RoundsState = { 14 | code: Code[] 15 | queries: Query[] 16 | isPristine: boolean 17 | }[] 18 | 19 | const initialState: RoundsState = [ 20 | { 21 | code: (['triangle', 'square', 'circle'] as Shape[]).map(shape => ({ 22 | shape, 23 | digit: null, 24 | })), 25 | queries: (['A', 'B', 'C', 'D', 'E', 'F'] as Verifier[]).map(verifier => ({ 26 | verifier, 27 | state: 'unknown', 28 | })), 29 | isPristine: false, 30 | }, 31 | ] 32 | 33 | export const roundsSlice = createSlice({ 34 | name: 'rounds', 35 | initialState, 36 | reducers: { 37 | load: (_, action: PayloadAction) => action.payload, 38 | reset: () => initialState, 39 | deleteRound: (state, action: PayloadAction) => { 40 | state.splice(action.payload, 1) 41 | }, 42 | addRound: state => { 43 | state.push({ 44 | code: (['triangle', 'square', 'circle'] as Shape[]).map(shape => ({ 45 | shape, 46 | digit: null, 47 | })), 48 | queries: (['A', 'B', 'C', 'D', 'E', 'F'] as Verifier[]).map( 49 | verifier => ({ 50 | verifier, 51 | state: 'unknown', 52 | }) 53 | ), 54 | isPristine: true, 55 | }) 56 | }, 57 | updateCodeDigit: ( 58 | state, 59 | action: PayloadAction<{ 60 | index: number 61 | shape: Shape 62 | digit: Nullable 63 | }> 64 | ) => { 65 | const { index, shape, digit } = action.payload 66 | const round = state[index] 67 | const code = round.code.find(code => code.shape === shape)! 68 | 69 | code.digit = digit 70 | 71 | round.isPristine = false 72 | 73 | state[index] = round 74 | }, 75 | updateQueryState: ( 76 | state, 77 | action: PayloadAction<{ index: number; verifier: Verifier }> 78 | ) => { 79 | const { index, verifier } = action.payload 80 | const round = state[index] 81 | const query = round.queries.find(query => query.verifier === verifier)! 82 | 83 | switch (query.state) { 84 | case 'unknown': 85 | query.state = 'unsolved' 86 | break 87 | case 'unsolved': 88 | query.state = 'solved' 89 | break 90 | case 'solved': 91 | query.state = 'unknown' 92 | break 93 | } 94 | 95 | round.isPristine = false 96 | 97 | state[index] = round 98 | }, 99 | }, 100 | }) 101 | 102 | export const roundsActions = roundsSlice.actions 103 | 104 | export default roundsSlice.reducer 105 | -------------------------------------------------------------------------------- /src/store/__test__/__snapshots__/store.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`store should match initial state 1`] = ` 4 | Object { 5 | "comments": Array [], 6 | "digitCode": Array [], 7 | "registration": Object { 8 | "hash": "", 9 | "name": "", 10 | "status": "new", 11 | }, 12 | "rounds": Array [ 13 | Object { 14 | "code": Array [ 15 | Object { 16 | "digit": null, 17 | "shape": "triangle", 18 | }, 19 | Object { 20 | "digit": null, 21 | "shape": "square", 22 | }, 23 | Object { 24 | "digit": null, 25 | "shape": "circle", 26 | }, 27 | ], 28 | "isPristine": false, 29 | "queries": Array [ 30 | Object { 31 | "state": "unknown", 32 | "verifier": "A", 33 | }, 34 | Object { 35 | "state": "unknown", 36 | "verifier": "B", 37 | }, 38 | Object { 39 | "state": "unknown", 40 | "verifier": "C", 41 | }, 42 | Object { 43 | "state": "unknown", 44 | "verifier": "D", 45 | }, 46 | Object { 47 | "state": "unknown", 48 | "verifier": "E", 49 | }, 50 | Object { 51 | "state": "unknown", 52 | "verifier": "F", 53 | }, 54 | ], 55 | }, 56 | ], 57 | "saves": Array [], 58 | "settings": Object { 59 | "language": "EN", 60 | "paletteMode": "light", 61 | "storeVersion": 1695655881142, 62 | }, 63 | } 64 | `; 65 | 66 | exports[`store should toggle palette mode 1`] = ` 67 | Object { 68 | "comments": Array [], 69 | "digitCode": Array [], 70 | "registration": Object { 71 | "hash": "", 72 | "name": "", 73 | "status": "new", 74 | }, 75 | "rounds": Array [ 76 | Object { 77 | "code": Array [ 78 | Object { 79 | "digit": null, 80 | "shape": "triangle", 81 | }, 82 | Object { 83 | "digit": null, 84 | "shape": "square", 85 | }, 86 | Object { 87 | "digit": null, 88 | "shape": "circle", 89 | }, 90 | ], 91 | "isPristine": false, 92 | "queries": Array [ 93 | Object { 94 | "state": "unknown", 95 | "verifier": "A", 96 | }, 97 | Object { 98 | "state": "unknown", 99 | "verifier": "B", 100 | }, 101 | Object { 102 | "state": "unknown", 103 | "verifier": "C", 104 | }, 105 | Object { 106 | "state": "unknown", 107 | "verifier": "D", 108 | }, 109 | Object { 110 | "state": "unknown", 111 | "verifier": "E", 112 | }, 113 | Object { 114 | "state": "unknown", 115 | "verifier": "F", 116 | }, 117 | ], 118 | }, 119 | ], 120 | "saves": Array [], 121 | "settings": Object { 122 | "language": "EN", 123 | "paletteMode": "dark", 124 | "storeVersion": 1695655881142, 125 | }, 126 | } 127 | `; 128 | -------------------------------------------------------------------------------- /src/views/DigitCode.tsx: -------------------------------------------------------------------------------- 1 | import Incorrect from '@mui/icons-material/HorizontalRuleRounded' 2 | import Correct from '@mui/icons-material/PanoramaFishEye' 3 | import Box from '@mui/material/Box' 4 | import Grid from '@mui/material/Grid' 5 | import IconButton from '@mui/material/IconButton' 6 | import Paper from '@mui/material/Paper' 7 | import { useTheme } from '@mui/material/styles' 8 | import ShapeIcon from 'components/ShapeIcon' 9 | import SingleCharLabel from 'components/SingleCharLabel' 10 | import { useAppDispatch } from 'hooks/useAppDispatch' 11 | import { useAppSelector } from 'hooks/useAppSelector' 12 | import { FC } from 'react' 13 | import { digitCodeActions } from 'store/slices/digitCodeSlice' 14 | 15 | const DigitCode: FC = () => { 16 | const dispatch = useAppDispatch() 17 | const digitCode = useAppSelector(state => state.digitCode) 18 | const theme = useTheme() 19 | 20 | return ( 21 | 26 | 27 | 28 | {(['triangle', 'square', 'circle'] as Shape[]).map(shape => ( 29 | 30 | 37 | 38 | 39 | {([5, 4, 3, 2, 1] as Digit[]).map(digit => ( 40 | 41 | { 50 | dispatch( 51 | digitCodeActions.toggleDigitState({ 52 | shape, 53 | digit, 54 | }) 55 | ) 56 | }} 57 | > 58 | {digit} 59 | 65 | {digitCode.find( 66 | entry => entry.shape === shape && entry.digit === digit 67 | )?.state === 'correct' && } 68 | {digitCode.find( 69 | entry => entry.shape === shape && entry.digit === digit 70 | )?.state === 'incorrect' && ( 71 | 75 | )} 76 | 77 | 78 | 79 | ))} 80 | 81 | ))} 82 | 83 | 84 | 85 | ) 86 | } 87 | 88 | export default DigitCode 89 | -------------------------------------------------------------------------------- /src/components/TextField.tsx: -------------------------------------------------------------------------------- 1 | import Clear from '@mui/icons-material/CloseRounded' 2 | import Box from '@mui/material/Box' 3 | import IconButton from '@mui/material/IconButton' 4 | import { alpha, useTheme } from '@mui/material/styles' 5 | import { FC, ReactNode } from 'react' 6 | 7 | type Props = { 8 | customFontSize?: string 9 | customRadius?: string 10 | disabled?: boolean 11 | iconRender?: ReactNode 12 | prefixId?: string 13 | maxChars?: number 14 | onChange?: (value: string) => void 15 | onBlur?: () => void 16 | onReset?: () => void 17 | type?: 'text' | 'number' | 'password' 18 | value?: Nullable 19 | withReset?: boolean 20 | withStackRadius?: boolean 21 | min?: number 22 | max?: number 23 | } 24 | 25 | const TextField: FC = props => { 26 | const theme = useTheme() 27 | 28 | return ( 29 | 51 | { 60 | props.onChange && props.onChange(event.target.value) 61 | }} 62 | onBlur={() => { 63 | props.onBlur && props.onBlur() 64 | }} 65 | style={{ 66 | ...theme.typography.body1, 67 | background: alpha(theme.palette.primary.main, 0.1), 68 | border: 'none', 69 | borderRadius: props.customRadius, 70 | color: theme.palette.text.primary, 71 | height: 48, 72 | paddingLeft: props.iconRender ? theme.spacing(5) : undefined, 73 | textAlign: props.iconRender ? undefined : 'center', 74 | fontSize: props.customFontSize || theme.spacing(3), 75 | width: '100%', 76 | }} 77 | /> 78 | {props.iconRender && ( 79 | 89 | {props.iconRender} 90 | 91 | )} 92 | {props.value && props.withReset && ( 93 | 102 | 107 | 108 | 109 | 110 | )} 111 | 112 | ) 113 | } 114 | 115 | export default TextField 116 | -------------------------------------------------------------------------------- /src/views/Saves.tsx: -------------------------------------------------------------------------------- 1 | import LoadIcon from '@mui/icons-material/ContentPasteGoRounded' 2 | import DeleteIcon from '@mui/icons-material/ContentPasteOffRounded' 3 | import Hourglass from '@mui/icons-material/HourglassEmptyRounded' 4 | import Box from '@mui/material/Box' 5 | import Dialog from '@mui/material/Dialog' 6 | import Divider from '@mui/material/Divider' 7 | import IconButton from '@mui/material/IconButton' 8 | import List from '@mui/material/List' 9 | import Typography from '@mui/material/Typography' 10 | import { useTheme } from '@mui/material/styles' 11 | import { useAppDispatch } from 'hooks/useAppDispatch' 12 | import { useAppSelector } from 'hooks/useAppSelector' 13 | import { FC } from 'react' 14 | import { commentsActions } from 'store/slices/commentsSlice' 15 | import { digitCodeActions } from 'store/slices/digitCodeSlice' 16 | import { registrationActions } from 'store/slices/registrationSlice' 17 | import { roundsActions } from 'store/slices/roundsSlice' 18 | import { savesActions } from 'store/slices/savesSlice' 19 | 20 | type Props = { 21 | isOpen: boolean 22 | onClose: () => void 23 | onLoad?: () => void 24 | } 25 | 26 | const Saves: FC = props => { 27 | const dispatch = useAppDispatch() 28 | const state = useAppSelector(state => state) 29 | const theme = useTheme() 30 | 31 | return ( 32 | 33 | 34 | {state.saves.length === 0 ? ( 35 | 36 | 37 | 38 | ) : ( 39 | [...state.saves].reverse().map((save, index) => ( 40 | 41 | 48 | 49 | {save.registration.name} - #{save.registration.hash} 50 | 54 | {new Date(save.date).toLocaleString('en-US', { 55 | year: 'numeric', 56 | month: 'long', 57 | day: 'numeric', 58 | hour: 'numeric', 59 | minute: 'numeric', 60 | })} 61 | 62 | 63 | 64 | { 68 | dispatch(digitCodeActions.load(save.digitCode)) 69 | dispatch(roundsActions.load(save.rounds)) 70 | dispatch(commentsActions.load(save.comments)) 71 | dispatch(registrationActions.load(save.registration)) 72 | props.onLoad && props.onLoad() 73 | }} 74 | > 75 | 76 | 77 | { 81 | dispatch(savesActions.deleteSave(save.date)) 82 | }} 83 | > 84 | 85 | 86 | 87 | 88 | {index !== state.saves.length - 1 && ( 89 | 90 | 91 | 92 | )} 93 | 94 | )) 95 | )} 96 | 97 | 98 | ) 99 | } 100 | 101 | export default Saves 102 | -------------------------------------------------------------------------------- /src/hooks/useCriteriaCard.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useMemo, useState } from 'react' 2 | import { useUpdateEffect } from 'react-use' 3 | import { commentsActions } from 'store/slices/commentsSlice' 4 | import { useAppDispatch } from './useAppDispatch' 5 | import { useAppSelector } from './useAppSelector' 6 | 7 | export type CriteriaCard = { 8 | id: number 9 | criteriaSlots: 1 | 2 | 3 | 4 | 6 | 9 10 | irrelevantCriteria: number[] 11 | nightmare?: boolean 12 | } 13 | 14 | export const criteriaCardPool: CriteriaCard[] = [ 15 | { id: 1, criteriaSlots: 2, irrelevantCriteria: [] }, 16 | { id: 2, criteriaSlots: 3, irrelevantCriteria: [] }, 17 | { id: 3, criteriaSlots: 3, irrelevantCriteria: [] }, 18 | { id: 4, criteriaSlots: 3, irrelevantCriteria: [] }, 19 | { id: 5, criteriaSlots: 2, irrelevantCriteria: [] }, 20 | { id: 6, criteriaSlots: 2, irrelevantCriteria: [] }, 21 | { id: 7, criteriaSlots: 2, irrelevantCriteria: [] }, 22 | { id: 8, criteriaSlots: 4, irrelevantCriteria: [] }, 23 | { id: 9, criteriaSlots: 4, irrelevantCriteria: [] }, 24 | { id: 10, criteriaSlots: 4, irrelevantCriteria: [] }, 25 | { id: 11, criteriaSlots: 3, irrelevantCriteria: [] }, 26 | { id: 12, criteriaSlots: 3, irrelevantCriteria: [] }, 27 | { id: 13, criteriaSlots: 3, irrelevantCriteria: [] }, 28 | { id: 14, criteriaSlots: 3, irrelevantCriteria: [] }, 29 | { id: 15, criteriaSlots: 3, irrelevantCriteria: [] }, 30 | { id: 16, criteriaSlots: 2, irrelevantCriteria: [] }, 31 | { id: 17, criteriaSlots: 4, irrelevantCriteria: [] }, 32 | { id: 18, criteriaSlots: 2, irrelevantCriteria: [] }, 33 | { id: 19, criteriaSlots: 3, irrelevantCriteria: [] }, 34 | { id: 20, criteriaSlots: 3, irrelevantCriteria: [] }, 35 | { id: 21, criteriaSlots: 2, irrelevantCriteria: [] }, 36 | { id: 22, criteriaSlots: 3, irrelevantCriteria: [] }, 37 | { id: 23, criteriaSlots: 3, irrelevantCriteria: [] }, 38 | { id: 24, criteriaSlots: 3, irrelevantCriteria: [] }, 39 | { id: 25, criteriaSlots: 3, irrelevantCriteria: [] }, 40 | { id: 26, criteriaSlots: 3, irrelevantCriteria: [] }, 41 | { id: 27, criteriaSlots: 3, irrelevantCriteria: [] }, 42 | { id: 28, criteriaSlots: 3, irrelevantCriteria: [] }, 43 | { id: 29, criteriaSlots: 3, irrelevantCriteria: [] }, 44 | { id: 30, criteriaSlots: 3, irrelevantCriteria: [] }, 45 | { id: 31, criteriaSlots: 3, irrelevantCriteria: [] }, 46 | { id: 32, criteriaSlots: 3, irrelevantCriteria: [] }, 47 | { id: 33, criteriaSlots: 6, irrelevantCriteria: [] }, 48 | { id: 34, criteriaSlots: 3, irrelevantCriteria: [] }, 49 | { id: 35, criteriaSlots: 3, irrelevantCriteria: [] }, 50 | { id: 36, criteriaSlots: 3, irrelevantCriteria: [] }, 51 | { id: 37, criteriaSlots: 3, irrelevantCriteria: [] }, 52 | { id: 38, criteriaSlots: 3, irrelevantCriteria: [] }, 53 | { id: 39, criteriaSlots: 6, irrelevantCriteria: [] }, 54 | { id: 40, criteriaSlots: 9, irrelevantCriteria: [] }, 55 | { id: 41, criteriaSlots: 9, irrelevantCriteria: [] }, 56 | { id: 42, criteriaSlots: 6, irrelevantCriteria: [] }, 57 | { id: 43, criteriaSlots: 6, irrelevantCriteria: [] }, 58 | { id: 44, criteriaSlots: 6, irrelevantCriteria: [] }, 59 | { id: 45, criteriaSlots: 6, irrelevantCriteria: [] }, 60 | { id: 46, criteriaSlots: 6, irrelevantCriteria: [] }, 61 | { id: 47, criteriaSlots: 6, irrelevantCriteria: [] }, 62 | { id: 48, criteriaSlots: 9, irrelevantCriteria: [] }, 63 | ] 64 | 65 | const getCardUrl = (card?: CriteriaCard, language?: string) => 66 | (card && language) 67 | ? `https://turingmachine.info/images/criteriacards/${language}/TM_GameCards_${language}-${( "0" + card.id ).slice(-2)}.png` 68 | : ""; 69 | 70 | export const useCriteriaCard = (verifier: Verifier, index: number) => { 71 | const language = useAppSelector((state) => state.settings.language); 72 | const comments = useAppSelector(state => state.comments) 73 | 74 | const [card, setCard] = useState>( 75 | comments.find(comment => comment.verifier === verifier)?.criteriaCards[ 76 | index 77 | ] 78 | ) 79 | 80 | useEffect(() => { 81 | setCard( 82 | comments.find(comment => comment.verifier === verifier)?.criteriaCards[ 83 | index 84 | ] 85 | ) 86 | }, [comments, index, verifier]) 87 | 88 | const dispatch = useAppDispatch() 89 | 90 | const toggleCriteria = (criteria: number) => { 91 | if (!card) return 92 | 93 | const criteriaIndex = card.irrelevantCriteria.indexOf(criteria) 94 | 95 | if (criteriaIndex === -1) { 96 | setCard({ 97 | ...card, 98 | irrelevantCriteria: [...card.irrelevantCriteria, criteria], 99 | }) 100 | } else { 101 | setCard({ 102 | ...card, 103 | irrelevantCriteria: [ 104 | ...card.irrelevantCriteria.slice(0, criteriaIndex), 105 | ...card.irrelevantCriteria.slice(criteriaIndex + 1), 106 | ], 107 | }) 108 | } 109 | } 110 | 111 | const cardImage = useMemo(() => getCardUrl(card, language), [card, language]); 112 | 113 | useUpdateEffect(() => { 114 | dispatch(commentsActions.updateCard({ verifier, index, card })) 115 | }, [card]) 116 | 117 | return { 118 | card, 119 | cardImage, 120 | toggleCriteria, 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/components/Card.tsx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box' 2 | import Button from '@mui/material/Button' 3 | import { useTheme } from '@mui/material/styles' 4 | import useMediaQuery from '@mui/material/useMediaQuery' 5 | import { CriteriaCard } from 'hooks/useCriteriaCard' 6 | import { FC } from 'react' 7 | 8 | type Props = { 9 | card: Undefinable 10 | cardImage: string 11 | onToggleCriteria: (criteria: number) => void 12 | } 13 | 14 | const Card: FC = props => { 15 | const theme = useTheme() 16 | const isDownMd = useMediaQuery(theme.breakpoints.down('md')) 17 | 18 | const strippedBackground = `linear-gradient(45deg, #000000 16.67%, transparent 16.67%, transparent 50%, #000000 50%, #000000 66.67%, transparent 66.67%, transparent 100%); 19 | background-size: 8px 8px; 20 | ` 21 | 22 | const getRadius = (slot: number, rows: 1 | 2 | 3) => { 23 | if (rows === 1) { 24 | if (slot === 1) { 25 | return theme.spacing(1, 0, 0, 1) 26 | } 27 | if (slot === props.card?.criteriaSlots) { 28 | return theme.spacing(0, 1, 1, 0) 29 | } 30 | } 31 | 32 | if (rows === 2) { 33 | if (slot === 1) { 34 | return theme.spacing(1, 0, 0, 0) 35 | } 36 | if (slot === 2) { 37 | return theme.spacing(0, 0, 0, 1) 38 | } 39 | if (props.card?.criteriaSlots && slot === props.card?.criteriaSlots - 1) { 40 | return theme.spacing(0, 1, 0, 0) 41 | } 42 | if (slot === props.card?.criteriaSlots) { 43 | return theme.spacing(0, 0, 1, 0) 44 | } 45 | } 46 | 47 | if (rows === 3) { 48 | if (slot === 1) { 49 | return theme.spacing(1, 0, 0, 0) 50 | } 51 | if (slot === 3) { 52 | return theme.spacing(0, 0, 0, 1) 53 | } 54 | if (props.card?.criteriaSlots && slot === props.card?.criteriaSlots - 2) { 55 | return theme.spacing(0, 1, 0, 0) 56 | } 57 | if (slot === props.card?.criteriaSlots) { 58 | return theme.spacing(0, 0, 1, 0) 59 | } 60 | } 61 | 62 | return 0 63 | } 64 | 65 | const getStrippedStyles = (slot: number, rows: 1 | 2 | 3 = 1) => ({ 66 | flexGrow: 1, 67 | backgroundImage: props.card?.irrelevantCriteria.includes(slot) 68 | ? strippedBackground 69 | : undefined, 70 | height: 71 | rows === 3 72 | ? isDownMd 73 | ? 21 74 | : 23 75 | : rows === 2 76 | ? isDownMd 77 | ? 30 78 | : 32 79 | : isDownMd 80 | ? 64 81 | : 68, 82 | width: '100%', 83 | borderRadius: getRadius(slot, rows), 84 | '&:hover': { 85 | background: props.card?.irrelevantCriteria.includes(slot) 86 | ? strippedBackground 87 | : undefined, 88 | }, 89 | }) 90 | 91 | const renderRowButtons = (large: boolean) => { 92 | if (!props.card?.criteriaSlots || props.card.criteriaSlots < 6) { 93 | return 94 | } 95 | 96 | const items = [] 97 | 98 | for (let i = 0; i < props.card?.criteriaSlots; i += large ? 3 : 2) { 99 | items.push( 100 | 107 | 134 | 135 | ))} 136 | 137 | 138 | {round.isPristine && ( 139 | 140 | 141 | 153 | 154 | 155 | )} 156 | 157 | 158 | 159 | 160 | ) 161 | } 162 | 163 | export default Round 164 | -------------------------------------------------------------------------------- /src/components/LanguageSelect.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { FC } from 'react'; 3 | import { Select as BaseSelect, SelectProps, SelectRootSlotProps, } from '@mui/base/Select'; 4 | import { Option as BaseOption, optionClasses } from '@mui/base/Option'; 5 | import { SelectOption } from '@mui/base/useOption'; 6 | import { styled } from '@mui/system'; 7 | import { Popper as BasePopper } from '@mui/base/Popper'; 8 | import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded'; 9 | import { useTheme } from "@mui/material/styles"; 10 | import { CircleFlag } from "react-circle-flags"; 11 | 12 | type Props = { 13 | disabled?: boolean; 14 | prefixId?: string; 15 | onChange?: (value: string) => void; 16 | value?: string; 17 | }; 18 | 19 | declare type Language = { 20 | code: string; 21 | language: string; 22 | tm: string; 23 | }; 24 | 25 | const availableCountries: Language[] = [ 26 | {code: 'pt', language: "Português", tm: 'BR'}, 27 | {code: 'cn', language: '简体中文', tm: 'CNS'}, 28 | {code: 'cn', language: '繁體中文', tm: 'CNT'}, 29 | {code: 'cz', language: 'Česky', tm: "CZ"}, 30 | {code: 'de', language: 'Deutsch', tm: "DE"}, 31 | {code: 'uk', language: 'English', tm: 'EN'}, 32 | {code: 'fr', language: 'Français', tm: 'FR'}, 33 | {code: 'gr', language: 'Ελληνικά', tm: 'GR'}, 34 | {code: 'hu', language: 'Magyar', tm: 'HU'}, 35 | {code: 'it', language: 'Italiano', tm: 'IT'}, 36 | {code: 'jp', language: '日本語', tm: 'JP'}, 37 | {code: 'kr', language: '한국어', tm: 'KR'}, 38 | {code: 'nl', language: 'Dutch', tm: 'NL'}, 39 | {code: 'pl', language: 'Polski', tm: 'PL'}, 40 | {code: 'ru', language: 'Русский', tm: 'RU'}, 41 | {code: 'es', language: 'Español', tm: "SP"}, 42 | {code: 'th', language: 'ไทย', tm: 'TH'}, 43 | {code: 'ua', language: 'Українська', tm: 'UA'}, 44 | ]; 45 | 46 | const LanguageSelect: FC = (props) => { 47 | 48 | function getCountry() { 49 | return availableCountries.find(c => c.tm === props.value); 50 | } 51 | 52 | return ( 53 | 73 | ); 74 | } 75 | 76 | export default LanguageSelect; 77 | 78 | const Select = React.forwardRef(function CustomSelect( 79 | props: SelectProps, 80 | ref: React.ForwardedRef 81 | ) { 82 | const slots: SelectProps['slots'] = { 83 | root: Button, 84 | listbox: Listbox, 85 | popper: Popper, 86 | ...props.slots, 87 | }; 88 | 89 | return ; 90 | }); 91 | 92 | const Button = React.forwardRef(function Button< 93 | TValue extends {}, 94 | Multiple extends boolean 95 | >( 96 | props: SelectRootSlotProps, 97 | ref: React.ForwardedRef 98 | ) { 99 | const theme = useTheme(); 100 | const {ownerState, ...other} = props; 101 | return ( 102 | 103 | {other.children} 104 | 105 | 106 | ); 107 | }); 108 | 109 | const StyledButton = styled('button', {shouldForwardProp: () => true})( 110 | ({theme}) => ` 111 | box-sizing: border-box; 112 | min-width: 80px; 113 | padding: 8px; 114 | text-align: left; 115 | line-height: 1.5; 116 | background: none; 117 | border: none; 118 | position: relative; 119 | opacity: unset; 120 | 121 | transition-property: all; 122 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 123 | transition-duration: 120ms; 124 | -webkit-appearance: none; 125 | 126 | &:hover { 127 | cursor: pointer; 128 | } 129 | 130 | & img { 131 | vertical-align: sub; 132 | } 133 | 134 | & > svg { 135 | position: absolute; 136 | top: 0; 137 | } 138 | ` 139 | ); 140 | 141 | const Listbox = styled('ul')( 142 | ({theme}) => ` 143 | font-family: "Plus Jakarta Sans"; 144 | font-size: 1rem; 145 | box-sizing: border-box; 146 | padding: 6px; 147 | margin: 2px 0; 148 | min-width: 160px; 149 | max-height: 300px; 150 | border-radius: 8px; 151 | overflow: auto; 152 | outline: 0px; 153 | background: ${theme.palette.background.paper}; 154 | border: 1px solid ${theme.palette.mode === 'dark' ? theme.palette.languageSwitch[800] : theme.palette.languageSwitch[100]}; 155 | ` 156 | ); 157 | 158 | const Option = styled(BaseOption)( 159 | ({theme}) => ` 160 | list-style: none; 161 | padding: 4px; 162 | border-radius: 4px; 163 | cursor: default; 164 | 165 | &.${optionClasses.selected}, 166 | &.${optionClasses.highlighted}.${optionClasses.selected} { 167 | background-color: ${theme.palette.mode === 'dark' ? theme.palette.languageSwitch[900] : theme.palette.languageSwitch[100]}; 168 | color: ${theme.palette.mode === 'dark' ? theme.palette.languageSwitch[100] : theme.palette.languageSwitch[900]}; 169 | } 170 | 171 | &:hover, 172 | &.${optionClasses.highlighted} { 173 | background-color: ${theme.palette.mode === 'dark' ? theme.palette.languageSwitch[800] : theme.palette.languageSwitch[100]}; 174 | color: ${theme.palette.mode === 'dark' ? theme.palette.languageSwitch[300] : theme.palette.languageSwitch[900]}; 175 | } 176 | 177 | &:hover { 178 | cursor: pointer; 179 | } 180 | 181 | & img { 182 | margin-right: 10px; 183 | vertical-align: middle; 184 | } 185 | ` 186 | ); 187 | 188 | const Popper = styled(BasePopper)` 189 | z-index: 10; 190 | `; 191 | -------------------------------------------------------------------------------- /src/views/Registration.tsx: -------------------------------------------------------------------------------- 1 | import LoadIcon from '@mui/icons-material/HourglassTopRounded' 2 | import HashIcon from '@mui/icons-material/NumbersRounded' 3 | import PersonIcon from '@mui/icons-material/PersonRounded' 4 | import OkIcon from '@mui/icons-material/ThumbUpAltRounded' 5 | import SearchIcon from '@mui/icons-material/TravelExploreRounded' 6 | import Alert from '@mui/material/Alert' 7 | import Box from '@mui/material/Box' 8 | import Button from '@mui/material/Button' 9 | import Collapse from '@mui/material/Collapse' 10 | import Snackbar from '@mui/material/Snackbar' 11 | import { alpha, useTheme } from '@mui/material/styles' 12 | import axios from 'axios' 13 | import TextField from 'components/TextField' 14 | import { useAppDispatch } from 'hooks/useAppDispatch' 15 | import { useAppSelector } from 'hooks/useAppSelector' 16 | import { FC, useState } from 'react' 17 | import { commentsActions } from 'store/slices/commentsSlice' 18 | import { digitCodeActions } from 'store/slices/digitCodeSlice' 19 | import { registrationActions } from 'store/slices/registrationSlice' 20 | import { roundsActions } from 'store/slices/roundsSlice' 21 | 22 | 23 | declare global { 24 | interface Window { turing_game_uuid: string; } 25 | } 26 | 27 | function generateUUID() { 28 | // Public Domain/MIT 29 | var d = new Date().getTime(); //Timestamp 30 | var d2 = 31 | (typeof performance !== "undefined" && 32 | performance.now && 33 | performance.now() * 1000) || 34 | 0; //Time in microseconds since page-load or 0 if unsupported 35 | return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function ( 36 | c 37 | ) { 38 | var r = Math.random() * 16; //random number between 0 and 16 39 | if (d > 0) { 40 | //Use timestamp until depleted 41 | r = (d + r) % 16 | 0; 42 | d = Math.floor(d / 16); 43 | } else { 44 | //Use microseconds since page-load if supported 45 | r = (d2 + r) % 16 | 0; 46 | d2 = Math.floor(d2 / 16); 47 | } 48 | return (c === "x" ? r : (r & 0x3) | 0x8).toString(16); 49 | }); 50 | } 51 | if(!window.turing_game_uuid) { 52 | window.turing_game_uuid = generateUUID(); 53 | } 54 | const Registration: FC = () => { 55 | const dispatch = useAppDispatch() 56 | const registration = useAppSelector(state => state.registration) 57 | const [showNotFound, setShowNotFound] = useState(false) 58 | const theme = useTheme() 59 | 60 | const onSubmit = () => { 61 | dispatch(registrationActions.fetch()) 62 | 63 | axios 64 | .get(process.env.REACT_APP_API_END_POINT, { 65 | params: { 66 | h: registration.hash, 67 | uuid: window.turing_game_uuid 68 | }, 69 | }) 70 | .then(response => response.data) 71 | .then(data => { 72 | dispatch(roundsActions.reset()) 73 | dispatch(commentsActions.reset()) 74 | dispatch(digitCodeActions.reset()) 75 | 76 | switch (data.status) { 77 | case 'ok': 78 | const { 79 | fake, 80 | ind, 81 | m, 82 | }: { ind: number[]; fake?: number[]; m: number } = data 83 | dispatch(registrationActions.fetchDone()) 84 | dispatch(commentsActions.setCards({ ind, fake, m })) 85 | break 86 | case 'bad': 87 | setShowNotFound(true) 88 | dispatch(registrationActions.fetchBad()) 89 | break 90 | } 91 | }) 92 | .catch(() => { 93 | setShowNotFound(true) 94 | dispatch(registrationActions.fetchBad()) 95 | }) 96 | } 97 | 98 | return ( 99 | 106 | { 110 | setShowNotFound(false) 111 | }} 112 | > 113 | { 115 | setShowNotFound(false) 116 | }} 117 | severity="error" 118 | sx={{ width: '100%' }} 119 | variant="filled" 120 | > 121 | {registration.hash} Game ID not found! 122 | 123 | 124 |
{ 126 | e.preventDefault() 127 | onSubmit() 128 | }} 129 | > 130 | } 134 | withStackRadius 135 | value={registration.name} 136 | onChange={value => 137 | dispatch(registrationActions.updateName(value.toUpperCase())) 138 | } 139 | withReset={registration.status === 'new'} 140 | onReset={() => dispatch(registrationActions.updateName(''))} 141 | /> 142 | } 146 | value={registration.hash} 147 | maxChars={10} 148 | onChange={value => 149 | dispatch(registrationActions.updateHash(value.toUpperCase())) 150 | } 151 | withReset={registration.status === 'new'} 152 | onReset={() => dispatch(registrationActions.updateHash(''))} 153 | customRadius={ 154 | registration.status === 'ready' 155 | ? theme.spacing(0, 0, 2, 2) 156 | : undefined 157 | } 158 | /> 159 | 160 | 161 | 198 | 199 | 200 | 201 |
202 | ) 203 | } 204 | 205 | export default Registration 206 | -------------------------------------------------------------------------------- /src/views/Root.tsx: -------------------------------------------------------------------------------- 1 | import EraseIcon from '@mui/icons-material/AutoFixHighRounded' 2 | import ContentIcon from '@mui/icons-material/ContentPasteRounded' 3 | import SearchIcon from '@mui/icons-material/ContentPasteSearchRounded' 4 | import DarkModeIcon from '@mui/icons-material/DarkModeRounded' 5 | import GitHubIcon from '@mui/icons-material/GitHub' 6 | import LightModeIcon from '@mui/icons-material/LightModeRounded' 7 | import SaveIcon from '@mui/icons-material/SaveRounded' 8 | import Badge from '@mui/material/Badge' 9 | import Box from '@mui/material/Box' 10 | import Collapse from '@mui/material/Collapse' 11 | import Container from '@mui/material/Container' 12 | import CssBaseline from '@mui/material/CssBaseline' 13 | import Divider from '@mui/material/Divider' 14 | import Grid from '@mui/material/Grid' 15 | import IconButton from '@mui/material/IconButton' 16 | import { ThemeProvider } from '@mui/material/styles' 17 | import useMediaQuery from '@mui/material/useMediaQuery' 18 | import { useAppDispatch } from 'hooks/useAppDispatch' 19 | import { useAppSelector } from 'hooks/useAppSelector' 20 | import { usePaletteMode } from 'hooks/usePaletteMode' 21 | import { FC, useState } from 'react' 22 | import { useUpdateEffect } from 'react-use' 23 | import { registrationActions } from 'store/slices/registrationSlice' 24 | import { savesActions } from 'store/slices/savesSlice' 25 | import { settingsActions } from "store/slices/settingsSlice"; 26 | import Comments from './Comments' 27 | import DigitCode from './DigitCode' 28 | import Registration from './Registration' 29 | import Rounds from './Rounds' 30 | import Saves from './Saves' 31 | import LanguageSelect from "components/LanguageSelect"; 32 | 33 | const Root: FC = () => { 34 | const { theme, togglePaletteMode } = usePaletteMode() 35 | const isUpMd = useMediaQuery(theme.breakpoints.up('md')) 36 | const isUpLg = useMediaQuery(theme.breakpoints.up('lg')) 37 | const dispatch = useAppDispatch() 38 | const state = useAppSelector(state => state) 39 | const language = useAppSelector((state) => state.settings.language); 40 | 41 | const [savesDialog, setSavesDialog] = useState(false) 42 | const [hasBadge, setHasBadge] = useState(false) 43 | 44 | useUpdateEffect(() => { 45 | state.saves.length === 0 && setSavesDialog(false) 46 | }, [state.saves]) 47 | 48 | const canBeSave = () => { 49 | const save = state.saves.find( 50 | save => save.registration.hash === state.registration.hash 51 | ) 52 | 53 | if (!save) { 54 | return true 55 | } 56 | 57 | const from = { 58 | rounds: state.rounds, 59 | comments: state.comments, 60 | digitCode: state.digitCode, 61 | } 62 | const to = { 63 | rounds: save?.rounds, 64 | comments: save?.comments, 65 | digitCode: save?.digitCode, 66 | } 67 | 68 | return JSON.stringify(from) !== JSON.stringify(to) 69 | } 70 | 71 | return ( 72 | 73 | 74 | 81 | logo 86 | 95 |

101 | Interactive Sheet 102 |

103 | 104 | { 110 | dispatch(registrationActions.reset()) 111 | }} 112 | > 113 | 114 | 124 | 133 | 134 | 135 | { 140 | state.registration.hash && setHasBadge(true) 141 | 142 | dispatch(savesActions.save({ ...state, date: Date.now() })) 143 | }} 144 | sx={{ position: 'relative' }} 145 | > 146 | 147 | 157 | 166 | 167 | 168 | { 173 | setHasBadge(false) 174 | setSavesDialog(!savesDialog) 175 | }} 176 | > 177 | 178 | 179 | 180 | 181 | 185 | dispatch(settingsActions.updateLanguage(value))} 190 | /> 191 | 195 | 199 | {theme.palette.mode === 'light' ? ( 200 | 201 | ) : ( 202 | 203 | )} 204 | 205 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | {isUpLg ? : } 224 | 225 | 226 | {isUpLg ? : } 227 | 228 | 229 | 230 | 231 | { 234 | setSavesDialog(false) 235 | }} 236 | onLoad={() => { 237 | setSavesDialog(false) 238 | }} 239 | /> 240 | 241 | ) 242 | } 243 | 244 | export default Root 245 | --------------------------------------------------------------------------------