├── .env ├── .eslintignore ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── label.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── PRIVACYPOLICY.md ├── README.md ├── TERMS&CONDITIONS.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── android │ ├── android-launchericon-144-144.png │ ├── android-launchericon-192-192.png │ ├── android-launchericon-48-48.png │ ├── android-launchericon-512-512.png │ ├── android-launchericon-72-72.png │ └── android-launchericon-96-96.png ├── favicon-32x32.png ├── favicon-48x48.png ├── favicon-96x96.png ├── favicon.ico ├── index.html ├── ios │ ├── 100.png │ ├── 1024.png │ ├── 114.png │ ├── 120.png │ ├── 128.png │ ├── 144.png │ ├── 152.png │ ├── 16.png │ ├── 167.png │ ├── 180.png │ ├── 192.png │ ├── 20.png │ ├── 256.png │ ├── 29.png │ ├── 32.png │ ├── 40.png │ ├── 50.png │ ├── 512.png │ ├── 57.png │ ├── 58.png │ ├── 60.png │ ├── 64.png │ ├── 72.png │ ├── 76.png │ ├── 80.png │ └── 87.png ├── manifest.json ├── offline.html ├── robots.txt ├── serviceworker.js └── windows11 │ ├── LargeTile.scale-100.png │ ├── LargeTile.scale-125.png │ ├── LargeTile.scale-150.png │ ├── LargeTile.scale-200.png │ ├── LargeTile.scale-400.png │ ├── SmallTile.scale-100.png │ ├── SmallTile.scale-125.png │ ├── SmallTile.scale-150.png │ ├── SmallTile.scale-200.png │ ├── SmallTile.scale-400.png │ ├── SplashScreen.scale-100.png │ ├── SplashScreen.scale-125.png │ ├── SplashScreen.scale-150.png │ ├── SplashScreen.scale-200.png │ ├── SplashScreen.scale-400.png │ ├── Square150x150Logo.scale-100.png │ ├── Square150x150Logo.scale-125.png │ ├── Square150x150Logo.scale-150.png │ ├── Square150x150Logo.scale-200.png │ ├── Square150x150Logo.scale-400.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-16.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-20.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-24.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-256.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-30.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-32.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-36.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-40.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-44.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-48.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-60.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-64.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-72.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-80.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-96.png │ ├── Square44x44Logo.altform-unplated_targetsize-16.png │ ├── Square44x44Logo.altform-unplated_targetsize-20.png │ ├── Square44x44Logo.altform-unplated_targetsize-24.png │ ├── Square44x44Logo.altform-unplated_targetsize-256.png │ ├── Square44x44Logo.altform-unplated_targetsize-30.png │ ├── Square44x44Logo.altform-unplated_targetsize-32.png │ ├── Square44x44Logo.altform-unplated_targetsize-36.png │ ├── Square44x44Logo.altform-unplated_targetsize-40.png │ ├── Square44x44Logo.altform-unplated_targetsize-44.png │ ├── Square44x44Logo.altform-unplated_targetsize-48.png │ ├── Square44x44Logo.altform-unplated_targetsize-60.png │ ├── Square44x44Logo.altform-unplated_targetsize-64.png │ ├── Square44x44Logo.altform-unplated_targetsize-72.png │ ├── Square44x44Logo.altform-unplated_targetsize-80.png │ ├── Square44x44Logo.altform-unplated_targetsize-96.png │ ├── Square44x44Logo.scale-100.png │ ├── Square44x44Logo.scale-125.png │ ├── Square44x44Logo.scale-150.png │ ├── Square44x44Logo.scale-200.png │ ├── Square44x44Logo.scale-400.png │ ├── Square44x44Logo.targetsize-16.png │ ├── Square44x44Logo.targetsize-20.png │ ├── Square44x44Logo.targetsize-24.png │ ├── Square44x44Logo.targetsize-256.png │ ├── Square44x44Logo.targetsize-30.png │ ├── Square44x44Logo.targetsize-32.png │ ├── Square44x44Logo.targetsize-36.png │ ├── Square44x44Logo.targetsize-40.png │ ├── Square44x44Logo.targetsize-44.png │ ├── Square44x44Logo.targetsize-48.png │ ├── Square44x44Logo.targetsize-60.png │ ├── Square44x44Logo.targetsize-64.png │ ├── Square44x44Logo.targetsize-72.png │ ├── Square44x44Logo.targetsize-80.png │ ├── Square44x44Logo.targetsize-96.png │ ├── StoreLogo.scale-100.png │ ├── StoreLogo.scale-125.png │ ├── StoreLogo.scale-150.png │ ├── StoreLogo.scale-200.png │ ├── StoreLogo.scale-400.png │ ├── Wide310x150Logo.scale-100.png │ ├── Wide310x150Logo.scale-125.png │ ├── Wide310x150Logo.scale-150.png │ ├── Wide310x150Logo.scale-200.png │ └── Wide310x150Logo.scale-400.png ├── src ├── App.tsx ├── actions │ ├── CustomerId │ │ └── index.ts │ ├── IsLogged │ │ └── index.ts │ └── Plan │ │ └── index.ts ├── audio │ ├── connect_theme.mp3 │ ├── countdown.mp3 │ └── drum_roll.mp3 ├── components │ ├── Auth │ │ └── Login.tsx │ ├── EnterCodeForm.tsx │ ├── Home.tsx │ ├── LoadingScreen.tsx │ ├── NoLocalStorage.tsx │ ├── browse │ │ ├── BrowseQuizzes.tsx │ │ └── BrowseQuizzesClassroom.tsx │ ├── cards │ │ └── QuizCard.tsx │ ├── charts │ │ └── Bubble.tsx │ ├── classroom │ │ ├── Analytics.tsx │ │ ├── Classroom.tsx │ │ └── JoinClass.tsx │ ├── creation-system │ │ ├── CreateClass.tsx │ │ ├── NewMultiQuiz.tsx │ │ └── NewQuiz.tsx │ ├── game │ │ ├── host │ │ │ ├── CountDown.jsx │ │ │ ├── GameEnded.tsx │ │ │ ├── HostRoom.tsx │ │ │ ├── MultiHostRoom.tsx │ │ │ ├── PodiumAnimation.tsx │ │ │ └── SharePopup.tsx │ │ ├── player │ │ │ ├── AfterRoomLeave.tsx │ │ │ ├── FinishedScreen.tsx │ │ │ ├── GameRoom.tsx │ │ │ ├── MultiFinishedScreen.tsx │ │ │ ├── MultiGameRoom.tsx │ │ │ ├── PositionScreen.tsx │ │ │ ├── WaitingForHost.tsx │ │ │ └── WaitingRoom.tsx │ │ └── practice │ │ │ ├── FinishedSceen.tsx │ │ │ ├── MultiPractice.tsx │ │ │ └── QuizPractice.tsx │ ├── misc │ │ ├── Background.tsx │ │ ├── ClaimEmote.tsx │ │ ├── CropperComponent.tsx │ │ ├── UploadButton.tsx │ │ ├── canvasPreview.tsx │ │ ├── imgPreviews.tsx │ │ └── useDebounceEffect.ts │ ├── nav │ │ ├── Nav.tsx │ │ └── NotificationBox.tsx │ ├── payment │ │ ├── Plans.tsx │ │ └── ThanksForPurchasingAnimation.tsx │ ├── profile │ │ ├── MyProfile.tsx │ │ └── Profile.tsx │ ├── rules │ │ ├── PrivacyPolicy.tsx │ │ └── Terms&Conditions.tsx │ ├── tutorial │ │ ├── FinishedTutorial.tsx │ │ ├── Game.tsx │ │ ├── JoinRoom.tsx │ │ ├── PopUp.tsx │ │ ├── Stepper.tsx │ │ ├── Tutorial.tsx │ │ └── WaitingRoom.tsx │ └── view │ │ ├── ViewClassroom.tsx │ │ ├── ViewMultiPrivate.tsx │ │ ├── ViewMultiQuiz.tsx │ │ ├── ViewQuiz.tsx │ │ └── ViewQuizPrivate.tsx ├── config.json ├── emotes │ └── emotes.json ├── hooks │ ├── getUser.ts │ ├── useLanguage.ts │ ├── useReconnection.ts │ ├── useTranslations.ts │ └── useUnsavedChangesWarning.tsx ├── img │ ├── BigStripe-2.svg │ ├── BigStripe.svg │ ├── CardBackGround │ │ ├── answerCard.svg │ │ └── questionCard.svg │ ├── CardType │ │ ├── Image_Answer.svg │ │ ├── Question_Answer.svg │ │ └── Question_Image.svg │ ├── DiscordIcon.svg │ ├── HIW_Image_1.svg │ ├── HIW_Image_2.svg │ ├── HIW_Image_3.svg │ ├── HomePageArt.svg │ ├── HomePageImage1.svg │ ├── HomePageImg.svg │ ├── HomePageWave.svg │ ├── HomeSection1Image.svg │ ├── HomeSection1Image2.svg │ ├── Iphone.svg │ ├── Login │ │ ├── loginArt.svg │ │ ├── student_role.svg │ │ └── teacher_role.svg │ ├── NewQuizImg │ │ ├── purpleWave.svg │ │ ├── purpleWave2.svg │ │ └── quiz_created.svg │ ├── PodiumIcons │ │ ├── close.svg │ │ ├── firstPlace.svg │ │ ├── otherPlaceIcon.svg │ │ ├── playButton.svg │ │ ├── secondPlace.svg │ │ ├── share.svg │ │ └── thirdPlace.svg │ ├── RequestSent.svg │ ├── SvgLogo.svg │ ├── Tutorial │ │ └── HostExample.svg │ ├── WhiteBigStripe.svg │ ├── banner.svg │ ├── books.svg │ ├── connect-text.svg │ ├── connected.svg │ ├── entreprise_sub.svg │ ├── filled-logo.svg │ ├── loading.gif │ ├── lockedEmote.svg │ ├── logo-filled.svg │ ├── logo.svg │ ├── logoo.PNG │ ├── nav.svg │ ├── plansBanner.svg │ ├── quizCoverPlaceholder.png │ ├── quizCoverPlaceholder.svg │ ├── starter_sub.svg │ ├── teacher.svg │ ├── teacher_sub.svg │ ├── text-logo.svg │ └── uploadImg.svg ├── index.tsx ├── react-app-env.d.ts ├── reducers │ ├── customerId.ts │ ├── index.ts │ ├── islogged.ts │ └── plan.ts ├── socket-io.ts ├── style │ ├── NewQuizStyle.css │ ├── background.css │ ├── checkAnimation.css │ ├── classroomStyles.css │ ├── countDownStyles.css │ ├── home.css │ ├── loginStyles.css │ ├── multigameRoom.css │ ├── nav.css │ ├── notificationStyles.css │ ├── playButtonAnimation.css │ ├── podiumAnimation.css │ ├── profileStyles.css │ ├── sharepopupStyles.css │ ├── style.css │ └── viewQuizStyles.css ├── translations │ └── translations.json └── video │ ├── gameroomvideogf.gif │ ├── hostvideogif.gif │ └── joinvideogf.gif └── tsconfig.json /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | src/ 3 | *.js -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve CONNECT 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/workflows/label.yml: -------------------------------------------------------------------------------- 1 | # This workflow will triage pull requests and apply a label based on the 2 | # paths that are modified in the pull request. 3 | # 4 | # To use this workflow, you will need to set up a .github/labeler.yml 5 | # file with configuration. For more information, see: 6 | # https://github.com/actions/labeler 7 | 8 | name: Labeler 9 | on: [pull_request] 10 | 11 | jobs: 12 | label: 13 | 14 | runs-on: ubuntu-latest 15 | permissions: 16 | contents: read 17 | pull-requests: write 18 | 19 | steps: 20 | - uses: actions/labeler@v4 21 | with: 22 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 23 | -------------------------------------------------------------------------------- /.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 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | ecom.blimp@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to CONNECT 2 | 3 | Contributing to our project is a great way of helping us to bring our project to life. 4 | 5 | If you want to help us, you can find some work in the **Issues** or message us at **support@quiz-connect.io**. 6 | 7 | Whenever you create an issue or a PR please add some sort of comment that clearly describes your work. 8 | 9 | ©2020-2022 CONNECT. All rights reserved. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Github-banner](https://user-images.githubusercontent.com/79988159/170887599-283e0733-7160-48fd-80e8-ea09a7d3be1b.png) 2 | 3 | CodeFactor [![Netlify Status](https://api.netlify.com/api/v1/badges/2730b6cc-54d6-4e6a-843a-5513838d48ca/deploy-status)](https://app.netlify.com/sites/quiz-connect/deploys) 4 | 5 | ## Support 🚀 6 | 7 | 8 | 9 | Buy Me A Coffee 10 | 11 | https://user-images.githubusercontent.com/79988159/179362891-5236d162-0067-4179-9b7f-fbd32905f6ce.mp4 12 | 13 | ## Available Scripts 👨‍💻 14 | 15 | In the project directory, you can run: 16 | 17 | #### `npm install` 18 | 19 | This installs all the dependencies you need in order to run the app. 20 | 21 | #### `npm start` 22 | 23 | Runs the app in the development mode. 24 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 25 | 26 | ## Plans 💳 27 | 28 | [view on site](https://quiz-connect.io/plans) 29 | 30 | | Plans | **Starter** | **Classroom** | **Enterprise** | 31 | | ----------------------------- | ----------- | ------------- | -------------- | 32 | | **Price 💰** | Free | 9.99$ | 59.99$ | 33 | | **Acces to All gamemodes 🎯** | ✅ | ✅ | ✅ | 34 | | **Create Quizzes 🎨** | ✅ | ✅ | ✅ | 35 | | **Players 👶** | 8 | 100 | 300 | 36 | | **Create Classes 🏫** | 🚫 | ✅ | ✅ | 37 | | **Class Analytics 📊** | 🚫 | ✅ | ✅ | 38 | | **Create Private Quizzes 🔒** | ✅ | ✅ | ✅ | 39 | | **Host private rooms 🔐** | 🚫 | ✅ | ✅ | 40 | 41 |

