├── backend ├── .gitignore ├── middleware │ ├── not-found.js │ ├── uniquemail.js │ ├── auth.js │ └── error-handler.js ├── errors │ ├── custom-error.js │ ├── not-found.js │ ├── unauthenticated.js │ ├── index.js │ └── bad-request.js ├── routes │ ├── authr.js │ ├── game.js │ ├── mail-verification.js │ └── main.js ├── db │ ├── connect.js │ └── connect-main.js ├── models │ ├── model-main.js │ ├── checkifverify.js │ └── register.js ├── package.json ├── controllers │ ├── main.js │ ├── auth.js │ ├── login.js │ ├── savegame.js │ └── mailverification.js ├── public │ ├── login.html │ ├── index.html │ ├── browser-app.js │ ├── login-js.js │ ├── styles.css │ └── axios.js ├── app.js └── README.md ├── src ├── style │ ├── Homepage.css │ └── login-register.css ├── index.css ├── Assets │ ├── l1.png │ ├── l2.png │ ├── l3.jfif │ ├── l3.png │ ├── s1.png │ ├── s2.png │ ├── s3.png │ ├── s5.webp │ ├── board.jpeg │ ├── board.png │ └── source.gif ├── setupTests.js ├── App.test.js ├── index.js ├── reportWebVitals.js ├── views │ ├── Footer.jsx │ ├── sidebar.jsx │ ├── login.jsx │ ├── Profile.jsx │ ├── Header2.jsx │ ├── Winner.jsx │ ├── header.jsx │ ├── home.jsx │ ├── register.jsx │ ├── leftsidebar.jsx │ ├── rightsidebar.jsx │ └── Play.jsx ├── emailverification │ └── econfirm.jsx ├── App.js └── App.css ├── public ├── robots.txt ├── board.jpeg ├── favicon.ico ├── logo192.png ├── logo512.png ├── assets │ ├── ammo │ │ └── ammo.wasm.wasm │ └── themes │ │ └── default │ │ ├── normal.png │ │ ├── specular.jpg │ │ ├── diffuse-dark.png │ │ └── diffuse-light.png ├── manifest.json └── index.html ├── .gitignore ├── tailwind.config.js ├── package.json └── README.md /backend/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .env -------------------------------------------------------------------------------- /src/style/Homepage.css: -------------------------------------------------------------------------------- 1 | .centre2{ 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/board.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/board.jpeg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/Assets/l1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/l1.png -------------------------------------------------------------------------------- /src/Assets/l2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/l2.png -------------------------------------------------------------------------------- /src/Assets/l3.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/l3.jfif -------------------------------------------------------------------------------- /src/Assets/l3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/l3.png -------------------------------------------------------------------------------- /src/Assets/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/s1.png -------------------------------------------------------------------------------- /src/Assets/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/s2.png -------------------------------------------------------------------------------- /src/Assets/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/s3.png -------------------------------------------------------------------------------- /src/Assets/s5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/s5.webp -------------------------------------------------------------------------------- /src/Assets/board.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/board.jpeg -------------------------------------------------------------------------------- /src/Assets/board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/board.png -------------------------------------------------------------------------------- /src/Assets/source.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/src/Assets/source.gif -------------------------------------------------------------------------------- /public/assets/ammo/ammo.wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/assets/ammo/ammo.wasm.wasm -------------------------------------------------------------------------------- /backend/middleware/not-found.js: -------------------------------------------------------------------------------- 1 | const notFound = (req, res) => res.status(404).send('Route does not exist') 2 | 3 | module.exports = notFound 4 | -------------------------------------------------------------------------------- /public/assets/themes/default/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/assets/themes/default/normal.png -------------------------------------------------------------------------------- /public/assets/themes/default/specular.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/assets/themes/default/specular.jpg -------------------------------------------------------------------------------- /public/assets/themes/default/diffuse-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/assets/themes/default/diffuse-dark.png -------------------------------------------------------------------------------- /public/assets/themes/default/diffuse-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/snake-and-ladder/HEAD/public/assets/themes/default/diffuse-light.png -------------------------------------------------------------------------------- /backend/errors/custom-error.js: -------------------------------------------------------------------------------- 1 | class CustomAPIError extends Error { 2 | constructor(message) { 3 | super(message) 4 | } 5 | } 6 | 7 | module.exports = CustomAPIError 8 | -------------------------------------------------------------------------------- /backend/routes/authr.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const router = express.Router() 3 | const { mainPage } = require('../controllers/main') 4 | 5 | 6 | router.get('/:id', mainPage) 7 | module.exports = router -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /backend/db/connect.js: -------------------------------------------------------------------------------- 1 | const mongoose=require('mongoose') 2 | const connectDB=(url)=>{ 3 | return mongoose.connect(url,{ 4 | useNewUrlParser: true, 5 | useCreateIndex: true, 6 | useFindAndModify: false, 7 | useUnifiedTopology: true, 8 | }) 9 | } 10 | module.exports=connectDB -------------------------------------------------------------------------------- /backend/db/connect-main.js: -------------------------------------------------------------------------------- 1 | const mongoose=require('mongoose') 2 | const connectDBMain=(url)=>{ 3 | return mongoose.connect(url,{ 4 | useNewUrlParser: true, 5 | useCreateIndex: true, 6 | useFindAndModify: false, 7 | useUnifiedTopology: true, 8 | }) 9 | } 10 | module.exports=connectDBMain -------------------------------------------------------------------------------- /backend/routes/game.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const { savegame, loadgame, deletegame } = require("../controllers/savegame") 3 | const router = express.Router(); 4 | 5 | router.post('/', savegame) 6 | router.post('/loadgame', loadgame) 7 | router.post('/deletegame', deletegame) 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /backend/errors/not-found.js: -------------------------------------------------------------------------------- 1 | const {StatusCode, StatusCodes}=require('http-status-codes'); 2 | const CustomAPIError=require("./custom-error"); 3 | class NotFoundError extends CustomAPIError{ 4 | constructor(message){ 5 | super(message); 6 | this.StatusCode=StatusCodes.NOT_FOUND; 7 | } 8 | } 9 | module.exports=NotFoundError -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | ); 11 | 12 | reportWebVitals(); 13 | -------------------------------------------------------------------------------- /backend/errors/unauthenticated.js: -------------------------------------------------------------------------------- 1 | const {StatusCodes}=require('http-status-codes') 2 | const CustomAPIError=require("./custom-error") 3 | class UnauthenticatedError extends CustomAPIError{ 4 | constructor(message){ 5 | super(message); 6 | this.StatusCode=StatusCodes.UNAUTHORIZED; 7 | } 8 | } 9 | module.exports=UnauthenticatedError -------------------------------------------------------------------------------- /backend/errors/index.js: -------------------------------------------------------------------------------- 1 | const CustomAPIError=require('./custom-error') 2 | const UnauthenticatedError=require('./unauthenticated') 3 | const NotFoundError=require('./not-found') 4 | const BadRequestError=require('./bad-request') 5 | module.exports={ 6 | CustomAPIError, 7 | BadRequestError, 8 | NotFoundError, 9 | UnauthenticatedError 10 | } -------------------------------------------------------------------------------- /backend/errors/bad-request.js: -------------------------------------------------------------------------------- 1 | const {StatusCodes, METHOD_FAILURE} =require('http-status-codes') 2 | const CustomAPIError=require('./custom-error'); 3 | class BadRequestError extends CustomAPIError{ 4 | constructor(message){ 5 | super(message); 6 | this.StatusCode=StatusCodes.BAD_REQUEST; 7 | } 8 | } 9 | 10 | module.exports=BadRequestError; -------------------------------------------------------------------------------- /backend/routes/mail-verification.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const { report } =require('../controllers/mailverification') 3 | const { verifylink } =require('../controllers/mailverification') 4 | const router = express.Router(); 5 | 6 | router.post('/report', report) 7 | router.get('/report/:id/:email', verifylink ) 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /backend/routes/main.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const router = express.Router() 3 | const { register } = require('../controllers/auth') 4 | const { login } = require('../controllers/login') 5 | const { mainPage } = require('../controllers/main') 6 | const errorHandlerMiddleware = require('../middleware/uniquemail') 7 | 8 | 9 | router.post('/register', register) 10 | router.post('/login', login) 11 | module.exports = router -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/views/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Footer -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./public/**/*.{html,js}", 5 | "./src/**/*.{js,jsx,ts,tsx}", 6 | "./index.html", 7 | "./src/**/*.{ts,jsx,html,js}"], 8 | theme: { 9 | extend: {}, 10 | screens: { 11 | 'xxl':{'max':'1600px'}, 12 | 'xl': { 'max': '1200px' }, 13 | 'lg': { 'max': '991px' }, 14 | 'md': { 'max': '767px' }, 15 | 'sm': { 'max': '550px' }, 16 | 'xsm': { 'max': '357px' }, 17 | } 18 | }, 19 | plugins: [], 20 | } -------------------------------------------------------------------------------- /backend/models/model-main.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose') 2 | const UserSchema = new mongoose.Schema({ 3 | datat: { 4 | type: String 5 | }, 6 | data1: { 7 | type: String 8 | }, 9 | data2: { 10 | type: String 11 | }, 12 | data3: { 13 | type: String 14 | }, 15 | data4: { 16 | type: String 17 | }, 18 | data5: { 19 | type: String 20 | }, 21 | name: { 22 | type: String 23 | } 24 | }) 25 | module.exports = mongoose.model('mainData', UserSchema); 26 | -------------------------------------------------------------------------------- /backend/middleware/uniquemail.js: -------------------------------------------------------------------------------- 1 | const { StatusCodes } = require('http-status-codes') 2 | const User = require('../models/register'); 3 | const BadRequestError = require('../errors/bad-request.js') 4 | const errorHandlerMiddleware = (err, req, res, next) => { 5 | const bod = { ...req.body } 6 | User.findOne({ email: bod.email }, (err, data) => { 7 | if (err) { 8 | next() 9 | } 10 | else { 11 | return res.status(404).json({ msg: "Email already registered" }) 12 | } 13 | }) 14 | } 15 | module.exports = errorHandlerMiddleware -------------------------------------------------------------------------------- /src/views/sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import "../../src/App.css" 3 | const Sidebar1 = () => { 4 | const [show, cshow] = useState(false); 5 | return ( 6 | <> 7 |
cshow(false)}> 8 | 9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Sidebar1 -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /backend/models/checkifverify.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose') 2 | const bcrypt = require('bcryptjs') 3 | const jwt = require('jsonwebtoken') 4 | 5 | const UserSchema = new mongoose.Schema({ 6 | mail: { 7 | type: String, 8 | minlength: 3, 9 | }, 10 | isVerify: { 11 | type: Boolean, 12 | default:false, 13 | }, 14 | token:{ 15 | type:String, 16 | required:true, 17 | }, 18 | otp:{ 19 | type:Number, 20 | } 21 | }, 22 | { timestamps: true }) 23 | 24 | 25 | UserSchema.index({createdAt: 1},{expireAfterSeconds: 1800}); 26 | module.exports = mongoose.model('VerifyRegister', UserSchema); 27 | 28 | -------------------------------------------------------------------------------- /backend/middleware/auth.js: -------------------------------------------------------------------------------- 1 | const jwt = require('jsonwebtoken') 2 | const { unauthenticatederror } = require('../errors') 3 | const authenticationMiddleware = async (req, res, next) => { 4 | const authHeader = req.headers.authorization; 5 | if (!authHeader || !authHeader.startsWith('Bearer ')) { 6 | throw new unauthenticatederror('NO TOKEN PROVIDED') 7 | } 8 | const token = authHeader.split(' ')[1]; 9 | try { 10 | const decoded = jwt.verify(token, process.env.JWT_SECRET) 11 | const { id, username } = decoded 12 | const user = { id, username }; 13 | next() 14 | } catch (error) { 15 | throw new unauthenticatederror("YOU DO NOT HAVE ACCESS! TRY AGAIN .") 16 | } 17 | 18 | } -------------------------------------------------------------------------------- /src/emailverification/econfirm.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from "axios"; 3 | const Econfirm = () => { 4 | const notify = async () => { 5 | await axios.post("https://mail-senderv1api.onrender.com/api/v1/signup", { 6 | name: "Prashant", 7 | gmail: "Prashantthakran@gmail.com", 8 | content: "jhvhujv", 9 | subject: "jbbihb", 10 | }).then((res) => { 11 | console.log(res) 12 | }).catch((err) => { 13 | console.log(err); 14 | }) 15 | } 16 | return ( 17 | <> 18 |
{ notify(); }}> 19 | Your Email has been verified 20 |
21 | 22 | ) 23 | } 24 | 25 | export default Econfirm -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 4Snake and Ladder 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Home from './views/home'; 3 | import Login from './views/login'; 4 | import Leftbar from './views/leftsidebar'; 5 | import styles from "./index.css" 6 | import Sidebar1 from './views/sidebar'; 7 | import Rightsidebar from './views/rightsidebar'; 8 | import Econfirm from './emailverification/econfirm'; 9 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 10 | import React from 'react'; 11 | 12 | function App() { 13 | var [str,cstr]=React.useState(localStorage.getItem("Verified")) 14 | return ( 15 | 16 | 17 | :}> 18 | :}/> 19 | :}/> 20 | :}/> 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "06-jobs-api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "nodemon app.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "axios": "^1.2.4", 13 | "bcryptjs": "^2.4.3", 14 | "cors": "^2.8.5", 15 | "dotenv": "^10.0.0", 16 | "express": "^4.17.1", 17 | "express-async-errors": "^3.1.1", 18 | "express-rate-limit": "^5.3.0", 19 | "helmet": "^4.6.0", 20 | "http-status-codes": "^2.2.0", 21 | "joi": "^17.4.0", 22 | "jsonwebtoken": "^9.0.0", 23 | "mailgen": "^2.0.27", 24 | "mongoose": "^5.13.2", 25 | "nodemailer": "^6.9.3", 26 | "rate-limiter": "^0.2.0", 27 | "swagger-ui-express": "^4.1.6", 28 | "xss-clean": "^0.1.1", 29 | "yamljs": "^0.3.0" 30 | }, 31 | "devDependencies": { 32 | "nodemon": "^2.0.22" 33 | }, 34 | "engines": { 35 | "node": "14.x" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /backend/controllers/main.js: -------------------------------------------------------------------------------- 1 | const MainData=require('../models/model-main'); 2 | const User=require('../models/register'); 3 | const StatusCodes = require("http-status-codes"); 4 | 5 | const mainPage= async(req,res)=>{ 6 | try { 7 | const try1=await MainData.findOne({_id:"63d501ccfb9ce40840f8f683"}); 8 | const dataUser=await User.findOne({_id:req.params.id}) 9 | if(dataUser){ 10 | const {username,email,id,token}=dataUser 11 | res.status(201).send(`${try1.data1+dataUser._id+try1.data2+dataUser.username+try1.data3+dataUser.email+try1.data4+try1.data5}`) 12 | } 13 | else{ 14 | res.status(201).send("
") 15 | } 16 | } catch (error) { 17 | res.status(StatusCodes.OK).json({err:"Credentials Do Not Match"}) 18 | console.log(error) 19 | } 20 | } 21 | module.exports={mainPage} -------------------------------------------------------------------------------- /backend/controllers/auth.js: -------------------------------------------------------------------------------- 1 | const User = require('../models/register'); 2 | 3 | const StatusCodes = require("http-status-codes"); 4 | 5 | const register = async (req, res) => { 6 | const bod = { ...req.body } 7 | 8 | try { 9 | const Users = await User.create({ ...req.body }) 10 | const token = Users.createJWT() 11 | Users.token = token 12 | await Users.save(); 13 | console.log(9); 14 | res.status(201).json({ user: { name: Users.username, email: Users.email }, token, msg: "Suggesfully Registered" }); 15 | } catch (error) { 16 | if (User.findOne({ email: bod.mail })) { 17 | res.status(202).json({ Error: "Email already registered" }) 18 | // res.status(202).json({ Error: error }) 19 | console.log(error); 20 | } 21 | else { 22 | res.status(201).json({ Error: "Something went wrong" }) 23 | } 24 | } 25 | } 26 | 27 | module.exports = { 28 | register, 29 | } -------------------------------------------------------------------------------- /src/views/login.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../style/login-register.css" 3 | import Header from './header' 4 | import Register from './register'; 5 | const Login = () => { 6 | 7 | return ( 8 | <> 9 |
10 |
11 | 12 |
13 |
14 |
15 |
16 |
17 | 4Snake and Ladder 18 |
19 |
20 |
21 | 22 | 23 |
24 | 25 |
26 | 27 | @2021-2025 4Snake and Ladder Developed by 28 | Prashant 29 | 30 |
31 | 32 | ) 33 | } 34 | 35 | export default Login -------------------------------------------------------------------------------- /backend/controllers/login.js: -------------------------------------------------------------------------------- 1 | const User = require('../models/register'); 2 | const StatusCodes = require("http-status-codes"); 3 | 4 | const login = async (req, res) => { 5 | try { 6 | const body = { ...req.body } 7 | var data = {}; 8 | const { email, password } = req.body 9 | const user = await User.findOne({ email }) 10 | const isPasswordCorrect = await user.comparePassword(password) 11 | if (isPasswordCorrect) { 12 | const tokens = await User.findOne({ email }) 13 | if(user.verify===false){ 14 | return res.status(401).json({ msg:"PLEASE VERIFY YOUR EMAIL FIRST" }) 15 | } 16 | else{ 17 | return res.status(201).json({msg:"OK"}); 18 | } 19 | } 20 | else { 21 | res.status(StatusCodes.OK).json({ err: "Credentials do not match" }) 22 | } 23 | } catch (error) { 24 | res.status(StatusCodes.OK).json({ err: "Credentials Do Not Match" }) 25 | console.log("error") 26 | } 27 | } 28 | module.exports = { login } -------------------------------------------------------------------------------- /backend/middleware/error-handler.js: -------------------------------------------------------------------------------- 1 | const { StatusCodes } = require('http-status-codes') 2 | const errorHandlerMiddleware = (err, req, res, next) => { 3 | let customError = { 4 | // set default 5 | statusCode: err.statusCode || StatusCodes.INTERNAL_SERVER_ERROR, 6 | msg: err.message || 'Something went wrong try again later', 7 | } 8 | 9 | // if (err instanceof CustomAPIError) { 10 | // return res.status(err.statusCode).json({ msg: err.message }) 11 | // } 12 | 13 | if (err.name === 'ValidationError') { 14 | customError.msg = Object.values(err.errors) 15 | .map((item) => item.message) 16 | .join(',') 17 | customError.statusCode = 400 18 | } 19 | if (err.code && err.code === 11000) { 20 | customError.msg = `Duplicate value entered for ${Object.keys( 21 | err.keyValue 22 | )} field, please choose another value` 23 | customError.statusCode = 400 24 | } 25 | if (err.name === 'CastError') { 26 | customError.msg = `No item found with id : ${err.value}` 27 | customError.statusCode = 404 28 | } 29 | 30 | return res.status(customError.statusCode).json({ msg: customError.msg }) 31 | } 32 | 33 | module.exports = errorHandlerMiddleware 34 | -------------------------------------------------------------------------------- /src/views/Profile.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' 4 | import Header from "./Header2" 5 | import { CgProfile } from 'react-icons/cg' 6 | import { Chat } from 'stream-chat-react' 7 | import { StreamChat } from 'stream-chat' 8 | import { Cookies } from 'universal-cookie' 9 | import axios from 'axios' 10 | import { io } from 'socket.io'; 11 | const Profile = () => { 12 | 13 | const url = "https://foursnakeandladderapi.onrender.com/api/login" 14 | const help = async (e) => { 15 | e.preventDefault(); 16 | await axios({ 17 | method: "POST", 18 | url: url, 19 | data: { 20 | "name": "namedxdhb" 21 | } 22 | }) 23 | } 24 | return ( 25 | <> 26 |
27 |
28 |
29 |
30 | 31 |

32 | USER 33 |

34 |
35 | 39 | 40 |
41 |
42 |
43 |
44 | 45 | ) 46 | } 47 | 48 | export default Profile -------------------------------------------------------------------------------- /src/views/Header2.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaSignOutAlt } from 'react-icons/fa'; 3 | import { BsSearch, BsFillChatDotsFill } from 'react-icons/bs'; 4 | import { HiOutlinePencilSquare } from 'react-icons/hi2'; 5 | import { CgProfile } from 'react-icons/cg'; 6 | 7 | const Header = () => { 8 | return ( 9 |
10 |
11 | YourAPP 12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 | 32 | ) 33 | } 34 | 35 | export default Header -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projecth1", 3 | "version": "0.1.0", 4 | "proxy": "http://localhost:3001", 5 | "private": true, 6 | "dependencies": { 7 | "@3d-dice/dice-box": "^1.0.8", 8 | "@heroicons/react": "^2.0.18", 9 | "@mdbootstrap/react-side-navbar": "^1.0.0", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^1.4.0", 14 | "nodemailer": "^6.9.3", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-hot-toast": "^2.4.1", 18 | "react-icons": "^4.8.0", 19 | "react-minimal-side-navigation": "^1.9.2", 20 | "react-modal": "^3.16.1", 21 | "react-pro-sidebar": "^1.1.0-alpha.1", 22 | "react-scripts": "5.0.1", 23 | "react-toastify": "^5.5.0", 24 | "reactjs-popup": "^2.0.5", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "react-router-dom": "^6.11.2", 53 | "tailwindcss": "^3.3.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /backend/public/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Login 12 | 13 | 14 | 15 | 16 |
17 |
18 |
Register
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
there was an error
28 |
Password does not match
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/views/Winner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Modal from 'react-modal'; 3 | import source from "../Assets/source.gif" 4 | import { useEffect } from 'react'; 5 | 6 | const customStyles = { 7 | content: { 8 | top: '50%', 9 | left: '50%', 10 | right: 'auto', 11 | bottom: 'auto', 12 | marginRight: '-50%', 13 | transform: 'translate(-50%, -50%)', 14 | background: "black", 15 | 16 | }, 17 | }; 18 | 19 | 20 | const Winner = ({ opene, winn, cresult }) => { 21 | let subtitle; 22 | const [modalIsOpen, setIsOpen] = React.useState(false); 23 | 24 | React.useEffect(() => { 25 | setIsOpen(opene) 26 | 27 | }, [opene]); 28 | 29 | 30 | function afterOpenModal() { 31 | subtitle.style.color = '#f00'; 32 | } 33 | 34 | function closeModal() { 35 | setIsOpen(false); 36 | cresult(false); 37 | } 38 | return ( 39 | <> 40 |
41 | {/* */} 42 | 51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 | ) 59 | } 60 | 61 | export default Winner; -------------------------------------------------------------------------------- /backend/app.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config(); 2 | require('express-async-errors'); 3 | 4 | const express = require('express'); 5 | 6 | // FOR EXTRA SECURITY 7 | const helmet = require('helmet'); 8 | const cors=require("cors"); 9 | const xss=require("xss-clean"); 10 | const rateLimiter=require('express-rate-limit'); 11 | 12 | // DATABASE CONNECTION 13 | const connectDB=require("./db/connect"); 14 | const connectDBMain=require("./db/connect-main"); 15 | 16 | // ROUTES 17 | 18 | const registerRoute=require('./routes/main') 19 | const authRoute=require('./routes/authr') 20 | const mvarifyRoute=require("./routes/mail-verification") 21 | const savegame=require("./routes/game") 22 | // MIDDLE 23 | const app = express(); 24 | 25 | // ERROR HANDLER 26 | const notFoundMiddleware = require('./middleware/not-found'); 27 | const errorHandlerMiddleware = require('./middleware/error-handler'); 28 | 29 | app.set('trust proxy', 1); 30 | 31 | app.use(express.json()); 32 | app.use(helmet()); 33 | app.use(cors()); 34 | app.use(xss()); 35 | 36 | 37 | // middleware 38 | app.use(express.static('./public')); 39 | app.use(express.json()); 40 | 41 | // ROUTE USe 42 | app.use("/api/v1",registerRoute); 43 | app.use("/api/v1/login",authRoute); 44 | app.use("/api/v1/verify",mvarifyRoute) 45 | app.use("/api/v1/savegame",savegame) 46 | 47 | // app.use('/api/v1', mainRouter) 48 | 49 | // MIDDLEWARES USE 50 | app.use(notFoundMiddleware); 51 | app.use(errorHandlerMiddleware); 52 | 53 | const port = process.env.PORT || 3001; 54 | 55 | const start = async () => { 56 | try { 57 | await connectDB(process.env.MONGO_URI); 58 | await connectDBMain(process.env.MONGO_URI2); 59 | app.listen(port, () => 60 | console.log(`Server is listening on port ${port}...`) 61 | ); 62 | } catch (error) { 63 | console.log(error); 64 | } 65 | }; 66 | 67 | start(); 68 | -------------------------------------------------------------------------------- /src/style/login-register.css: -------------------------------------------------------------------------------- 1 | .grid-show { 2 | display: grid; 3 | grid-template: auto auto auto; 4 | } 5 | 6 | .white { 7 | color: white; 8 | } 9 | 10 | .big { 11 | font-size: 26px; 12 | } 13 | 14 | .from-input-login-main { 15 | background-color: rgb(51, 51, 51); 16 | border-radius: 3px; 17 | border: solid 1px rgb(133, 133, 133); 18 | height: 30px; 19 | padding-left: 4px; 20 | } 21 | 22 | .head { 23 | font-size: 30px; 24 | justify-content: center; 25 | text-align: left; 26 | } 27 | 28 | .align-centre { 29 | text-align: justify; 30 | 31 | } 32 | 33 | .centre { 34 | text-align: center; 35 | } 36 | 37 | .gridc { 38 | display: grid; 39 | grid-template-rows: auto auto; 40 | background-color: red; 41 | color: red; 42 | } 43 | 44 | .grid1 { 45 | grid-row: 2; 46 | } 47 | 48 | .grid2 { 49 | grid-row: 1; 50 | } 51 | 52 | label { 53 | margin-top: 10px; 54 | margin-bottom: 5px; 55 | margin-left: -5px; 56 | } 57 | 58 | .rform { 59 | background-color: aliceblue; 60 | padding-left: 3px; 61 | font-size: 18px; 62 | border-radius: 0.2rem; 63 | } 64 | 65 | .btnr { 66 | border-color: red; 67 | border: solid 1px rgb(4, 255, 108); 68 | transition: 500ms; 69 | 70 | } 71 | 72 | .btnr:hover { 73 | box-shadow: 10px; 74 | transform: scale(1.1); 75 | transition: 500ms; 76 | background-color: rgb(185, 232, 255); 77 | border-radius: 10px; 78 | } 79 | 80 | .grid21 { 81 | display: grid; 82 | grid-template-rows: auto auto; 83 | } 84 | 85 | @media screen and (min-width: 550px) { 86 | .shows { 87 | display: none; 88 | } 89 | } 90 | 91 | .mobilel { 92 | height: 100%; 93 | } 94 | 95 | .footer1 { 96 | text-align: center; 97 | color: black; 98 | opacity: 0.7; 99 | margin-bottom: 0px; 100 | } -------------------------------------------------------------------------------- /backend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Register 12 | 13 | 14 | 15 | 16 |
17 |
18 |
Register
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 |
36 |
there was an error
37 | 38 |
Password does not match
39 | 40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /backend/models/register.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose') 2 | const bcrypt = require('bcryptjs') 3 | const jwt = require('jsonwebtoken') 4 | 5 | const UserSchema = new mongoose.Schema({ 6 | username: { 7 | type: String, 8 | required: [true, "Please provide name"], 9 | minlength: 3, 10 | }, 11 | verify: { 12 | type: Boolean, 13 | default: false, 14 | }, 15 | email: { 16 | type: String, 17 | required: [true, 'Please provide Email'], 18 | match: [ 19 | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 20 | 'Please provide a valid email',], 21 | unique: [true, "Email already taken"], 22 | }, 23 | password: { 24 | type: String, 25 | required: [true, 'Please provide password'], 26 | minlength: [5, "Password Length should be more than 5"], 27 | }, 28 | token: { 29 | type: String, 30 | default: "" 31 | }, 32 | ispassword: { 33 | type: Boolean, 34 | default: false, 35 | }, 36 | saved: { 37 | type: String, 38 | default: "[]" 39 | } 40 | }, 41 | { timestamps: true }) 42 | 43 | UserSchema.pre('save', async function () { 44 | if (this.ispassword === false) { 45 | const salt = await bcrypt.genSalt(10) 46 | const passw = await bcrypt.hash(this.password, salt); 47 | this.password = passw 48 | } 49 | this.ispassword = true 50 | }) 51 | 52 | UserSchema.methods.createJWT = function () { 53 | const tokens = jwt.sign( 54 | { userId: this._id, name: this.name }, 55 | process.env.JWT_SECRET, 56 | { 57 | expiresIn: process.env.JWT_LIFETIME, 58 | } 59 | ) 60 | return ( 61 | tokens 62 | ) 63 | } 64 | 65 | UserSchema.methods.createHash = async function () { 66 | if (this.ispassword === false) { 67 | const salt = await bcrypt.genSalt(10) 68 | const passw = await bcrypt.hash(this.password, salt); 69 | this.password = passw 70 | } 71 | this.ispassword = true 72 | } 73 | 74 | UserSchema.methods.comparePassword = async function (canditatePassword) { 75 | var isMatch = await bcrypt.compare(canditatePassword, this.password) 76 | return isMatch 77 | } 78 | 79 | module.exports = mongoose.model('Register', UserSchema); 80 | 81 | -------------------------------------------------------------------------------- /src/views/header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import axios from "axios" 4 | import { ToastContainer, toast } from 'react-toastify'; 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | const Header = () => { 7 | 8 | var [lusername, changelu] = React.useState(""); 9 | var [lpassword, changelp] = React.useState(""); 10 | const signin = async (e) => { 11 | e.preventDefault() 12 | if (!lpassword || !lusername) { 13 | toast("All fields are necessary") 14 | return; 15 | } 16 | const reply = await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/login", { 17 | email: lusername, 18 | password: lpassword 19 | }).then((res) => { 20 | const msg = res.data.msg; 21 | if (msg === "OK") { 22 | localStorage.setItem("email", lusername); 23 | localStorage.setItem("Verified", true) 24 | localStorage.setItem("start", false) 25 | localStorage.setItem("slide1", 1) 26 | localStorage.setItem("fwd1", true) 27 | localStorage.setItem("fwd2", true) 28 | localStorage.setItem("fwd3", true) 29 | localStorage.setItem("fwd4", true) 30 | window.location.reload(); 31 | } 32 | else if (msg === "PLEASE VERIFY YOUR EMAIL FIRST") { 33 | toast(msg); 34 | } 35 | else { 36 | toast("Credentials do not match"); 37 | } 38 | }).catch((err) => { 39 | toast("AN ERROR OCCURRED"); 40 | }) 41 | } 42 | return ( 43 | <> 44 |
45 |
46 | 4Snake and Ladder 47 |
48 |
49 |
50 | changelu(lusername = e.target.value)} 55 | value={lusername} 56 | /> 57 | changelp(lpassword = e.target.value)} 62 | value={lpassword} 63 | /> 64 | 65 | 66 |
67 | 68 |
69 |
70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | export default Header -------------------------------------------------------------------------------- /backend/README.md: -------------------------------------------------------------------------------- 1 | # `Snake and Ladder Game Backend` 2 | 3 | This is the backend for the snake and ladder game application developed using Node.js, MongoDB, and Express.js. It provides various APIs for user authentication, sending emails, and game-related functionalities. 4 | 5 | ## Features 6 | 7 | ⚡ User Authentication: The backend supports user registration, login, and authentication using JWT (JSON Web Tokens).
8 | ⚡ Email Sending: Nodemailer is integrated to send emails for user authentication, password reset, and other notifications.
9 | ⚡ API Endpoints: The backend provides APIs for game actions, such as starting a new game, saving game progress, retrieving game data, etc.
10 | ⚡ Database Integration: MongoDB is used to store user data, game details, and other relevant information.
11 | ⚡ Security: The backend implements secure authentication mechanisms and handles data validation and sanitization.
12 | 13 | ## Technologies Used 14 | 15 | ⚡ Node.js: A JavaScript runtime environment for server-side development.
16 | ⚡ Express.js: A minimal and flexible web application framework for Node.js.
17 | ⚡ MongoDB: A NoSQL database used for data storage.
18 | ⚡ Nodemailer: A module for sending emails from Node.js applications.
19 | 20 | ## Installation and Setup 21 | 22 | 1. Clone the root repository: 23 | 24 | ```bash 25 | git clone https://github.com/prashant0664/snake-and-ladder.git 26 | 27 | 2. Navigate to the project directory: 28 | 29 | ```bash 30 | cd backend 31 | 32 | 3. Install the dependencies: 33 | 34 | ```bash 35 | npm install 36 | 37 | 4. Set up the environment variables: 38 | 39 | Create a .env file in the root directory.
40 | Define the required environment variables in the file, such as MongoDB connection details, email server credentials, etc. 41 | 42 | 5. Start the server: 43 | 44 | ```bash 45 | npm start 46 | 47 | 6. The backend API endpoints will be accessible at `http://localhost:3001`. 48 | 49 | ## Usage 50 | ⚡ Use the provided API documentation or explore the codebase to understand the available API endpoints and their functionalities.
51 | ⚡ Register a user account using the registration API endpoint.
52 | ⚡ Log in with the registered account using the login API endpoint.
53 | ⚡ Utilize the various game-related API endpoints to perform game actions, such as starting a new game, saving game progress, retrieving game data, etc.
54 | ⚡ Send emails for user authentication or any other relevant notifications using the email API endpoints.
55 | ⚡ Customize and extend the backend as per your specific game requirements.
56 | 57 | ## `Contributing` 58 | ⚡ Contributions to the project are welcome! If you find any bugs or want to add new features, please open an issue or submit a pull request. 59 | 60 | ## Contact 61 | For any inquiries or feedback, please contact: 62 | 63 | Prashant
64 | Email: `prashant201103@gmail.com`
65 | 66 | DEVELOPED AND CREATED BY PRASHANT [Profile](https://www.github.com/prashant0664) 67 | 68 | 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Snake and Ladder Game Website 3 | 4 | This is a Snake and Ladder Game website developed using Node.js, React.js, Express.js, and MongoDB. It provides a fully responsive and secure platform for users to play the game. Users can create an account, save their game progress, create new games, load saved games, and logout from the game. The website supports multiplayer functionality, allowing a maximum of 4 players to play together. 5 | 6 | ## Demo 7 | 8 | 9 | 10 | https://github.com/Prashant0664/snake-and-ladder/assets/98750053/2ffed578-2341-42ee-b1ef-faf871a4d2a3 11 | 12 | 13 | 14 | ## Features 15 | 16 | ✨ User Account Management: Users can create their accounts and log in to access the game.
17 | ✨ Game Progress: Users can save their game and resume it at a later time.
18 | ✨ Multiplayer: Up to 4 players can play the game together.
19 | ✨ Responsive Design: The website is designed to provide a seamless experience across different devices and screen sizes.
20 | ✨ Security: The website ensures secure authentication and data storage using encryption techniques.
21 | ✨ MongoDB Integration: MongoDB is used to store user account details and game progress.
22 | 23 | ## Technologies Used 24 | 25 | ✨ Node.js: A JavaScript runtime environment for server-side development.
26 | ✨ React.js: A JavaScript library for building user interfaces.
27 | ✨ Express.js: A minimal and flexible web application framework for Node.js.
28 | ✨ MongoDB: A NoSQL database used for data storage.
29 | ✨ HTML/CSS: Markup and styling for the website.
30 | ✨ JavaScript: Programming language used for client-side and server-side scripting.
31 | ✨ TailwindCSS: CSS framework to provides a comprehensive set of pre-built classes. 32 | 33 | ## Installation and Setup 34 | 35 | 1. Clone the repository: 36 | 37 | ```bash 38 | git clone https://github.com/prashant0664/snake-and-ladder.git 39 | 40 | 2. Navigate to the project directory: 41 | 42 | ```bash 43 | cd snake-and-ladder 44 | 45 | 3. Install the dependencies 46 | 47 | ```bash 48 | npm install 49 | 50 | 4. Set up the environment variables: 51 | 52 | Create a `.env` file in the root directory. 53 | Define the required environment variables in the file, such as MongoDB connection details, session secrets, etc. 54 | 55 | 5. Start the development server: 56 | 57 | ```bash 58 | npm start 59 | 60 | 6. Open your web browser and access the website at `http://localhost:3000` 61 | 62 | ## Usage 63 | 64 | ✨ Create a user account by registering on the website.
65 | ✨ Log in to your account.
66 | ✨ Start a new game or load a saved game.
67 | ✨ Play the Snake and Ladder game with up to 4 players.
68 | ✨ Save your game progress to resume it later.
69 | ✨ Log out from the game when you are done
70 | 71 | ## Contributing 72 | 73 | Contributions to the project are welcome! If you find any bugs or want to add new features, please open an issue or submit a pull request. 74 | 75 | ## Contact 76 | For any inquiries or feedback, please contact: 77 | 78 | Prashant
79 | Email: `prashant201103@gmail.com` 80 | 81 | ## Learn More 82 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 83 | 84 | To learn React, check out the [React documentation](https://reactjs.org/). 85 | -------------------------------------------------------------------------------- /backend/public/browser-app.js: -------------------------------------------------------------------------------- 1 | const emailInputDOM = document.querySelector('.email-input') 2 | const formDOM = document.querySelector('.form') 3 | const usernameInputDOM = document.querySelector('.username-input') 4 | const delte = document.querySelector('.contact-form') 5 | const passwordInputDOM = document.querySelector('.password-input') 6 | const mismatchalertDOM = document.querySelector('.mismatch-alert') 7 | const formAlertDOM = document.querySelector('.form-alert') 8 | const passwordInputDOM2 = document.querySelector('.password-input2') 9 | const resultDOM = document.querySelector('.result') 10 | const btnDOM = document.querySelector('#data') 11 | const tokenDOM = document.querySelector('.token') 12 | 13 | formDOM.addEventListener('submit', async (e) => { 14 | e.preventDefault() 15 | const username = usernameInputDOM.value 16 | const password2 = passwordInputDOM2.value 17 | const password = passwordInputDOM.value 18 | const email = emailInputDOM.value 19 | var list = [username, email, password] 20 | try { 21 | hjbhjnm = 0; 22 | if (password.length >= 5) { 23 | mismatchalertDOM.style.display = "none" 24 | 25 | if (!password || !username || !email) { 26 | setTimeout(() => { 27 | mismatchalertDOM.style.display = "block" 28 | mismatchalertDOM.innerHTML = "All fields are REQUIRED" 29 | }, 500); 30 | } 31 | else if (password == password2) { 32 | const { data } = await axios.post('/api/v1/register', { username, password, email }) 33 | if (data.msg) { 34 | setTimeout(() => { 35 | mismatchalertDOM.style.display = "block" 36 | mismatchalertDOM.innerHTML = data.msg 37 | }, 500); 38 | } 39 | setTimeout(() => { 40 | mismatchalertDOM.style.display = "none" 41 | }, 3000); 42 | if (data.Error) { 43 | if (data.Error == undefined) { } 44 | else { 45 | setTimeout(() => { 46 | mismatchalertDOM.style.display = "block" 47 | mismatchalertDOM.innerHTML = data.Error 48 | }, 500); 49 | } 50 | } 51 | } 52 | else { 53 | mismatchalertDOM.style.display = "block" 54 | setTimeout(() => { 55 | mismatchalertDOM.style.display = "none" 56 | }, 3000); 57 | } 58 | mismatchalertDOM.style.display = "none" 59 | } 60 | else { 61 | mismatchalertDOM.innerHTML = "Password Length should be more than 5" 62 | mismatchalertDOM.style.display = "block" 63 | setTimeout(() => { 64 | mismatchalertDOM.style.display = "none" 65 | }, 3000); 66 | } 67 | } catch (error) { 68 | console.log("An Error occurred--") 69 | console.log(error) 70 | const { data } = await axios.post('/api/v1/register', { username, email, password }) 71 | setTimeout(() => { 72 | mismatchalertDOM.style.display = "block" 73 | mismatchalertDOM.innerHTML = data.Error 74 | 75 | }, 500); 76 | setTimeout(() => { 77 | formAlertDOM.style.display = 'block' 78 | mismatchalertDOM.textContent = error.response.data.msg 79 | }, 3000); 80 | localStorage.removeItem('token') 81 | resultDOM.innerHTML = '' 82 | tokenDOM.textContent = 'no token present' 83 | tokenDOM.classList.remove('text-success') 84 | formAlertDOM.style.display = 'none' 85 | } 86 | } 87 | ) 88 | 89 | 90 | const password = passwordInputDOM.value -------------------------------------------------------------------------------- /src/views/home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import { AiTwotonePlusSquare, AiFillGitlab, AiTwotoneDownCircle, AiFillHeart } from "react-icons/ai" 4 | import Board from "../Assets/board.png" 5 | 6 | const Home = ({ p1, p2, p3, p4 }) => { 7 | var arr = []; 8 | var a1 = Array.from(Array(101).keys()) 9 | var a2 = Array.from(Array(101).keys()) 10 | var a3 = Array.from({ length: 101 }, (v, i) => i); 11 | arr[0] = 0; 12 | var gg = 100; 13 | for (var vv = 1; vv <= 100; vv++) { 14 | arr[vv] = 100 - vv + 1; 15 | arr[vv] = (gg + 1 - vv); 16 | } 17 | arr = arr.slice(1, 101); 18 | var to = 0; 19 | for (to = 10; to < 20; to += 1) { 20 | arr[to] = 70 + to + 1; 21 | } 22 | for (to = 30; to < 40; to += 1) { 23 | arr[to] = 30 + to + 1; 24 | arr[to + 20] = 10 + to + 1; 25 | arr[to + 40] = -10 + to + 1; 26 | arr[to + 60] = 0 + to - 29; 27 | } 28 | 29 | for (var ff = 0; ff < 100; ff += 1) { 30 | if (arr[ff + 1] % 2 == 0) { 31 | a1[ff] = 10; 32 | a2[ff] = 220; 33 | a3[ff] = 230; 34 | } 35 | else { 36 | a1[ff] = 180; 37 | a2[ff] = 220; 38 | a3[ff] = 125; 39 | } 40 | } 41 | for (var hh = 1; hh <= 5; hh += 2) { 42 | a1[(hh) * 10 - 1] = 0; 43 | a2[(hh) * 10 - 1] = 220; 44 | a3[(hh) * 10 - 1] = 230; 45 | a1[(hh + 1) * 10 - 1] = 180; 46 | a2[(hh + 1) * 10 - 1] = 220; 47 | a3[(hh + 1) * 10 - 1] = 125; 48 | } 49 | a1[79] = 180; 50 | a2[79] = 220; 51 | a3[79] = 125; 52 | 53 | a1[(hh) * 10 - 1] = 0; 54 | a2[(hh) * 10 - 1] = 220; 55 | a3[(hh) * 10 - 1] = 230; 56 | a1[89] = 0; 57 | a2[89] = 220; 58 | a3[89] = 230; 59 | 60 | return ( 61 |
62 |
63 |
64 | 65 | {arr.map((i, j) => { 66 | return ( 67 | <> 68 |
69 | 70 |

71 | {arr[j]} 72 |

73 | 74 | 75 |
77 | 78 | ) 79 | })} 80 |
81 |
82 |
83 | ) 84 | } 85 | 86 | export default Home; -------------------------------------------------------------------------------- /backend/public/login-js.js: -------------------------------------------------------------------------------- 1 | const emailInputDOM = document.querySelector('.email-input') 2 | const formDOM = document.querySelector('.form') 3 | const delte = document.querySelector('.contact-form') 4 | const passwordInputDOM = document.querySelector('.password-input') 5 | const mismatchalertDOM = document.querySelector('.mismatch-alert') 6 | const formAlertDOM = document.querySelector('.form-alert') 7 | const resultDOM = document.querySelector('.result') 8 | const btnDOM = document.querySelector('#data') 9 | const tokenDOM = document.querySelector('.token') 10 | 11 | formDOM.addEventListener('submit', async (e) => { 12 | e.preventDefault() 13 | const password = passwordInputDOM.value 14 | const email = emailInputDOM.value 15 | try { 16 | hjbhjnm = 0; 17 | if (password.length >= 5) { 18 | mismatchalertDOM.style.display = "none" 19 | 20 | if (!password || !email) { 21 | setTimeout(() => { 22 | mismatchalertDOM.style.display = "block" 23 | mismatchalertDOM.innerHTML = "All fields are REQUIRED" 24 | }, 500); 25 | setTimeout(() => { 26 | mismatchalertDOM.style.display = "none" 27 | }, 3000); 28 | } 29 | else if (password) { 30 | const { data } = await axios.post('/api/v1/login', { password, email }) 31 | if (data.token) { 32 | var starts = setTimeout(() => { 33 | mismatchalertDOM.style.display = "block" 34 | var ii = 10; 35 | mismatchalertDOM.innerHTML = `Your id is :${data.id}
You will be redirected to Main page in ${ii}s` 36 | var inter = setInterval(() => { 37 | mismatchalertDOM.style.display = "block" 38 | mismatchalertDOM.innerHTML = `Your id is :${data.id}
You will be redirected to Main page in ${ii}s` 39 | ii = ii - 1; 40 | if (ii < 0) { 41 | clearInterval(inter); 42 | window.location.href = `./api/v1/login/${data.id}`; 43 | } 44 | }, 1000) 45 | }, 500) 46 | starts; 47 | } 48 | if (data.err) { 49 | if (data.err == undefined) { } 50 | else { 51 | setTimeout(() => { 52 | mismatchalertDOM.style.display = "block" 53 | mismatchalertDOM.innerHTML = data.err 54 | }, 500); 55 | } 56 | } 57 | } 58 | else { 59 | mismatchalertDOM.style.display = "block" 60 | setTimeout(() => { 61 | mismatchalertDOM.style.display = "none" 62 | }, 3000); 63 | } 64 | mismatchalertDOM.style.display = "none" 65 | } 66 | else { 67 | 68 | mismatchalertDOM.innerHTML = "Password Length should be more than 5" 69 | mismatchalertDOM.style.display = "block" 70 | setTimeout(() => { 71 | mismatchalertDOM.style.display = "none" 72 | }, 3000); 73 | } 74 | } catch (error) { 75 | console.log("An Error occurred--") 76 | console.log(error) 77 | const { data } = await axios.post('/api/v1/login', { email, password }) 78 | // console.log(error.response) 79 | setTimeout(() => { 80 | mismatchalertDOM.style.display = "block" 81 | mismatchalertDOM.innerHTML = data.Error 82 | 83 | }, 500); 84 | setTimeout(() => { 85 | formAlertDOM.style.display = 'block' 86 | mismatchalertDOM.innerHTML = error.response.data.msg 87 | }, 3000); 88 | localStorage.removeItem('token') 89 | resultDOM.innerHTML = '' 90 | tokenDOM.textContent = 'no token present' 91 | tokenDOM.classList.remove('text-success') 92 | formAlertDOM.style.display = 'none' 93 | } 94 | } 95 | ) 96 | -------------------------------------------------------------------------------- /backend/controllers/savegame.js: -------------------------------------------------------------------------------- 1 | const User = require('../models/register'); 2 | 3 | const StatusCodes = require("http-status-codes"); 4 | 5 | const savegame = async (req, res) => { 6 | try { 7 | const bod = { ...req.body } 8 | var { n1, n2, n3, n4, name, email, slide1, fwd1, fwd2, fwd3, fwd4 } = bod; 9 | const user = await User.findOne({ email: email }); 10 | var str = user.saved; 11 | var str2 = "" 12 | if (str.length > 5) { 13 | 14 | str2 = `,{"name":"${name}","n1":${n1},"n2":${n2},"n3":${n3},"n4":${n4},"slide1":${slide1},"fwd4":${fwd4},"fwd1":${fwd1},"fwd3":${fwd3},"fwd2":${fwd2}}` 15 | } 16 | else { 17 | str2 = `{"name":"${name}","n1":${n1},"n2":${n2},"n3":${n3},"n4":${n4},"slide1":${slide1},"fwd4":${fwd4},"fwd1":${fwd1},"fwd3":${fwd3},"fwd2":${fwd2}}` 18 | } 19 | var str3 = str.substring(0, str.length - 1); 20 | str = str3 + str2 + "]"; 21 | user.saved = str; 22 | user.save(); 23 | return res.status(StatusCodes.OK).json({ msg: "Data Saved" }); 24 | } catch (error) { 25 | return res.status(401).json({ err: error }); 26 | } 27 | } 28 | const loadgame = async (req, res) => { 29 | const { email } = { ...req.body }; 30 | try { 31 | const user = await User.findOne({ email: email }); 32 | var str = user.saved; 33 | if (str.length <= 3) { 34 | return res.status(201).json({ name: "No sved game yet" }); 35 | } 36 | else { 37 | return res.status(200).json({ msg: str }); 38 | } 39 | } catch (error) { 40 | return res.status(401).json({ msg: error }) 41 | } 42 | } 43 | const deletegame = async (req, res) => { 44 | const { index, email } = { ...req.body }; 45 | try { 46 | const user = await User.findOne({ email: email }); 47 | var str = user.saved; 48 | var ei = 0; 49 | var eei = 0; 50 | var obj = JSON.parse(str); 51 | var nn = str.length; 52 | if (obj.length < index) { 53 | return res.status(201).json({ msg: "SUCCESS" }); 54 | } 55 | var str3 = ""; 56 | if (index === 0) { 57 | var mi = 0; 58 | for (let i = 0; i < str.length; i++) { 59 | if (str[i] === '{') { 60 | if (mi === index) { 61 | break; 62 | } 63 | mi++; 64 | } 65 | ei++; 66 | } 67 | 68 | for (let j = ei; j < str.length; j++) { 69 | eei = j; 70 | if (str[j] === '}') { 71 | break; 72 | } 73 | } 74 | var str2 = str.slice(0, ei) + str.slice(eei + 2, nn); 75 | str3 = str2; 76 | } 77 | else if (index === obj.length - 1) { 78 | var mi = 0; 79 | for (let i = 0; i < str.length; i++) { 80 | if (str[i] === '{') { 81 | if (mi === index) { 82 | break; 83 | } 84 | mi++; 85 | } 86 | ei++; 87 | } 88 | 89 | for (let j = ei; j < str.length; j++) { 90 | eei = j; 91 | if (str[j] === '}') { 92 | break; 93 | } 94 | } 95 | var str2 = str.slice(0, ei - 1) + str.slice(eei + 3, nn - 1); 96 | str2 += ']'; 97 | str3 = str2; 98 | 99 | } 100 | else { 101 | var mi = 0; 102 | for (let i = 0; i < str.length; i++) { 103 | if (str[i] === '{') { 104 | if (mi === index) { 105 | break; 106 | } 107 | mi++; 108 | } 109 | ei++; 110 | } 111 | 112 | for (let j = ei; j < str.length; j++) { 113 | eei = j; 114 | if (str[j] === '}') { 115 | break; 116 | } 117 | } 118 | var str2 = str.slice(0, ei + 1) + str.slice(eei + 3, nn); 119 | str3 = str2; 120 | } 121 | if (str3.length <= 3) { 122 | str3 = "[]"; 123 | } 124 | var ss = user.saved; 125 | user.saved = str3; 126 | user.save(); 127 | return res.status(200).json({ msg: "Deleted Successfully" }); 128 | } catch (error) { 129 | console.log(99999) 130 | return res.status(401).json({ msg: error }) 131 | } 132 | } 133 | 134 | module.exports = { 135 | savegame, loadgame, deletegame 136 | } 137 | -------------------------------------------------------------------------------- /backend/controllers/mailverification.js: -------------------------------------------------------------------------------- 1 | const nodemailer = require("nodemailer"); 2 | const User = require('../models/checkifverify'); 3 | const UserR = require('../models/register'); 4 | const axios=require("axios"); 5 | const StatusCodes = require("http-status-codes"); 6 | 7 | require('dotenv').config(); 8 | 9 | 10 | const Mailgen = require('mailgen'); 11 | 12 | const report = async (req, res) => { 13 | const { email, name, password } = req.body; 14 | var str = ""; 15 | for (let i = 0; i < 15; i++) { 16 | const ch = Math.floor((Math.random() * 10) + 1) 17 | str += ch; 18 | } 19 | try { 20 | try { 21 | const uu = await UserR.findOne({ email: email }); 22 | if (!uu) { 23 | const Users = await UserR.create({ 24 | username: name, 25 | email: email, 26 | password: password, 27 | }) 28 | const token = Users.createJWT() 29 | Users.token = token 30 | await Users.save(); 31 | } 32 | else { 33 | if (uu.verify === true) { 34 | return res.status(401).json({ msg: true }); 35 | } 36 | else { 37 | await UserR.deleteOne({email:email}); 38 | var Users = await UserR.create({ 39 | username: name, 40 | email: email, 41 | password: password, 42 | }) 43 | const token = Users.createJWT() 44 | Users.token = token 45 | await Users.save(); 46 | } 47 | } 48 | } catch (error) { 49 | res.status(401).json({ msg: error }) 50 | } 51 | try { 52 | var Users2 = await User.findOne({ mail: email }) 53 | if(!Users2){ 54 | Users2 = await User.create({ mail: email, token: str }) 55 | } 56 | else{ 57 | mail = email; 58 | token = str; 59 | isVerify = false; 60 | Users2.save(); 61 | 62 | } 63 | } catch (error) { 64 | console.log(error) 65 | return res.json({msg:"ERROR: Please TRY AGAIN LATER"}); 66 | } 67 | let config = { 68 | service: "gmail", 69 | auth: { 70 | user: process.env.MAIL, 71 | pass: process.env.PASS 72 | } 73 | } 74 | let transporter = nodemailer.createTransport(config) 75 | let Mailgen2 = new Mailgen({ 76 | theme: "default", 77 | product: { 78 | name: "Email Verification", 79 | link: "https://github.com/Prashant0664" 80 | } 81 | }) 82 | let response = { 83 | body: { 84 | intro: `Click here to verify your mail
https://foursnakeandladderapi.onrender.com/api/v1/verify/report/${str} `, 85 | outro: "Thank You for Using Our Services" 86 | } 87 | } 88 | let msil = Mailgen2.generate(response) 89 | let message = { 90 | from: process.env.MAIL, 91 | to: email, 92 | subject: "Email verification 4snake and ladders", 93 | html: msil, 94 | } 95 | transporter.sendMail(message).then(() => { 96 | return res.status(201).json({ datas: "MAIL SENT SUCCESSFULLY" }) 97 | }).catch((err) => { 98 | return res.status(201).json({ "ERROR": "SOMETHING WENT WRONG! PLEASE RECHECK YOUR CREDENTIALS" }) 99 | }) 100 | 101 | 102 | 103 | } catch (error) { 104 | console.log(error); 105 | return res.status(401).json({ msg: "An error occurred, Please Try Again Later" }) 106 | } 107 | } 108 | 109 | const verifylink = async (req, res) => { 110 | const id = req.params.id 111 | const email = req.params.email 112 | try { 113 | 114 | await User.find({ token: id }, async (err, docs) => { 115 | if (err) { 116 | console.log(err); 117 | } 118 | else { 119 | await User.updateOne({ token: id }, { isVerify: true }) 120 | const user1 = UserR.findOne({ email: email }) 121 | await user1.updateOne({ email: email }, { verify: true }) 122 | return res.status(201).end("Successfully Verified") 123 | } 124 | } 125 | ) 126 | 127 | } catch (error) { 128 | console.log(error) 129 | return res.status(401).json({ msg: "Failed to verify" }) 130 | } 131 | 132 | } 133 | module.exports = { report, verifylink }; 134 | -------------------------------------------------------------------------------- /backend/public/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | /* fonts */ 8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap'); 9 | 10 | html { 11 | font-size: 100%; 12 | } 13 | 14 | /*16px*/ 15 | 16 | :root { 17 | /* colors */ 18 | --primary-100: #e2e0ff; 19 | --primary-200: #c1beff; 20 | --primary-300: #a29dff; 21 | --primary-400: #837dff; 22 | --primary-500: #645cff; 23 | --primary-600: #504acc; 24 | --primary-700: #3c3799; 25 | --primary-800: #282566; 26 | --primary-900: #141233; 27 | 28 | /* grey */ 29 | --grey-50: #f8fafc; 30 | --grey-100: #f1f5f9; 31 | --grey-200: #e2e8f0; 32 | --grey-300: #cbd5e1; 33 | --grey-400: #94a3b8; 34 | --grey-500: #64748b; 35 | --grey-600: #475569; 36 | --grey-700: #334155; 37 | --grey-800: #1e293b; 38 | --grey-900: #0f172a; 39 | /* rest of the colors */ 40 | --black: #222; 41 | --white: #fff; 42 | --red-light: #f8d7da; 43 | --red-dark: #842029; 44 | --green-light: #d1e7dd; 45 | --green-dark: #0f5132; 46 | 47 | /* fonts */ 48 | --headingFont: 'Roboto', sans-serif; 49 | --bodyFont: 'Nunito', sans-serif; 50 | --smallText: 0.7em; 51 | /* rest of the vars */ 52 | --backgroundColor: var(--grey-50); 53 | --textColor: var(--grey-900); 54 | --borderRadius: 0.25rem; 55 | --letterSpacing: 1px; 56 | --transition: 0.3s ease-in-out all; 57 | --max-width: 1120px; 58 | --fixed-width: 600px; 59 | 60 | /* box shadow*/ 61 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 62 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 63 | 0 2px 4px -1px rgba(0, 0, 0, 0.06); 64 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 65 | 0 4px 6px -2px rgba(0, 0, 0, 0.05); 66 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 67 | 0 10px 10px -5px rgba(0, 0, 0, 0.04); 68 | } 69 | 70 | body { 71 | background: var(--backgroundColor); 72 | font-family: var(--bodyFont); 73 | font-weight: 400; 74 | line-height: 1.75; 75 | color: var(--textColor); 76 | } 77 | 78 | p { 79 | margin-bottom: 1.5rem; 80 | max-width: 40em; 81 | } 82 | 83 | h1, 84 | h2, 85 | h3, 86 | h4, 87 | h5 { 88 | margin: 0; 89 | margin-bottom: 1.38rem; 90 | font-family: var(--headingFont); 91 | font-weight: 400; 92 | line-height: 1.3; 93 | text-transform: capitalize; 94 | letter-spacing: var(--letterSpacing); 95 | } 96 | 97 | h1 { 98 | margin-top: 0; 99 | font-size: 3.052rem; 100 | } 101 | 102 | h2 { 103 | font-size: 2.441rem; 104 | } 105 | 106 | h3 { 107 | font-size: 1.953rem; 108 | } 109 | 110 | h4 { 111 | font-size: 1.563rem; 112 | } 113 | 114 | h5 { 115 | font-size: 1.25rem; 116 | } 117 | 118 | small, 119 | .text-small { 120 | font-size: var(--smallText); 121 | } 122 | 123 | a { 124 | text-decoration: none; 125 | } 126 | 127 | ul { 128 | list-style-type: none; 129 | padding: 0; 130 | } 131 | 132 | .img { 133 | width: 100%; 134 | display: block; 135 | object-fit: cover; 136 | } 137 | 138 | /* buttons */ 139 | 140 | .btn { 141 | cursor: pointer; 142 | color: var(--white); 143 | background: var(--primary-500); 144 | border: transparent; 145 | border-radius: var(--borderRadius); 146 | letter-spacing: var(--letterSpacing); 147 | padding: 0.375rem 0.75rem; 148 | box-shadow: var(--shadow-1); 149 | transition: var(--transtion); 150 | text-transform: capitalize; 151 | display: inline-block; 152 | } 153 | 154 | .btn:hover { 155 | background: var(--primary-700); 156 | box-shadow: var(--shadow-3); 157 | } 158 | 159 | .btn-hipster { 160 | color: var(--primary-500); 161 | background: var(--primary-200); 162 | } 163 | 164 | .btn-hipster:hover { 165 | color: var(--primary-200); 166 | background: var(--primary-700); 167 | } 168 | 169 | .btn-block { 170 | width: 100%; 171 | } 172 | 173 | /* alerts */ 174 | .alert { 175 | padding: 0.375rem 0.75rem; 176 | margin-bottom: 1rem; 177 | border-color: transparent; 178 | border-radius: var(--borderRadius); 179 | } 180 | 181 | .alert-danger { 182 | color: var(--red-dark); 183 | background: var(--red-light); 184 | } 185 | 186 | .alert-success { 187 | color: var(--green-dark); 188 | background: var(--green-light); 189 | } 190 | 191 | /* form */ 192 | 193 | .form { 194 | width: 90vw; 195 | max-width: var(--fixed-width); 196 | background: var(--white); 197 | border-radius: var(--borderRadius); 198 | box-shadow: var(--shadow-2); 199 | padding: 2rem 2.5rem; 200 | margin: 3rem auto; 201 | } 202 | 203 | .form-label { 204 | display: block; 205 | font-size: var(--smallText); 206 | margin-bottom: 0.5rem; 207 | text-transform: capitalize; 208 | letter-spacing: var(--letterSpacing); 209 | } 210 | 211 | .form-input, 212 | .form-textarea { 213 | width: 100%; 214 | padding: 0.375rem 0.75rem; 215 | border-radius: var(--borderRadius); 216 | background: var(--backgroundColor); 217 | border: 1px solid var(--grey-200); 218 | } 219 | 220 | .form-row { 221 | margin-bottom: 1rem; 222 | } 223 | 224 | .form-textarea { 225 | height: 7rem; 226 | } 227 | 228 | ::placeholder { 229 | font-family: inherit; 230 | color: var(--grey-400); 231 | } 232 | 233 | .form-alert { 234 | color: var(--red-dark); 235 | letter-spacing: var(--letterSpacing); 236 | text-transform: capitalize; 237 | text-align: center; 238 | margin-bottom: 0.5rem; 239 | display: none; 240 | } 241 | 242 | /* alert */ 243 | 244 | @keyframes spinner { 245 | to { 246 | transform: rotate(360deg); 247 | } 248 | } 249 | 250 | .loading { 251 | width: 6rem; 252 | height: 6rem; 253 | border: 5px solid var(--grey-400); 254 | border-radius: 50%; 255 | border-top-color: var(--primary-500); 256 | animation: spinner 0.6s linear infinite; 257 | } 258 | 259 | .loading { 260 | margin: 0 auto; 261 | } 262 | 263 | /* title */ 264 | 265 | .title { 266 | text-align: center; 267 | } 268 | 269 | .title-underline { 270 | background: var(--primary-500); 271 | width: 7rem; 272 | height: 0.25rem; 273 | margin: 0 auto; 274 | margin-top: -1rem; 275 | } 276 | 277 | /* */ 278 | .contact-form { 279 | max-width: 400px; 280 | } 281 | 282 | .contact-form h5 { 283 | text-align: center; 284 | } 285 | 286 | .container { 287 | width: 90vw; 288 | max-width: 400px; 289 | margin: 3rem auto; 290 | } 291 | 292 | .container>h4 { 293 | text-align: center; 294 | margin-bottom: 0; 295 | } 296 | 297 | .token { 298 | color: var(--red-dark); 299 | font-size: var(--smallText); 300 | text-align: center; 301 | margin-top: 0; 302 | text-transform: capitalize; 303 | } 304 | 305 | .result { 306 | background: var(--white); 307 | border-radius: var(--borderRadius); 308 | padding: 2rem 2.5rem; 309 | margin-bottom: 2rem; 310 | } 311 | 312 | .result>p { 313 | margin: 0; 314 | } 315 | 316 | .text-success { 317 | color: var(--green-dark); 318 | } 319 | 320 | .login-ask { 321 | color: blue; 322 | text-decoration: none; 323 | font-size: 12px; 324 | text-align: center; 325 | } 326 | 327 | .mismatch-alert { 328 | display: none; 329 | color: red; 330 | font-size: 12; 331 | text-align: center; 332 | } -------------------------------------------------------------------------------- /src/views/register.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import axios from "axios" 3 | import { ToastContainer, toast } from 'react-toastify'; 4 | import 'react-toastify/dist/ReactToastify.css'; 5 | const Register = () => { 6 | var [rpassword, changerp] = React.useState(""); 7 | var [rname, changern] = React.useState(""); 8 | var [rpassword2, changerp2] = React.useState(""); 9 | var [rm, changerm] = React.useState(""); 10 | var [rpassword3, changerp23] = React.useState(""); 11 | var [rm3, changerm3] = React.useState(""); 12 | var [showdd, showd] = React.useState(true); 13 | const signin = async () => { 14 | if (!rpassword3 || !rm3) { 15 | toast("All fields are necessary") 16 | return; 17 | } 18 | const reply = await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/login", { 19 | email: rm3, 20 | password: rpassword3 21 | }).then((res) => { 22 | const msg = res.data.msg; 23 | if (msg === "OK") { 24 | localStorage.setItem("email", rm3); 25 | localStorage.setItem("Verified", true) 26 | localStorage.setItem("start", false) 27 | localStorage.setItem("slide1", 1) 28 | 29 | localStorage.setItem("fwd1", true); 30 | localStorage.setItem("fwd2", true); 31 | localStorage.setItem("fwd3", true); 32 | localStorage.setItem("fwd4", true); 33 | localStorage.setItem("n1", 0); 34 | localStorage.setItem("n2", 0); 35 | localStorage.setItem("n3", 0); 36 | localStorage.setItem("n4", 0); 37 | window.location.reload(); 38 | } 39 | else if (msg === "PLEASE VERIFY YOUR EMAIL FIRST") { 40 | toast(msg); 41 | } 42 | else { 43 | toast("Credentials do not match"); 44 | } 45 | }).catch((err) => { 46 | toast("AN ERROR OCCURRED"); 47 | }) 48 | window.location.reload(); 49 | } 50 | 51 | const notify = async () => { 52 | if (!rpassword || !rpassword2 || !rm || !rname) { 53 | toast("All fields are necessary") 54 | return; 55 | } 56 | if (rpassword != rpassword2) { 57 | toast("Password do not match"); 58 | return; 59 | } 60 | await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/verify/report", { 61 | email: rm, 62 | name: rname, 63 | password: rpassword 64 | }) 65 | .then((res) => { 66 | if (res.data.msg && res.data.msg === "Already Registered") { 67 | toast("ALREADY REGISTERED") 68 | return; 69 | } 70 | else { 71 | toast(`Verify Your Mail....${res.data.datas}`) 72 | } 73 | }) 74 | .catch((err) => { 75 | if (err.response.data.msg === true) { 76 | toast("ALREADY REGISTERED") 77 | return; 78 | } 79 | toast(`An Error Occurred, Please Try Again Later`) 80 | }) 81 | }; 82 | 83 | return ( 84 | <> 85 |
86 |
87 |

88 | General Instructions 89 |

90 |
91 |
    92 |
  • 93 | A player can only initiate the game when "1" come on die 94 |
    • 95 |
  • 96 | If you get "6" on the die then you willl get one more chance 97 |
    • 98 |
  • 99 | To Finish the game, player have to reach 100 and then again come back to 0(home) 100 |
    • 101 |
  • 102 | Player to reach the home again will win the game 103 |
    • 104 |
  • 105 | Tip: Player can climb the ladder and snake can eat the player 106 |
    • 107 |
108 |
109 |
110 |
111 |
112 | 113 | { changern(rname = e.target.value) }} 119 | /> 120 | 121 | { changerm(rm = e.target.value) }} 127 | /> 128 | 129 | { changerp(rpassword = e.target.value) }} 135 | /> 136 | 137 | { changerp2(rpassword2 = e.target.value) }} 142 | type="password" 143 | /> 144 | 145 |
146 |
147 | 150 | changerm3(e.target.value)} 156 | value={rm3} 157 | /> 158 | 161 | { changerp23(e.target.value) }} 166 | value={rpassword3} 167 | /> 168 | 169 |
170 |
171 |

