diff --git a/containers/react/package-lock.json b/containers/react/package-lock.json index 62a68fbb..6d4d5b38 100644 --- a/containers/react/package-lock.json +++ b/containers/react/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.3.5", "framer-motion": "^10.12.8", "npm": "^9.6.6", + "qr-code-styling": "^1.6.0-rc.1", "query-string": "^8.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -6140,6 +6141,7 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", + "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -7510,7 +7512,8 @@ "esprima": "^4.0.1", "estraverse": "^5.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1" + "optionator": "^0.8.1", + "source-map": "~0.6.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -8840,6 +8843,7 @@ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.8.tgz", "integrity": "sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==", "dependencies": { + "@emotion/is-prop-valid": "^0.8.2", "tslib": "^2.4.0" }, "optionalDependencies": { @@ -10715,6 +10719,7 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", + "fsevents": "^2.3.2", "graceful-fs": "^4.2.9", "jest-regex-util": "^27.5.1", "jest-serializer": "^27.5.1", @@ -12271,6 +12276,7 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dependencies": { + "graceful-fs": "^4.1.6", "universalify": "^2.0.0" }, "optionalDependencies": { @@ -13770,6 +13776,7 @@ "inBundle": true, "license": "MIT", "dependencies": { + "@colors/colors": "1.5.0", "string-width": "^4.2.0" }, "engines": { @@ -14306,7 +14313,8 @@ "inBundle": true, "license": "BlueOak-1.0.0", "dependencies": { - "@isaacs/cliui": "^8.0.2" + "@isaacs/cliui": "^8.0.2", + "@pkgjs/parseargs": "^0.11.0" }, "engines": { "node": ">=14" @@ -14592,6 +14600,7 @@ "inBundle": true, "license": "MIT", "dependencies": { + "encoding": "^0.1.13", "minipass": "^5.0.0", "minipass-sized": "^1.0.3", "minizlib": "^2.1.2" @@ -14971,6 +14980,7 @@ "inBundle": true, "license": "MIT", "dependencies": { + "encoding": "^0.1.13", "minipass": "^3.1.6", "minipass-sized": "^1.0.3", "minizlib": "^2.1.2" @@ -17958,6 +17968,19 @@ "teleport": ">=0.2.0" } }, + "node_modules/qr-code-styling": { + "version": "1.6.0-rc.1", + "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz", + "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==", + "dependencies": { + "qrcode-generator": "^1.4.3" + } + }, + "node_modules/qrcode-generator": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz", + "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==" + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", @@ -18306,6 +18329,7 @@ "eslint-webpack-plugin": "^3.1.1", "file-loader": "^6.2.0", "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", "html-webpack-plugin": "^5.5.0", "identity-obj-proxy": "^3.0.0", "jest": "^27.4.3", @@ -18742,6 +18766,9 @@ "version": "2.79.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "dependencies": { + "fsevents": "~2.3.2" + }, "bin": { "rollup": "dist/bin/rollup" }, @@ -33695,6 +33722,19 @@ "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==" }, + "qr-code-styling": { + "version": "1.6.0-rc.1", + "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz", + "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==", + "requires": { + "qrcode-generator": "^1.4.3" + } + }, + "qrcode-generator": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz", + "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==" + }, "qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", diff --git a/containers/react/package.json b/containers/react/package.json index 3635d98d..0f333105 100644 --- a/containers/react/package.json +++ b/containers/react/package.json @@ -9,6 +9,7 @@ "axios": "^1.3.5", "framer-motion": "^10.12.8", "npm": "^9.6.6", + "qr-code-styling": "^1.6.0-rc.1", "query-string": "^8.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/containers/react/src/components/App.jsx b/containers/react/src/components/App.jsx index 204d2a28..2a0e4389 100644 --- a/containers/react/src/components/App.jsx +++ b/containers/react/src/components/App.jsx @@ -8,6 +8,7 @@ import PlayButton from "./Game/PlayButton.js"; import Field from "../pages/Field"; import Login42 from "../pages/Login42.js"; import Messages from "../pages/Messages.jsx"; +import QrCode from '../pages/QrCode.jsx' import { useLocation } from "react-router-dom"; import {AnimatePresence} from "framer-motion"; @@ -28,6 +29,7 @@ function AnimatedRoute () { }/> }/> }/> + }/> }/> }/> diff --git a/containers/react/src/pages/QrCode.jsx b/containers/react/src/pages/QrCode.jsx new file mode 100644 index 00000000..d8f2c664 --- /dev/null +++ b/containers/react/src/pages/QrCode.jsx @@ -0,0 +1,66 @@ +import React, { useEffect, useRef, useState } from "react"; +import "../styles/App.css"; +import QRCodeStyling from "qr-code-styling"; +import { motion } from 'framer-motion' +import api from '../script/axiosApi'; + + +const qrCode = new QRCodeStyling({ + width: 300, + height: 300, + // image: "../assets/profile.jpg", + dotsOptions: { + color: "black", + type: "rounded" + }, + backgroundOptions: { + color: "#5843e4", + }, + imageOptions: { + crossOrigin: "anonymous", + margin: 20 + } + }); + +function QrCode () { + const url = "https://www.youtube.com"; + const ref = useRef(null); + + useEffect(() => { + qrCode.append(ref.current); + }, []); + + useEffect(() => { + qrCode.update({ + data: url + }); + }, [url]); + + const getConv = async ()=>{ + try{ + const convs = await api.get("/user") + // const tmpUser = await api.get("/profile") + console.log("test") + console.table(convs); + } + catch(err){ + console.log(err); + } + }; + getConv(); + return ( + +

QrCode

+

Your code is: 231 31 31

+
+ + {} + + + ) +} + +export default QrCode \ No newline at end of file diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css index 31d4b88e..d2a7c169 100644 --- a/containers/react/src/styles/App.css +++ b/containers/react/src/styles/App.css @@ -6,6 +6,14 @@ height: 100%; } +input.qr{ + width: 20%; + border-radius: 5px; + background-color: rgb(66, 66, 66); + margin : 1%; + color:white; +} + .App-logo { height: 40vmin; pointer-events: none;