42 | 43 | ## Contributors ❤️ 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@apollo/client": "^3.4.16", 7 | "@emotion/react": "^11.7.1", 8 | "@emotion/styled": "^11.6.0", 9 | "@firebase/storage": "^0.5.5", 10 | "@material-ui/core": "^4.12.3", 11 | "@mui/icons-material": "^5.2.4", 12 | "@mui/material": "^5.2.4", 13 | "@nivo/circle-packing": "^0.79.1", 14 | "@nivo/core": "^0.79.0", 15 | "@stripe/react-stripe-js": "^1.4.1", 16 | "@stripe/stripe-js": "^1.15.0", 17 | "@testing-library/jest-dom": "^5.12.0", 18 | "@testing-library/react": "^11.2.6", 19 | "@testing-library/user-event": "^12.8.3", 20 | "@types/jest": "^27.5.1", 21 | "@types/node": "^17.0.35", 22 | "@types/react": "^17.0.45", 23 | "@types/react-dom": "^18.0.4", 24 | "axios": "^0.21.1", 25 | "badwords-list": "^1.0.0", 26 | "caniuse-lite": "^1.0.30001400", 27 | "firebase": "^8.5.0", 28 | "framer-motion": "^4.1.17", 29 | "google-classroom-share": "^0.5.6", 30 | "graphql": "^15.8.0", 31 | "react": "^17.0.2", 32 | "react-confetti": "^6.0.1", 33 | "react-dom": "^17.0.2", 34 | "react-google-login": "^5.2.2", 35 | "react-howler": "^5.2.0", 36 | "react-image-crop": "^10.0.0", 37 | "react-lazy-load-image-component": "^1.5.5", 38 | "react-qr-code": "^2.0.3", 39 | "react-quill": "^1.3.5", 40 | "react-redux": "^7.2.5", 41 | "react-router-dom": "^5.2.0", 42 | "react-scripts": "4.0.3", 43 | "react-toastify": "^7.0.4", 44 | "redux": "^4.1.1", 45 | "socket.io": "^4.0.1", 46 | "socket.io-client": "^4.0.1", 47 | "typescript": "^4.6.4", 48 | "uuid": "^8.3.2" 49 | }, 50 | "scripts": { 51 | "start": "react-scripts start", 52 | "build": "react-scripts build", 53 | "test": "react-scripts test", 54 | "eject": "react-scripts eject" 55 | }, 56 | "eslintConfig": { 57 | "extends": [ 58 | "react-app", 59 | "react-app/jest" 60 | ] 61 | }, 62 | "browserslist": { 63 | "production": [ 64 | ">0.2%", 65 | "not dead", 66 | "not op_mini all" 67 | ], 68 | "development": [ 69 | "last 1 chrome version", 70 | "last 1 firefox version", 71 | "last 1 safari version" 72 | ] 73 | }, 74 | "devDependencies": { 75 | "@types/react-router-dom": "^5.3.3" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/android/android-launchericon-144-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-144-144.png -------------------------------------------------------------------------------- /public/android/android-launchericon-192-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-192-192.png -------------------------------------------------------------------------------- /public/android/android-launchericon-48-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-48-48.png -------------------------------------------------------------------------------- /public/android/android-launchericon-512-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-512-512.png -------------------------------------------------------------------------------- /public/android/android-launchericon-72-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-72-72.png -------------------------------------------------------------------------------- /public/android/android-launchericon-96-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/android/android-launchericon-96-96.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/favicon-48x48.png -------------------------------------------------------------------------------- /public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CONNECT 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 34 | 35 | 36 |
37 | 38 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/ios/100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/100.png -------------------------------------------------------------------------------- /public/ios/1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/1024.png -------------------------------------------------------------------------------- /public/ios/114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/114.png -------------------------------------------------------------------------------- /public/ios/120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/120.png -------------------------------------------------------------------------------- /public/ios/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/128.png -------------------------------------------------------------------------------- /public/ios/144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/144.png -------------------------------------------------------------------------------- /public/ios/152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/152.png -------------------------------------------------------------------------------- /public/ios/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/16.png -------------------------------------------------------------------------------- /public/ios/167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/167.png -------------------------------------------------------------------------------- /public/ios/180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/180.png -------------------------------------------------------------------------------- /public/ios/192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/192.png -------------------------------------------------------------------------------- /public/ios/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/20.png -------------------------------------------------------------------------------- /public/ios/256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/256.png -------------------------------------------------------------------------------- /public/ios/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/29.png -------------------------------------------------------------------------------- /public/ios/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/32.png -------------------------------------------------------------------------------- /public/ios/40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/40.png -------------------------------------------------------------------------------- /public/ios/50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/50.png -------------------------------------------------------------------------------- /public/ios/512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/512.png -------------------------------------------------------------------------------- /public/ios/57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/57.png -------------------------------------------------------------------------------- /public/ios/58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/58.png -------------------------------------------------------------------------------- /public/ios/60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/60.png -------------------------------------------------------------------------------- /public/ios/64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/64.png -------------------------------------------------------------------------------- /public/ios/72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/72.png -------------------------------------------------------------------------------- /public/ios/76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/76.png -------------------------------------------------------------------------------- /public/ios/80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/80.png -------------------------------------------------------------------------------- /public/ios/87.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/ios/87.png -------------------------------------------------------------------------------- /public/offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CONNECT 8 | 9 | 10 |

You are offline :(

11 | 12 | 13 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/serviceworker.js: -------------------------------------------------------------------------------- 1 | const CACHE_NAME = "version-1"; 2 | const urlsToCache = [ 'index.html', 'offline.html' ]; 3 | 4 | const self = this; 5 | 6 | // Install SW 7 | self.addEventListener('install', (event) => { 8 | event.waitUntil( 9 | caches.open(CACHE_NAME) 10 | .then((cache) => { 11 | console.log('Opened cache'); 12 | 13 | return cache.addAll(urlsToCache); 14 | }) 15 | ) 16 | }); 17 | 18 | // Listen for requests 19 | self.addEventListener('fetch', (event) => { 20 | event.respondWith( 21 | caches.match(event.request) 22 | .then(() => { 23 | return fetch(event.request) 24 | .catch(() => caches.match('offline.html')) 25 | }) 26 | ) 27 | }); 28 | 29 | // Activate the SW 30 | self.addEventListener('activate', (event) => { 31 | const cacheWhitelist = []; 32 | cacheWhitelist.push(CACHE_NAME); 33 | 34 | event.waitUntil( 35 | caches.keys().then((cacheNames) => Promise.all( 36 | cacheNames.map((cacheName) => { 37 | if(!cacheWhitelist.includes(cacheName)) { 38 | return caches.delete(cacheName); 39 | } 40 | }) 41 | )) 42 | 43 | ) 44 | }); -------------------------------------------------------------------------------- /public/windows11/LargeTile.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/LargeTile.scale-100.png -------------------------------------------------------------------------------- /public/windows11/LargeTile.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/LargeTile.scale-125.png -------------------------------------------------------------------------------- /public/windows11/LargeTile.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/LargeTile.scale-150.png -------------------------------------------------------------------------------- /public/windows11/LargeTile.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/LargeTile.scale-200.png -------------------------------------------------------------------------------- /public/windows11/LargeTile.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/LargeTile.scale-400.png -------------------------------------------------------------------------------- /public/windows11/SmallTile.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SmallTile.scale-100.png -------------------------------------------------------------------------------- /public/windows11/SmallTile.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SmallTile.scale-125.png -------------------------------------------------------------------------------- /public/windows11/SmallTile.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SmallTile.scale-150.png -------------------------------------------------------------------------------- /public/windows11/SmallTile.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SmallTile.scale-200.png -------------------------------------------------------------------------------- /public/windows11/SmallTile.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SmallTile.scale-400.png -------------------------------------------------------------------------------- /public/windows11/SplashScreen.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SplashScreen.scale-100.png -------------------------------------------------------------------------------- /public/windows11/SplashScreen.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SplashScreen.scale-125.png -------------------------------------------------------------------------------- /public/windows11/SplashScreen.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SplashScreen.scale-150.png -------------------------------------------------------------------------------- /public/windows11/SplashScreen.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SplashScreen.scale-200.png -------------------------------------------------------------------------------- /public/windows11/SplashScreen.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/SplashScreen.scale-400.png -------------------------------------------------------------------------------- /public/windows11/Square150x150Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square150x150Logo.scale-100.png -------------------------------------------------------------------------------- /public/windows11/Square150x150Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square150x150Logo.scale-125.png -------------------------------------------------------------------------------- /public/windows11/Square150x150Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square150x150Logo.scale-150.png -------------------------------------------------------------------------------- /public/windows11/Square150x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square150x150Logo.scale-200.png -------------------------------------------------------------------------------- /public/windows11/Square150x150Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square150x150Logo.scale-400.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-16.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-20.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-24.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-256.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-30.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-32.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-36.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-40.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-44.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-48.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-60.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-64.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-72.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-80.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.altform-unplated_targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.altform-unplated_targetsize-96.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.scale-100.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.scale-125.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.scale-150.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.scale-200.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.scale-400.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-16.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-20.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-24.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-256.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-30.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-32.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-36.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-40.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-44.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-48.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-60.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-64.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-72.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-80.png -------------------------------------------------------------------------------- /public/windows11/Square44x44Logo.targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Square44x44Logo.targetsize-96.png -------------------------------------------------------------------------------- /public/windows11/StoreLogo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/StoreLogo.scale-100.png -------------------------------------------------------------------------------- /public/windows11/StoreLogo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/StoreLogo.scale-125.png -------------------------------------------------------------------------------- /public/windows11/StoreLogo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/StoreLogo.scale-150.png -------------------------------------------------------------------------------- /public/windows11/StoreLogo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/StoreLogo.scale-200.png -------------------------------------------------------------------------------- /public/windows11/StoreLogo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/StoreLogo.scale-400.png -------------------------------------------------------------------------------- /public/windows11/Wide310x150Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Wide310x150Logo.scale-100.png -------------------------------------------------------------------------------- /public/windows11/Wide310x150Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Wide310x150Logo.scale-125.png -------------------------------------------------------------------------------- /public/windows11/Wide310x150Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Wide310x150Logo.scale-150.png -------------------------------------------------------------------------------- /public/windows11/Wide310x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Wide310x150Logo.scale-200.png -------------------------------------------------------------------------------- /public/windows11/Wide310x150Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/public/windows11/Wide310x150Logo.scale-400.png -------------------------------------------------------------------------------- /src/actions/CustomerId/index.ts: -------------------------------------------------------------------------------- 1 | export const setCustomerId = (payload: any) => { 2 | return { 3 | type: 'SET_CUSTOMER_ID', 4 | payload, 5 | } 6 | } 7 | export const getCustomerId = () => { 8 | return { 9 | type: 'GET_CUSTOMER_ID', 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/actions/IsLogged/index.ts: -------------------------------------------------------------------------------- 1 | export const setIsLoggedIn = () => { 2 | return { 3 | type: "LOGIN" 4 | }; 5 | }; 6 | export const setIsLoggedOut = () => { 7 | return { 8 | type: "LOGOUT" 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /src/actions/Plan/index.ts: -------------------------------------------------------------------------------- 1 | export const setStarter = () => { 2 | return { 3 | type: 'SET_STARTER', 4 | } 5 | } 6 | export const setClassroom = () => { 7 | return { 8 | type: 'SET_CLASSROOM', 9 | } 10 | } 11 | export const setEnterprise = () => { 12 | return { 13 | type: 'SET_ENTERPRISE', 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/audio/connect_theme.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/audio/connect_theme.mp3 -------------------------------------------------------------------------------- /src/audio/countdown.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/audio/countdown.mp3 -------------------------------------------------------------------------------- /src/audio/drum_roll.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/audio/drum_roll.mp3 -------------------------------------------------------------------------------- /src/components/LoadingScreen.tsx: -------------------------------------------------------------------------------- 1 | import { CircularProgress } from '@mui/material' 2 | 3 | type Props = {} 4 | 5 | const LoadingScreen = (props: Props) => { 6 | return ( 7 |
16 | 17 |
18 | ) 19 | } 20 | 21 | export default LoadingScreen 22 | -------------------------------------------------------------------------------- /src/components/NoLocalStorage.tsx: -------------------------------------------------------------------------------- 1 | import { Typography } from "@mui/material"; 2 | import useTranslations from "../hooks/useTranslations"; 3 | 4 | function NoLocalStorage() { 5 | const translations = useTranslations(); 6 | 7 | return ( 8 |
9 |
10 | 11 | {translations.login.nolocalstorage.title} 12 | 13 |
14 |
15 |
27 |
35 |
36 | 37 | {translations.login.nolocalstorage.howtofix.title} 38 | 39 |
46 |
47 |
48 |
56 | 57 | {translations.login.nolocalstorage.howtofix.step1} 58 | 59 |
60 | 61 | {translations.login.nolocalstorage.howtofix.step2} 62 | 63 |
64 | 65 | {" "} 66 | {translations.login.nolocalstorage.howtofix.step3} 67 | 68 |
69 |
72 | 81 | {translations.login.reportissue} 82 | 83 |
84 |
85 |
86 |
87 | ); 88 | } 89 | export default NoLocalStorage; 90 | -------------------------------------------------------------------------------- /src/components/browse/BrowseQuizzesClassroom.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState } from "react"; 3 | import "../../style/style.css"; 4 | import { 5 | InputLabel, 6 | FormControl, 7 | MenuItem, 8 | Select, 9 | CircularProgress, 10 | Chip, 11 | TextField, 12 | InputAdornment, 13 | Button, 14 | } from "@mui/material"; 15 | import TagIcon from "@mui/icons-material/Tag"; 16 | import Placeholder from "../../img/quizCoverPlaceholder.svg"; 17 | import { useQuery, gql } from "@apollo/client"; 18 | import QuizCard from "../cards/QuizCard"; 19 | import useTranslations from "../../hooks/useTranslations"; 20 | const GET_QUIZZES = gql` 21 | query allQuizzes { 22 | allQuizzes { 23 | _id 24 | name 25 | coverImg 26 | tags 27 | userID 28 | userName 29 | userProfilePic 30 | __typename 31 | } 32 | } 33 | `; 34 | const GET_MULTIS = gql` 35 | query allMultis { 36 | allMultis { 37 | _id 38 | name 39 | coverImg 40 | tags 41 | userID 42 | userName 43 | userProfilePic 44 | __typename 45 | } 46 | } 47 | `; 48 | export default function BrowseQuizzes({ classID, gamemode }) { 49 | const [gameMode, setGameMode] = useState("normal"); 50 | const translations = useTranslations(); 51 | const { loading, error, data: quizzes } = useQuery(GET_QUIZZES); 52 | const { loading: multisLoading, data: multis } = useQuery(GET_MULTIS); 53 | const changeGamemode = (event) => { 54 | event.preventDefault(); 55 | setGameMode(event.target.value); 56 | }; 57 | const [currentTag, setCurrentTag] = useState(""); 58 | const [tags, setTags] = useState([]); 59 | return ( 60 | <> 61 |
74 |

75 | {translations.quizzes.bar.title} 76 |

77 | 78 | 79 | {translations.quizzes.bar.gamemode.title} 80 | 81 | 97 | 98 | 99 | 106 | 107 | 108 | ), 109 | }} 110 | value={currentTag} 111 | onChange={(e) => { 112 | setCurrentTag(e.target.value); 113 | }} 114 | /> 115 | 116 | 132 |
133 |
134 | {tags.map((tag, index) => ( 135 | { 140 | setTags(tags.filter((t) => t.tag !== tag.tag)); 141 | }} 142 | color="primary" 143 | style={{ 144 | backgroundColor: ["#FCC73E", "#1594DB", "#1BB978", "#DC014E"][ 145 | tag.seed 146 | ], 147 | color: "white", 148 | }} 149 | /> 150 | ))} 151 |
152 |
153 | {gameMode === "normal" ? ( 154 | loading ? ( 155 | 160 | ) : ( 161 | quizzes.allQuizzes.map((quiz, index) => { 162 | return ( 163 | 169 | ); 170 | }) 171 | ) 172 | ) : null} 173 | {gameMode === "multi" ? ( 174 | multisLoading ? ( 175 | 180 | ) : ( 181 | multis.allMultis.map((quiz, index) => { 182 | return ( 183 | 189 | ); 190 | }) 191 | ) 192 | ) : null} 193 |
194 | 195 | ); 196 | } 197 | -------------------------------------------------------------------------------- /src/components/cards/QuizCard.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { Lock } from '@mui/icons-material' 3 | import { Chip, Avatar, Typography } from '@mui/material' 4 | import { useMemo, useState } from 'react' 5 | import Placeholder from '../../img/quizCoverPlaceholder.png' 6 | import useTranslations from '../../hooks/useTranslations' 7 | import { Link } from 'react-router-dom' 8 | 9 | const QuizCard = ({ data, isPrivate, tags, classID }) => { 10 | const translations = useTranslations() 11 | 12 | const getLink = (key, type, isPrivate, classID) => { 13 | if (classID) { 14 | if (isPrivate) { 15 | if (type === 'Quiz') { 16 | return `/quiz/normal/private/${key}?classid=${classID}` 17 | } 18 | if (type === 'Multi') { 19 | return `/quiz/multi/private/${key}?classid=${classID}` 20 | } 21 | } else { 22 | if (type === 'Quiz') { 23 | return `/quiz/normal/${key}?classid=${classID}` 24 | } 25 | if (type === 'Multi') { 26 | return `/quiz/multi/${key}?classid=${classID}` 27 | } 28 | } 29 | } else { 30 | if (isPrivate) { 31 | if (type === 'Quiz') { 32 | return `/quiz/normal/private/${key}` 33 | } 34 | if (type === 'Multi') { 35 | return `/quiz/multi/private/${key}` 36 | } 37 | } else { 38 | if (type === 'Quiz') { 39 | return `/quiz/normal/${key}` 40 | } 41 | if (type === 'Multi') { 42 | return `/quiz/multi/${key}` 43 | } 44 | } 45 | } 46 | } 47 | const link = getLink(data._id, data.__typename, isPrivate, classID) 48 | const tagsLength = tags ? tags.length : 0 49 | return ( 50 | <> 51 | {tagsLength === 0 || tags.some((item) => data.tags.includes(item.tag)) ? ( 52 | 53 |
54 | 59 |
60 |
61 | 66 | {data.userName} 67 | 68 | ) 69 | } 70 | alt="" 71 | /> 72 |
73 |

74 | {data.name} {isPrivate ? '🔒' : null} 75 |

76 | 77 | {translations.profile.quizzes.by} {data.userName} 78 | 79 |
80 |
81 |
82 | {data.tags == undefined 83 | ? null 84 | : data.tags.map((tag, index) => { 85 | return ( 86 | 92 | ) 93 | })} 94 |
95 |
96 |
97 | 98 | ) : null} 99 | 100 | ) 101 | } 102 | export default QuizCard 103 | -------------------------------------------------------------------------------- /src/components/charts/Bubble.tsx: -------------------------------------------------------------------------------- 1 | // install (please make sure versions match peerDependencies) 2 | // yarn add @nivo/core @nivo/circle-packing 3 | import { Avatar } from "@mui/material"; 4 | import { ResponsiveCirclePackingCanvas } from "@nivo/circle-packing"; 5 | 6 | // make sure parent container have a defined height when using 7 | // responsive component, otherwise height will be 0 and 8 | // no chart will be rendered. 9 | // website examples showcase many properties, 10 | // you'll often use just a few of them. 11 | 12 | type Props = { 13 | data: any; 14 | }; 15 | 16 | const MyResponsiveCirclePackingCanvas = (props: Props) => { 17 | const data = props.data; 18 | 19 | interface ToolTip { 20 | userId: string; 21 | name: string; 22 | imageUrl: string; 23 | position: number; 24 | value: number; 25 | } 26 | 27 | return ( 28 |
29 | { 44 | return e.id; 45 | }} 46 | labelTextColor="#ffffff" 47 | enableLabels={true} 48 | leavesOnly={true} 49 | padding={4} 50 | borderWidth={2} 51 | borderColor="#000000" 52 | animate={false} 53 | tooltip={(e: any) => { 54 | const data: ToolTip = e.data; 55 | return ( 56 |
71 | 72 | {data.name.charAt(0)} 73 | 74 |

75 | {data.name}{" "} 76 | 77 | {Math.round(data.position * 100) / 100} 78 | 79 |

80 |
81 | ); 82 | }} 83 | /> 84 |
85 | ); 86 | }; 87 | 88 | export default MyResponsiveCirclePackingCanvas; 89 | -------------------------------------------------------------------------------- /src/components/classroom/Analytics.tsx: -------------------------------------------------------------------------------- 1 | import { Typography } from "@mui/material"; 2 | import useTranslations from "../../hooks/useTranslations"; 3 | import BubbleChart from "../charts/Bubble"; 4 | 5 | type Props = { 6 | data: any; 7 | members: number; 8 | }; 9 | 10 | const Analytics = (props: Props) => { 11 | const nodes = props.data; 12 | const data = { 13 | name: "root", 14 | children: nodes, 15 | }; 16 | 17 | const translations = useTranslations(); 18 | 19 | return ( 20 |
21 | 22 | {translations.classroom.analytics.title} 23 | 24 | 25 |
26 | ); 27 | }; 28 | 29 | export default Analytics; 30 | -------------------------------------------------------------------------------- /src/components/creation-system/CreateClass.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { 3 | Typography, 4 | Button, 5 | Divider, 6 | TextField, 7 | Chip, 8 | Avatar, 9 | } from '@mui/material' 10 | import React, { useState, useEffect, useRef } from 'react' 11 | import UploadBox from '../misc/UploadButton' 12 | import { v4 as uuidv4 } from 'uuid' 13 | 14 | import 'firebase/database' 15 | import { toast } from 'react-toastify' 16 | 17 | import axios from 'axios' 18 | 19 | import config from '../../config.json' 20 | 21 | //redux 22 | import { useSelector } from 'react-redux' 23 | 24 | import { useMutation, gql } from '@apollo/client' 25 | 26 | //hooks 27 | import getUser from '../../hooks/getUser' 28 | import useTranslations from '../../hooks/useTranslations' 29 | 30 | const CREATE_CLASS = gql` 31 | mutation createClassroom( 32 | $_id: ID! 33 | $name: String! 34 | $banner: String! 35 | $owner: ID! 36 | ) { 37 | createClassroom(_id: $_id, name: $name, banner: $banner, owner: $owner) 38 | } 39 | ` 40 | 41 | const CREATE_NOTIFICATION = gql` 42 | mutation createNotification( 43 | $userId: ID! 44 | $type: String! 45 | $message: String! 46 | $data: String! 47 | ) { 48 | createNotification( 49 | userId: $userId 50 | type: $type 51 | message: $message 52 | data: $data 53 | ) 54 | } 55 | ` 56 | 57 | const CREATE_MEMBER_OWNER = gql` 58 | mutation createMember($classId: ID!, $userId: ID!, $role: String!) { 59 | createMember(classId: $classId, userId: $userId, role: $role) 60 | } 61 | ` 62 | const CREATE_MEMBER = gql` 63 | mutation createMember($classId: ID!, $userId: ID!, $role: String!) { 64 | createMember(classId: $classId, userId: $userId, role: $role) 65 | } 66 | ` 67 | 68 | const CLASSROOM_PREFIX = 'class:' 69 | const USERID_PREFIX = 'user:' 70 | 71 | function CreateClass() { 72 | const user = getUser() 73 | const [className, setClassName] = useState('') 74 | const [members, setMembers] = useState([]) 75 | 76 | const plan = useSelector((state) => state.plan) 77 | 78 | //inputs 79 | const [currentMember, setCurrentMember] = useState('') 80 | 81 | const imgRef = useRef(null) 82 | const [imgSrc, setImgSrc] = useState('') 83 | 84 | const translations = useTranslations() 85 | 86 | const [createClassMutation] = useMutation(CREATE_CLASS) 87 | const [createNotificationMutation] = useMutation(CREATE_NOTIFICATION) 88 | 89 | const [createMemberOwnerMutation] = useMutation(CREATE_MEMBER_OWNER) 90 | 91 | useEffect(() => { 92 | if (plan === 'Starter') { 93 | window.location.href = '/' 94 | } 95 | }, []) 96 | 97 | const createClass = () => { 98 | const classID = CLASSROOM_PREFIX + uuidv4() 99 | const classData = { 100 | _id: classID, 101 | name: className || '', 102 | banner: imgSrc || '', 103 | owner: user?.profileObj?.googleId, 104 | } 105 | 106 | /*create class*/ 107 | createClassMutation({ variables: classData }) 108 | 109 | /*notify owner*/ 110 | const notification = { 111 | userId: user?.profileObj?.googleId, 112 | type: 'class_created', 113 | message: `You have succesfully created ${classData.name}!`, 114 | data: classID, 115 | } 116 | 117 | const ownerData = { 118 | classId: classID, 119 | userId: 'user:' + user?.profileObj?.googleId, 120 | role: 'owner', 121 | } 122 | 123 | createNotificationMutation({ variables: notification }) 124 | createMemberOwnerMutation({ variables: ownerData }) 125 | 126 | /*notify members*/ 127 | 128 | window.location = `/class/${classID}` 129 | } 130 | 131 | return ( 132 |
133 |
134 |
145 |
152 | 153 | {translations.createclass.title} 154 | 155 |