showd(showdd = false)}> 172 | Already Registered? Login Here 173 |

174 |

showd(showdd = true)}> 175 | Not registered yet? Register Here! 176 |

177 |
178 |
179 | 180 |
181 | 182 | 183 | 184 | ) 185 | } 186 | 187 | export default Register -------------------------------------------------------------------------------- /src/views/leftsidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AiOutlineGithub, AiFillLinkedin, AiTwotonePlusSquare, AiFillGitlab, AiTwotoneDownCircle, AiFillHeart, } from "react-icons/ai" 3 | import Play from './Play'; 4 | import Sidebar1 from './sidebar'; 5 | import Rightsidebar from './rightsidebar'; 6 | const Leftbar = () => { 7 | const [slide1, cslide1] = React.useState(localStorage.getItem("slide1")); 8 | const [start, cstart] = React.useState("true"===eval(localStorage.getItem("start"))); 9 | const [a, ca] = React.useState(0); 10 | const [b, cb] = React.useState(0); 11 | const [c, cc] = React.useState(0); 12 | const [d, cd] = React.useState(0); 13 | 14 | return ( 15 | <> 16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 | 24 | { localStorage.setItem("slide1", slide1); cslide1(e.target.value); localStorage.setItem("slide1", slide1) }} min="1" max="4" value={slide1} className="lsbform1" id="myRange" /> 25 | { cslide1(e.target.value); localStorage.setItem("slide1", slide1) }} value={slide1} className='w-[45px] h-[25px] lsbform12 text-black bg-slate-300 border-solid border px-2 py-[1px]' /> 26 | 27 |
28 | 29 |
30 | 31 | 32 | { localStorage.setItem("slide1", slide1); cslide1(e.target.value); localStorage.setItem("slide1", slide1) }} min="1" max="4" value={slide1} className="lsbform1" id="myRange" /> 33 | { cslide1(e.target.value); localStorage.setItem("slide1", slide1) }} value={slide1} className='w-[45px] h-[25px] lsbform12 text-black bg-slate-300 border-solid border px-2 py-[1px]' /> 34 | 35 |
36 |
37 | = 1 ? "" : "hidden"}${!start ? "" : "hidden"}`}> 38 | 39 | = 1 ? "" : "hidden"}text-red-500 text-xl border-solid border-black border-spacing-0 border bg-red-600`} /> 40 | = 1 ? "" : "hidden"}`}>P1 41 | 42 |
43 | 44 | = 2 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 45 | 46 | = 2 ? "" : "hidden"}text-xl text-blue-500 border-solid border-black border-spacing-0 border rounded-full`} /> 47 | = 2 ? "" : "hidden"}`}>P2 48 | 49 |
50 | 51 | = 3 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 52 | 53 | = 3 ? "" : "hidden"}text-pink-600 text-xl`} /> 54 | = 3 ? "" : "hidden"}`}>P3 55 | 56 |
57 | 58 | = 4 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 59 | 60 | = 4 ? "hidden" : "hidden"}text-purple-700 text-xl`} /> 61 | = 4 ? "" : "hidden"}`}>P4 62 | 63 |
64 | 65 |
66 |
67 |
68 | = 1 ? "" : "hidden"}${!start ? "" : "hidden"}`}> 69 | 70 | = 1 ? "" : "hidden"}text-red-500 text-xl border-solid border-black border-spacing-0 border bg-red-600`} /> 71 | = 1 ? "" : "hidden"}`}>P1 72 | 73 |
74 | 75 | = 2 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 76 | 77 | = 2 ? "" : "hidden"}text-xl text-blue-500 border-solid border-black border-spacing-0 border rounded-full`} /> 78 | = 2 ? "" : "hidden"}`}>P2 79 | 80 |
81 | 82 | = 3 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 83 | 84 | = 3 ? "" : "hidden"}text-pink-600 text-xl`} /> 85 | = 3 ? "" : "hidden"}`}>P3 86 | 87 |
88 | 89 | = 4 ? "" : "hidden"} ${!start ? "" : "hidden"}`}> 90 | 91 | = 4 ? "hidden" : "hidden"}text-purple-700 text-xl`} /> 92 | = 4 ? "" : "hidden"}`}>P4 93 | 94 |
95 | 104 | 113 |
114 | 115 |
116 |
117 |
118 | 119 | 120 |
121 |
122 | 123 |
124 | 125 | 126 | ) 127 | } 128 | 129 | export default Leftbar -------------------------------------------------------------------------------- /src/views/rightsidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { AiOutlineMenuFold } from "react-icons/ai" 3 | import { ImBin } from "react-icons/im" 4 | import axios from "axios" 5 | import { ToastContainer, toast } from 'react-toastify'; 6 | import 'react-toastify/dist/ReactToastify.css'; 7 | const Rightsidebar = ({ cstart, ca, cb, cc, cd }) => { 8 | const [show, cshow] = useState(false); 9 | const [sgl, csgl] = useState(false); 10 | const [sna, csna] = useState(""); 11 | const [sg, csg] = useState(["No Saved Game"]); 12 | const [ssname, cssname] = useState(false); 13 | const [arr, carr] = useState([]); 14 | const signout = () => { 15 | localStorage.removeItem("Verified") 16 | localStorage.removeItem("email") 17 | localStorage.clear(); 18 | window.location.reload(); 19 | } 20 | 21 | const startagain = () => { 22 | cstart(false); 23 | localStorage.setItem("start", false); 24 | localStorage.setItem("n1", 0); 25 | localStorage.setItem("n2", 0); 26 | localStorage.setItem("n3", 0); 27 | localStorage.setItem("n4", 0); 28 | localStorage.setItem("fwd1", true); 29 | localStorage.setItem("fwd2", true); 30 | localStorage.setItem("fwd3", true); 31 | localStorage.setItem("fwd4", true); 32 | window.location.reload(); 33 | } 34 | const savegame = async (e) => { 35 | e.preventDefault(); 36 | if (!sna) { 37 | toast("Please Provide name of game to be saved"); 38 | return; 39 | } 40 | try { 41 | const data = await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/savegame/", { 42 | n1: localStorage.getItem("n1"), 43 | n2: localStorage.getItem("n2"), 44 | n3: localStorage.getItem("n3"), 45 | n4: localStorage.getItem("n4"), 46 | slide1: localStorage.getItem("slide1"), 47 | fwd1: localStorage.getItem("fwd1"), 48 | fwd2: localStorage.getItem("fwd2"), 49 | fwd3: localStorage.getItem("fwd3"), 50 | fwd4: localStorage.getItem("fwd4"), 51 | name: sna, 52 | email: localStorage.getItem("email") 53 | }) 54 | toast("Successfullt Saved"); 55 | } catch (error) { 56 | toast("an error Occurred :/"); 57 | } 58 | } 59 | const load = async () => { 60 | try { 61 | const data = await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/savegame/loadgame/", { 62 | email: localStorage.getItem("email") 63 | }).then((res) => { 64 | var str = res.data.msg; 65 | var arr = JSON.parse(str); 66 | var arr2 = []; 67 | for (let i = 0; i < arr.length; i++) { 68 | arr2.push(arr[i].name); 69 | } 70 | csg(arr2) 71 | carr(arr); 72 | return; 73 | }).catch((err) => { 74 | console.log(err) 75 | // toast("AN ERROR OCCURRED"); 76 | }) 77 | } catch (error) { 78 | console.log(error) 79 | // toast("AN ERROR OCCURRED"); 80 | } 81 | } 82 | 83 | return ( 84 | <> 85 | cshow(!show)} /> 86 |
cshow(false)}> 87 | 88 |
89 |
90 |
91 |
    92 |
  • 93 | Sign Out 94 |
    • 95 |
  • 96 | New Game 97 |
    • 98 |
  • 99 |
    cssname(!ssname)}> 100 | Save Game 101 |
    102 |
      103 |
    • 104 |
      105 | { csna(e.target.value) }} /> 106 | 107 |
      108 |
      • 109 |
    110 |
    • 111 |
  • { csgl(!sgl); load() }} className='w-[100%] bg-blue-300 rounded-md py-1 text-black font-bold'> 112 | Load Game 113 |
      114 | {sg.map((i, j) => { 115 | return ( 116 | <> 117 |
    • { 118 | localStorage.setItem("n4", eval(arr[j].n4)); 119 | localStorage.setItem("n3", eval(arr[j].n3)); 120 | localStorage.setItem("n2", eval(arr[j].n2)); 121 | localStorage.setItem("n1", eval(arr[j].n1)); 122 | localStorage.setItem("fwd1", eval(arr[j].fwd1)); 123 | localStorage.setItem("fwd2", eval(arr[j].fwd2)); 124 | localStorage.setItem("fwd3", eval(arr[j].fwd3)); 125 | localStorage.setItem("fwd4", eval(arr[j].fwd4)); 126 | localStorage.setItem("start", true); 127 | localStorage.setItem("slide1", arr[j].slide1); 128 | window.location.reload(); 129 | }}> 130 | 131 | {i} 132 | { 133 | try { 134 | const data = await axios.post("https://foursnakeandladderapi.onrender.com/api/v1/savegame/deletegame", { 135 | email: localStorage.getItem("email"), 136 | index: j 137 | }).then((res) => { 138 | var str = res.data.msg; 139 | var arr = JSON.parse(str); 140 | var arr2 = []; 141 | for (let i = 0; i < arr.length; i++) { 142 | arr2.push(arr[i].name); 143 | } 144 | csg(arr2) 145 | carr(arr); 146 | return; 147 | }).catch((err) => { 148 | console.log(err) 149 | }) 150 | } catch (error) { 151 | console.log(error) 152 | // toast("AN ERROR OCCURRED"); 153 | } 154 | }} /> 155 | 156 |
      • 157 | 158 | ) 159 | })} 160 |
    161 |
    • 162 |
  • 163 | End Game 164 |
    • 165 |
166 |
167 |
168 | 169 | 170 | ) 171 | } 172 | 173 | export default Rightsidebar -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | } 4 | 5 | .main-grid { 6 | display: grid; 7 | grid-template-columns: auto auto auto auto auto auto auto auto auto auto; 8 | background-color: pink; 9 | width: 650px; 10 | height: 650px; 11 | margin: auto; 12 | } 13 | 14 | .box-text { 15 | text-align: center; 16 | margin: auto; 17 | padding: auto; 18 | justify-content: center; 19 | border: solid 1px rgb(88, 88, 88); 20 | height: auto; 21 | height: 65px; 22 | width: 65px; 23 | background-color: rgb(var(--i), var(--j), var(--k)); 24 | } 25 | 26 | .hellodd::-webkit-scrollbar { 27 | color: black; 28 | width: 10px; 29 | height: 10px; 30 | background-color: greenyellow; 31 | } 32 | 33 | .bgblr { 34 | 35 | backdrop-filter: blur(16px) saturate(180%); 36 | -webkit-backdrop-filter: blur(96px) saturate(180%); 37 | filter: blur(200px) 38 | } 39 | 40 | .text-box { 41 | padding: auto auto; 42 | font-size: 1.5rem; 43 | transition: 400ms; 44 | padding-top: 10px; 45 | } 46 | 47 | .box-text:hover { 48 | box-shadow: 1px 1px 10px 1px black; 49 | transition: 400ms; 50 | z-index: 10; 51 | transform: scale(1.01); 52 | } 53 | 54 | .hidden { 55 | display: none; 56 | } 57 | 58 | .dicecss { 59 | color: red; 60 | background: linear-gradient(45deg, rgb(253, 86, 86), rgb(215, 32, 32)); 61 | border-radius: 30px; 62 | } 63 | 64 | .dicecss2 { 65 | transform: scale(1.1); 66 | transition: ease-in-out; 67 | transform: rotateZ(360deg); 68 | animation: dicea 2s; 69 | } 70 | 71 | @keyframes dicea { 72 | 0% { 73 | transform: rotateZ(0deg); 74 | color: red; 75 | } 76 | 77 | 50% { 78 | color: blue 79 | } 80 | 81 | 100% { 82 | transform: rotateZ(3600deg); 83 | 84 | color: red; 85 | } 86 | } 87 | 88 | .transitionp { 89 | transition: 400ms; 90 | } 91 | 92 | .castbox { 93 | position: absolute; 94 | } 95 | 96 | @media screen and (max-width: 1064px) { 97 | .home11 { 98 | margin-left: 30%; 99 | } 100 | } 101 | 102 | @media screen and (max-width: 1006px) { 103 | 104 | .lfb11 { 105 | max-width: 25%; 106 | } 107 | 108 | .bigd { 109 | margin-top: -74%; 110 | } 111 | 112 | .imghb { 113 | margin-left: -5px; 114 | max-height: 554px; 115 | max-width: 560px; 116 | opacity: 100%; 117 | } 118 | 119 | .box-text { 120 | text-align: center; 121 | margin: auto; 122 | padding: auto; 123 | justify-content: center; 124 | border: solid 1px rgb(88, 88, 88); 125 | height: auto; 126 | height: 55px; 127 | width: 55px; 128 | background-color: rgb(var(--i), var(--j), var(--k)); 129 | } 130 | 131 | .main-grid { 132 | display: grid; 133 | grid-template-columns: auto auto auto auto auto auto auto auto auto auto; 134 | background-color: pink; 135 | width: 550px; 136 | height: 550px; 137 | margin: auto; 138 | } 139 | } 140 | 141 | @media screen and (max-width: 876px) { 142 | 143 | .lfnb { 144 | display: grid; 145 | grid-template-columns: auto auto auto auto; 146 | } 147 | 148 | .lfb11 { 149 | max-width: 20%; 150 | } 151 | 152 | .hellodice { 153 | font-size: 150px; 154 | } 155 | 156 | .lfb11 { 157 | text-align: center; 158 | } 159 | 160 | .lsbform { 161 | max-width: 100%; 162 | } 163 | 164 | .lsbform1 { 165 | max-width: 80%; 166 | } 167 | 168 | .lsbform12 { 169 | max-width: 20%; 170 | width: 20%; 171 | padding-right: 0px; 172 | margin-right: 0px; 173 | margin-left: 0px; 174 | padding-left: 2px; 175 | } 176 | 177 | .bigd { 178 | margin-top: -88%; 179 | } 180 | 181 | .lsbstg { 182 | font-size: 20px; 183 | } 184 | 185 | .rsbmin { 186 | float: left; 187 | left: 0; 188 | position: absolute; 189 | z-index: 1000000; 190 | margin-left: 10px; 191 | height: 25px; 192 | } 193 | 194 | .lsbmc { 195 | margin-top: 30px; 196 | } 197 | 198 | .rsbmc2 { 199 | float: left; 200 | left: 0; 201 | transition: 500ms; 202 | } 203 | 204 | } 205 | 206 | @media screen and (max-width: 755px) { 207 | .imghb { 208 | margin-left: -5px; 209 | max-height: 462px; 210 | max-width: 469px; 211 | opacity: 100%; 212 | } 213 | 214 | .hellodice { 215 | font-size: 130px; 216 | } 217 | 218 | .bigd { 219 | font-size: 90px; 220 | margin-top: -94%; 221 | } 222 | 223 | .box-text { 224 | text-align: center; 225 | margin: auto; 226 | padding: auto; 227 | justify-content: center; 228 | border: solid 1px rgb(88, 88, 88); 229 | height: auto; 230 | height: 46px; 231 | width: 46px; 232 | background-color: rgb(var(--i), var(--j), var(--k)); 233 | } 234 | 235 | .main-grid { 236 | display: grid; 237 | grid-template-columns: auto auto auto auto auto auto auto auto auto auto; 238 | background-color: pink; 239 | width: 460px; 240 | height: 460px; 241 | margin: auto; 242 | } 243 | 244 | .lfb11 { 245 | height: 104%; 246 | 247 | } 248 | 249 | .homebox { 250 | margin-left: -20%; 251 | height: 100%; 252 | } 253 | 254 | .lsbstg { 255 | font-size: 17px; 256 | font-weight: 600; 257 | border-radius: 13px; 258 | } 259 | 260 | .text-box { 261 | font-size: 19px; 262 | } 263 | } 264 | 265 | @media screen and (max-width: 755px) { 266 | .lsbstg { 267 | font-size: 23px; 268 | } 269 | } 270 | 271 | @media screen and (min-width: 655px) { 272 | .jkkjb { 273 | display: none; 274 | } 275 | } 276 | 277 | @media screen and (max-width: 655px) { 278 | .ghughggv { 279 | display: none; 280 | } 281 | 282 | .homebox { 283 | margin: auto; 284 | padding: auto; 285 | display: flex; 286 | position: absolute; 287 | flex-direction: row; 288 | justify-content: center; 289 | } 290 | 291 | .hellodice { 292 | margin-top: -450px; 293 | padding-top: 0px; 294 | position: absolute; 295 | 296 | } 297 | 298 | .bigd { 299 | margin-top: -32%; 300 | margin-bottom: 0px; 301 | } 302 | 303 | .mlogo { 304 | position: absolute; 305 | bottom: 0px; 306 | height: 20%; 307 | max-height: 20%; 308 | float: right; 309 | z-index: 90999999999; 310 | bottom: 7%; 311 | } 312 | 313 | .btncsm { 314 | display: none; 315 | } 316 | 317 | .ffsmall { 318 | display: flex; 319 | justify-content: space-around; 320 | } 321 | 322 | body { 323 | background-color: rgb(62, 0, 0); 324 | 325 | } 326 | 327 | .jjbjhb { 328 | position: absolute; 329 | float: right; 330 | right: 39px; 331 | top: 50px; 332 | } 333 | 334 | .rsbmin { 335 | color: white; 336 | } 337 | 338 | .lfb11 { 339 | position: absolute; 340 | width: 100%; 341 | max-width: 100%; 342 | float: right; 343 | bottom: 0; 344 | top: 70%; 345 | height: 30%; 346 | z-index: 9879878789; 347 | background: linear-gradient(180deg, rgba(203, 213, 225, 0.7), silver, rgb(202, 202, 202)); 348 | } 349 | 350 | .small-side { 351 | width: 180%; 352 | height: 150px; 353 | margin: 0px; 354 | padding: 0px; 355 | margin-top: -30px; 356 | margin-left: -30px; 357 | 358 | } 359 | 360 | .lsbform1 { 361 | margin: auto; 362 | width: 80%; 363 | } 364 | 365 | .lsbform { 366 | gap: 0px 367 | } 368 | 369 | .lsbform12 { 370 | margin-right: 10px; 371 | ; 372 | padding-right: 0%; 373 | width: 20px; 374 | margin-left: 0; 375 | gap: 0; 376 | } 377 | 378 | .hid-small { 379 | display: none; 380 | } 381 | 382 | .text-lsb { 383 | margin-left: 0px; 384 | margin-top: 0px; 385 | padding: 0px; 386 | margin: 0px; 387 | font-size: 20px; 388 | 389 | } 390 | 391 | .lfnb { 392 | display: none; 393 | } 394 | 395 | .lsbfrm { 396 | display: flex; 397 | } 398 | 399 | .lfnb { 400 | display: flex; 401 | } 402 | 403 | .mlogo { 404 | display: flex; 405 | flex-direction: column; 406 | float: right; 407 | right: 0px; 408 | margin-right: 10px; 409 | padding-right: 0px; 410 | max-width: 20px; 411 | height: 270px; 412 | justify-content: space-evenly; 413 | } 414 | } 415 | 416 | @media screen and (max-width: 535px) { 417 | 418 | .homebox { 419 | margin-top: 20px; 420 | margin-left: 0; 421 | display: flex; 422 | padding: auto; 423 | margin: 27px auto; 424 | margin-left: 10px; 425 | justify-content: center; 426 | position: absolute; 427 | justify-items: center; 428 | width: 100%; 429 | } 430 | 431 | .home11 { 432 | position: relative; 433 | margin-left: 0%; 434 | } 435 | } 436 | 437 | @media screen and (min-width: 656px) { 438 | .small-side { 439 | display: none; 440 | } 441 | } 442 | 443 | @media screen and (max-width: 656px) { 444 | .small-side2 { 445 | display: none; 446 | } 447 | } 448 | 449 | @media screen and (max-width: 599px) { 450 | .imghb { 451 | width: 410px; 452 | height: 400px; 453 | box-shadow: 0px 0px 17px 7px rgb(212, 212, 212); 454 | } 455 | 456 | .box-text { 457 | height: 40px; 458 | width: 40px; 459 | } 460 | 461 | .main-grid { 462 | height: 400px; 463 | width: 400px; 464 | } 465 | } 466 | 467 | @media screen and (max-width: 432px) { 468 | .imghb { 469 | width: 410px; 470 | height: 400px; 471 | box-shadow: 0px 0px 17px 7px rgb(212, 212, 212); 472 | } 473 | 474 | .box-text { 475 | height: 40px; 476 | width: 40px; 477 | } 478 | 479 | .main-grid { 480 | height: 400px; 481 | width: 400px; 482 | } 483 | 484 | .imghb { 485 | height: 55%; 486 | width: 102%; 487 | 488 | } 489 | 490 | .homebox { 491 | margin-left: 10px; 492 | margin-right: 10px; 493 | height: 100%; 494 | width: 100%; 495 | } 496 | 497 | .mlogo { 498 | display: flex; 499 | flex-direction: row; 500 | margin-bottom: 0; 501 | bottom: 0; 502 | position: absolute; 503 | max-width: 100%; 504 | width: 100%; 505 | justify-content: space-evenly; 506 | margin: auto; 507 | left: auto; 508 | right: auto; 509 | padding-bottom: 20px; 510 | margin-bottom: 20px; 511 | max-height: 50px; 512 | font-size: 80px; 513 | } 514 | 515 | .homebox { 516 | left: 0; 517 | margin-left: 0px; 518 | } 519 | 520 | .kknkl { 521 | font-size: 30px; 522 | } 523 | } 524 | 525 | @media screen and (min-width: 767px) { 526 | .kjbji { 527 | display: none; 528 | } 529 | } 530 | 531 | @media screen and (max-width: 432px) { 532 | .homebox { 533 | width: 350px; 534 | height: 350px; 535 | justify-content: center; 536 | margin: auto; 537 | padding: auto; 538 | display: flex; 539 | justify-items: center; 540 | margin-left: 10px; 541 | margin-top: 20px; 542 | } 543 | 544 | .main-grid { 545 | height: 350px; 546 | width: 350px; 547 | } 548 | 549 | .imghb { 550 | height: 400px; 551 | width: 410px; 552 | } 553 | } 554 | 555 | 556 | @media screen and (max-width: 410px) { 557 | .homebox { 558 | width: 90%; 559 | height: 60%; 560 | justify-content: center; 561 | margin: auto; 562 | padding: auto; 563 | display: flex; 564 | justify-items: center; 565 | margin-left: 20px; 566 | margin-top: 35px; 567 | } 568 | 569 | .main-grid { 570 | height: 90%; 571 | width: 50%; 572 | margin: auto; 573 | justify-content: left; 574 | margin-left: 0; 575 | } 576 | 577 | .imghb { 578 | height: 94%; 579 | width: 101.9%; 580 | } 581 | 582 | .lsbstg { 583 | padding: 0px; 584 | margin: 0; 585 | width: 150px; 586 | height: 40px; 587 | transition: 400ms; 588 | } 589 | 590 | .lsbstg:hover { 591 | box-shadow: 0px 0px 10px 3px rgb(88, 88, 88); 592 | transition: 400ms; 593 | } 594 | 595 | .mlogo { 596 | margin-bottom: 0px; 597 | bottom: 0px; 598 | } 599 | 600 | .kdfnsv { 601 | font-size: 15px; 602 | font-weight: 600px; 603 | padding: 0px; 604 | padding: 10px 10px; 605 | } 606 | } 607 | 608 | @media screen and (max-width: 390px) { 609 | .homebox { 610 | width: 340px; 611 | height: 340px; 612 | justify-content: center; 613 | margin: auto; 614 | padding: auto; 615 | display: flex; 616 | justify-items: center; 617 | margin-left: 20px; 618 | margin-top: 35px; 619 | position: absolute; 620 | } 621 | 622 | .main-grid { 623 | height: 340px; 624 | width: 340px; 625 | margin: auto; 626 | justify-content: left; 627 | margin-left: 0px; 628 | padding-left: 0px; 629 | gap: 0px; 630 | } 631 | 632 | .box-text { 633 | width: 34px; 634 | height: 34px; 635 | } 636 | 637 | .imghb { 638 | height: 340px; 639 | width: 348px; 640 | } 641 | 642 | .lsbstg { 643 | padding: 0px; 644 | margin: 0; 645 | width: 150px; 646 | height: 40px; 647 | transition: 400ms; 648 | } 649 | 650 | .lsbstg:hover { 651 | box-shadow: 0px 0px 10px 3px rgb(88, 88, 88); 652 | transition: 400ms; 653 | } 654 | } 655 | 656 | 657 | @media screen and (max-width: 350px) { 658 | .homebox { 659 | width: 300px; 660 | height: 300px; 661 | justify-content: center; 662 | margin: auto; 663 | padding: auto; 664 | display: flex; 665 | justify-items: center; 666 | margin-left: 20px; 667 | margin-top: 35px; 668 | position: absolute; 669 | } 670 | 671 | .main-grid { 672 | height: 300px; 673 | width: 300px; 674 | margin: auto; 675 | justify-content: left; 676 | margin-left: 0px; 677 | padding-left: 0px; 678 | gap: 0px; 679 | } 680 | 681 | .box-text { 682 | width: 30px; 683 | height: 30px; 684 | } 685 | 686 | .imghb { 687 | height: 300px; 688 | width: 308px; 689 | } 690 | 691 | .lsbstg { 692 | padding: 0px; 693 | margin: 0; 694 | width: 150px; 695 | height: 40px; 696 | transition: 400ms; 697 | } 698 | 699 | .lsbstg:hover { 700 | box-shadow: 0px 0px 10px 3px rgb(88, 88, 88); 701 | transition: 400ms; 702 | } 703 | } 704 | 705 | 706 | 707 | @media screen and (max-width: 310px) { 708 | .homebox { 709 | width: 270px; 710 | height: 270px; 711 | justify-content: center; 712 | margin: auto; 713 | padding: auto; 714 | display: flex; 715 | justify-items: center; 716 | margin-left: 10px; 717 | margin-top: 35px; 718 | margin-bottom: 0px; 719 | position: absolute; 720 | } 721 | 722 | .main-grid { 723 | height: 270px; 724 | width: 270px; 725 | margin: auto; 726 | justify-content: left; 727 | margin-left: 0px; 728 | padding-left: 0px; 729 | gap: 0px; 730 | } 731 | 732 | .box-text { 733 | width: 27px; 734 | height: 27px; 735 | } 736 | 737 | .imghb { 738 | height: 270px; 739 | width: 278px; 740 | } 741 | 742 | .lsbstg { 743 | padding: 0px; 744 | margin: 0; 745 | width: 150px; 746 | height: 40px; 747 | transition: 400ms; 748 | } 749 | 750 | .lsbstg:hover { 751 | box-shadow: 0px 0px 10px 3px rgb(88, 88, 88); 752 | transition: 400ms; 753 | } 754 | } -------------------------------------------------------------------------------- /backend/public/axios.js: -------------------------------------------------------------------------------- 1 | /* axios v0.21.1 | (c) 2020 by Matt Zabriskie */ 2 | !function (e, t) { "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.axios = t() : e.axios = t() }(this, function () { return function (e) { function t(r) { if (n[r]) return n[r].exports; var o = n[r] = { exports: {}, id: r, loaded: !1 }; return e[r].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports } var n = {}; return t.m = e, t.c = n, t.p = "", t(0) }([function (e, t, n) { e.exports = n(1) }, function (e, t, n) { "use strict"; function r(e) { var t = new i(e), n = s(i.prototype.request, t); return o.extend(n, i.prototype, t), o.extend(n, t), n } var o = n(2), s = n(3), i = n(4), a = n(22), u = n(10), c = r(u); c.Axios = i, c.create = function (e) { return r(a(c.defaults, e)) }, c.Cancel = n(23), c.CancelToken = n(24), c.isCancel = n(9), c.all = function (e) { return Promise.all(e) }, c.spread = n(25), c.isAxiosError = n(26), e.exports = c, e.exports.default = c }, function (e, t, n) { "use strict"; function r(e) { return "[object Array]" === R.call(e) } function o(e) { return "undefined" == typeof e } function s(e) { return null !== e && !o(e) && null !== e.constructor && !o(e.constructor) && "function" == typeof e.constructor.isBuffer && e.constructor.isBuffer(e) } function i(e) { return "[object ArrayBuffer]" === R.call(e) } function a(e) { return "undefined" != typeof FormData && e instanceof FormData } function u(e) { var t; return t = "undefined" != typeof ArrayBuffer && ArrayBuffer.isView ? ArrayBuffer.isView(e) : e && e.buffer && e.buffer instanceof ArrayBuffer } function c(e) { return "string" == typeof e } function f(e) { return "number" == typeof e } function p(e) { return null !== e && "object" == typeof e } function d(e) { if ("[object Object]" !== R.call(e)) return !1; var t = Object.getPrototypeOf(e); return null === t || t === Object.prototype } function l(e) { return "[object Date]" === R.call(e) } function h(e) { return "[object File]" === R.call(e) } function m(e) { return "[object Blob]" === R.call(e) } function y(e) { return "[object Function]" === R.call(e) } function g(e) { return p(e) && y(e.pipe) } function v(e) { return "undefined" != typeof URLSearchParams && e instanceof URLSearchParams } function x(e) { return e.replace(/^\s*/, "").replace(/\s*$/, "") } function w() { return ("undefined" == typeof navigator || "ReactNative" !== navigator.product && "NativeScript" !== navigator.product && "NS" !== navigator.product) && ("undefined" != typeof window && "undefined" != typeof document) } function b(e, t) { if (null !== e && "undefined" != typeof e) if ("object" != typeof e && (e = [e]), r(e)) for (var n = 0, o = e.length; n < o; n++)t.call(null, e[n], n, e); else for (var s in e) Object.prototype.hasOwnProperty.call(e, s) && t.call(null, e[s], s, e) } function E() { function e(e, n) { d(t[n]) && d(e) ? t[n] = E(t[n], e) : d(e) ? t[n] = E({}, e) : r(e) ? t[n] = e.slice() : t[n] = e } for (var t = {}, n = 0, o = arguments.length; n < o; n++)b(arguments[n], e); return t } function j(e, t, n) { return b(t, function (t, r) { n && "function" == typeof t ? e[r] = S(t, n) : e[r] = t }), e } function C(e) { return 65279 === e.charCodeAt(0) && (e = e.slice(1)), e } var S = n(3), R = Object.prototype.toString; e.exports = { isArray: r, isArrayBuffer: i, isBuffer: s, isFormData: a, isArrayBufferView: u, isString: c, isNumber: f, isObject: p, isPlainObject: d, isUndefined: o, isDate: l, isFile: h, isBlob: m, isFunction: y, isStream: g, isURLSearchParams: v, isStandardBrowserEnv: w, forEach: b, merge: E, extend: j, trim: x, stripBOM: C } }, function (e, t) { "use strict"; e.exports = function (e, t) { return function () { for (var n = new Array(arguments.length), r = 0; r < n.length; r++)n[r] = arguments[r]; return e.apply(t, n) } } }, function (e, t, n) { "use strict"; function r(e) { this.defaults = e, this.interceptors = { request: new i, response: new i } } var o = n(2), s = n(5), i = n(6), a = n(7), u = n(22); r.prototype.request = function (e) { "string" == typeof e ? (e = arguments[1] || {}, e.url = arguments[0]) : e = e || {}, e = u(this.defaults, e), e.method ? e.method = e.method.toLowerCase() : this.defaults.method ? e.method = this.defaults.method.toLowerCase() : e.method = "get"; var t = [a, void 0], n = Promise.resolve(e); for (this.interceptors.request.forEach(function (e) { t.unshift(e.fulfilled, e.rejected) }), this.interceptors.response.forEach(function (e) { t.push(e.fulfilled, e.rejected) }); t.length;)n = n.then(t.shift(), t.shift()); return n }, r.prototype.getUri = function (e) { return e = u(this.defaults, e), s(e.url, e.params, e.paramsSerializer).replace(/^\?/, "") }, o.forEach(["delete", "get", "head", "options"], function (e) { r.prototype[e] = function (t, n) { return this.request(u(n || {}, { method: e, url: t, data: (n || {}).data })) } }), o.forEach(["post", "put", "patch"], function (e) { r.prototype[e] = function (t, n, r) { return this.request(u(r || {}, { method: e, url: t, data: n })) } }), e.exports = r }, function (e, t, n) { "use strict"; function r(e) { return encodeURIComponent(e).replace(/%3A/gi, ":").replace(/%24/g, "$").replace(/%2C/gi, ",").replace(/%20/g, "+").replace(/%5B/gi, "[").replace(/%5D/gi, "]") } var o = n(2); e.exports = function (e, t, n) { if (!t) return e; var s; if (n) s = n(t); else if (o.isURLSearchParams(t)) s = t.toString(); else { var i = []; o.forEach(t, function (e, t) { null !== e && "undefined" != typeof e && (o.isArray(e) ? t += "[]" : e = [e], o.forEach(e, function (e) { o.isDate(e) ? e = e.toISOString() : o.isObject(e) && (e = JSON.stringify(e)), i.push(r(t) + "=" + r(e)) })) }), s = i.join("&") } if (s) { var a = e.indexOf("#"); a !== -1 && (e = e.slice(0, a)), e += (e.indexOf("?") === -1 ? "?" : "&") + s } return e } }, function (e, t, n) { "use strict"; function r() { this.handlers = [] } var o = n(2); r.prototype.use = function (e, t) { return this.handlers.push({ fulfilled: e, rejected: t }), this.handlers.length - 1 }, r.prototype.eject = function (e) { this.handlers[e] && (this.handlers[e] = null) }, r.prototype.forEach = function (e) { o.forEach(this.handlers, function (t) { null !== t && e(t) }) }, e.exports = r }, function (e, t, n) { "use strict"; function r(e) { e.cancelToken && e.cancelToken.throwIfRequested() } var o = n(2), s = n(8), i = n(9), a = n(10); e.exports = function (e) { r(e), e.headers = e.headers || {}, e.data = s(e.data, e.headers, e.transformRequest), e.headers = o.merge(e.headers.common || {}, e.headers[e.method] || {}, e.headers), o.forEach(["delete", "get", "head", "post", "put", "patch", "common"], function (t) { delete e.headers[t] }); var t = e.adapter || a.adapter; return t(e).then(function (t) { return r(e), t.data = s(t.data, t.headers, e.transformResponse), t }, function (t) { return i(t) || (r(e), t && t.response && (t.response.data = s(t.response.data, t.response.headers, e.transformResponse))), Promise.reject(t) }) } }, function (e, t, n) { "use strict"; var r = n(2); e.exports = function (e, t, n) { return r.forEach(n, function (n) { e = n(e, t) }), e } }, function (e, t) { "use strict"; e.exports = function (e) { return !(!e || !e.__CANCEL__) } }, function (e, t, n) { "use strict"; function r(e, t) { !s.isUndefined(e) && s.isUndefined(e["Content-Type"]) && (e["Content-Type"] = t) } function o() { var e; return "undefined" != typeof XMLHttpRequest ? e = n(12) : "undefined" != typeof process && "[object process]" === Object.prototype.toString.call(process) && (e = n(12)), e } var s = n(2), i = n(11), a = { "Content-Type": "application/x-www-form-urlencoded" }, u = { adapter: o(), transformRequest: [function (e, t) { return i(t, "Accept"), i(t, "Content-Type"), s.isFormData(e) || s.isArrayBuffer(e) || s.isBuffer(e) || s.isStream(e) || s.isFile(e) || s.isBlob(e) ? e : s.isArrayBufferView(e) ? e.buffer : s.isURLSearchParams(e) ? (r(t, "application/x-www-form-urlencoded;charset=utf-8"), e.toString()) : s.isObject(e) ? (r(t, "application/json;charset=utf-8"), JSON.stringify(e)) : e }], transformResponse: [function (e) { if ("string" == typeof e) try { e = JSON.parse(e) } catch (e) { } return e }], timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", maxContentLength: -1, maxBodyLength: -1, validateStatus: function (e) { return e >= 200 && e < 300 } }; u.headers = { common: { Accept: "application/json, text/plain, */*" } }, s.forEach(["delete", "get", "head"], function (e) { u.headers[e] = {} }), s.forEach(["post", "put", "patch"], function (e) { u.headers[e] = s.merge(a) }), e.exports = u }, function (e, t, n) { "use strict"; var r = n(2); e.exports = function (e, t) { r.forEach(e, function (n, r) { r !== t && r.toUpperCase() === t.toUpperCase() && (e[t] = n, delete e[r]) }) } }, function (e, t, n) { "use strict"; var r = n(2), o = n(13), s = n(16), i = n(5), a = n(17), u = n(20), c = n(21), f = n(14); e.exports = function (e) { return new Promise(function (t, n) { var p = e.data, d = e.headers; r.isFormData(p) && delete d["Content-Type"]; var l = new XMLHttpRequest; if (e.auth) { var h = e.auth.username || "", m = e.auth.password ? unescape(encodeURIComponent(e.auth.password)) : ""; d.Authorization = "Basic " + btoa(h + ":" + m) } var y = a(e.baseURL, e.url); if (l.open(e.method.toUpperCase(), i(y, e.params, e.paramsSerializer), !0), l.timeout = e.timeout, l.onreadystatechange = function () { if (l && 4 === l.readyState && (0 !== l.status || l.responseURL && 0 === l.responseURL.indexOf("file:"))) { var r = "getAllResponseHeaders" in l ? u(l.getAllResponseHeaders()) : null, s = e.responseType && "text" !== e.responseType ? l.response : l.responseText, i = { data: s, status: l.status, statusText: l.statusText, headers: r, config: e, request: l }; o(t, n, i), l = null } }, l.onabort = function () { l && (n(f("Request aborted", e, "ECONNABORTED", l)), l = null) }, l.onerror = function () { n(f("Network Error", e, null, l)), l = null }, l.ontimeout = function () { var t = "timeout of " + e.timeout + "ms exceeded"; e.timeoutErrorMessage && (t = e.timeoutErrorMessage), n(f(t, e, "ECONNABORTED", l)), l = null }, r.isStandardBrowserEnv()) { var g = (e.withCredentials || c(y)) && e.xsrfCookieName ? s.read(e.xsrfCookieName) : void 0; g && (d[e.xsrfHeaderName] = g) } if ("setRequestHeader" in l && r.forEach(d, function (e, t) { "undefined" == typeof p && "content-type" === t.toLowerCase() ? delete d[t] : l.setRequestHeader(t, e) }), r.isUndefined(e.withCredentials) || (l.withCredentials = !!e.withCredentials), e.responseType) try { l.responseType = e.responseType } catch (t) { if ("json" !== e.responseType) throw t } "function" == typeof e.onDownloadProgress && l.addEventListener("progress", e.onDownloadProgress), "function" == typeof e.onUploadProgress && l.upload && l.upload.addEventListener("progress", e.onUploadProgress), e.cancelToken && e.cancelToken.promise.then(function (e) { l && (l.abort(), n(e), l = null) }), p || (p = null), l.send(p) }) } }, function (e, t, n) { "use strict"; var r = n(14); e.exports = function (e, t, n) { var o = n.config.validateStatus; n.status && o && !o(n.status) ? t(r("Request failed with status code " + n.status, n.config, null, n.request, n)) : e(n) } }, function (e, t, n) { "use strict"; var r = n(15); e.exports = function (e, t, n, o, s) { var i = new Error(e); return r(i, t, n, o, s) } }, function (e, t) { "use strict"; e.exports = function (e, t, n, r, o) { return e.config = t, n && (e.code = n), e.request = r, e.response = o, e.isAxiosError = !0, e.toJSON = function () { return { message: this.message, name: this.name, description: this.description, number: this.number, fileName: this.fileName, lineNumber: this.lineNumber, columnNumber: this.columnNumber, stack: this.stack, config: this.config, code: this.code } }, e } }, function (e, t, n) { "use strict"; var r = n(2); e.exports = r.isStandardBrowserEnv() ? function () { return { write: function (e, t, n, o, s, i) { var a = []; a.push(e + "=" + encodeURIComponent(t)), r.isNumber(n) && a.push("expires=" + new Date(n).toGMTString()), r.isString(o) && a.push("path=" + o), r.isString(s) && a.push("domain=" + s), i === !0 && a.push("secure"), document.cookie = a.join("; ") }, read: function (e) { var t = document.cookie.match(new RegExp("(^|;\\s*)(" + e + ")=([^;]*)")); return t ? decodeURIComponent(t[3]) : null }, remove: function (e) { this.write(e, "", Date.now() - 864e5) } } }() : function () { return { write: function () { }, read: function () { return null }, remove: function () { } } }() }, function (e, t, n) { "use strict"; var r = n(18), o = n(19); e.exports = function (e, t) { return e && !r(t) ? o(e, t) : t } }, function (e, t) { "use strict"; e.exports = function (e) { return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e) } }, function (e, t) { "use strict"; e.exports = function (e, t) { return t ? e.replace(/\/+$/, "") + "/" + t.replace(/^\/+/, "") : e } }, function (e, t, n) { "use strict"; var r = n(2), o = ["age", "authorization", "content-length", "content-type", "etag", "expires", "from", "host", "if-modified-since", "if-unmodified-since", "last-modified", "location", "max-forwards", "proxy-authorization", "referer", "retry-after", "user-agent"]; e.exports = function (e) { var t, n, s, i = {}; return e ? (r.forEach(e.split("\n"), function (e) { if (s = e.indexOf(":"), t = r.trim(e.substr(0, s)).toLowerCase(), n = r.trim(e.substr(s + 1)), t) { if (i[t] && o.indexOf(t) >= 0) return; "set-cookie" === t ? i[t] = (i[t] ? i[t] : []).concat([n]) : i[t] = i[t] ? i[t] + ", " + n : n } }), i) : i } }, function (e, t, n) { "use strict"; var r = n(2); e.exports = r.isStandardBrowserEnv() ? function () { function e(e) { var t = e; return n && (o.setAttribute("href", t), t = o.href), o.setAttribute("href", t), { href: o.href, protocol: o.protocol ? o.protocol.replace(/:$/, "") : "", host: o.host, search: o.search ? o.search.replace(/^\?/, "") : "", hash: o.hash ? o.hash.replace(/^#/, "") : "", hostname: o.hostname, port: o.port, pathname: "/" === o.pathname.charAt(0) ? o.pathname : "/" + o.pathname } } var t, n = /(msie|trident)/i.test(navigator.userAgent), o = document.createElement("a"); return t = e(window.location.href), function (n) { var o = r.isString(n) ? e(n) : n; return o.protocol === t.protocol && o.host === t.host } }() : function () { return function () { return !0 } }() }, function (e, t, n) { "use strict"; var r = n(2); e.exports = function (e, t) { function n(e, t) { return r.isPlainObject(e) && r.isPlainObject(t) ? r.merge(e, t) : r.isPlainObject(t) ? r.merge({}, t) : r.isArray(t) ? t.slice() : t } function o(o) { r.isUndefined(t[o]) ? r.isUndefined(e[o]) || (s[o] = n(void 0, e[o])) : s[o] = n(e[o], t[o]) } t = t || {}; var s = {}, i = ["url", "method", "data"], a = ["headers", "auth", "proxy", "params"], u = ["baseURL", "transformRequest", "transformResponse", "paramsSerializer", "timeout", "timeoutMessage", "withCredentials", "adapter", "responseType", "xsrfCookieName", "xsrfHeaderName", "onUploadProgress", "onDownloadProgress", "decompress", "maxContentLength", "maxBodyLength", "maxRedirects", "transport", "httpAgent", "httpsAgent", "cancelToken", "socketPath", "responseEncoding"], c = ["validateStatus"]; r.forEach(i, function (e) { r.isUndefined(t[e]) || (s[e] = n(void 0, t[e])) }), r.forEach(a, o), r.forEach(u, function (o) { r.isUndefined(t[o]) ? r.isUndefined(e[o]) || (s[o] = n(void 0, e[o])) : s[o] = n(void 0, t[o]) }), r.forEach(c, function (r) { r in t ? s[r] = n(e[r], t[r]) : r in e && (s[r] = n(void 0, e[r])) }); var f = i.concat(a).concat(u).concat(c), p = Object.keys(e).concat(Object.keys(t)).filter(function (e) { return f.indexOf(e) === -1 }); return r.forEach(p, o), s } }, function (e, t) { "use strict"; function n(e) { this.message = e } n.prototype.toString = function () { return "Cancel" + (this.message ? ": " + this.message : "") }, n.prototype.__CANCEL__ = !0, e.exports = n }, function (e, t, n) { "use strict"; function r(e) { if ("function" != typeof e) throw new TypeError("executor must be a function."); var t; this.promise = new Promise(function (e) { t = e }); var n = this; e(function (e) { n.reason || (n.reason = new o(e), t(n.reason)) }) } var o = n(23); r.prototype.throwIfRequested = function () { if (this.reason) throw this.reason }, r.source = function () { var e, t = new r(function (t) { e = t }); return { token: t, cancel: e } }, e.exports = r }, function (e, t) { "use strict"; e.exports = function (e) { return function (t) { return e.apply(null, t) } } }, function (e, t) { "use strict"; e.exports = function (e) { return "object" == typeof e && e.isAxiosError === !0 } }]) }); 3 | //# sourceMappingURL=axios.min.map -------------------------------------------------------------------------------- /src/views/Play.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AiOutlineGithub, AiFillLinkedin, AiTwotonePlusSquare, AiFillGitlab, AiTwotoneDownCircle, AiFillHeart } from "react-icons/ai" 3 | import Home from './home'; 4 | import Winner from './Winner'; 5 | 6 | const Play = ({ start, slide1, a, b, c, d }) => { 7 | var ashow = [1, 2, 3, 4]; 8 | var [n1, cn1] = React.useState(eval(localStorage.getItem("n1"))); 9 | var [n2, cn2] = React.useState(eval(localStorage.getItem("n2"))); 10 | var [n3, cn3] = React.useState(eval(localStorage.getItem("n3"))); 11 | var [n4, cn4] = React.useState(eval(localStorage.getItem("n4"))); 12 | var [nj, cnj] = React.useState(0); 13 | var [ben, cben] = React.useState(true); 14 | var [cnm, ccnm] = React.useState(Math.floor(Math.random() * (6 - 1 + 1)) + 1); 15 | var [dcss, cdcss] = React.useState(true); 16 | var [fwd1, cfwd1] = React.useState("true" === localStorage.getItem("fwd1")); 17 | var [fwd2, cfwd2] = React.useState("true" === localStorage.getItem("fwd2")); 18 | var [fwd3, cfwd3] = React.useState("true" === localStorage.getItem("fwd3")); 19 | var [fwd4, cfwd4] = React.useState("true" === localStorage.getItem("fwd4")); 20 | var [result, cresult] = React.useState(false); 21 | var [victor, cvictor] = React.useState(0); 22 | var [pointer, cpointer] = React.useState(0); 23 | var arrchoice = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]; 24 | // var arrchoice = [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]; 25 | // var arrchoice = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; 26 | var snakeh = [80, 29, 88, 99]; 27 | var snakee = [45, 6, 36, 34]; 28 | var ladderh = [96, 62, 47]; 29 | var laddere = [31, 39, 24]; 30 | React.useEffect(() => { 31 | if (start === false) { 32 | var h1 = localStorage.getItem("n1"); 33 | var h2 = localStorage.getItem("n2"); 34 | var h3 = localStorage.getItem("n3"); 35 | var h4 = localStorage.getItem("n4"); 36 | cn1(eval(h1)); 37 | cn2(eval(h2)); 38 | cn3(eval(h3)); 39 | cn4(eval(h4)); 40 | return; 41 | } 42 | }, [start]) 43 | const btnc = () => { 44 | setTimeout(() => { 45 | cdcss(false) 46 | setTimeout(() => { 47 | 48 | cdcss(true) 49 | cpointer((pointer + 1) % localStorage.getItem("slide1")); 50 | var cnum = arrchoice[Math.floor(Math.random() * (17 - 0 + 1)) + 0]; 51 | if (pointer === 0) { 52 | if (!fwd1) { 53 | if (n1 - cnum < 0) { 54 | 55 | } 56 | else if (n1 - cnum === 0) { 57 | cvictor(1); 58 | cresult(true); 59 | } 60 | else { 61 | cn1(n1 - cnum); 62 | } 63 | } 64 | 65 | else if (n1 === 0) { 66 | if (cnum === 1) { 67 | cn1(n1 + cnum); 68 | } 69 | 70 | } 71 | else if (n1 + cnum > 100) { 72 | 73 | } 74 | else if (n1 + cnum === 100 || n1 === 100) { 75 | cfwd1(false); 76 | localStorage.setItem("fwd1", false); 77 | cn1(n1 + cnum); 78 | 79 | 80 | } 81 | else { 82 | if (cnum === 6) { 83 | pointer = (pointer - 1) 84 | if (pointer < 0) { 85 | pointer = 3; 86 | } 87 | } 88 | cn1(n1 + cnum); 89 | 90 | } 91 | if (n1 + cnum === laddere[0]) { 92 | cn1(ladderh[0]); 93 | } if (n1 + cnum === laddere[1]) { 94 | cn1(ladderh[1]); 95 | } if (n1 + cnum === laddere[2]) { 96 | cn1(ladderh[2]); 97 | } if (n1 + cnum === laddere[3]) { 98 | cn1(ladderh[3]); 99 | } 100 | if (n1 + cnum === snakeh[0]) { 101 | cn1(snakee[0]); 102 | } if (n1 + cnum === snakeh[1]) { 103 | cn1(snakee[1]); 104 | } if (n1 + cnum === snakeh[2]) { 105 | cn1(snakee[2]); 106 | } if (n1 + cnum === snakeh[3]) { 107 | cn1(snakee[3]); 108 | } 109 | 110 | } 111 | 112 | else if (pointer === 1) { 113 | if (fwd2 === false) { 114 | if (n2 - cnum < 0) { 115 | 116 | } 117 | else if (n2 - cnum === 0) { 118 | cvictor(2); 119 | cresult(true); 120 | } 121 | else { 122 | cn2(n2 - cnum); 123 | } 124 | } 125 | else if (n2 === 0) { 126 | if (cnum === 1) { 127 | cn2(n2 + cnum); 128 | } 129 | } 130 | else if (n2 + cnum > 100) { 131 | 132 | } 133 | else if (n2 + cnum === 100 || n2 === 100) { 134 | localStorage.setItem("fwd2", false); 135 | cfwd2(false); 136 | cn2(n2 + cnum); 137 | 138 | } 139 | else { 140 | if (cnum === 6) { 141 | pointer = (pointer - 1) 142 | if (pointer < 0) { 143 | pointer = 3; 144 | } 145 | } 146 | cn2(n2 + cnum); 147 | } 148 | 149 | if (n2 + cnum === laddere[0]) { 150 | cn2(ladderh[0]); 151 | } if (n2 + cnum === laddere[1]) { 152 | cn2(ladderh[1]); 153 | } if (n2 + cnum === laddere[2]) { 154 | cn2(ladderh[2]); 155 | } if (n2 + cnum === laddere[3]) { 156 | cn2(ladderh[3]); 157 | } 158 | if (n2 + cnum === snakeh[0]) { 159 | cn2(snakee[0]); 160 | } if (n2 + cnum === snakeh[1]) { 161 | cn2(snakee[1]); 162 | } if (n2 + cnum === snakeh[2]) { 163 | cn2(snakee[2]); 164 | } if (n2 + cnum === snakeh[3]) { 165 | cn2(snakee[3]); 166 | } 167 | } 168 | else if (pointer === 2) { 169 | if (fwd3 === false) { 170 | if (n3 - cnum < 0) { 171 | 172 | } 173 | else if (n3 - cnum === 0) { 174 | cvictor(3); 175 | cresult(true); 176 | } 177 | else { 178 | cn3(n3 - cnum); 179 | } 180 | } 181 | else if (n3 === 0) { 182 | if (cnum === 1) { 183 | cn3(n3 + cnum); 184 | } 185 | } 186 | else if (n3 + cnum > 100) { 187 | 188 | } 189 | else if (n3 + cnum === 100 || n3 === 100) { 190 | cfwd3(false); 191 | localStorage.setItem("fwd3", false); 192 | cn3(n3 + cnum); 193 | 194 | } 195 | else { 196 | if (cnum === 6) { 197 | pointer = (pointer - 1) 198 | if (pointer < 0) { 199 | pointer = 3; 200 | } 201 | } 202 | cn3(n3 + cnum); 203 | } 204 | 205 | if (n3 + cnum === laddere[0]) { 206 | cn3(ladderh[0]); 207 | } if (n3 + cnum === laddere[1]) { 208 | cn3(ladderh[1]); 209 | } if (n3 + cnum === laddere[2]) { 210 | cn3(ladderh[2]); 211 | } if (n3 + cnum === laddere[3]) { 212 | cn3(ladderh[3]); 213 | } 214 | if (n3 + cnum === snakeh[0]) { 215 | cn3(snakee[0]); 216 | } if (n3 + cnum === snakeh[1]) { 217 | cn3(snakee[1]); 218 | } if (n3 + cnum === snakeh[2]) { 219 | cn3(snakee[2]); 220 | } if (n3 + cnum === snakeh[3]) { 221 | cn3(snakee[3]); 222 | } 223 | } 224 | else if (pointer === 3) { 225 | if (fwd4 === false) { 226 | if (n4 - cnum < 0) { 227 | 228 | } 229 | else if (n4 - cnum === 0) { 230 | cvictor(4); 231 | cresult(true); 232 | } 233 | else { 234 | cn4(n4 - cnum); 235 | } 236 | } 237 | else if (n4 === 0) { 238 | if (cnum === 1) { 239 | cn4(n4 + cnum); 240 | } 241 | } 242 | else if (n4 + cnum > 100) { 243 | 244 | } 245 | 246 | else if (n4 + cnum === 100 || n4 === 100) { 247 | localStorage.setItem("fwd4", false); 248 | cn4(n4 + cnum); 249 | cfwd4(false); 250 | } 251 | else { 252 | if (cnum === 6) { 253 | pointer = (pointer - 1) 254 | if (pointer < 0) { 255 | pointer = 3; 256 | } 257 | } 258 | cn4(n4 + cnum); 259 | } 260 | 261 | if (n4 + cnum === laddere[0]) { 262 | cn4(ladderh[0]); 263 | } if (n4 + cnum === laddere[1]) { 264 | cn4(ladderh[1]); 265 | } if (n4 + cnum === laddere[2]) { 266 | cn4(ladderh[2]); 267 | } if (n4 + cnum === laddere[3]) { 268 | cn4(ladderh[3]); 269 | } 270 | if (n4 + cnum === snakeh[0]) { 271 | cn4(snakee[0]); 272 | } if (n4 + cnum === snakeh[1]) { 273 | cn4(snakee[1]); 274 | } if (n4 + cnum === snakeh[2]) { 275 | cn4(snakee[2]); 276 | } if (n4 + cnum === snakeh[3]) { 277 | cn4(snakee[3]); 278 | } 279 | } 280 | cben(true); 281 | ccnm(cnum); 282 | 283 | localStorage.setItem("n" + `${pointer + 1}`, eval("n" + `${pointer + 1}`) + cnum); 284 | }, 2000); 285 | 286 | cben(false); 287 | }, 300); 288 | } 289 | return ( 290 | <> 291 |
292 | 293 |
{cnm}
294 |
295 |

296 | Player {ashow[pointer]} Turn 297 |

298 |
299 |
300 |
301 | = 1 ? "" : "hidden"}${start ? "" : "hidden"} small-side2 `}> 302 | = 1 ? "" : "hidden"}text-red-500 text-xl border-solid border-black border-spacing-0 border bg-red-600 z-[2002] opacity-100`} /> 303 | = 1 ? "" : "hidden"}`}>P1 304 | 305 |
306 | = 2 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 307 | 308 | = 2 ? "" : "hidden"}text-xl text-blue-500 border-solid border-black border-spacing-0 border rounded-full`} /> 309 | = 2 ? "" : "hidden"}`}>P2 310 | 311 |
312 | = 3 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 313 | 314 | = 3 ? "" : "hidden"}text-pink-600 text-xl`} /> 315 | = 3 ? "" : "hidden"}`}>P3 316 | 317 |
318 | = 4 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 319 | 320 | = 4 ? "hidden" : "hidden"}text-purple-700 text-xl`} /> 321 | = 4 ? "" : "hidden"}`}>P4 322 | 323 |
324 |
325 |
{ btnc() }} className={`${!ben ? "hidden" : ""} btncsm btndie mt-[100%] py-[15px] rounded-lg hover:shadow-lg active:scale-105 text-xl hover:scale-110 cursor-pointer text-slate-100 text-bold px-[20px] bg-green-700 `}> 326 | Cast the Die 327 |
328 |
329 | Cast the Die 330 |
331 |
332 |
333 | 334 | 335 | 336 |
337 |
338 | 339 |
{cnm}
340 |
341 | 342 |
343 |