156 | 157 |

158 | 159 | {translations.createclass.steps.step1} 160 | 161 | setClassName(e.target.value)} 164 | className="userInput quizName" 165 | type="text" 166 | placeholder={translations.createclass.steps.input1} 167 | > 168 |
169 |
170 | 171 | {translations.createclass.steps.step2} 172 | 173 | 174 |
175 |
176 | 187 |
188 |
189 |
190 |
191 | ) 192 | } 193 | 194 | export default CreateClass 195 | -------------------------------------------------------------------------------- /src/components/game/host/CountDown.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import "../../../style/countDownStyles.css"; 3 | 4 | import countdown_sfx from "../../../audio/countdown.mp3"; 5 | 6 | import ReactHowler from "react-howler"; 7 | import useTranslations from "../../../hooks/useTranslations"; 8 | 9 | function CountDown({ start, room, muteMusic, unmuteMusic, numberOfUsers }) { 10 | let [number, setNumber] = useState(0); 11 | let [isCountdown, setIsCountdown] = useState(false); 12 | const translations = useTranslations(); 13 | const [countDownText, setCountDownText] = useState( 14 | translations.countdown.ready 15 | ); 16 | 17 | useEffect(() => { 18 | muteMusic(); 19 | setIsCountdown((isCountdown = true)); 20 | setInterval(() => { 21 | if (isCountdown === false) return; 22 | setCountDownText(translations.countdown.go); 23 | setNumber((number += 1)); 24 | if (number === 4) { 25 | setIsCountdown((isCountdown = false)); 26 | unmuteMusic(); 27 | start(room, numberOfUsers); 28 | } 29 | }, 1000); 30 | }, []); 31 | 32 | return ( 33 | <> 34 | 35 | {isCountdown ? ( 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | {countDownText} 46 |
47 |
48 |
49 | 50 | 51 | 52 | 56 | 60 | 64 | 68 | 69 | 77 | 78 |
79 |
80 | ) : null} 81 | 82 | ); 83 | } 84 | 85 | export default CountDown; 86 | -------------------------------------------------------------------------------- /src/components/game/host/GameEnded.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useEffect, useState } from "react"; 3 | import PodiumAnimation from "./PodiumAnimation"; 4 | import { Button, Typography } from "@mui/material"; 5 | import useTranslations from "../../../hooks/useTranslations"; 6 | export default function GameEnded(props) { 7 | const translations = useTranslations(); 8 | useEffect(() => { 9 | console.log(props.podium); 10 | return () => { 11 | //cleanup 12 | }; 13 | }, []); 14 | return ( 15 |
24 | 25 | {translations.gameended.title} 26 | 27 | 31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/components/game/host/SharePopup.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState, useEffect } from "react"; 3 | import { 4 | Typography, 5 | Button, 6 | Divider, 7 | TextField, 8 | InputAdornment, 9 | Backdrop, 10 | } from "@mui/material"; 11 | import { Link } from "@mui/icons-material"; 12 | import GoogleShareToClassRoom from "google-classroom-share"; 13 | import { toast } from "react-toastify"; 14 | import "../../../style/sharepopupStyles.css"; 15 | import useTranslations from "../../../hooks/useTranslations"; 16 | function SharePopup({ shareLink, close }) { 17 | const [open, setOpen] = useState(true); 18 | const [url, setUrl] = useState(""); 19 | const [showPopupModal, setShowPopupModal] = useState(false); 20 | const translations = useTranslations(); 21 | useEffect(() => { 22 | const script = document.createElement("script"); 23 | script.src = "https://teams.microsoft.com/share/launcher.js"; 24 | script.async = true; 25 | script.defer = true; 26 | document.body.appendChild(script); 27 | return () => { 28 | document.body.removeChild(script); 29 | }; 30 | }, [showPopupModal]); 31 | useEffect(() => { 32 | setUrl(shareLink); 33 | }, []); 34 | const shareLinkFunc = () => { 35 | var text = url; 36 | navigator.clipboard.writeText(text).then( 37 | function () { 38 | toast.success(translations.alerts.copiedinvitation); 39 | }, 40 | function (err) { 41 | toast.error(err); 42 | } 43 | ); 44 | }; 45 | return ( 46 | 47 |
48 |
57 | {translations.sharepopup.title} 58 |
59 |
60 | 61 |
62 |
71 | {translations.sharepopup.sub} 72 |
73 |
74 | console.log(`GoogleShareToClassRoom:${type}`)} 81 | onShareComplete={() => 82 | console.log("GoogleShareToClassRoom:onShareComplete") 83 | } 84 | onShareStart={() => 85 | console.log("GoogleShareToClassRoom:onShareStart") 86 | } 87 | /> 88 |
95 |
96 |
105 | {translations.sharepopup.sub2} 106 |
107 |
114 | 118 | 119 | 120 | ), 121 | }} 122 | id="outlined-email-input" 123 | margin="normal" 124 | variant="outlined" 125 | aria-readonly="true" 126 | fullWidth 127 | value={url} 128 | style={{ width: "250px" }} 129 | /> 130 | 145 |
146 |
147 | 148 | ); 149 | } 150 | export default SharePopup; 151 | -------------------------------------------------------------------------------- /src/components/game/player/FinishedScreen.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { CircularProgress, Typography } from '@mui/material' 3 | import '../../../style/style.css' 4 | import useTranslations from '../../../hooks/useTranslations' 5 | export default function FinishedScreen({ match, user }) { 6 | const translations = useTranslations() 7 | return ( 8 |
18 | 30 | 31 | {translations.finishedscreen.title} 32 | 33 | 34 | {translations.finishedscreen.sub} 35 | 36 | 41 |
42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /src/components/game/player/MultiFinishedScreen.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState } from 'react' 3 | //material ui 4 | import { 5 | Typography, 6 | Stepper, 7 | Step, 8 | StepLabel, 9 | CircularProgress, 10 | } from '@mui/material' 11 | import '../../../style/style.css' 12 | import useTranslations from '../../../hooks/useTranslations' 13 | export default function FinishedScreen({ match, user, steps }) { 14 | const translations = useTranslations() 15 | return ( 16 |
26 |
27 | 31 | {translations.finishedscreen.title} 32 | 33 | 34 | {translations.finishedscreen.sub} 35 | 36 |
37 |
47 | 58 | {steps.map((step, index) => { 59 | return ( 60 | 61 | {step} 62 | 63 | ) 64 | })} 65 | 66 |
67 | 68 |
69 | 81 |
82 |
83 | ) 84 | } 85 | -------------------------------------------------------------------------------- /src/components/game/player/PositionScreen.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { Typography } from '@mui/material' 3 | import useTranslations from '../../../hooks/useTranslations' 4 | 5 | function PositionScreen({ position, player }) { 6 | const translations = useTranslations() 7 | return ( 8 |
9 | {position === 0 && ( 10 |
17 |
26 | 27 | + 25s 28 | 29 |
30 |
31 | )} 32 | 36 | 37 | {position === 0 38 | ? translations.positionscreen.ohno 39 | : translations.positionscreen.wow} 40 | 41 | 42 | 43 | 44 | {position === 0 45 | ? translations.positionscreen.notfinished 46 | : position === 1 47 | ? translations.positionscreen.yougot1st 48 | : position === 2 49 | ? translations.positionscreen.yougot2nd 50 | : position === 3 51 | ? translations.positionscreen.yougot3rd 52 | : `${translations.positionscreen.yougotother1} ${position}${translations.positionscreen.yougotother2}`} 53 | 54 | 55 | 56 |
64 |
65 |
80 | 81 | {position === 0 82 | ? '😐👎' 83 | : position === 1 84 | ? '👑' 85 | : position === 2 86 | ? '🥈' 87 | : position === 3 88 | ? '🥉' 89 | : `🏅`} 90 | 91 |
92 | 93 | {player ? player : '...'} 94 | 95 |
96 |
97 |
98 | 102 | 103 | {position === 0 104 | ? translations.positionscreen.dobetter 105 | : translations.positionscreen.keepitup} 106 | 107 | 108 |
109 |
110 |
111 |
112 | ) 113 | } 114 | export default PositionScreen 115 | -------------------------------------------------------------------------------- /src/components/game/player/WaitingForHost.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { 3 | Typography, 4 | Stepper, 5 | Step, 6 | StepLabel, 7 | CircularProgress, 8 | } from '@mui/material' 9 | import useTranslations from '../../../hooks/useTranslations' 10 | const WaitingForHost = ({ steps, activeStep }) => { 11 | const translations = useTranslations() 12 | return ( 13 |
14 | 18 | 19 | {translations.waitforhost.title}
{translations.waitforhost.sub} 20 | 21 | 22 |
30 | 42 | {steps.map((step, index) => { 43 | return ( 44 | 45 | {step} 46 | 47 | ) 48 | })} 49 | 50 |
51 |
52 | 57 |
58 |
59 | ) 60 | } 61 | export default WaitingForHost 62 | -------------------------------------------------------------------------------- /src/components/game/practice/FinishedSceen.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { useState } from "react"; 3 | import { Typography, Button } from "@mui/material"; 4 | import useTranslations from "../../../hooks/useTranslations"; 5 | const FinishedSceen = ({ time }) => { 6 | const translations = useTranslations(); 7 | return ( 8 |
17 |
30 |
31 | 32 | 🎉 33 | 34 |

35 | {translations.finishedscreen.WOW} 36 |

37 |

38 | {translations.finishedscreen.sub2} 39 | {time}s !!! 🥳 40 |

41 |
42 | 43 |
44 | 51 |
52 |
53 |
54 | ); 55 | }; 56 | export default FinishedSceen; 57 | -------------------------------------------------------------------------------- /src/components/misc/Background.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../../style/background.css' 3 | export default function Background() { 4 | return ( 5 | <> 6 |
    7 |
  • 8 |
  • 9 |
  • 10 |
  • 11 |
  • 12 |
  • 13 |
  • 14 |
  • 15 |
  • 16 |
  • 17 |
18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/misc/ClaimEmote.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useEffect, useState } from 'react' 3 | import { useMutation, gql } from '@apollo/client' 4 | import getUser from '../../hooks/getUser' 5 | import { Button, CircularProgress, Typography } from '@mui/material' 6 | import Emotes from '../../emotes/emotes.json' 7 | import { useLocation } from 'react-router-dom' 8 | import useTranslations from '../../hooks/useTranslations' 9 | 10 | const CLAIM_EMOTE = gql` 11 | mutation ($emoteId: ID!, $owner: ID!, $secret: ID!) { 12 | addEmote(emoteId: $emoteId, owner: $owner, secret: $secret) 13 | } 14 | ` 15 | 16 | function ClaimEmote() { 17 | const [addEmote, { data, loading, error }] = useMutation(CLAIM_EMOTE) 18 | const user = getUser() 19 | 20 | const search = useLocation().search 21 | 22 | const secret = new URLSearchParams(search).get('secret') 23 | const emoteId = new URLSearchParams(search).get('emoteId') 24 | 25 | const translations = useTranslations() 26 | 27 | useEffect(() => { 28 | if (user) { 29 | addEmote({ 30 | variables: { 31 | emoteId: emoteId, 32 | owner: user?.profileObj?.googleId, 33 | secret: secret, 34 | }, 35 | }) 36 | } else { 37 | window.location = `/login?secret=${secret}&emoteId=${emoteId}` 38 | } 39 | }, []) 40 | 41 | return ( 42 |
51 |
52 | {loading ? ( 53 | 58 | ) : data?.addEmote === true ? ( 59 |
60 | 64 | {translations.claimemote.title1} 65 | 66 |
67 | emote 73 |
74 |
75 | 83 |
84 |
85 | ) : ( 86 |
87 | 91 | {translations.claimemote.title2} 92 | 93 |
94 | emote 102 |
103 |
104 | 112 |
113 |
114 | )} 115 |
116 |
117 | ) 118 | } 119 | 120 | export default ClaimEmote 121 | -------------------------------------------------------------------------------- /src/components/misc/UploadButton.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useRef, useState } from 'react' 3 | 4 | import { getFirebase } from '../../App' 5 | 6 | import { Typography } from '@mui/material' 7 | import { toast } from 'react-toastify' 8 | 9 | import 'firebase/storage' 10 | 11 | import uploadImg from '../../img/uploadImg.svg' 12 | import useTranslations from '../../hooks/useTranslations' 13 | 14 | import { v4 } from 'uuid' 15 | 16 | const UploadButton = ({ setImg, url }) => { 17 | const firebase = getFirebase() 18 | const ref = useRef(undefined) 19 | const [file, setFile] = useState(null) 20 | 21 | const translations = useTranslations() 22 | 23 | const handleClick = () => { 24 | if (ref) { 25 | return ref.current?.click() 26 | } 27 | } 28 | 29 | const handleUpload = async (event) => { 30 | if (!firebase) return 31 | 32 | const uploadedFile = event?.target.files[0] 33 | if (!uploadedFile) return 34 | 35 | const storage = firebase.storage() 36 | const storageRef = storage.ref('quizImg') 37 | const id = v4() 38 | 39 | try { 40 | await storageRef.child(id).put(uploadedFile) 41 | const url = await storage.ref(`quizImg/${id}`).getDownloadURL() 42 | console.log(url) 43 | setFile(url) 44 | setImg(url) 45 | toast.success(translations.alerts.uploadedpic) 46 | } catch (error) { 47 | console.log('error', error) 48 | } 49 | } 50 | 51 | const UploadBox = () => ( 52 |
handleClick()} className="upload-box"> 53 | {file === null ? ( 54 | upload 59 | ) : ( 60 | quiz-cover 66 | )} 67 |
68 | ) 69 | 70 | return ( 71 |
72 | 73 | 80 |
81 | ) 82 | } 83 | 84 | export default UploadButton 85 | -------------------------------------------------------------------------------- /src/components/misc/canvasPreview.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { PixelCrop } from "react-image-crop"; 3 | const TO_RADIANS = Math.PI / 180; 4 | export async function canvasPreview( 5 | image, 6 | canvas, 7 | crop, 8 | scale = 1, 9 | rotate = 0 10 | ) { 11 | const ctx = canvas.getContext("2d"); 12 | if (!ctx) { 13 | throw new Error("No 2d context"); 14 | } 15 | const scaleX = image.naturalWidth / image.width; 16 | const scaleY = image.naturalHeight / image.height; 17 | // devicePixelRatio slightly increases sharpness on retina devices 18 | // at the expense of slightly slower render times and needing to 19 | // size the image back down if you want to download/upload and be 20 | // true to the images natural size. 21 | const pixelRatio = window.devicePixelRatio; 22 | // const pixelRatio = 1 23 | canvas.width = Math.floor(crop.width * scaleX * pixelRatio); 24 | canvas.height = Math.floor(crop.height * scaleY * pixelRatio); 25 | ctx.scale(pixelRatio, pixelRatio); 26 | ctx.imageSmoothingQuality = "high"; 27 | const cropX = crop.x * scaleX; 28 | const cropY = crop.y * scaleY; 29 | const rotateRads = rotate * TO_RADIANS; 30 | const centerX = image.naturalWidth / 2; 31 | const centerY = image.naturalHeight / 2; 32 | ctx.save(); 33 | // 5) Move the crop origin to the canvas origin (0,0) 34 | ctx.translate(-cropX, -cropY); 35 | // 4) Move the origin to the center of the original position 36 | ctx.translate(centerX, centerY); 37 | // 3) Rotate around the origin 38 | ctx.rotate(rotateRads); 39 | // 2) Scale the image 40 | ctx.scale(scale, scale); 41 | // 1) Move the center of the image to the origin (0,0) 42 | ctx.translate(-centerX, -centerY); 43 | ctx.drawImage( 44 | image, 45 | 0, 46 | 0, 47 | image.naturalWidth, 48 | image.naturalHeight, 49 | 0, 50 | 0, 51 | image.naturalWidth, 52 | image.naturalHeight 53 | ); 54 | ctx.restore(); 55 | } 56 | -------------------------------------------------------------------------------- /src/components/misc/imgPreviews.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { PixelCrop } from "react-image-crop"; 3 | import { canvasPreview } from "./canvasPreview"; 4 | let previewUrl = ""; 5 | function toBlob(canvas) { 6 | return new Promise((resolve) => { 7 | canvas.toBlob(resolve); 8 | }); 9 | } 10 | // Returns an image source you should set to state and pass 11 | // `{previewSrc && Crop preview}` 12 | export async function imgPreview(image, crop, scale = 1, rotate = 0) { 13 | const canvas = document.createElement("canvas"); 14 | canvasPreview(image, canvas, crop, scale, rotate); 15 | const blob = await toBlob(canvas); 16 | if (previewUrl) { 17 | URL.revokeObjectURL(previewUrl); 18 | } 19 | previewUrl = URL.createObjectURL(blob); 20 | return previewUrl; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/misc/useDebounceEffect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, DependencyList } from "react"; 2 | 3 | export function useDebounceEffect( 4 | fn: () => void, 5 | waitTime: number, 6 | deps?: DependencyList 7 | ) { 8 | useEffect(() => { 9 | const t = setTimeout(() => { 10 | fn.apply(undefined, deps as any); 11 | }, waitTime); 12 | 13 | return () => { 14 | clearTimeout(t); 15 | }; 16 | }, deps); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/nav/NotificationBox.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState } from 'react' 3 | import '../../style/notificationStyles.css' 4 | 5 | import { 6 | Typography, 7 | Button, 8 | Divider, 9 | CircularProgress, 10 | ClickAwayListener, 11 | Avatar, 12 | } from '@mui/material' 13 | 14 | import { useQuery, useMutation, gql } from '@apollo/client' 15 | import getUser from '../../hooks/getUser' 16 | import useTranslations from '../../hooks/useTranslations' 17 | import { Link } from 'react-router-dom' 18 | 19 | const GET_NOTIFICATIONS = gql` 20 | query allNotificationsByUser($userId: ID!) { 21 | allNotificationsByUser(userId: $userId) { 22 | _id 23 | userId 24 | type 25 | message 26 | data 27 | } 28 | } 29 | ` 30 | 31 | const CLEAR_NOTIFICATIONS = gql` 32 | mutation clearNotifications($userId: ID!) { 33 | clearNotifications(userId: $userId) 34 | } 35 | ` 36 | 37 | function NotificationBox({ close }) { 38 | const user = getUser() 39 | const translations = useTranslations() 40 | 41 | const { loading, error, data } = useQuery(GET_NOTIFICATIONS, { 42 | variables: { 43 | userId: user?.profileObj?.googleId, 44 | }, 45 | }) 46 | 47 | const [clearNotifications] = useMutation(CLEAR_NOTIFICATIONS, { 48 | variables: { 49 | userId: user?.profileObj?.googleId, 50 | }, 51 | }) 52 | 53 | const NotificationCard = ({ message }) => ( 54 |
55 | 56 | {message} 57 | 58 |
59 | ) 60 | 61 | const NotificationJoinCard = ({ message, code }) => ( 62 |
63 | 64 | {message} 65 | 66 | 67 | 68 | 75 | 76 |
77 | ) 78 | 79 | const NotificationJoinRequestCard = ({ data }) => { 80 | const userData = JSON.parse(data.data) 81 | 82 | return ( 83 |
84 | 85 | {data.message}: 86 | 87 |
94 | 98 | {userData.name.charAt(0)} 99 | 100 | {userData.name} 101 |
102 |
103 | ) 104 | } 105 | 106 | const handleClearNotifications = () => { 107 | clearNotifications() 108 | window.location.reload() 109 | } 110 | 111 | return ( 112 | 113 |
114 |
115 | 116 | {translations.notifications.title} 117 | 118 |
119 | 120 |
121 |
122 |
123 | {loading ? ( 124 | 125 | ) : ( 126 | data.allNotificationsByUser.map((notification) => { 127 | if (notification.type === 'class_created') { 128 | return 129 | } 130 | if (notification.type === 'added_to_class') { 131 | return 132 | } 133 | if (notification.type === 'removed_from_class') { 134 | return 135 | } 136 | if (notification.type === 'join_request') { 137 | return 138 | } 139 | if (notification.type === 'invitation_to_room') { 140 | return ( 141 | 145 | ) 146 | } 147 | }) 148 | )} 149 |
150 |
151 | 160 |
161 |
162 | 163 | ) 164 | } 165 | 166 | export default NotificationBox 167 | -------------------------------------------------------------------------------- /src/components/payment/ThanksForPurchasingAnimation.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState } from "react"; 3 | import "../../style/checkAnimation.css"; 4 | import Button from "@mui/material/Button"; 5 | import { Typography } from "@mui/material"; 6 | import useTranslations from "../../hooks/useTranslations"; 7 | export default function ThanksForPurchasingAnimation() { 8 | const translations = useTranslations(); 9 | return ( 10 |
11 |
20 |
21 | 28 | 38 | 47 | 48 | 49 | 🎉🎉 {translations.thanksforpurchasing.title} 🎉🎉 50 | 51 |
52 | 61 |
62 |
63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /src/components/tutorial/FinishedTutorial.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { Button, Divider, Typography } from '@mui/material' 3 | import { useState } from 'react' 4 | import Confetti from 'react-confetti' 5 | import { Link } from 'react-router-dom' 6 | import useTranslations from '../../hooks/useTranslations' 7 | //icon 8 | import DiscordIcon from '../../img/DiscordIcon.svg' 9 | const FinishedTutorial = () => { 10 | const translations = useTranslations() 11 | return ( 12 | <> 13 | 14 |
21 |
35 | 36 | {translations.tutorial.tutorialcompleted.title} 37 | 38 |
39 |
40 |
47 |
48 |
58 | 59 | 72 | 73 | 74 | 87 | 88 | 89 | 102 | 103 | 120 |
121 |
122 |
123 | 124 | ) 125 | } 126 | export default FinishedTutorial 127 | -------------------------------------------------------------------------------- /src/components/tutorial/JoinRoom.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { useState } from "react"; 3 | import { Typography, Button, CircularProgress } from "@mui/material"; 4 | import HostExample from "../../img/Tutorial/HostExample.svg"; 5 | import { toast } from "react-toastify"; 6 | import useTranslations from "../../hooks/useTranslations"; 7 | const JoinRoom = ({ nextStep, setUser }) => { 8 | const [joinFormStep, setJoinFormStep] = useState(0); 9 | const translations = useTranslations(); 10 | const [joinFormCode, setJoinFormCode] = useState(""); 11 | const [joinFormNickname, setJoinFormNickname] = useState(""); 12 | const [spinner1, setSpinner1] = useState(false); 13 | const [spinner2, setSpinner2] = useState(false); 14 | return ( 15 |
24 | {joinFormStep === 0 && ( 25 |
26 | Host Example 36 |
37 | )} 38 |
39 |
47 | {joinFormStep === 0 && ( 48 | {translations.play.join.tip} 49 | )} 50 | {joinFormStep === 1 && ( 51 | {translations.play.join.tip2} 52 | )} 53 |
54 |
67 | 68 | {translations.play.join.title} 69 | 70 | {joinFormStep === 0 && ( 71 | <> 72 | setJoinFormCode(event.target.value)} 75 | style={{ width: "100%", height: "48px" }} 76 | placeholder={translations.play.join.input} 77 | type="text" 78 | id="code" 79 | /> 80 |
81 | 110 | 111 | )} 112 | {joinFormStep === 1 && ( 113 | <> 114 | setJoinFormNickname(event.target.value)} 117 | style={{ width: "100%", height: "48px" }} 118 | placeholder={translations.play.join.input2} 119 | type="text" 120 | id="name" 121 | /> 122 |
123 |
131 | 152 |
153 | 154 | )} 155 |
156 |
157 |
158 | ); 159 | }; 160 | export default JoinRoom; 161 | -------------------------------------------------------------------------------- /src/components/tutorial/Stepper.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { useState } from "react"; 3 | import { Stepper, Step, StepLabel } from "@mui/material"; 4 | import useTranslations from "../../hooks/useTranslations"; 5 | const StepperComponent = ({ activeStep }) => { 6 | const translations = useTranslations(); 7 | return ( 8 | 19 | 20 | {translations.tutorial.stepper.join} 21 | 22 | 23 | {translations.tutorial.stepper.waiting} 24 | 25 | 26 | {translations.tutorial.stepper.game} 27 | 28 | 29 | ); 30 | }; 31 | export default StepperComponent; 32 | -------------------------------------------------------------------------------- /src/components/tutorial/Tutorial.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import { useState, useEffect } from "react"; 3 | import Stepper from "./Stepper"; 4 | import HostExample from "../../img/Tutorial/HostExample.svg"; 5 | import JoinRoom from "./JoinRoom"; 6 | import WaitingRoom from "./WaitingRoom"; 7 | import { Button, Typography } from "@mui/material"; 8 | import Game from "./Game"; 9 | import FinishedTutorial from "./FinishedTutorial"; 10 | import useTranslations from "../../hooks/useTranslations"; 11 | const Tutorial = () => { 12 | const [activeStep, setActiveStep] = useState(0); 13 | const [user, setUser] = useState(""); 14 | const [modal, setModal] = useState(true); 15 | const translations = useTranslations(); 16 | useEffect(() => { 17 | document.getElementById("main-nav").remove(); 18 | }, []); 19 | const JoinSection = () => { 20 | return ( 21 |
22 | setActiveStep(1)} setUser={setUser} /> 23 |
24 | ); 25 | }; 26 | const WaitingRoomSection = () => { 27 | return ( 28 |
29 | setActiveStep(2)} user={user} /> 30 |
31 | ); 32 | }; 33 | const WelcomeModal = () => { 34 | return ( 35 |
49 |
62 | 63 | {translations.tutorial.welcome.title} 64 | 65 |
66 | 67 | {translations.tutorial.welcome.sub} 68 | 69 | 80 |
81 |
82 | ); 83 | }; 84 | return ( 85 |
94 | {modal && } 95 | 96 | {translations.tutorial.title} 97 | 98 | 99 | {activeStep === 0 && } 100 | {activeStep === 1 && } 101 | {activeStep === 2 && ( 102 | { 105 | setActiveStep(3); 106 | }} 107 | /> 108 | )} 109 | {activeStep === 3 && } 110 |
111 | ); 112 | }; 113 | export default Tutorial; 114 | -------------------------------------------------------------------------------- /src/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "socket-server": "https://connectsocketio-production.up.railway.app", 3 | "api-server": "https://connect-backend-production.up.railway.app", 4 | "socket-server2": "https://quiz-connect-websocket.herokuapp.com", 5 | "api-server2": "https://quiz-connect-api-v2.herokuapp.com" 6 | } 7 | -------------------------------------------------------------------------------- /src/emotes/emotes.json: -------------------------------------------------------------------------------- 1 | { 2 | "1": { 3 | "name": "Happy", 4 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/grinning-face_1f600.png", 5 | "rarity": "common" 6 | }, 7 | "2": { 8 | "name": "Ok.", 9 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/neutral-face_1f610.png", 10 | "rarity": "common" 11 | }, 12 | "3": { 13 | "name": "Tired", 14 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/yawning-face_1f971.png", 15 | "rarity": "common" 16 | }, 17 | "4": { 18 | "name": "Rage", 19 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/pouting-face_1f621.png", 20 | "rarity": "common" 21 | }, 22 | "5": { 23 | "name": "Trippy", 24 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/face-with-spiral-eyes_1f635-200d-1f4ab.png", 25 | "rarity": "uncommon" 26 | }, 27 | "6": { 28 | "name": "Vomiting", 29 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/face-vomiting_1f92e.png", 30 | "rarity": "uncommon" 31 | }, 32 | "7": { 33 | "name": "Mind Blown", 34 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/exploding-head_1f92f.png", 35 | "rarity": "uncommon" 36 | }, 37 | "8": { 38 | "name": "Hot", 39 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/hot-face_1f975.png", 40 | "rarity": "uncommon" 41 | }, 42 | "9": { 43 | "name": "Funny", 44 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/skull_1f480.png", 45 | "rarity": "uncommon" 46 | }, 47 | "10": { 48 | "name": "Ice", 49 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/cold-face_1f976.png", 50 | "rarity": "uncommon" 51 | }, 52 | "11": { 53 | "name": "Fire", 54 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/fire_1f525.png", 55 | "rarity": "rare" 56 | }, 57 | "12": { 58 | "name": "LMFAO", 59 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/face-with-tears-of-joy_1f602.png", 60 | "rarity": "rare" 61 | }, 62 | "13": { 63 | "name": "Yo?", 64 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/eyes_1f440.png", 65 | "rarity": "rare" 66 | }, 67 | "14": { 68 | "name": "Devil", 69 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/smiling-face-with-horns_1f608.png", 70 | "rarity": "rare" 71 | }, 72 | "15": { 73 | "name": "Crack Head", 74 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/zany-face_1f92a.png", 75 | "rarity": "rare" 76 | }, 77 | "16": { 78 | "name": "Clown", 79 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/clown-face_1f921.png", 80 | "rarity": "epic" 81 | }, 82 | "17": { 83 | "name": "Monke", 84 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/orangutan_1f9a7.png", 85 | "rarity": "epic" 86 | }, 87 | "18": { 88 | "name": "Scared", 89 | "icon": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/144/apple/325/face-screaming-in-fear_1f631.png", 90 | "rarity": "epic" 91 | }, 92 | "19": { 93 | "name": "Hummm?", 94 | "icon": "https://user-images.githubusercontent.com/79988159/160299980-1eaa04e4-bed4-46de-a654-42320b0012a4.gif", 95 | "rarity": "legendary" 96 | }, 97 | "20": { 98 | "name": "Poop.", 99 | "icon": "https://user-images.githubusercontent.com/79988159/160303295-71e88d05-3a9b-4fb3-968a-dfcc7fc7452b.gif", 100 | "rarity": "legendary" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/hooks/getUser.ts: -------------------------------------------------------------------------------- 1 | const lsTest = () => { 2 | if (typeof localStorage === 'object') { 3 | try { 4 | localStorage.setItem('localStorage', '1') 5 | localStorage.removeItem('localStorage') 6 | return true 7 | } catch (e) { 8 | Storage.prototype._setItem = Storage.prototype.setItem 9 | Storage.prototype.setItem = function () {} 10 | return false 11 | } 12 | } 13 | } 14 | const getUser = () => { 15 | if (lsTest() === false) { 16 | window.location = '/no-local-storage' as any 17 | console.log('no local storage :(') 18 | return null 19 | } 20 | try { 21 | const user = JSON.parse(localStorage.getItem('user') as string) 22 | if (user !== null && user !== undefined && user !== '') { 23 | return user 24 | } 25 | return null 26 | } catch (error) { 27 | return null 28 | } 29 | } 30 | export default getUser 31 | -------------------------------------------------------------------------------- /src/hooks/useLanguage.ts: -------------------------------------------------------------------------------- 1 | const useLanguage = () => { 2 | const userLanguage = localStorage.getItem("connectLanguage"); 3 | const englishLanguages = [ 4 | "en-029", 5 | "en-Au", 6 | "en-BZ", 7 | "en-CA", 8 | "en-GB", 9 | "en-IE", 10 | "en-IN", 11 | "en-JM", 12 | "en-NZ", 13 | "en-PH", 14 | "en-TT", 15 | "en-US", 16 | "en-ZA", 17 | "en-ZW" 18 | ]; 19 | const frenchLanguages = [ 20 | "fr-BE", 21 | "fr-CA", 22 | "fr-CH", 23 | "fr-FR", 24 | "fr-LU", 25 | "fr-MC", 26 | "fr-SN" 27 | ]; 28 | const language = userLanguage 29 | ? userLanguage 30 | : englishLanguages.includes(navigator.language) 31 | ? "english" 32 | : frenchLanguages.includes(navigator.language) ? "french" : "english"; 33 | return language; 34 | }; 35 | export default useLanguage; 36 | -------------------------------------------------------------------------------- /src/hooks/useReconnection.ts: -------------------------------------------------------------------------------- 1 | import { toast } from 'react-toastify' 2 | import socket from '../socket-io' 3 | import useTranslations from '../hooks/useTranslations' 4 | 5 | const translations = useTranslations() 6 | 7 | type ReconnectionStatus = 'error' | 'success' | 'already-in-room' | 'no-room' 8 | type GameState = 9 | | 'WAITING_FOR_PLAYERS' 10 | | 'IN_PROGRESS' 11 | | 'WAITING_FOR_HOST' 12 | | 'POSITION_SCREEN' 13 | 14 | const checkConnection = ( 15 | room: string, 16 | name: string, 17 | id: string, 18 | state: GameState 19 | ) => { 20 | socket.emit('check-room-connection', { 21 | room: room, 22 | name: name, 23 | id: id, 24 | state: state, 25 | }) 26 | } 27 | 28 | const handleReconnection = (data: any) => { 29 | const status: ReconnectionStatus = data.status 30 | 31 | if (status === 'success') { 32 | toast.info(translations.alerts.reconnected) 33 | } 34 | } 35 | 36 | export const useReconnection = () => { 37 | return [checkConnection, handleReconnection] 38 | } 39 | -------------------------------------------------------------------------------- /src/hooks/useTranslations.ts: -------------------------------------------------------------------------------- 1 | import Translations from "../translations/translations.json"; 2 | const useTranslations = () => { 3 | const userLanguage = localStorage.getItem("connectLanguage"); 4 | const englishLanguages = [ 5 | "en-029", 6 | "en-Au", 7 | "en-BZ", 8 | "en-CA", 9 | "en-GB", 10 | "en-IE", 11 | "en-IN", 12 | "en-JM", 13 | "en-NZ", 14 | "en-PH", 15 | "en-TT", 16 | "en-US", 17 | "en-ZA", 18 | "en-ZW", 19 | ]; 20 | const frenchLanguages = [ 21 | "fr-BE", 22 | "fr-CA", 23 | "fr-CH", 24 | "fr-FR", 25 | "fr-LU", 26 | "fr-MC", 27 | "fr-SN", 28 | ]; 29 | const language = userLanguage 30 | ? userLanguage 31 | : englishLanguages.includes(navigator.language) 32 | ? "english" 33 | : frenchLanguages.includes(navigator.language) 34 | ? "french" 35 | : "english"; 36 | //@ts-ignore 37 | return Translations[language]; 38 | }; 39 | export default useTranslations; 40 | -------------------------------------------------------------------------------- /src/hooks/useUnsavedChangesWarning.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useState, useEffect } from "react"; 3 | import { Prompt } from "react-router-dom"; 4 | const useUnsavedChangesWarning = ( 5 | message = "Are you sure want to discard changes?" 6 | ) => { 7 | const [isDirty, setDirty] = useState(true); 8 | useEffect(() => { 9 | //Detecting browser closing 10 | 11 | window.onbeforeunload = isDirty && (() => message); 12 | return () => { 13 | window.onbeforeunload = null; 14 | }; 15 | }, [isDirty]); 16 | const routerPrompt = ; 17 | return [routerPrompt, () => setDirty(true), () => setDirty(false)]; 18 | }; 19 | export default useUnsavedChangesWarning; 20 | -------------------------------------------------------------------------------- /src/img/BigStripe-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/BigStripe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/CardBackGround/answerCard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/CardBackGround/questionCard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/CardType/Image_Answer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/CardType/Question_Answer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/CardType/Question_Image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/DiscordIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/HomePageWave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/HomeSection1Image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/HomeSection1Image2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/Iphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/NewQuizImg/purpleWave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/NewQuizImg/purpleWave2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/firstPlace.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/otherPlaceIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/playButton.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/secondPlace.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/PodiumIcons/thirdPlace.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/SvgLogo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/WhiteBigStripe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/connect-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/img/loading.gif -------------------------------------------------------------------------------- /src/img/lockedEmote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/logoo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/img/logoo.PNG -------------------------------------------------------------------------------- /src/img/nav.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/quizCoverPlaceholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/img/quizCoverPlaceholder.png -------------------------------------------------------------------------------- /src/img/quizCoverPlaceholder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { Suspense } from 'react' 3 | import ReactDOM from 'react-dom' 4 | import App from './App' 5 | import { Provider } from 'react-redux' 6 | import { createStore } from 'redux' 7 | import rootReducer from './reducers' 8 | import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client' 9 | import { createTheme, ThemeProvider } from '@mui/material/styles' 10 | import config from './config.json' 11 | import LoadingScreen from './components/LoadingScreen' 12 | const store = createStore( 13 | rootReducer, 14 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 15 | ) 16 | const client = new ApolloClient({ 17 | uri: `${config['api-server']}/graphql`, 18 | cache: new InMemoryCache(), 19 | }) 20 | const theme = createTheme({ 21 | palette: { 22 | primary: { 23 | main: '#6c63ff', 24 | contrastText: '#fff', 25 | }, 26 | secondary: { 27 | main: 'rgb(220, 0, 78)', 28 | contrastText: '#fff', 29 | }, 30 | info: { 31 | main: '#29b6f6', 32 | contrastText: '#fff', 33 | }, 34 | action: { 35 | main: '#6c63ff', 36 | contrastText: '#fff', 37 | }, 38 | success: { 39 | main: '#1bb978', 40 | contrastText: '#fff', 41 | }, 42 | warning: { 43 | main: '#FED253', 44 | contrastText: '#fff', 45 | }, 46 | error: { 47 | main: '#FF2C62', 48 | contrastText: '#fff', 49 | }, 50 | }, 51 | }) 52 | ReactDOM.render( 53 | 54 | }> 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | , 64 | document.getElementById('root') 65 | ) 66 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reducers/customerId.ts: -------------------------------------------------------------------------------- 1 | const isLogged = (state = null, action: any) => { 2 | switch (action.type) { 3 | case 'SET_CUSTOMER_ID': 4 | return action.payload 5 | case 'GET_CUSTOMER_ID': 6 | return state 7 | default: 8 | return state 9 | } 10 | } 11 | export default isLogged 12 | -------------------------------------------------------------------------------- /src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import plan from './plan' 3 | import isLogged from './islogged' 4 | import customerId from './customerId' 5 | 6 | const rootReducer = combineReducers({ 7 | customerId: customerId, 8 | plan: plan, 9 | isLogged: isLogged, 10 | }) 11 | export default rootReducer 12 | -------------------------------------------------------------------------------- /src/reducers/islogged.ts: -------------------------------------------------------------------------------- 1 | const isLogged = (state = false, action: any) => { 2 | switch (action.type) { 3 | case "LOGIN": 4 | return true; 5 | case "LOGOUT": 6 | return false; 7 | default: 8 | return state; 9 | } 10 | }; 11 | export default isLogged; 12 | -------------------------------------------------------------------------------- /src/reducers/plan.ts: -------------------------------------------------------------------------------- 1 | const plan = (state = "Starter", action: any) => { 2 | switch (action.type) { 3 | case "SET_STARTER": 4 | return (state = "Starter"); 5 | case "SET_CLASSROOM": 6 | return (state = "Classroom"); 7 | case "SET_ENTERPRISE": 8 | return (state = "Enterprise"); 9 | default: 10 | return state; 11 | } 12 | }; 13 | export default plan; 14 | -------------------------------------------------------------------------------- /src/socket-io.ts: -------------------------------------------------------------------------------- 1 | import { io } from "socket.io-client"; 2 | import config from "./config.json"; 3 | //https://connect-quiz-now.herokuapp.com/ 4 | //http://localhost:3001 5 | //good one https://connect-now-backend.herokuapp.com/ 6 | //https://connect-backend-2.herokuapp.com/ 7 | //the one https://connect-socket-io.herokuapp.com/ 8 | //the one one https://quiz-connect-socketio.herokuapp.com/ 9 | const socket = io(config["socket-server"], { 10 | transports: ["websocket", "polling", "flashsocket"] 11 | }); 12 | export default socket; 13 | -------------------------------------------------------------------------------- /src/style/NewQuizStyle.css: -------------------------------------------------------------------------------- 1 | .cardContainer2 { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .cardContainer2-sub { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | width: 100%; 11 | } 12 | .card2 { 13 | padding: 12px; 14 | width: 280px; 15 | margin: 20px; 16 | background-color: white; 17 | border: 2px solid #e0e0e0 !important; 18 | border-radius: 10px; 19 | } 20 | .card2-2 { 21 | padding: 12px; 22 | margin: 20px; 23 | background-color: white; 24 | height: 400px; 25 | width: 280px; 26 | border: 2px solid #e0e0e0 !important; 27 | border-radius: 10px; 28 | } 29 | .card2-2:hover { 30 | transform: scale(1.05); 31 | cursor: pointer; 32 | } 33 | .card2:hover { 34 | transform: scale(1.05); 35 | cursor: pointer; 36 | } 37 | 38 | .quizName { 39 | box-shadow: 5px 5px 0px #262626 !important; 40 | border: 2px solid black; 41 | height: 50px; 42 | width: 80vw; 43 | max-width: 700px; 44 | font-size: 20px; 45 | margin-top: 20px; 46 | margin-left: -10px; 47 | border-radius: 0 !important; 48 | } 49 | .userInput { 50 | margin: 5px; 51 | } 52 | .card2-2-subject { 53 | padding: 12px; 54 | width: 100%; 55 | max-width: 700px; 56 | margin: 20px; 57 | background-color: white; 58 | height: 500px; 59 | background-size: 100% 100%; 60 | border: 2px solid #e0e0e0 !important; 61 | border-radius: 10px; 62 | } 63 | .subject-container { 64 | padding: 12px; 65 | width: 100%; 66 | background-color: white; 67 | border: 2px solid #e0e0e0 !important; 68 | display: flex; 69 | flex-wrap: wrap; 70 | flex-direction: column; 71 | justify-content: center; 72 | border-radius: 10px; 73 | } 74 | .subject-name { 75 | height: 50px; 76 | width: 80%; 77 | max-width: 600px; 78 | font-size: 30px; 79 | } 80 | 81 | .card_type:hover { 82 | cursor: pointer; 83 | transition: all 0.2s ease; 84 | transform: scale(1.05) !important; 85 | } 86 | -------------------------------------------------------------------------------- /src/style/background.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap'); 2 | 3 | body { 4 | font-family: 'Exo', sans-serif; 5 | } 6 | 7 | .context { 8 | width: 100%; 9 | position: absolute; 10 | top: 50vh; 11 | } 12 | 13 | .context h1 { 14 | text-align: center; 15 | color: #fff; 16 | font-size: 50px; 17 | } 18 | 19 | .circles { 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | overflow: hidden; 24 | z-index: -1; 25 | background-color: #4e54c8; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | .circles li { 31 | position: absolute; 32 | display: block; 33 | list-style: none; 34 | width: 20px; 35 | height: 20px; 36 | background: rgba(255, 255, 255, 0.2); 37 | animation: animate 25s linear infinite; 38 | bottom: -150px; 39 | } 40 | 41 | .circles li:nth-child(1) { 42 | left: 25%; 43 | width: 180px; 44 | height: 180px; 45 | animation-delay: 0s; 46 | } 47 | 48 | .circles li:nth-child(2) { 49 | left: 10%; 50 | width: 120px; 51 | height: 120px; 52 | animation-delay: 2s; 53 | animation-duration: 12s; 54 | } 55 | 56 | .circles li:nth-child(3) { 57 | left: 70%; 58 | width: 120px; 59 | height: 120px; 60 | animation-delay: 4s; 61 | } 62 | 63 | .circles li:nth-child(4) { 64 | left: 40%; 65 | width: 160px; 66 | height: 160px; 67 | animation-delay: 0s; 68 | animation-duration: 18s; 69 | } 70 | 71 | .circles li:nth-child(5) { 72 | left: 65%; 73 | width: 120px; 74 | height: 120px; 75 | animation-delay: 0s; 76 | } 77 | 78 | .circles li:nth-child(6) { 79 | left: 75%; 80 | width: 110px; 81 | height: 110px; 82 | animation-delay: 3s; 83 | } 84 | 85 | .circles li:nth-child(7) { 86 | left: 35%; 87 | width: 150px; 88 | height: 150px; 89 | animation-delay: 7s; 90 | } 91 | 92 | .circles li:nth-child(8) { 93 | left: 50%; 94 | width: 125px; 95 | height: 125px; 96 | animation-delay: 15s; 97 | animation-duration: 45s; 98 | } 99 | 100 | .circles li:nth-child(9) { 101 | left: 20%; 102 | width: 115px; 103 | height: 115px; 104 | animation-delay: 2s; 105 | animation-duration: 35s; 106 | } 107 | 108 | .circles li:nth-child(10) { 109 | left: 85%; 110 | width: 150px; 111 | height: 150px; 112 | animation-delay: 0s; 113 | animation-duration: 11s; 114 | } 115 | 116 | @keyframes animate { 117 | 0% { 118 | transform: translateY(0) rotate(0deg); 119 | opacity: 1; 120 | border-radius: 0; 121 | } 122 | 123 | 100% { 124 | transform: translateY(-1000px) rotate(720deg); 125 | opacity: 0; 126 | border-radius: 50%; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/style/checkAnimation.css: -------------------------------------------------------------------------------- 1 | .path { 2 | stroke-dasharray: 1000; 3 | stroke-dashoffset: 0; 4 | } 5 | .circle { 6 | -webkit-animation: dash 2 ease-in-out; 7 | animation: dash 2 ease-in-out; 8 | } 9 | .line { 10 | stroke-dashoffset: 1000; 11 | -webkit-animation: dash 3s ease-in-out forwards; 12 | animation: dash 3s ease-in-out forwards; 13 | } 14 | .check { 15 | stroke-dashoffset: -100; 16 | -webkit-animation: dash-check 3s ease-in-out forwards; 17 | animation: dash-check 3s ease-in-out forwards; 18 | } 19 | .success { 20 | color: #1bb978; 21 | margin-top: 20px !important; 22 | } 23 | .error { 24 | color: #d06079; 25 | } 26 | 27 | @-webkit-keyframes dash { 28 | 0% { 29 | stroke-dashoffset: 1000; 30 | } 31 | 100% { 32 | stroke-dashoffset: 0; 33 | } 34 | } 35 | 36 | @keyframes dash { 37 | 0% { 38 | stroke-dashoffset: 1000; 39 | } 40 | 100% { 41 | stroke-dashoffset: 0; 42 | } 43 | } 44 | 45 | @-webkit-keyframes dash-check { 46 | 0% { 47 | stroke-dashoffset: -100; 48 | } 49 | 100% { 50 | stroke-dashoffset: 900; 51 | } 52 | } 53 | 54 | @keyframes dash-check { 55 | 0% { 56 | stroke-dashoffset: -100; 57 | } 58 | 100% { 59 | stroke-dashoffset: 900; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/style/classroomStyles.css: -------------------------------------------------------------------------------- 1 | .classroom__main__div { 2 | display: flex; 3 | } 4 | @media only screen and (max-width: 750px) { 5 | .classroom__main__div { 6 | display: flex; 7 | flex-direction: row-reverse; 8 | } 9 | .classroom__members { 10 | min-width: 250px !important; 11 | } 12 | } 13 | @media only screen and (max-width: 640px) { 14 | .classroom__main__div { 15 | display: flex; 16 | flex-direction: unset !important; 17 | flex-wrap: wrap; 18 | } 19 | .classroom__members { 20 | min-width: 100% !important; 21 | margin: 0 !important; 22 | } 23 | .classroom__dashboard { 24 | min-width: 100% !important; 25 | margin: 0 !important; 26 | margin-top: 50px !important; 27 | } 28 | } 29 | @media only screen and (max-width: 1470px) { 30 | .classroom__recent__games__finalists { 31 | width: 100% !important; 32 | } 33 | .classroom__recent__games__games { 34 | width: 100% !important; 35 | } 36 | } 37 | /*member-div*/ 38 | .classroom__members { 39 | display: flex; 40 | flex-direction: column; 41 | align-items: center; 42 | background-color: white; 43 | border: 2px solid black; 44 | box-shadow: 10px 10px 0 #262626; 45 | width: 18%; 46 | min-width: 350px; 47 | height: 1000px; 48 | margin: 10px; 49 | position: sticky; 50 | top: 0; 51 | } 52 | .classroom__members__title { 53 | margin: 10px !important; 54 | } 55 | .classroom__members__member { 56 | display: flex; 57 | flex-direction: row; 58 | align-items: center; 59 | background-color: white; 60 | border: 2px solid black; 61 | box-shadow: 5px 5px 0 #262626; 62 | padding: 10px; 63 | width: 90%; 64 | height: 75px; 65 | margin: 10px; 66 | } 67 | .classroom__members__member:hover { 68 | cursor: pointer; 69 | transition: all 0.2s ease; 70 | transform: scale(1.05); 71 | } 72 | .classroom__members__member > * { 73 | margin: 10px; 74 | } 75 | .classroom__members__member__img { 76 | width: 50px; 77 | height: 50px; 78 | border-radius: 50%; 79 | } 80 | .classroom__member__scroll__container { 81 | display: flex; 82 | flex-direction: column; 83 | align-items: center; 84 | overflow-y: auto; 85 | width: 100%; 86 | } 87 | .classroom__addmember__div { 88 | display: flex; 89 | flex-direction: column; 90 | position: absolute; 91 | top: 50%; 92 | left: 50%; 93 | transform: translate(-50%, -50%); 94 | align-items: center; 95 | background-color: white; 96 | border: 2px solid black; 97 | box-shadow: 10px 10px 0 #262626; 98 | padding: 30px; 99 | padding-top: 0 !important; 100 | width: 400px; 101 | z-index: 1000; 102 | height: auto; 103 | max-height: 500px; 104 | overflow-y: auto; 105 | } 106 | 107 | /*member-div*/ 108 | 109 | /*dashboard-div*/ 110 | .classroom__dashboard { 111 | display: flex; 112 | align-items: center; 113 | flex-direction: column; 114 | background-color: white; 115 | border: 2px solid black; 116 | box-shadow: 10px 10px 0 #262626; 117 | width: 75%; 118 | min-width: 350px; 119 | height: 1000px; 120 | margin: 10px; 121 | overflow-y: auto; 122 | } 123 | .classroom__dashboard__title { 124 | margin: 10px !important; 125 | } 126 | .classroom__banner__div { 127 | width: 100%; 128 | height: 500px; 129 | } 130 | .classroom__banner { 131 | width: 100%; 132 | height: 500px; 133 | } 134 | 135 | .classroom__hall__of__fame { 136 | display: flex; 137 | flex-direction: column; 138 | align-items: center; 139 | margin-top: 50px; 140 | width: 100%; 141 | } 142 | 143 | .classroom__reward__button__div { 144 | display: flex; 145 | align-items: center; 146 | justify-content: center; 147 | flex-direction: row; 148 | width: 80%; 149 | margin-top: 50px; 150 | } 151 | 152 | .classroom__hall__of__fame__card__container { 153 | width: 100%; 154 | display: flex; 155 | flex-wrap: wrap; 156 | justify-content: center; 157 | margin-bottom: 50px; 158 | } 159 | .classroom__hall__of__fame__card { 160 | width: 300px; 161 | height: 300px; 162 | background-color: white; 163 | border: 2px solid black; 164 | box-shadow: 10px 10px 0 #262626; 165 | margin: 25px; 166 | display: flex; 167 | align-items: center; 168 | justify-content: center; 169 | flex-direction: column; 170 | } 171 | .classroom__hall__of__fame__card:hover { 172 | cursor: pointer; 173 | transition: all 0.2s ease; 174 | transform: scale(1.05); 175 | } 176 | .classroom__hall__of__fame__card > * { 177 | margin: 5px; 178 | } 179 | .classroom__hall__of__fame__card__img { 180 | width: 125px !important; 181 | height: 125px !important; 182 | position: unset !important; 183 | } 184 | .classroom__hall__of__fame__card__rank { 185 | width: 75px; 186 | height: 75px; 187 | margin-bottom: -10px; 188 | margin-right: -190px; 189 | } 190 | .classroom__reward__date__container { 191 | display: flex; 192 | width: 80%; 193 | flex-direction: column; 194 | align-items: flex-start; 195 | } 196 | .classroom__recent__games { 197 | display: flex; 198 | flex-wrap: wrap; 199 | justify-content: center; 200 | margin-top: 50px; 201 | margin-bottom: 550px !important; 202 | width: 100%; 203 | height: 800px; 204 | } 205 | .classroom__recent__games__games { 206 | display: flex; 207 | align-items: center; 208 | flex-direction: column; 209 | background-color: white; 210 | border: 2px solid black; 211 | width: 620px; 212 | height: 680px; 213 | margin: 10px; 214 | overflow-y: auto; 215 | } 216 | .classroom__recent__games__container { 217 | display: flex; 218 | flex-wrap: wrap; 219 | justify-content: center; 220 | } 221 | .classroom__recent__games__game { 222 | display: flex; 223 | flex-direction: column; 224 | align-items: center; 225 | background-color: white; 226 | width: 360px; 227 | height: 550px; 228 | margin: 10px; 229 | border: 2px solid black; 230 | box-shadow: 5px 5px 0 #262626; 231 | min-width: 360px; 232 | overflow-x: hidden; 233 | overflow-y: auto; 234 | } 235 | .classroom__recent__games__game:hover { 236 | cursor: pointer; 237 | transition: all 0.2s ease; 238 | transform: scale(1.05); 239 | } 240 | .classroom__recent__games__finalists { 241 | display: flex; 242 | align-items: center; 243 | flex-direction: column; 244 | background-color: white; 245 | border: 2px solid black; 246 | width: 380px; 247 | height: 680px; 248 | margin: 10px; 249 | margin-bottom: 100px; 250 | overflow-y: auto; 251 | } 252 | .classroom__finalists { 253 | display: flex; 254 | flex-direction: column; 255 | align-items: center; 256 | width: 100%; 257 | } 258 | .classroom__finalists__card { 259 | display: flex; 260 | flex-direction: row; 261 | align-items: center; 262 | background-color: white; 263 | border: 2px solid black; 264 | box-shadow: 10px 10px 0 #262626; 265 | padding: 10px; 266 | width: 90%; 267 | height: 75px; 268 | margin: 10px; 269 | } 270 | .classroom__finalists__card > * { 271 | margin: 10px; 272 | } 273 | .classroom__finalists__card__img { 274 | width: 50px; 275 | height: 50px; 276 | border-radius: 50%; 277 | z-index: 0; 278 | } 279 | .classroom__finalist__card__rank { 280 | width: 50px; 281 | height: 50px; 282 | z-index: 0; 283 | } 284 | 285 | /*dashboard-div*/ 286 | -------------------------------------------------------------------------------- /src/style/countDownStyles.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | } 4 | .demo { 5 | position: fixed; 6 | left: 50%; 7 | top: 50%; 8 | width: 500px; 9 | height: 140px; 10 | margin-top: -70px; 11 | padding: 10px; 12 | border-radius: 20px; 13 | transform: translateX(-50%); 14 | z-index: 100; 15 | } 16 | .demo__colored-blocks { 17 | overflow: hidden; 18 | position: absolute; 19 | left: 50%; 20 | top: 0; 21 | width: 500px; 22 | height: 100%; 23 | margin-left: -250px; 24 | padding: 10px; 25 | border-radius: 20px; 26 | perspective: 1000px; 27 | animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite; 28 | } 29 | .demo__colored-blocks-rotater { 30 | position: absolute; 31 | left: 0; 32 | top: 0; 33 | width: 100%; 34 | height: 100%; 35 | border-radius: inherit; 36 | animation: rotation 1.3s linear infinite; 37 | } 38 | .demo__colored-blocks-inner { 39 | overflow: hidden; 40 | position: relative; 41 | height: 100%; 42 | background: #32386d; 43 | border-radius: inherit; 44 | } 45 | .demo__colored-block { 46 | position: absolute; 47 | left: 50%; 48 | top: 50%; 49 | width: 300%; 50 | height: 300%; 51 | transform-origin: 0 0; 52 | } 53 | .demo__colored-block:nth-child(1) { 54 | transform: rotate(0deg) skewX(-30deg); 55 | background-color: #fd3359; 56 | } 57 | .demo__colored-block:nth-child(2) { 58 | transform: rotate(120deg) skewX(-30deg); 59 | background-color: #f4d302; 60 | } 61 | .demo__colored-block:nth-child(3) { 62 | transform: rotate(240deg) skewX(-30deg); 63 | background-color: #21bdff; 64 | } 65 | .demo__inner { 66 | overflow: hidden; 67 | position: relative; 68 | width: 100%; 69 | height: 100%; 70 | } 71 | .demo__numbers { 72 | overflow: visible; 73 | position: absolute; 74 | left: 50%; 75 | top: 50%; 76 | width: 100px; 77 | height: 100px; 78 | margin-left: -50px; 79 | margin-top: -50px; 80 | } 81 | .demo__numbers-path { 82 | fill: none; 83 | stroke-width: 10px; 84 | stroke: #fff; 85 | stroke-linecap: round; 86 | stroke-linejoin: round; 87 | stroke-dasharray: 0, 518.055065155; 88 | stroke-dashoffset: 0; 89 | animation: numAnim 4s ease-in-out infinite; 90 | opacity: 0; 91 | } 92 | .demo__text { 93 | position: absolute; 94 | left: 50%; 95 | top: 0; 96 | width: 500px; 97 | height: 100%; 98 | margin-left: -250px; 99 | text-align: center; 100 | line-height: 140px; 101 | font-size: 100px; 102 | color: #fff; 103 | text-transform: uppercase; 104 | letter-spacing: 15px; 105 | transform: translateX(10px); 106 | animation: hideText 4s infinite; 107 | } 108 | @keyframes contAnim { 109 | 15%, 100% { 110 | margin-left: -250px; 111 | width: 500px; 112 | } 113 | 25%, 90% { 114 | margin-left: -70px; 115 | width: 140px; 116 | } 117 | } 118 | @keyframes numAnim { 119 | 15% { 120 | stroke-dasharray: 0, 518.055065155; 121 | stroke-dashoffset: 0; 122 | opacity: 0; 123 | } 124 | 25%, 41% { 125 | opacity: 1; 126 | stroke-dasharray: 144.4256591797, 518.055065155; 127 | stroke-dashoffset: -40; 128 | } 129 | 53%, 66% { 130 | stroke-dasharray: 136.0216217041, 518.055065155; 131 | stroke-dashoffset: -227.238697052; 132 | } 133 | 76% { 134 | stroke-dasharray: 113.4751205444, 518.055065155; 135 | stroke-dashoffset: -445.8995704651; 136 | } 137 | 88%, 100% { 138 | stroke-dasharray: 72.1554946899, 518.055065155; 139 | stroke-dashoffset: -445.8995704651; 140 | } 141 | 92% { 142 | opacity: 1; 143 | } 144 | 100% { 145 | opacity: 0; 146 | } 147 | } 148 | @keyframes rotation { 149 | to { 150 | transform: rotate(360deg); 151 | } 152 | } 153 | @keyframes demoAnim { 154 | 15% { 155 | border-radius: 20px; 156 | transform: rotate(0); 157 | } 158 | 30%, 43% { 159 | border-radius: 50%; 160 | transform: rotate(360deg); 161 | } 162 | 52%, 65% { 163 | border-radius: 0; 164 | transform: rotate(720deg); 165 | } 166 | 78%, 90% { 167 | border-radius: 50%; 168 | transform: rotate(1080deg); 169 | } 170 | 100% { 171 | border-radius: 20px; 172 | transform: rotate(1440deg); 173 | } 174 | } 175 | @keyframes hideText { 176 | 15%, 100% { 177 | opacity: 1; 178 | } 179 | 20%, 96% { 180 | opacity: 0; 181 | } 182 | } -------------------------------------------------------------------------------- /src/style/home.css: -------------------------------------------------------------------------------- 1 | .home-page-section-1 { 2 | padding: 50px; 3 | background-color: #ffffff; 4 | width: 100%; 5 | background-image: url("../img/HomeSection1Image.svg"); 6 | background-size: cover; 7 | } 8 | .home-page-section-1-content { 9 | display: flex; 10 | flex-direction: column; 11 | width: 100%; 12 | align-items: center; 13 | } 14 | .home-page-section-1-content-top { 15 | display: flex; 16 | flex-direction: column; 17 | flex: 50; 18 | text-align: left; 19 | padding: 25px; 20 | } 21 | .home-page-section-1-content-bottom { 22 | display: flex; 23 | flex-direction: column; 24 | flex: 50; 25 | padding: 25px; 26 | } 27 | .black-text { 28 | color: #000000; 29 | } 30 | 31 | .white-text { 32 | color: #ffffff; 33 | } 34 | 35 | .gradient-text { 36 | background: -webkit-linear-gradient(315deg, #f907fc 0%, #05d6d9 74%); 37 | -webkit-background-clip: text; 38 | -webkit-text-fill-color: transparent; 39 | font-weight: bold !important; 40 | } 41 | 42 | .home-page-section-1-content-top-text { 43 | margin-bottom: 30px; 44 | text-align: center; 45 | } 46 | 47 | .wave-stripe-1 { 48 | width: 100%; 49 | height: auto; 50 | margin-bottom: -12px; 51 | } 52 | 53 | .wave-stripe-2 { 54 | width: 100%; 55 | height: auto; 56 | margin-bottom: -12px; 57 | } 58 | 59 | .home-page-section-1-content-top-text-2 { 60 | margin-bottom: 30px; 61 | text-align: center; 62 | } 63 | 64 | .home-page-section-1-content-top-button-container { 65 | display: flex; 66 | flex-direction: row; 67 | justify-content: center; 68 | width: 100%; 69 | } 70 | 71 | .home-page-section-2 { 72 | padding: 50px; 73 | background-color: #193045; 74 | width: 100%; 75 | padding-top: 250px; 76 | padding-bottom: 250px; 77 | } 78 | .home-page-section-2-header { 79 | display: flex; 80 | justify-content: center; 81 | flex-direction: column; 82 | align-items: center; 83 | } 84 | 85 | .home-page-section-2-header-text { 86 | font-weight: bold; 87 | text-align: center; 88 | } 89 | .home-page-section-2-header-line { 90 | width: 100%; 91 | max-width: 450px; 92 | height: 2px; 93 | background-color: #6c63ff; 94 | border-radius: 2px; 95 | } 96 | 97 | .home-page-section-2-content-cards { 98 | display: flex; 99 | justify-content: space-around; 100 | width: 100%; 101 | align-items: center; 102 | flex-wrap: wrap; 103 | margin-top: 30px; 104 | margin-bottom: 30px; 105 | } 106 | 107 | .home-page-section-2-content-card { 108 | display: flex; 109 | flex-direction: column; 110 | justify-content: center; 111 | align-items: center; 112 | width: 320px; 113 | height: 320px; 114 | background-color: #ffffff; 115 | border-radius: 10px; 116 | margin: 10px; 117 | padding: 10px; 118 | } 119 | 120 | .home-page-section-2-content-card-image { 121 | max-width: 220px; 122 | max-height: 220px; 123 | } 124 | 125 | .home-page-section-2-content-card-text { 126 | font-weight: bold; 127 | text-align: center; 128 | color: #6c63ff; 129 | } 130 | 131 | .home-page-section-3 { 132 | padding-bottom: 50px; 133 | padding-top: 50px; 134 | background-color: #ffffff; 135 | width: 100%; 136 | } 137 | 138 | .home-page-section-3-header { 139 | display: flex; 140 | justify-content: center; 141 | flex-direction: column; 142 | align-items: center; 143 | } 144 | 145 | .home-page-section-3-header-line { 146 | width: 100%; 147 | max-width: 450px; 148 | height: 2px; 149 | background-color: #6c63ff; 150 | border-radius: 2px; 151 | } 152 | 153 | .home-page-section-3-card-wrapper { 154 | display: flex; 155 | flex-direction: column; 156 | flex-wrap: wrap; 157 | margin-top: 50px; 158 | } 159 | 160 | .home-page-section-3-card-wrapper-section { 161 | display: flex; 162 | flex-direction: row; 163 | flex-wrap: wrap; 164 | justify-content: space-evenly; 165 | margin-top: 100px; 166 | } 167 | 168 | .home-page-section-3-card-wrapper-section-card { 169 | width: 380px; 170 | height: auto; 171 | background-color: #ffffff; 172 | padding: 20px; 173 | border: 2px solid black; 174 | box-shadow: 10px 10px 0 #262626; 175 | } 176 | .home-page-section-3-card-wrapper-section-image { 177 | max-width: 320px; 178 | max-height: 320px; 179 | } 180 | 181 | .home-page-section-3-card-wrapper-section-card-header { 182 | text-align: left; 183 | } 184 | 185 | .home-page-section-3-card-wrapper-section-card-header-line { 186 | width: 100%; 187 | max-width: 320px; 188 | height: 2px; 189 | background-color: #6b63ff83; 190 | border-radius: 2px; 191 | } 192 | -------------------------------------------------------------------------------- /src/style/loginStyles.css: -------------------------------------------------------------------------------- 1 | .login-main-container { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: 100vh; 6 | width: 100%; 7 | } 8 | .login-component-container { 9 | background-color: white; 10 | height: auto; 11 | display: flex; 12 | align-items: center; 13 | flex-direction: column; 14 | box-shadow: 10px 10px 0px #262626; 15 | border: 2px solid black; 16 | padding: 20px; 17 | width: 100%; 18 | max-width: 600px; 19 | } 20 | .login-component-container-blank { 21 | height: auto; 22 | display: flex; 23 | align-items: center; 24 | flex-direction: column; 25 | padding: 50px; 26 | } 27 | .role__img__wrapper { 28 | display: flex; 29 | align-items: center; 30 | flex-wrap: wrap; 31 | justify-content: center; 32 | } 33 | 34 | .login-role-img { 35 | width: 250px; 36 | height: 250px; 37 | margin-bottom: 20px; 38 | } 39 | 40 | .role__img__card { 41 | margin: 20px; 42 | padding: 20px; 43 | border: 2px solid black; 44 | box-shadow: 5px 5px 0px #262626; 45 | width: 350px; 46 | height: 350px; 47 | background-color: white; 48 | } 49 | 50 | .role__img__card:hover { 51 | cursor: pointer; 52 | transform: scale(1.05); 53 | border: 2px solid #5d56e1; 54 | box-shadow: 5px 5px 0px #6c63ff; 55 | color: #6c63ff; 56 | } 57 | 58 | span { 59 | font-weight: bold; 60 | font-size: 18px; 61 | } 62 | 63 | .google-login-button { 64 | padding: 10px !important; 65 | } 66 | -------------------------------------------------------------------------------- /src/style/multigameRoom.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/style/multigameRoom.css -------------------------------------------------------------------------------- /src/style/nav.css: -------------------------------------------------------------------------------- 1 | nav { 2 | background: #4e54c8; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | height: 70px; 7 | width: 100%; 8 | z-index: 400; 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-between; 12 | flex-direction: row; 13 | margin-bottom: 30px !important; 14 | } 15 | 16 | .nav-left-section { 17 | display: flex; 18 | align-items: center; 19 | flex-direction: row; 20 | } 21 | .nav-right-section { 22 | display: flex; 23 | align-items: center; 24 | flex-direction: row; 25 | } 26 | 27 | .nav-left-links { 28 | margin-left: 10px; 29 | } 30 | 31 | .nav-left-link { 32 | margin-left: 20px; 33 | } 34 | 35 | .nav-right-links-login { 36 | margin-right: 10px; 37 | } 38 | 39 | .nav-right-icons { 40 | display: flex; 41 | align-items: center; 42 | flex-direction: row; 43 | width: 200px; 44 | justify-content: center; 45 | } 46 | .nav-right-icon { 47 | margin-right: 10px; 48 | color: white; 49 | } 50 | 51 | nav a { 52 | padding: 10px; 53 | display: initial; 54 | text-decoration: none; 55 | color: white; 56 | text-transform: lowercase; 57 | z-index: 1; 58 | font-size: 1.2rem; 59 | } 60 | 61 | a { 62 | text-decoration: none; 63 | color: initial; 64 | font-weight: inherit; 65 | } 66 | -------------------------------------------------------------------------------- /src/style/notificationStyles.css: -------------------------------------------------------------------------------- 1 | .notification__box{ 2 | box-shadow: 10px 10px 0 #262626; 3 | border: 2px solid black; 4 | background-color: white; 5 | display: flex; 6 | align-items: center; 7 | flex-direction: column; 8 | } 9 | .notification__header{ 10 | position: sticky; 11 | top: 0; 12 | } 13 | .notification__scroll__section{ 14 | overflow-y: auto; 15 | width: 95%; 16 | height: 400px; 17 | padding: 10px; 18 | } 19 | .notification__card{ 20 | box-shadow: 2px 2px 0 #262626; 21 | border: 1px solid black; 22 | background-color: white; 23 | display: flex; 24 | align-items: center; 25 | flex-direction: column; 26 | margin-bottom: 10px; 27 | padding: 2px; 28 | min-height: 60px; 29 | } 30 | 31 | .notification__card > * { 32 | margin: 10px; 33 | } 34 | 35 | .notification__card:hover { 36 | cursor: pointer; 37 | transition: all 0.2s ease; 38 | transform: scale(1.05); 39 | } -------------------------------------------------------------------------------- /src/style/playButtonAnimation.css: -------------------------------------------------------------------------------- 1 | /*Play*/ 2 | #dark2, 3 | #dark1, 4 | #light1 { 5 | transition: all 0.5s ease; 6 | } 7 | #dark2 { 8 | transform: translateX(-100%); 9 | } 10 | #playButtonSvg:hover #light1 { 11 | transform: translateX(20%); 12 | } 13 | 14 | #playButtonSvg:hover #dark1 { 15 | transform: translateX(40%); 16 | opacity: 0; 17 | } 18 | 19 | #playButtonSvg:hover #dark2 { 20 | transform: translateX(0%); 21 | } 22 | /*Close*/ 23 | #closeButtonSvg, 24 | #darkBar, 25 | #lightBar { 26 | transition: all 0.5s cubic-bezier(0.25, 0.1, 0, 1.33); 27 | } 28 | 29 | #closeButtonSvg { 30 | position: fixed; 31 | right: 0; 32 | top: 0; 33 | margin: 1vh; 34 | } 35 | 36 | #closeButtonSvg:hover { 37 | transform: rotate(134deg); 38 | } 39 | #closeButtonSvg:hover #darkBar { 40 | transform: rotate(180deg); 41 | } 42 | /*Share*/ 43 | #shareButtonSvg { 44 | position: fixed; 45 | right: 0; 46 | top: 80px; 47 | margin: 1vh; 48 | } 49 | -------------------------------------------------------------------------------- /src/style/podiumAnimation.css: -------------------------------------------------------------------------------- 1 | .podium-place-container{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: center; 5 | align-items: flex-end; 6 | margin-top: 200px; 7 | } 8 | #firstplacepodium{ 9 | transition: all 4.5s cubic-bezier(0, 0.02, 1, -0.60); 10 | margin: 10px; 11 | background-color: #FCC73E; 12 | width: 126px; 13 | height: 1px; 14 | border: 2px solid black; 15 | box-shadow: 10px 10px 0 #262626; 16 | } 17 | #secondplacepodium{ 18 | transition: all 2.5s cubic-bezier(0, 0.02, 1, -0.85); 19 | margin: 10px; 20 | background-color: #1594DB; 21 | width: 126px; 22 | height: 1px; 23 | border: 2px solid black; 24 | box-shadow: 10px 10px 0 #262626; 25 | } 26 | #thirdplacepodium{ 27 | transition: all 1s cubic-bezier(0, 0.02, 1, -0.85); 28 | margin: 10px; 29 | background-color: #CE3EE5; 30 | width: 126px; 31 | height: 1px; 32 | border: 2px solid black; 33 | box-shadow: 10px 10px 0 #262626; 34 | } 35 | 36 | #first-place-name{ 37 | opacity: 0; 38 | transition: all 4.5s cubic-bezier(0, 0.02, 1, -0.60); 39 | color: #fff; 40 | font-size: 1rem; 41 | margin-top: -20px; 42 | } 43 | #second-place-name{ 44 | opacity: 0; 45 | transition: all 2.5s cubic-bezier(0, 0.02, 1, -0.85); 46 | color: #fff; 47 | font-size: 1rem; 48 | margin-top: -20px; 49 | } 50 | #third-place-name{ 51 | opacity: 0; 52 | transition: all 1s cubic-bezier(0, 0.02, 1, -0.85); 53 | color: #fff; 54 | font-size: 1rem; 55 | margin-top: -20px; 56 | } -------------------------------------------------------------------------------- /src/style/profileStyles.css: -------------------------------------------------------------------------------- 1 | .profile-container { 2 | display: block; 3 | margin: 5px; 4 | } 5 | .profile-banner { 6 | background-image: url("../img/quizCoverPlaceholder.svg"); 7 | background-size: cover; 8 | background-repeat: no-repeat; 9 | width: 100%; 10 | height: 500px; 11 | border: 2px solid black; 12 | border-bottom: none; 13 | box-shadow: 10px 10px 0 #262626; 14 | } 15 | .profile-wrapper { 16 | background-color: white; 17 | width: 100%; 18 | box-shadow: 10px 10px 0 #262626; 19 | border: 2px solid black; 20 | border-top: none; 21 | } 22 | .profile-info-bar { 23 | display: flex; 24 | width: 100%; 25 | align-items: center; 26 | justify-content: center; 27 | background-color: white; 28 | } 29 | .profile-tabs-slider-container { 30 | display: flex; 31 | justify-content: center; 32 | width: 100%; 33 | } 34 | .profile-info-text { 35 | display: flex; 36 | } 37 | 38 | .profile-tab { 39 | background-color: white; 40 | width: 100%; 41 | height: 800px; 42 | margin-top: 30px; 43 | box-shadow: 10px 10px 0 #262626; 44 | border: 2px solid black; 45 | overflow-y: auto; 46 | } 47 | 48 | .profile-tab-quizzes { 49 | display: flex; 50 | flex-wrap: wrap; 51 | max-width: 100%; 52 | max-height: 800px; 53 | justify-content: center; 54 | } 55 | 56 | @media only screen and (max-width: 590px) { 57 | .profile-info-text > * { 58 | margin: 1vw; 59 | font-size: 1rem; 60 | } 61 | } 62 | @media only screen and (max-width: 600px) { 63 | .profile-info-text { 64 | flex-direction: column; 65 | } 66 | .profile-info-bar { 67 | flex-direction: column; 68 | } 69 | } 70 | @media only screen and (max-width: 350px) { 71 | .profile-info-bar { 72 | flex-direction: column; 73 | } 74 | } 75 | 76 | @media only screen and (max-width: 260px) { 77 | .profile-info-text > * { 78 | font-size: 0.8rem; 79 | } 80 | } 81 | 82 | .profile__class__card { 83 | display: flex; 84 | flex-direction: column; 85 | align-items: center; 86 | border: 2px solid black; 87 | box-shadow: 10px 10px 0 #262626; 88 | margin: 10px; 89 | min-width: 340px; 90 | min-height: 450px; 91 | height: auto; 92 | text-transform: capitalize; 93 | background-color: #ffffff; 94 | } 95 | 96 | .profile__class__card:hover { 97 | cursor: pointer; 98 | transition: all 0.2s ease; 99 | transform: scale(1.05); 100 | } 101 | 102 | @media only screen and (max-width: 400px) { 103 | .profile__class__card { 104 | margin: 0; 105 | } 106 | } 107 | 108 | .profile__user__classes { 109 | display: flex; 110 | flex-wrap: wrap; 111 | max-width: 100%; 112 | max-height: 800px; 113 | justify-content: center; 114 | } 115 | .profile__tab__emotes { 116 | display: flex; 117 | flex-wrap: wrap; 118 | width: 100%; 119 | justify-content: center; 120 | } 121 | .profile__emote__card { 122 | display: flex; 123 | flex-direction: column; 124 | align-items: center; 125 | background-color: white; 126 | padding: 25px; 127 | margin: 20px; 128 | font-size: 1.5rem; 129 | width: 250px; 130 | } 131 | .profile__emote__card:hover { 132 | transform: scale(1.05); 133 | cursor: pointer; 134 | } 135 | -------------------------------------------------------------------------------- /src/style/sharepopupStyles.css: -------------------------------------------------------------------------------- 1 | .share__popup__main__div{ 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | width: 380px; 6 | background-color: white; 7 | padding: 20px; 8 | border: 2px solid black; 9 | box-shadow: 10px 10px 0 #262626; 10 | } 11 | .share__popup__icon__div{ 12 | display: flex; 13 | flex-direction: row; 14 | justify-content: flex-start; 15 | align-items: flex-start; 16 | width: 100%; 17 | } 18 | 19 | .share__classroom__button__div{ 20 | display: flex; 21 | flex-direction: row; 22 | align-items: center; 23 | justify-content: center; 24 | width: 155px; 25 | background-color: #1BB978; 26 | padding: 5px; 27 | height: 28px; 28 | border-radius: 2px; 29 | } 30 | 31 | .share__classroom__button__div > *{ 32 | font-size: 12px !important; 33 | margin: 2px !important; 34 | color: white !important; 35 | font-weight: 500 !important; 36 | } -------------------------------------------------------------------------------- /src/style/viewQuizStyles.css: -------------------------------------------------------------------------------- 1 | .view__quiz__flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | width: 100%; 5 | height: auto; 6 | justify-content: space-evenly; 7 | } 8 | .view__quiz__content { 9 | width: 30%; 10 | min-width: 350px; 11 | background-color: white; 12 | height: 1000px; 13 | border: 2px solid black; 14 | box-shadow: 10px 10px 0px #262626; 15 | } 16 | .view__quiz__content__questions { 17 | background-color: white; 18 | width: 60%; 19 | min-width: 350px; 20 | height: 1000px; 21 | border: 2px solid black; 22 | box-shadow: 10px 10px 0px #262626; 23 | overflow-y: auto; 24 | } 25 | 26 | .view__quiz__content__question { 27 | border: 2px solid black; 28 | box-shadow: 10px 10px 0px #262626; 29 | color: #6976ea; 30 | background-color: white; 31 | width: auto; 32 | min-height: 2px; 33 | padding: 40px; 34 | margin: 40px; 35 | display: flex; 36 | align-items: center; 37 | justify-content: flex-start; 38 | flex-direction: column; 39 | } 40 | .view__quiz__content__question:hover { 41 | transform: scale(1.05); 42 | cursor: pointer; 43 | } 44 | 45 | @media only screen and (max-width: 890px) { 46 | .view__quiz__content { 47 | width: 100%; 48 | margin: 10px; 49 | } 50 | .view__quiz__content__questions { 51 | width: 100%; 52 | margin: 10px; 53 | } 54 | } 55 | 56 | p { 57 | text-align: left !important; 58 | font-size: 1.1rem; 59 | } 60 | -------------------------------------------------------------------------------- /src/video/gameroomvideogf.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/video/gameroomvideogf.gif -------------------------------------------------------------------------------- /src/video/hostvideogif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/video/hostvideogif.gif -------------------------------------------------------------------------------- /src/video/joinvideogf.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maksymalist/CONNECT/ba90a12feaa6c9477989338eddffeacedfbcb66a/src/video/joinvideogf.gif -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "esnext", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true, 9 | "lib": [ 10 | "dom", 11 | "dom.iterable", 12 | "esnext" 13 | ], 14 | "allowJs": true, 15 | "allowSyntheticDefaultImports": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src/**/*" 25 | ], 26 | "exclude": [ 27 | "node_modules" 28 | ], 29 | "files": [ 30 | "./src/react-app-env.d.ts" 31 | ] 32 | } 33 | --------------------------------------------------------------------------------