344 | Player {ashow[pointer]} Turn 345 |

346 | 347 |
348 |
349 | = 1 ? "" : "hidden"}${start ? "" : "hidden"}`}> 350 | = 1 ? "" : "hidden"}text-red-500 text-xl border-solid border-black border-spacing-0 border bg-red-600 z-[2002] opacity-100`} /> 351 | = 1 ? "" : "hidden"}`}>P1 352 | 353 | = 2 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 354 | 355 | = 2 ? "" : "hidden"}text-xl text-blue-500 border-solid border-black border-spacing-0 border rounded-full`} /> 356 | = 2 ? "" : "hidden"}`}>P2 357 | 358 | = 3 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 359 | 360 | = 3 ? "" : "hidden"}text-pink-600 text-xl`} /> 361 | = 3 ? "" : "hidden"}`}>P3 362 | 363 | = 4 ? "" : "hidden"} ${start ? "" : "hidden"}`}> 364 | 365 | = 4 ? "hidden" : "hidden"}text-purple-700 text-xl`} /> 366 | = 4 ? "" : "hidden"}`}>P4 367 | 368 |
369 |
370 | 371 |
372 |
{ btnc() }} className={`${!ben ? "hidden" : ""} kdfnsv py-[15px] rounded-lg hover:shadow-lg active:scale-105 text-xl hover:scale-110 cursor-pointer text-slate-100 text-bold px-[20px] bg-green-700 `}> 373 | Cast the Die 374 |
375 |
376 | Cast the Die 377 |
378 |
379 |
380 |
381 | 382 | 383 |
384 | 385 | 386 | 387 | ) 388 | } 389 | 390 | export default Play --------------------------------------------------------------------------------