├── public ├── _redirects ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── img │ ├── bezcrv.png │ ├── invkin.png │ ├── ropesim.png │ └── clothsim.png ├── manifest.json ├── 404.html └── index.html ├── src ├── components │ ├── bezcrv │ │ ├── bezcrv.css │ │ └── bezcrv.js │ ├── invkin │ │ ├── invkin.css │ │ └── invkin.js │ ├── ropesim │ │ ├── items.js │ │ └── ropesim.js │ └── clothsim │ │ ├── items.js │ │ └── clothsim.js ├── reportWebVitals.js ├── App.css ├── index.js ├── index.css ├── App.js ├── logo.svg └── setupTests.js ├── README.md ├── package.json ├── .github └── workflows │ └── main.yml └── .eslintcache /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/img/bezcrv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/img/bezcrv.png -------------------------------------------------------------------------------- /public/img/invkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/img/invkin.png -------------------------------------------------------------------------------- /public/img/ropesim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/img/ropesim.png -------------------------------------------------------------------------------- /public/img/clothsim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/bluelab/HEAD/public/img/clothsim.png -------------------------------------------------------------------------------- /src/components/bezcrv/bezcrv.css: -------------------------------------------------------------------------------- 1 | .bezbox{ 2 | height: 100vh; 3 | overflow: hidden; 4 | } 5 | 6 | .valbox{ 7 | position: absolute; 8 | top: 10%; 9 | left: 10%; 10 | font-size: 1.6em; 11 | color: #b1bdc8; 12 | } 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BlueLab 2 | 3 | A testing playground for my off-topic experiments. 4 | 5 | #### visit 🎲🕹: [bluelab.blueedge.me](https://bluelab.blueedge.me) 6 | 7 | 8 | 9 | | Exp1 - Inverse Kinematics | Exp2 - Bézier Curve | 10 | |-|-| 11 | | ![invkin](./public/img/invkin.png) | ![bezcrv](./public/img/bezcrv.png) | 12 | | Exp3 - Rope Simulation | Exp4 - Cloth Simulation | 13 | | ![invkin](./public/img/ropesim.png) | ![bezcrv](./public/img/clothsim.png) | 14 | -------------------------------------------------------------------------------- /src/components/invkin/invkin.css: -------------------------------------------------------------------------------- 1 | .ikbox{ 2 | color: white; 3 | height: 100vh; 4 | } 5 | 6 | .descrp{ 7 | display: block; 8 | position: absolute; 9 | bottom: 0; 10 | left: 0; 11 | padding: 0 0 24px 48px; 12 | color: #bcc4cd; 13 | } 14 | 15 | .descrp a{ 16 | color: #eaebf0; 17 | font-size: 1em; 18 | } 19 | 20 | .controls{ 21 | display: block; 22 | position: absolute; 23 | bottom: 0; 24 | right: 0; 25 | padding: 48px; 26 | color: #fefefe; 27 | z-index: 2; 28 | } 29 | 30 | .redbd{ 31 | box-sizing: border-box; 32 | border: solid 2px red; 33 | } 34 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | BlueLab 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | BlueLab 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bluelab", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.6.0", 9 | "mathjs": "^9.5.0", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-p5": "^1.3.19", 13 | "react-router-dom": "^5.2.0", 14 | "react-scripts": "4.0.1", 15 | "web-vitals": "^0.2.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build && cp build/index.html build/404.html", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .linkList{ 2 | width: 100%; 3 | min-height: 100vh; 4 | background: #0e0e16; 5 | } 6 | 7 | .expcont{ 8 | display: grid; 9 | justify-content: space-around; 10 | grid-template-columns: repeat(auto-fill, 360px); 11 | grid-row-gap: 6em; 12 | 13 | font-weight: bolder; 14 | padding: 100px; 15 | } 16 | 17 | a{ 18 | font-size: 1.2em; 19 | color: #606c79; 20 | text-decoration: none; 21 | } 22 | 23 | .card{ 24 | width: 360px; 25 | /* margin-bottom: 6em; */ 26 | padding-bottom: 16px; 27 | border-radius: 16px; 28 | overflow: hidden; 29 | box-shadow: 4px 4px 12px #0a0a11; 30 | transition: all 200ms ease-in-out; 31 | } 32 | 33 | .card:hover{ 34 | box-shadow: 8px 8px 24px #0a0a11; 35 | } 36 | 37 | .card a{ 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | min-height: 300px; 42 | } 43 | 44 | .card img{ 45 | max-width: 100%; 46 | filter: brightness(1.25); 47 | margin-bottom: 12px; 48 | } 49 | 50 | .labtitle{ 51 | text-align: center; 52 | font-size: 3em; 53 | font-weight: 600; 54 | color: #a5a6d1; 55 | padding-top: 64px; 56 | } 57 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; 8 | 9 | import InvKin from './components/invkin/invkin'; 10 | import BezCrv from './components/bezcrv/bezcrv'; 11 | import RopeSim from './components/ropesim/ropesim'; 12 | import ClothSim from './components/clothsim/clothsim'; 13 | 14 | ReactDOM.render( 15 | 16 | 17 |
18 | {window.location.pathname!="/"?( 19 | {"<"} Home 20 | ):null} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | , 31 | document.getElementById('root') 32 | ); 33 | 34 | reportWebVitals(); 35 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | *{ 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | *::selection{ 16 | background: inherit; 17 | } 18 | 19 | .home{ 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | padding: 24px; 24 | font-weight: 600; 25 | color: #caccdb; 26 | cursor: pointer; 27 | } 28 | 29 | .boxapp{ 30 | width: 100%; 31 | min-height: 100vh; 32 | background: #0e0e16; 33 | overflow: hidden; 34 | } 35 | 36 | .app{ 37 | width: 100%; 38 | min-height: 100vh; 39 | background: #0e0e16; 40 | } 41 | 42 | code { 43 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 44 | monospace; 45 | } 46 | 47 | input[type="range"]{ 48 | outline: none; 49 | background: none; 50 | } 51 | 52 | body::-webkit-scrollbar { 53 | width: 8px; 54 | background-color: #0e0e16; 55 | } 56 | 57 | body::-webkit-scrollbar-thumb { 58 | width: 8px; 59 | border-radius: 4px; 60 | background-color: #484858; 61 | } 62 | -------------------------------------------------------------------------------- /src/components/ropesim/items.js: -------------------------------------------------------------------------------- 1 | export const Vector = { 2 | diff: (pt1, pt2)=>{ 3 | return pt1.map((x,i)=> pt1[i]-pt2[i]) 4 | }, 5 | scale: (pt, f)=>{ 6 | return pt.map(x => x*f) 7 | }, 8 | add: (pt1, pt2)=>{ 9 | return pt1.map((x,i)=> pt1[i]+pt2[i]) 10 | }, 11 | unit: (pt)=>{ 12 | var f = Math.pow(pt[0]*pt[0] + pt[1]*pt[1], 0.5) 13 | return pt.map(x => x/f) 14 | }, 15 | dis: (pt1, pt2)=>{ 16 | var d2 = Math.pow(pt1[0]-pt2[0],2) + Math.pow(pt1[1]-pt2[1],2) 17 | return Math.pow(d2,0.5) 18 | } 19 | } 20 | 21 | export const shuffle = (n)=>{ 22 | var array = [...Array(n)].map((x,i)=> i) 23 | let currentIndex = n, randomIndex; 24 | while (currentIndex != 0) { 25 | randomIndex = Math.floor(Math.random() * currentIndex); 26 | currentIndex--; 27 | 28 | [array[currentIndex], array[randomIndex]] = [ 29 | array[randomIndex], array[currentIndex]] 30 | } 31 | 32 | return array; 33 | } 34 | 35 | export class Point{ 36 | constructor(x,y,locked=false) { 37 | this.x = [x,y] 38 | this.x0 = [x,y] 39 | this.locked = locked 40 | } 41 | } 42 | 43 | export class Stick{ 44 | constructor(p_a, p_b, ln) { 45 | this.a = p_a 46 | this.b = p_b 47 | this.ln = ln 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Build & deploy to GitHub 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build: 10 | name: Build 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v2 16 | 17 | - name: Install Node.js 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: '16.6.1' 21 | 22 | - name: Install NPM packages 23 | run: npm ci 24 | 25 | - name: Build project 26 | run: CI=false npm run build 27 | 28 | - name: Upload production-ready build files 29 | uses: actions/upload-artifact@v2 30 | with: 31 | name: production-files 32 | path: ./build 33 | 34 | deploy: 35 | name: Deploy 36 | needs: build 37 | runs-on: ubuntu-latest 38 | if: github.ref == 'refs/heads/master' 39 | 40 | steps: 41 | - name: Download artifact 42 | uses: actions/download-artifact@v2 43 | with: 44 | name: production-files 45 | path: ./build 46 | 47 | - name: Deploy to gh-pages 48 | uses: peaceiris/actions-gh-pages@v3 49 | with: 50 | github_token: ${{ secrets.GITHUB_TOKEN }} 51 | cname: bluelab.blueedge.me 52 | publish_dir: ./build 53 | -------------------------------------------------------------------------------- /src/components/clothsim/items.js: -------------------------------------------------------------------------------- 1 | const diff = (pt1, pt2) => pt1.map((x,i)=> pt1[i]-pt2[i]) 2 | const scale = (pt, f) => pt.map(x => x*f) 3 | const add = (pt1, pt2) => pt1.map((x,i)=> pt1[i]+pt2[i]) 4 | const unit = (pt) => { 5 | var f = Math.pow(pt[0]*pt[0] + pt[1]*pt[1], 0.5) 6 | return pt.map(x => x/f) 7 | } 8 | 9 | const dis = (pt1, pt2)=>{ 10 | var d2 = Math.pow(pt1[0]-pt2[0],2) + Math.pow(pt1[1]-pt2[1],2) 11 | return Math.pow(d2,0.5) 12 | } 13 | 14 | const disOfPt = (x,y,pt1,pt2)=>{ 15 | var dy = pt2[1] - pt1[1], dx = pt2[0] - pt1[0], 16 | c = pt2[0]*pt1[1] - pt1[0]*pt2[1], 17 | v = dy*x - dx*y + c, mds = Math.sqrt(dy*dy + dx*dx) 18 | 19 | var ds = Math.abs(v/mds), 20 | midpt = scale(add(pt1, pt2), 0.5) 21 | 22 | if(3*dis([x,y], midpt) < dis(pt1, pt2)) return ds 23 | else return 1000 24 | } 25 | 26 | export const Vector = { 27 | diff: diff, 28 | scale: scale, 29 | add: add, 30 | unit: unit, 31 | dis: dis, 32 | disOfPt: disOfPt 33 | } 34 | 35 | export const shuffle = (n)=>{ 36 | var array = [...Array(n)].map((x,i)=> i) 37 | let currentIndex = n, randomIndex; 38 | while (currentIndex != 0) { 39 | randomIndex = Math.floor(Math.random() * currentIndex); 40 | currentIndex--; 41 | 42 | [array[currentIndex], array[randomIndex]] = [ 43 | array[randomIndex], array[currentIndex]] 44 | } 45 | 46 | return array; 47 | } 48 | 49 | export class Point{ 50 | constructor(x,y,locked=false) { 51 | this.x = [x,y] 52 | this.x0 = [x,y] 53 | this.locked = locked 54 | } 55 | } 56 | 57 | export class Stick{ 58 | constructor(p_a, p_b, ln) { 59 | this.a = p_a 60 | this.b = p_b 61 | this.ln = ln 62 | this.del = false 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './App.css' 3 | 4 | function App() { 5 | const arr = [{ 6 | url: "invKin", 7 | img: "invkin", 8 | name: "Inverse Kinematics" 9 | },{ 10 | url: "bezCrv", 11 | img: "bezcrv", 12 | name: "Bézier Curve" 13 | },{ 14 | url: "ropeSim", 15 | img: "ropesim", 16 | name: "Rope Simulation" 17 | },{ 18 | url: "clothSim", 19 | img: "clothsim", 20 | name: "Cloth Simulation" 21 | } 22 | ] 23 | 24 | return ( 25 |
26 | 28 | 42 | 43 |
BlueLab
44 |
45 | {arr.map(x=>( 46 |
47 | 48 | 49 | {x.name} 50 | 51 |
52 | ))} 53 |
54 |
55 | ); 56 | } 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Edit = () => { 4 | return ( 5 | 6 | 7 | ); 8 | 9 | export const Undo = () => { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/components/invkin/invkin.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import Sketch from "react-p5"; 3 | import * as math from 'mathjs'; 4 | 5 | import './invkin.css'; 6 | 7 | const InvKin = ()=>{ 8 | const [arr, setArr] = useState([]) 9 | const [final, setFinal] = useState(math.complex(0,0)) 10 | const [allset, setAll] = useState(true) 11 | const [drag, setDrag] = useState(true) 12 | const [n, setN] = useState(4) 13 | const [ln, setLn] = useState(10) 14 | const w = window.innerWidth 15 | const h = window.innerHeight 16 | const r = 30 17 | 18 | const adjust = ()=>{ 19 | var tmp = [...arr] 20 | var stl = ln*w/100, count = 2*10, i = n-1, d = -1 21 | 22 | while(count){ 23 | if(i+1==n && d+1==0){ 24 | tmp[n - 1] = math.clone(final) 25 | }else if (i==0 && d==1) { 26 | tmp[0] = math.complex(w/2, h/2) 27 | } 28 | 29 | i+=d 30 | while (i+1>0 && i{ 47 | if(drag){ 48 | setFinal(math.complex(p5.mouseX, p5.mouseY)) 49 | setAll(false) 50 | } 51 | } 52 | 53 | const stop = ()=>setDrag(false) 54 | const start = ()=>setDrag(true) 55 | 56 | const setup = (p5, canvasParentRef) => { 57 | p5.createCanvas(w,h-5).parent(canvasParentRef) 58 | } 59 | 60 | const draw = (p5) => { 61 | if(!allset && !drag) return 62 | p5.background('#0e0e16') 63 | 64 | for (var i = 0; i < n; i++) { 65 | p5.fill('#53546c') 66 | p5.stroke('#53546c') 67 | p5.strokeWeight(0) 68 | p5.ellipse(arr[i].re,arr[i].im, r, r) 69 | if(i!=0){ 70 | p5.strokeWeight(6) 71 | p5.line( 72 | arr[i-1].re, 73 | arr[i-1].im, 74 | arr[i].re, 75 | arr[i].im 76 | ) 77 | } 78 | } 79 | 80 | p5.fill(51, 215, 120) 81 | p5.strokeWeight(0) 82 | p5.ellipse(final.re,final.im, r*0.6, r*0.6) 83 | p5.fill(20, 172, 254) 84 | p5.ellipse(w/2,h/2, r*0.6, r*0.6) 85 | } 86 | 87 | useEffect(()=>{ 88 | if(!allset){ 89 | adjust() 90 | } 91 | }, [allset]) 92 | 93 | useEffect(()=>{ 94 | var tmp = [] 95 | for (var i = 0; i < n; i++) { 96 | tmp.push(math.complex((50 + i*ln)*w/100, h/2)) 97 | } 98 | 99 | setArr(tmp) 100 | if(math.abs(final)==0){ 101 | setFinal(math.complex(w/5, h/4)) 102 | } 103 | 104 | setAll(false) 105 | }, [n, ln]) 106 | 107 | return ( 108 |
109 |
110 | An Implementation of 111 | FABRIK 112 | {" "}algorithm for the simulation of Inverse Kinemetics. 113 | Drag the green dot to interact 114 |
115 | Inpiration: 116 | Sebastian Lague 117 | 118 |
119 |
120 |
121 | 122 | { setN(e.target.value)}} min="2" max="16"/> 124 |
125 |
126 | 127 | { setLn(e.target.value)}} min="5" max="25"/> 129 |
130 |
131 | 136 |
137 | ) 138 | } 139 | 140 | export default InvKin; 141 | -------------------------------------------------------------------------------- /src/components/ropesim/ropesim.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import Sketch from "react-p5"; 3 | import * as math from 'mathjs'; 4 | 5 | import { 6 | Vector, 7 | Point, 8 | Stick, 9 | shuffle 10 | } from './items'; 11 | 12 | const BG_BLUE = '#0e0e16' 13 | const PALE_BLUE = '#53546c' 14 | const LOCKED_RED = '#f04c4c' 15 | const LOCKED_GREEN = '#4cf07a' 16 | const STROKE_WEIGHT = 4 17 | const PT_RADII = 10 18 | const GV_CONST = 9.8 * 1e-4 19 | const ITERATIONS = 101 20 | const FRAMERATE = 24 21 | const w = window.innerWidth 22 | const h = window.innerHeight 23 | 24 | const RopeSim = ()=>{ 25 | const [points, setPoints] = useState([]) 26 | const [sticks, setSticks] = useState([]) 27 | const [dix, setDix] = useState(0) 28 | const [final, setFinal] = useState([w*0.6, h/5]) 29 | const [n, setN] = useState(96) 30 | const [ln, setLn] = useState(0.5) 31 | const r = PT_RADII 32 | 33 | const mouseDragged = (p5)=>{ 34 | setFinal([p5.mouseX, p5.mouseY]) 35 | } 36 | 37 | const start = (p5) => { 38 | var mnd = w*w + h*h, ix = -1 39 | 40 | for (var i = 0; i < points.length; i++) { 41 | if(!points[i].locked) continue 42 | 43 | var dis = Vector.dis(points[i].x, [p5.mouseX, p5.mouseY]) 44 | if(dis < mnd){ 45 | mnd = dis 46 | ix = i 47 | } 48 | } 49 | 50 | if(ix != -1) setDix(ix) 51 | } 52 | 53 | const setup = (p5, canvasParentRef) => { 54 | var cnv = p5.createCanvas(w,h-5).parent(canvasParentRef) 55 | } 56 | 57 | const simulate = (p5)=>{ 58 | for (var i = 0; i < points.length; i++) { 59 | if(points[i].locked) continue 60 | 61 | var prev = [...points[i].x] 62 | points[i].x = Vector.diff(Vector.scale(points[i].x, 2), points[i].x0) 63 | points[i].x = Vector.add(points[i].x, [0,1*GV_CONST*p5.deltaTime*p5.deltaTime ]) 64 | points[i].x0 = prev 65 | } 66 | 67 | for (var j = 0; j < ITERATIONS; j++) { 68 | sticks.forEach((stick, i) => { 69 | var center = Vector.scale(Vector.add(stick.a.x, stick.b.x),0.5), 70 | dir = Vector.unit(Vector.diff(stick.a.x, stick.b.x)) 71 | 72 | if(!stick.a.locked){ 73 | stick.a.x = Vector.add(center, Vector.scale(dir, stick.ln*0.5)) 74 | } 75 | 76 | if(!stick.b.locked){ 77 | stick.b.x = Vector.diff(center, Vector.scale(dir, stick.ln*0.5)) 78 | } 79 | }) 80 | } 81 | } 82 | 83 | const draw = (p5) => { 84 | p5.background(BG_BLUE) 85 | p5.frameRate(FRAMERATE) 86 | 87 | // paint sticks 88 | for (var i = 0; i < sticks.length; i++) { 89 | p5.stroke(PALE_BLUE) 90 | p5.strokeWeight(STROKE_WEIGHT) 91 | p5.line( 92 | sticks[i].a.x[0], 93 | sticks[i].a.x[1], 94 | sticks[i].b.x[0], 95 | sticks[i].b.x[1] 96 | ) 97 | } 98 | 99 | // paint points 100 | for (var i = 0; i < points.length; i++) { 101 | var cr_pos = points[i].x 102 | if(points[i].locked) p5.fill(LOCKED_RED) 103 | else p5.fill(PALE_BLUE) 104 | 105 | if(i==n-1) p5.fill(LOCKED_GREEN) 106 | 107 | p5.strokeWeight(0) 108 | if(points[i].locked){ 109 | p5.ellipse(cr_pos[0], cr_pos[1], r, r) 110 | } 111 | } 112 | 113 | simulate(p5) 114 | } 115 | 116 | useEffect(()=>{ 117 | if(points[dix]){ 118 | points[dix].x = [...final] 119 | } 120 | }, [final]) 121 | 122 | useEffect(()=>{ 123 | var tmp_pt = [], tmp_st = [] 124 | for (var i = 0; i < n; i++) { 125 | if(i < n-1){ 126 | tmp_pt.push(new Point((33 + i*ln)*w/100, h/5, i==0)) 127 | }else{ 128 | tmp_pt.push(new Point(...final, true)) 129 | } 130 | 131 | if(i!=0){ 132 | tmp_st.push(new Stick(tmp_pt[i-1], tmp_pt[i], (ln*w)/100)) 133 | } 134 | } 135 | 136 | setPoints(tmp_pt) 137 | setSticks(tmp_st) 138 | }, [n, ln]) 139 | 140 | return ( 141 |
142 |
143 | An Implementation of 144 | Verlet Integration 145 | {" "} for the simulation of Rope Mechanics. 146 | Drag the dots to interact. 147 |
148 | Inpiration: 149 | Sebastian Lague 150 | 151 |
152 |
153 |
154 | 155 | { setN(e.target.value)}} min="2" max="100"/> 157 |
158 |
159 | 160 | { setLn(e.target.value)}} min="1" max="25"/> 162 |
163 |
164 | 170 |
171 | ) 172 | } 173 | 174 | export default RopeSim; 175 | -------------------------------------------------------------------------------- /src/components/clothsim/clothsim.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import Sketch from "react-p5"; 3 | import * as math from 'mathjs'; 4 | 5 | import { 6 | Vector, 7 | Point, 8 | Stick, 9 | shuffle 10 | } from './items'; 11 | 12 | const BG_BLUE = '#0e0e16' 13 | const PALE_BLUE = '#53546c' 14 | const LOCKED_RED = '#f04c4c' 15 | const LOCKED_GREEN = '#4cf07a' 16 | const STROKE_WEIGHT = 4 17 | const PT_RADII = 10 18 | const GV_CONST = 9.8 * 1e-4 19 | const ITERATIONS = 101 20 | const FRAMERATE = 24 21 | const w = window.innerWidth 22 | const h = window.innerHeight 23 | 24 | const ClothSim = ()=>{ 25 | const [points, setPoints] = useState([[]]) 26 | const [sticks, setSticks] = useState([]) 27 | const [n, setN] = useState(29) 28 | const [m, setM] = useState(14) 29 | const [ln, setLn] = useState(2) 30 | const r = PT_RADII 31 | 32 | const mouseDragged = (p5)=>{ 33 | for (var i = 0; i < sticks.length; i++) { 34 | if(sticks[i].del) continue 35 | var dis = Vector.disOfPt(p5.mouseX, p5.mouseY, sticks[i].a.x, sticks[i].b.x) 36 | if(dis < 1){ 37 | sticks[i].del = true 38 | } 39 | } 40 | } 41 | 42 | const start = (p5) => { 43 | } 44 | 45 | const setup = (p5, canvasParentRef) => { 46 | var cnv = p5.createCanvas(w,h-5).parent(canvasParentRef) 47 | } 48 | 49 | const simulate = (p5)=>{ 50 | for (var i = 0; i < n; i++) { 51 | for (var j = 0; j < m; j++) { 52 | if(points[i][j].locked) continue 53 | 54 | var prev = [...points[i][j].x] 55 | points[i][j].x = Vector.diff(Vector.scale(points[i][j].x, 2), points[i][j].x0) 56 | points[i][j].x = Vector.add(points[i][j].x, [0,1*GV_CONST*p5.deltaTime*p5.deltaTime]) 57 | points[i][j].x0 = prev 58 | } 59 | } 60 | 61 | for (var j = 0; j < ITERATIONS; j++) { 62 | sticks.forEach((stick, i) => { 63 | if(stick.del) return 64 | var center = Vector.scale(Vector.add(stick.a.x, stick.b.x),0.5), 65 | dir = Vector.unit(Vector.diff(stick.a.x, stick.b.x)) 66 | 67 | if(!stick.a.locked){ 68 | stick.a.x = Vector.add(center, Vector.scale(dir, stick.ln*0.5)) 69 | } 70 | 71 | if(!stick.b.locked){ 72 | stick.b.x = Vector.diff(center, Vector.scale(dir, stick.ln*0.5)) 73 | } 74 | }) 75 | } 76 | } 77 | 78 | const draw = (p5) => { 79 | p5.background(BG_BLUE) 80 | p5.frameRate(FRAMERATE) 81 | 82 | // paint sticks 83 | for (var i = 0; i < sticks.length; i++) { 84 | if(sticks[i].del) continue 85 | p5.stroke(PALE_BLUE) 86 | p5.strokeWeight(STROKE_WEIGHT) 87 | p5.line( 88 | sticks[i].a.x[0], 89 | sticks[i].a.x[1], 90 | sticks[i].b.x[0], 91 | sticks[i].b.x[1] 92 | ) 93 | } 94 | 95 | // paint points 96 | for (var i = 0; i < n; i++) { 97 | for (var j = 0; j < m; j++) { 98 | var cr_pos = points[i][j].x 99 | if(points[i][j].locked) p5.fill(LOCKED_RED) 100 | else p5.fill(PALE_BLUE) 101 | 102 | p5.strokeWeight(0) 103 | p5.ellipse(cr_pos[0], cr_pos[1], r, r) 104 | } 105 | } 106 | 107 | simulate(p5) 108 | } 109 | 110 | useEffect(()=>{ 111 | var tmp_pt = [], tmp_st = [] 112 | for (var i = 0; i < n; i++) { 113 | tmp_pt.push([]) 114 | for (var j = 0; j < m; j++) { 115 | var tx = (50 + (2*i - n + 1)*ln*0.5)*w/100, 116 | ty = h/12 + (j*ln*w)/100 117 | 118 | tmp_pt[i].push(new Point(tx,ty, j==0 && i%4==0)) 119 | } 120 | } 121 | 122 | for (var i = 0; i < n - 1; i++) { 123 | for (var j = 0; j < m - 1; j++) { 124 | tmp_st.push(new Stick(tmp_pt[i][j], tmp_pt[i+1][j], (ln*w)/100)) 125 | tmp_st.push(new Stick(tmp_pt[i][j], tmp_pt[i][j+1], (ln*w)/100)) 126 | 127 | if(i+2==n){ 128 | tmp_st.push(new Stick(tmp_pt[i+1][j], tmp_pt[i+1][j+1], (ln*w)/100)) 129 | } 130 | 131 | if(j+2==m){ 132 | tmp_st.push(new Stick(tmp_pt[i][j+1], tmp_pt[i+1][j+1], (ln*w)/100)) 133 | } 134 | } 135 | } 136 | 137 | 138 | setPoints(tmp_pt) 139 | setSticks(tmp_st) 140 | }, [n,m, ln]) 141 | 142 | return ( 143 |
144 |
145 | An Implementation of 146 | Verlet Integration 147 | {" "} for the simulation of Cloth Mechanics. 148 | Drag over sticks to cut them apart. 149 |
150 | Inpiration: 151 | Sebastian Lague 152 | 153 |
154 |
155 |
156 | { setN(e.target.value)}} min="2" max="100"/> 158 | 159 |
160 |
161 | { setM(e.target.value)}} min="2" max="100"/> 163 | 164 |
165 |
166 | { setLn(e.target.value)}} min="1" max="25"/> 168 | 169 |
170 |
171 | 177 |
178 | ) 179 | } 180 | 181 | export default ClothSim; 182 | -------------------------------------------------------------------------------- /src/components/bezcrv/bezcrv.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import Sketch from "react-p5"; 3 | import * as math from 'mathjs'; 4 | 5 | import './bezcrv.css'; 6 | 7 | const BezCrv = ()=>{ 8 | const [arr, setArr] = useState([]) 9 | const [idx, setIdx] = useState(-1) 10 | const [cord, setCord] = useState([]) 11 | const [n, setN] = useState(4) 12 | const [drag, setDrag] = useState(true) 13 | const [showLines, setLines] = useState(true) 14 | const w = window.innerWidth 15 | const h = window.innerHeight 16 | const r = 10, offY = 0.72, spd = 250 17 | 18 | const preload = (tmp)=>{ 19 | var tmp2 = [] 20 | for (var i = 0; i < spd; i++) { 21 | var z 22 | if(tmp!=null){ 23 | z = compute(null, i/spd, 0, tmp) 24 | }else z = compute(null, i/spd) 25 | 26 | tmp2.push(z) 27 | } 28 | 29 | setCord(tmp2) 30 | } 31 | 32 | const mouseClicked = (p5) => { 33 | var d = w, z = 0 34 | 35 | for (var i = 0; i < arr.length; i++) { 36 | var dt = math.abs(math.subtract( 37 | arr[i], 38 | math.complex(p5.mouseX, p5.mouseY) 39 | )) 40 | 41 | if(dt { 55 | if(drag){ 56 | if(idx+1>0){ 57 | var tmp = [...arr] 58 | tmp[idx] = math.complex(p5.mouseX, p5.mouseY) 59 | setArr(tmp) 60 | }else if (idx+1==0) { 61 | mouseClicked(p5) 62 | } 63 | } 64 | } 65 | 66 | const mouseReleased = (p5) => { 67 | preload() 68 | setIdx(-1) 69 | } 70 | 71 | const setup = (p5, canvasParentRef) => { 72 | p5.createCanvas(w,h).parent(canvasParentRef) 73 | } 74 | 75 | const compute = (p5,t=0.5,fr=0,tmp=[...arr])=>{ 76 | if(tmp.length==0) return math.complex(0,0) 77 | 78 | var lv = tmp.length, 79 | tmp2 = [] 80 | for (var i = 0; i < lv-1; i++) { 81 | var z = math.subtract(tmp[i+1],tmp[i]) 82 | z = math.add(tmp[i],math.multiply(z,t)) 83 | tmp2.push(z) 84 | if(fr && showLines){ 85 | p5.stroke(83, 84, 108) 86 | p5.strokeWeight(2) 87 | p5.line( 88 | tmp[i].re, 89 | tmp[i].im, 90 | tmp[i+1].re, 91 | tmp[i+1].im 92 | ) 93 | 94 | p5.fill(83, 84, 108) 95 | p5.strokeWeight(0) 96 | p5.ellipse(z.re,z.im, r*0.6, r*0.6) 97 | } 98 | } 99 | 100 | if(tmp2.length==1){ 101 | if(fr){ 102 | p5.fill('#33d778') 103 | p5.strokeWeight(0) 104 | p5.ellipse(tmp2[0].re,tmp2[0].im, r*0.8, r*0.8) 105 | } 106 | return tmp2[0] 107 | } 108 | 109 | return compute(p5, t, fr, tmp2) 110 | } 111 | 112 | const osmod = (x,y)=>{ 113 | var z = Math.floor(x/y), rm = x%y 114 | if(z&1) rm = y - rm 115 | 116 | return rm 117 | } 118 | 119 | const lerp = (t)=>{ 120 | var col1 = [73, 240, 143],//[48, 168, 255], 121 | col2 = [5, 152, 71] //[177, 50, 232] 122 | 123 | return [ 124 | col1[0]*(1-t) + t*col2[0], 125 | col1[1]*(1-t) + t*col2[1], 126 | col1[2]*(1-t) + t*col2[2] 127 | ] 128 | } 129 | 130 | const draw = (p5) => { 131 | p5.background('#0e0e16') 132 | var rm = osmod(p5.frameCount,spd) 133 | 134 | var pz = compute(p5, 0, 1) 135 | document.getElementById('val').innerText = Math.round(rm*100/spd)/100 136 | for (var t = 1; t <= rm; t++) { 137 | var fr = t==rm?1:0,z 138 | if(fr) z = compute(p5, t/spd, fr) 139 | else{ 140 | z = cord[t] 141 | // p5.stroke("#33d778") 142 | p5.stroke(lerp(t/spd)) 143 | p5.strokeWeight(4) 144 | p5.line(pz.re,pz.im,z.re,z.im) 145 | pz = math.clone(z) 146 | } 147 | } 148 | 149 | for (var i = 0; i < arr.length; i++) { 150 | p5.fill(20, 172, 254) 151 | p5.strokeWeight(0) 152 | p5.ellipse(arr[i].re,arr[i].im, r, r) 153 | } 154 | } 155 | 156 | const stop = ()=>setDrag(false) 157 | const start = ()=>setDrag(true) 158 | 159 | useEffect(()=>{ 160 | var tmp = [], 161 | ln = 1/n, 162 | z = math.complex(w/2, h*offY), 163 | dir = math.complex(-ln*w,0), 164 | arg = 2*math.pi/n 165 | 166 | z = math.add(z, math.multiply(dir, 0.5)) 167 | tmp.push(z) 168 | for (var i = 0; i < n-1; i++) { 169 | dir = math.multiply(dir, math.complex( 170 | math.cos(arg), 171 | math.sin(arg) 172 | )) 173 | 174 | z = math.add(z, dir) 175 | tmp.push(z) 176 | } 177 | 178 | setArr(tmp) 179 | preload(tmp) 180 | }, [n]) 181 | 182 | return ( 183 |
184 |
t = 0
185 |
186 | A Simple Visualization of 187 | 188 | {" "}Bézier Curve 189 | {" "}using recursive approach. Drag the blue dots to change the 190 | shape of curve.
191 | Inspiration: 192 | Freya Holmér 193 | 194 |
195 |
196 |
197 | 198 | { setN(e.target.value)}} min="2" max="16"/> 200 |
201 |
202 | 203 | { setLines(e.target.checked)}} 205 | min="5" max="25"/> 206 |
207 |
208 |
209 | 215 |
216 |
217 | ) 218 | } 219 | 220 | export default BezCrv; 221 | -------------------------------------------------------------------------------- /.eslintcache: -------------------------------------------------------------------------------- 1 | [{"D:\\Code\\ReactJs\\rough\\src\\index.js":"1","D:\\Code\\ReactJs\\rough\\src\\App.js":"2","D:\\Code\\ReactJs\\rough\\src\\reportWebVitals.js":"3","D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\InfLoops.js":"4","D:\\Code\\ReactJs\\rough\\src\\components\\ludo\\ludo.js":"5","D:\\Code\\ReactJs\\rough\\src\\components\\paintHouse\\PaintHouse.js":"6","D:\\Code\\ReactJs\\rough\\src\\components\\blockPuzzle\\BlockPuzzle.js":"7","D:\\Code\\ReactJs\\rough\\src\\components\\lockpick\\LockPick.js":"8","D:\\Code\\ReactJs\\rough\\src\\components\\switchBox\\SwitchBox.js":"9","D:\\Code\\ReactJs\\rough\\src\\components\\wordSearch\\WordSearch.js":"10","D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\levels.js":"11","D:\\Code\\ReactJs\\rough\\src\\components\\blockPuzzle\\allShapes.js":"12","D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\cells.js":"13","D:\\Code\\ReactJs\\rough\\src\\components\\ludo\\pieces.js":"14","D:\\Code\\ReactJs\\rough\\src\\components\\lockpick\\spring.js":"15","D:\\Github\\bluelab\\src\\index.js":"16","D:\\Github\\bluelab\\src\\App.js":"17","D:\\Github\\bluelab\\src\\reportWebVitals.js":"18","D:\\Github\\bluelab\\src\\components\\bezcrv\\bezcrv.js":"19","D:\\Github\\bluelab\\src\\components\\invkin\\invkin.js":"20","D:\\Github\\bluelab\\src\\components\\ropesim\\ropesim.js":"21","D:\\Github\\bluelab\\src\\components\\ropesim\\items.js":"22","D:\\Github\\bluelab\\src\\components\\clothsim\\clothsim.js":"23","D:\\Github\\bluelab\\src\\components\\clothsim\\items.js":"24"},{"size":1592,"mtime":1632651157108,"results":"25","hashOfConfig":"26"},{"size":539,"mtime":1632651170259,"results":"27","hashOfConfig":"26"},{"size":362,"mtime":499162500000,"results":"28","hashOfConfig":"26"},{"size":7171,"mtime":1623564962469,"results":"29","hashOfConfig":"26"},{"size":7163,"mtime":1632593569558,"results":"30","hashOfConfig":"26"},{"size":11450,"mtime":1612116796839,"results":"31","hashOfConfig":"26"},{"size":9038,"mtime":1624372254019,"results":"32","hashOfConfig":"26"},{"size":2758,"mtime":1622830986188,"results":"33","hashOfConfig":"26"},{"size":1098,"mtime":1608575432984,"results":"34","hashOfConfig":"26"},{"size":8135,"mtime":1623569086161,"results":"35","hashOfConfig":"26"},{"size":2831,"mtime":1618826356839,"results":"36","hashOfConfig":"26"},{"size":401,"mtime":1624372356242,"results":"37","hashOfConfig":"26"},{"size":2107,"mtime":1610642374821,"results":"38","hashOfConfig":"26"},{"size":5223,"mtime":1618828287577,"results":"39","hashOfConfig":"26"},{"size":1099,"mtime":1622757192751,"results":"40","hashOfConfig":"26"},{"size":1078,"mtime":1648455546230,"results":"41","hashOfConfig":"42"},{"size":2298,"mtime":1648462678828,"results":"43","hashOfConfig":"42"},{"size":362,"mtime":499162500000,"results":"44","hashOfConfig":"42"},{"size":5328,"mtime":1632768845194,"results":"45","hashOfConfig":"42"},{"size":3459,"mtime":1645720643240,"results":"46","hashOfConfig":"42"},{"size":4484,"mtime":1648456179006,"results":"47","hashOfConfig":"42"},{"size":1063,"mtime":1645813125838,"results":"48","hashOfConfig":"42"},{"size":5011,"mtime":1648462406177,"results":"49","hashOfConfig":"42"},{"size":1480,"mtime":1648462036615,"results":"50","hashOfConfig":"42"},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"iyky5x",{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"57"},{"filePath":"58","messages":"59","errorCount":0,"fatalErrorCount":0,"warningCount":17,"fixableErrorCount":0,"fixableWarningCount":0,"source":"60","usedDeprecatedRules":"57"},{"filePath":"61","messages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":33,"fixableErrorCount":0,"fixableWarningCount":0,"source":"63","usedDeprecatedRules":"57"},{"filePath":"64","messages":"65","errorCount":0,"fatalErrorCount":0,"warningCount":21,"fixableErrorCount":0,"fixableWarningCount":0,"source":"66","usedDeprecatedRules":"57"},{"filePath":"67","messages":"68","errorCount":0,"fatalErrorCount":0,"warningCount":32,"fixableErrorCount":0,"fixableWarningCount":0,"source":"69","usedDeprecatedRules":"57"},{"filePath":"70","messages":"71","errorCount":0,"fatalErrorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":"72","usedDeprecatedRules":"57"},{"filePath":"73","messages":"74","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"57"},{"filePath":"75","messages":"76","errorCount":0,"fatalErrorCount":0,"warningCount":22,"fixableErrorCount":0,"fixableWarningCount":0,"source":"77","usedDeprecatedRules":"57"},{"filePath":"78","messages":"79","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"57"},{"filePath":"80","messages":"81","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"57"},{"filePath":"82","messages":"83","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"84","usedDeprecatedRules":"57"},{"filePath":"85","messages":"86","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"87","usedDeprecatedRules":"57"},{"filePath":"88","messages":"89","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"90","usedDeprecatedRules":"57"},{"filePath":"91","messages":"92","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1nqmehk",{"filePath":"93","messages":"94","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"95","messages":"96","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"97"},{"filePath":"98","messages":"99","errorCount":0,"fatalErrorCount":0,"warningCount":7,"fixableErrorCount":0,"fixableWarningCount":2,"source":"100","usedDeprecatedRules":"97"},{"filePath":"101","messages":"102","errorCount":0,"fatalErrorCount":0,"warningCount":10,"fixableErrorCount":0,"fixableWarningCount":2,"source":"103","usedDeprecatedRules":"97"},{"filePath":"104","messages":"105","errorCount":0,"fatalErrorCount":0,"warningCount":12,"fixableErrorCount":0,"fixableWarningCount":2,"source":null},{"filePath":"106","messages":"107","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"108","usedDeprecatedRules":"97"},{"filePath":"109","messages":"110","errorCount":0,"fatalErrorCount":0,"warningCount":14,"fixableErrorCount":0,"fixableWarningCount":2,"source":null},{"filePath":"111","messages":"112","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"D:\\Code\\ReactJs\\rough\\src\\index.js",[],"D:\\Code\\ReactJs\\rough\\src\\App.js",[],"D:\\Code\\ReactJs\\rough\\src\\reportWebVitals.js",[],["113","114"],"D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\InfLoops.js",["115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131"],"import React, {useState, useEffect} from 'react';\r\nimport './infLoops.css';\r\n\r\nimport {\r\n OneCell,\r\n TwoLcell,\r\n TwoLineCell,\r\n Threecell,\r\n FourCell\r\n} from './cells.js';\r\n\r\nimport levels from './levels.js';\r\n\r\nexport default class InfLoops extends React.PureComponent{\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n arr: [\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0]\r\n ],\r\n color: \"#5c6374\",\r\n level: 0,\r\n isCompleted: false,\r\n devch: false\r\n }\r\n }\r\n\r\n oneStep(x){\r\n var y = Math.floor(x/4);\r\n x%=4;\r\n x+=1;\r\n x%=4;\r\n x+=4*y;\r\n return x;\r\n }\r\n\r\n oneTypeAhead(x){\r\n var y = Math.floor(x/4);\r\n y+=1;\r\n y%=6;\r\n x%=4;\r\n x+=4*y;\r\n return x;\r\n }\r\n\r\n isValid(i,j){\r\n var ln = this.state.arr.length;\r\n return i>=0 && j>=0 && i{\r\n this.hasWon();\r\n });\r\n }else{\r\n if(this.state.level!=0) return;\r\n tmp[i][j]=this.oneTypeAhead(tmp[i][j]);\r\n this.setState({arr: tmp});\r\n }\r\n }\r\n\r\n floorGang(i,j){\r\n return Math.floor(this.state.arr[i][j]/4);\r\n }\r\n\r\n randArr(){\r\n var tmp = [\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0],\r\n [0,0,0,0,0,0,0,0]\r\n ];\r\n\r\n var ln = tmp.length;\r\n\r\n for (var i = 0; i < ln; i++) {\r\n for (var j = 0; j < ln; j++) {\r\n if(i%(ln-1) + j%(ln-1) == 0){\r\n tmp[i][j] = Math.floor(Math.random()*12);\r\n }else if ((i%(ln-1))*(j%(ln-1)) == 0) {\r\n tmp[i][j] = Math.floor(Math.random()*20);\r\n }else{\r\n tmp[i][j] = Math.floor(Math.random()*24);\r\n }\r\n }\r\n }\r\n\r\n this.setState({arr: tmp});\r\n }\r\n\r\n componentWillMount(){\r\n window.addEventListener('contextmenu', event => event.preventDefault());\r\n window.addEventListener('keydown', (e) => {\r\n if(e.repeat) return;\r\n\r\n // flag = true;\r\n if (e.keyCode === 81) {\r\n console.log(\"CURR\");\r\n console.log(this.state.arr);\r\n // console.log(\"ORG\");\r\n // console.log(this.state.org);\r\n }\r\n\r\n if(e.keyCode>48 && e.keyCode<58){\r\n this.playLevel(e.keyCode-48)\r\n }\r\n\r\n if (e.keyCode == 32) {\r\n console.log(\"Space was pressed!\");\r\n }\r\n\r\n })\r\n\r\n this.randArr();\r\n }\r\n\r\n render(){\r\n return(\r\n
\r\n
\r\n
\r\n {this.state.arr.map((row,i)=>{\r\n return (\r\n
\r\n {row.map((sq,j)=>{\r\n return (\r\n {\r\n this.rotCell(i,j,e.button);\r\n }}\r\n >\r\n {this.floorGang(i,j)==1?\r\n \r\n :null}\r\n\r\n {this.floorGang(i,j)==2?\r\n \r\n :null}\r\n\r\n {this.floorGang(i,j)==3?\r\n \r\n :null}\r\n\r\n {this.floorGang(i,j)==4?\r\n \r\n :null}\r\n\r\n {this.floorGang(i,j)==5?\r\n \r\n :null}\r\n
\r\n )\r\n })}\r\n
\r\n )\r\n })}\r\n
\r\n
\r\n
\r\n \r\n {this.state.level==0?\"Design\":\"Level \"+this.state.level}\r\n \r\n
\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\ludo\\ludo.js",["132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164"],"import React, {useState, useEffect} from 'react';\r\nimport './ludo.css';\r\nimport './props.css';\r\n\r\nimport {\r\n LudoPiece\r\n} from './pieces.js';\r\n\r\nexport default class InfLoops extends React.PureComponent{\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n nums: true,\r\n celln: -2,\r\n prev: 0,\r\n diceNum: 0,\r\n offsets: [50,11,24,37]\r\n }\r\n }\r\n\r\n incrementCell(x=0){\r\n if(this.state.celln<0 || x){\r\n if(this.state.diceNum==6){\r\n this.setState({celln: 0});\r\n }\r\n\r\n if(x==1){\r\n this.setState({celln: -1});\r\n }\r\n }else{\r\n var moveInt = setInterval(()=>{\r\n this.setState({celln: (this.state.celln+1)%52});\r\n if(this.state.celln -this.state.prev + 52*(this.state.prev>this.state.celln)>=this.state.diceNum){\r\n clearInterval(moveInt);\r\n }\r\n },170);\r\n }\r\n }\r\n\r\n throwDice(){\r\n this.setState({\r\n diceNum: Math.floor(Math.random()*6)+1,\r\n prev: this.state.celln\r\n },()=>{\r\n var dice = document.getElementById('dice');\r\n dice.classList.add('animDice');\r\n\r\n setTimeout(()=>{\r\n dice.classList.remove('animDice');\r\n },200);\r\n this.incrementCell();\r\n })\r\n }\r\n\r\n giveNum(x, ln){\r\n\r\n if(ln==0){\r\n if(x%3==0) return 23 - Math.floor(x/3);\r\n else if(x==1) return 24;\r\n else if(x%3==2) return 25 + Math.floor((x-2)/3);\r\n else return Math.floor((x-1)/3)+51;\r\n }\r\n\r\n if(ln==1){\r\n if(x>11) return 22-x;\r\n else if(x==6) return 11;\r\n else if(x<6) return 12+x;\r\n else return x+45;\r\n }\r\n\r\n if(ln==2){\r\n if(x<6) return 31+x;\r\n else if(x==11) return 37;\r\n else if(x>11) return 55-x;\r\n else return 62-x; //\r\n }\r\n\r\n if(ln==3){\r\n if(x%3==0) return (Math.floor((12-x)/3)+52)%52;\r\n else if(x==16) return 50;\r\n else if(x%3==2) return Math.floor((x-2)/3) + 44;\r\n else return Math.floor((13-x)/3)+52;\r\n }\r\n }\r\n\r\n specialCell(x, ln){\r\n var nm = this.giveNum(x, ln);\r\n\r\n var cs = \"\";\r\n\r\n if(nm>51 || nm%13==0){\r\n if(ln==0) cs+=\"greencell \";\r\n if(ln==1) cs+=\"redcell \";\r\n if(ln==2) cs+=\"yellowcell \";\r\n if(ln==3) cs+=\"bluecell \";\r\n }\r\n\r\n if(nm%13==0 && nm<52){\r\n cs+=\"star\";\r\n }\r\n\r\n if((nm+2)%13==0 && nm<52){\r\n if(ln==0) cs+=\"arrowcell greenarrow\";\r\n if(ln==1) cs+=\"arrowcell redarrow\";\r\n if(ln==2) cs+=\"arrowcell yellowarrow\";\r\n if(ln==3) cs+=\"arrowcell bluearrow\";\r\n }\r\n\r\n if((nm+5)%13==0 && nm<52){\r\n if(ln==0) cs+=\"starcell\";\r\n if(ln==1) cs+=\"starcell\";\r\n if(ln==2) cs+=\"starcell\";\r\n if(ln==3) cs+=\"starcell\";\r\n }\r\n\r\n return cs;\r\n }\r\n\r\n givePos(x){\r\n if(x>=0){\r\n var cell = document.getElementById('cell'+x);\r\n\r\n if(cell){\r\n return [cell.offsetTop, cell.offsetLeft];\r\n }else{\r\n return null;\r\n }\r\n }else{\r\n var cell = document.getElementById('blueh'+Math.abs(x));\r\n\r\n if(cell){\r\n return [cell.offsetTop, cell.offsetLeft];\r\n }else{\r\n return null;\r\n }\r\n }\r\n }\r\n\r\n componentWillMount(){\r\n setTimeout(()=>{\r\n this.incrementCell(1);\r\n },50);\r\n }\r\n\r\n render(){\r\n var a = [];\r\n for (var i = 0; i < 18; i++) {\r\n a.push(i);\r\n }\r\n\r\n return(\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {a.map(x=>{\r\n return (\r\n {this.state.nums?this.giveNum(x,0):null}
\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {a.map(x=>{\r\n return (\r\n {this.state.nums?this.giveNum(x,1):null}
\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n {a.map(x=>{\r\n return (\r\n {this.state.nums?this.giveNum(x,2):null}
\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {a.map(x=>{\r\n return (\r\n {this.state.nums?this.giveNum(x,3):null}
\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.diceNum}
\r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\paintHouse\\PaintHouse.js",["165","166","167","168","169","170","171","172","173","174","175","176","177","178","179","180","181","182","183","184","185"],"import React from 'react';\n\nimport './paintHouse.css';\n\nexport default class PaintHouse extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state={\n arr: [\n [0,0,0,0,0,0,-1,0],\n [0,0,0,0,0,0,-1,0],\n [0,0,0,0,0,0,-1,0],\n [0,0,0,0,2,0,0,0],\n [0,0,0,0,0,0,0,0],\n [0,0,0,0,0,0,0,0],\n [0,0,0,-1,0,-1,-1,0],\n [0,0,0,0,0,0,0,0]\n ],\n\n levels: [\n [\n [0, 0,0,-1,0,0,0,0],\n [0,-1,0,-1,0,0,0,0],\n [0,-1,0,0,0,2,0,0],\n [0,0,0,0,0,0,0,0],\n [0,0,0,0,-1,0,0,0],\n [0,0,-1,0,0,0,0,0],\n [-1,0,0,-1,0,0,0,0],\n [-1,-1,0,0,0,0,0,0]\n ],\n [\n [0,0,0,0,0,0,-1,-1],\n [0,0,0,0,-1,0,0,0],\n [0,0,0,0,0,0,0,0],\n [0,0,0,0,2,0,0,0],\n [0,0,-1,0,0,0,0,0],\n [0,0,0,0,0,-1,0,0],\n [0,0,-1,-1,0,0,0,0],\n [-1,0,0,0,0,0,0,0]\n ],\n [\n [-1,0,0,0,-1,0,0,0],\n [0,0,-1,0,0,0,-1,0],\n [0,0,0,0,2,0,0,0],\n [0,0,0,0,0,0,0,-1],\n [0,0,0,-1,0,-1,0,0],\n [-1,0,0,-1,0,0,-1,0],\n [0,0,0,0,0,0,-1,0],\n [0,0,0,0,0,0,0,0]\n ],\n [\n [-1,0,0,0,0,-1,0,0],\n [0,0,0,-1,0,0,0,0],\n [0,-1,0,0,-1,0,0,0],\n [0,0,0,2,0,0,0,0],\n [0,0,0,-1,0,-1,0,0],\n [0,0,0,0,0,-1,0,0],\n [0,0,0,0,0,0,0,0],\n [0,0,0,0,0,0,0,0]\n ],\n [\n [0, 0, -1, 0, 0, 0, 0, 0],\n [-1, 0, -1, 0, -1, 0, 0, 0],\n [0, 0, 0, 0, -1, 0, 0, 0],\n [0, -1, 0, -1, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, -1, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0]\n ]\n ],\n x: 3,\n y: 4,\n posx: 3,\n posy: 4,\n dim: 8,\n gameState: 0,\n tmp: 0\n }\n }\n\n isValid(xi,yi){\n return 0<=xi && xi0){\n console.log(\"Over\");\n this.setState({gameState: 2})\n }else{\n console.log(\"Won\");\n this.setState({gameState: 1})\n }\n\n }\n\n move(dx,dy){\n if(this.state.gameState!=0) return;\n\n var x = this.state.x,\n y = this.state.y,\n arr = this.state.arr\n\n\n this.setState({x: x,y: y, arr: arr})\n\n var keepMoving = setInterval(()=>{\n if(this.isValid(x+dx,y+dy)){\n if(arr[x+dx][y+dy]==0){\n arr[x][y] = 1\n x+=dx\n y+=dy\n this.setState({x: x,y: y, arr: arr}, ()=>{\n this.checkFailure()\n })\n }else{\n clearInterval(keepMoving)\n }\n }else{\n clearInterval(keepMoving)\n }\n }, 50)\n\n }\n\n componentWillMount(){\n window.addEventListener('contextmenu', event => event.preventDefault());\n\n window.addEventListener('keydown', (e) => {\n\n if(e.keyCode>48 && e.keyCode<49+this.state.levels.length){\n this.setLevel(e.keyCode-49)\n }\n\n if (e.keyCode === 82) {\n // console.log('Left')\n this.resetGame()\n }\n\n if (e.keyCode === 69) {\n // console.log('Left')\n this.editLevel()\n }\n\n if (e.keyCode === 65 || e.keyCode === 37) {\n // console.log('Left')\n this.move(0,-1)\n }\n\n else if (e.keyCode === 87 || e.keyCode === 38) {\n // console.log('Up')\n this.move(-1,0)\n }\n\n else if (e.keyCode === 68 || e.keyCode === 39) {\n // console.log('Right')\n this.move(0,1)\n }\n\n else if (e.keyCode === 83 || e.keyCode === 40) {\n // console.log('Down')\n this.move(1,0)\n }\n\n else if (e.keyCode === 81) {\n console.log(this.state.arr);\n }\n });\n }\n\n render(){\n var x = this.state.x,\n y = this.state.y,\n dim = this.state.dim\n\n x = (x*82).toString()+\"px\"\n y = (y*82).toString()+\"px\"\n\n return(\n
\n
\n
\n {this.state.arr.map((row,i)=>{\n return (\n
\n {row.map((sq,j)=>{\n if(this.state.arr[i][j]==0){\n return (\n {\n this.toggleCell(i,j,event.button)\n }}\n key={i*100+j}>
\n )\n }else if (this.state.arr[i][j]==-1) {\n return (\n {\n this.toggleCell(i,j,event.button)\n }}\n key={i*100+j}>
\n )\n }else{\n return
\n }\n })}\n
\n )\n })}\n
\n\n {this.state.gameState==1?\n Level Complete:null}\n {this.state.gameState==2?\n Game Over:null}\n \n
\n
\n
\n \n \n \n
\n \n Edit\n \n
\n
\n
\n \n \n \n \n \n
\n \n Restart\n \n
\n
\n \n \n );\n }\n}\n","D:\\Code\\ReactJs\\rough\\src\\components\\blockPuzzle\\BlockPuzzle.js",["186","187","188","189","190","191","192","193","194","195","196","197","198","199","200","201","202","203","204","205","206","207","208","209","210","211","212","213","214","215","216","217"],"import React, {useState, useEffect} from 'react';\r\nimport './blockPuzzle.css';\r\n\r\nimport allShapes from './allShapes.js';\r\n\r\nconst BlockPuzzle = ()=>{\r\n const [arr, setArr] = useState([]);\r\n const [ovArr, setOverArr] = useState([]);\r\n const [rows, setRow] = useState(6);\r\n const [shapes, setShapes] = useState(allShapes);\r\n const [fshp, setFshp] = useState([]);\r\n const [shape, setShape] = useState(\"\");\r\n const [shcell, setShcell] = useState(48);\r\n const [isPlay, setPlay] = useState(true);\r\n const [offSet, setOff] = useState([0,0]);\r\n const [dshape, setDShape] = useState(0);\r\n const [shArr, setShArr] = useState([]);\r\n\r\n const dragStart = (e)=>{\r\n var img = new Image();\r\n img.src = null;\r\n e.dataTransfer.setDragImage(img, 0, 0);\r\n\r\n if(!isPlay){\r\n var idx = e.target.dataset.idx;\r\n if(!idx) return;\r\n if(idx.length<2) idx = '0'+idx;\r\n setShape(idx);\r\n }else{\r\n var sh = e.target.dataset.sh,\r\n sp = e.target.dataset.sp,\r\n px = e.target.dataset.px,\r\n py = e.target.dataset.py;\r\n\r\n if(sh && sp && px && py){\r\n setDShape(sh);\r\n setOff([px,py]);\r\n var tmp = [],\r\n str = shapes[sh];\r\n\r\n for (var i = 0; i < rows; i++) tmp.push([]);\r\n\r\n var r1=-1,r2=-1,c1=-1,c2=-1;\r\n\r\n for (var i = 0; i < str.length; i+=2) {\r\n var j = (parseInt(sp)+i)%str.length,\r\n cp = str.substring(j,j+2);\r\n\r\n cp = parseInt(cp);\r\n var cx = Math.floor(cp/rows),\r\n cy = cp%rows;\r\n\r\n tmp[cx][cy] = 1;\r\n }\r\n\r\n\r\n for (var i = 0; i < tmp.length; i++) {\r\n var isFill = false;\r\n for (var j = 0; j < tmp[i].length; j++) isFill|=tmp[i][j]!=null;\r\n if(r1==-1 && isFill) r1 = i;\r\n if(isFill) r2 = i;\r\n }\r\n\r\n for (var j = 0; j < rows; j++) {\r\n var isFill = false;\r\n for (var i = 0; i < rows; i++) isFill|=tmp[i][j]!=null;\r\n if(c1==-1 && isFill) c1 = j;\r\n if(isFill) c2 = j;\r\n }\r\n\r\n var sharr = tmp.map((row, i)=>{\r\n if(ir2) return null;\r\n var rmp = [];\r\n for (var j = c1; j < c2+1; j++) {\r\n rmp.push(row[j]!=null?parseInt(sh):-1);\r\n }\r\n\r\n return rmp;\r\n }).filter(x=> x!=null);\r\n\r\n setShArr(sharr);\r\n }\r\n }\r\n }\r\n\r\n const dragOver = (e)=>{\r\n e.preventDefault();\r\n var idx = e.target.dataset.idx;\r\n if(!idx) return;\r\n\r\n if(!isPlay){\r\n if(idx.length<2) idx = '0'+idx;\r\n var sh = shape;\r\n if(!sh.endsWith(idx)) setShape(sh+idx);\r\n }else{\r\n var tmpArr = [],\r\n isValid = true,\r\n cx = Math.floor(idx/rows),\r\n cy = idx%rows;\r\n\r\n for (var i = 0; i < rows; i++) tmpArr.push([]);\r\n\r\n for (var i = 0; i < shArr.length; i++) {\r\n for (var j = 0; j < shArr[i].length; j++) {\r\n var px = cx+i-offSet[0],\r\n py = cy+j-offSet[1];\r\n\r\n if(px<0 || px>rows-1 || py<0 || py>rows-1) return;\r\n\r\n if(arr[px][py]!=-1 && shArr[i][j]!=-1) return;\r\n\r\n if(arr[px][py]==-1){\r\n tmpArr[px][py] = shArr[i][j];\r\n }\r\n }\r\n }\r\n\r\n setOverArr(tmpArr);\r\n }\r\n }\r\n\r\n const dragDrop = (e)=>{\r\n setOverArr([]);\r\n\r\n e.preventDefault();\r\n var idx = e.target.dataset.idx;\r\n if(!idx){\r\n setOff([0,0]);\r\n setShArr([]);\r\n return;\r\n };\r\n\r\n if(!isPlay){\r\n var tmpshapes = [...shapes];\r\n tmpshapes.push(shape);\r\n setShapes(tmpshapes);\r\n }else{\r\n var tmpArr = [...arr],\r\n isValid = true,\r\n cx = Math.floor(idx/rows),\r\n cy = idx%rows;\r\n\r\n for (var i = 0; i < rows; i++) tmpArr.push([]);\r\n\r\n for (var i = 0; i < shArr.length; i++) {\r\n for (var j = 0; j < shArr[i].length; j++) {\r\n var px = cx+i-offSet[0],\r\n py = cy+j-offSet[1];\r\n\r\n if(px<0 || px>rows-1 || py<0 || py>rows-1){\r\n setOff([0,0]);\r\n setShArr([]);\r\n return;\r\n };\r\n\r\n if(shArr[i]==null || (tmpArr[px][py]!=-1 && shArr[i][j]!=-1)){\r\n setOff([0,0]);\r\n setShArr([]);\r\n return;\r\n };\r\n\r\n if(tmpArr[px][py]==-1){\r\n tmpArr[px][py] = shArr[i][j];\r\n }\r\n }\r\n }\r\n\r\n var tfshp = [...fshp];\r\n tfshp.push(shapes[dshape]);\r\n setFshp(tfshp);\r\n setArr(tmpArr);\r\n }\r\n\r\n }\r\n\r\n const rainBowColor = (idx)=>{\r\n if(idx==-1){\r\n return 'inherit';\r\n }\r\n\r\n var i = (idx * 255 / shapes.length);\r\n var r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128);\r\n var g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128);\r\n var b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128);\r\n return 'rgb(' + r + ',' + g + ',' + b + ')';\r\n }\r\n\r\n const shapeDiv = ()=>{\r\n return shapes.map((shp,idx)=>{\r\n if(fshp.includes(shp) && isPlay) return null;\r\n\r\n var tmp = [];\r\n for (var i = 0; i < rows; i++) tmp.push([]);\r\n\r\n for (var j = 0; j < shp.length; j+=2) {\r\n var cp = shp.substring(j,j+2);\r\n cp = parseInt(cp);\r\n var cx = Math.floor(cp/rows),\r\n cy = cp%rows;\r\n\r\n tmp[cx][cy] = j;\r\n }\r\n\r\n var r1=-1,r2=-1,c1=-1,c2=-1;\r\n\r\n for (var i = 0; i < tmp.length; i++) {\r\n var isFill = false;\r\n for (var j = 0; j < tmp[i].length; j++) isFill|=tmp[i][j]!=null;\r\n if(r1==-1 && isFill) r1 = i;\r\n if(isFill) r2 = i;\r\n }\r\n\r\n for (var j = 0; j < rows; j++) {\r\n var isFill = false;\r\n for (var i = 0; i < rows; i++) isFill|=tmp[i][j]!=null;\r\n if(c1==-1 && isFill) c1 = j;\r\n if(isFill) c2 = j;\r\n }\r\n\r\n var sdiv = (\r\n
\r\n {tmp.map((row, i)=>{\r\n if(ir2) return null;\r\n var rmp = [];\r\n for (var j = c1; j < c2+1; j++) {\r\n rmp.push(\r\n
\r\n )\r\n }\r\n\r\n return rmp;\r\n })}\r\n
\r\n );\r\n\r\n return sdiv;\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n window.addEventListener('dragstart', dragStart);\r\n window.addEventListener('dragover', dragOver);\r\n window.addEventListener('drop', dragDrop);\r\n\r\n return ()=>{\r\n window.removeEventListener('dragstart', dragStart);\r\n window.removeEventListener('dragover', dragOver);\r\n window.removeEventListener('drop', dragDrop);\r\n };\r\n });\r\n\r\n useEffect(()=>{\r\n\r\n var tmp = [];\r\n for (var i = 0; i < rows; i++) {\r\n tmp.push([]);\r\n for (var j = 0; j < rows; j++) {\r\n tmp[i].push(-1);\r\n }\r\n }\r\n\r\n if(!isPlay){\r\n for (var i = 0; i < shapes.length; i++) {\r\n var str = shapes[i];\r\n for (var j = 0; j < str.length; j+=2) {\r\n var cp = str.substring(j,j+2);\r\n cp = parseInt(cp);\r\n var cx = Math.floor(cp/rows),\r\n cy = cp%rows;\r\n\r\n tmp[cx][cy] = i;\r\n }\r\n }\r\n }\r\n\r\n setArr(tmp);\r\n\r\n },[shapes]);\r\n\r\n useEffect(()=>{\r\n if(!isPlay){\r\n setShapes([]);\r\n }else{\r\n var tmp = [];\r\n for (var i = 0; i < rows; i++) {\r\n tmp.push([]);\r\n for (var j = 0; j < rows; j++) {\r\n tmp[i].push(-1);\r\n }\r\n }\r\n\r\n setArr(tmp);\r\n setFshp([]);\r\n }\r\n },[isPlay])\r\n\r\n return (\r\n
\r\n
\r\n
\r\n {shapeDiv()}\r\n
\r\n
\r\n {arr.map((row,x)=>{\r\n var wrow = [];\r\n for (var y = 0; y < row.length; y++) {\r\n wrow.push(\r\n
=0}\r\n draggable={!isPlay || row[y]>=0} style={{\r\n width: 700/rows,\r\n height: 700/rows,\r\n background: rainBowColor(row[y])\r\n }}>
\r\n );\r\n }\r\n\r\n return wrow;\r\n })}\r\n
\r\n
\r\n
{\r\n setPlay(!isPlay);\r\n }}>{isPlay?'Play Mode':'Build Mode'}
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default BlockPuzzle;\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\lockpick\\LockPick.js",["218","219","220","221","222","223"],"import React, {useState, useEffect} from 'react';\n\nimport './lockPick.css';\nimport {\n Spring,\n EmptyHolder,\n SpButton,\n BluePin\n} from './spring';\n\nconst LockPick = () => {\n const [picks, setPicks] = useState([]);\n const [pcount, setCount] = useState(5);\n const [pnum, setPnum] = useState(0);\n const [done, setDone] = useState(0);\n // const [password, setPass] = useState(11211);\n const [password, setPass] = useState(41324);\n\n const [seconds, setSeconds] = useState(0);\n\n if(!picks.length){\n var tmp = [];\n for (var i = 0; i < pcount; i++) {\n tmp.push(0);\n }\n\n setPicks(tmp);\n }\n\n const f = (v)=>{\n var d = Math.floor(v/3);\n if(d&1) return 3 - v%3;\n else return v%3;\n }\n\n const check = (tpicks)=>{\n var x = 0;\n for (var i = 0; i < pcount; i++) {\n x *= 10;\n x += f(tpicks[i]) + 1;\n }\n\n if(x==password){\n setDone(1);\n }\n }\n\n const incPick = (idx)=>{\n if(done) return;\n\n var tmp = [...picks];\n tmp[idx]+=1;\n\n setPicks(picks => tmp);\n }\n\n const fx = ()=>{\n var d = Math.floor(pnum/(pcount-1));\n if(d&1) return pcount - pnum%(pcount-1) - 1;\n else return pnum%(pcount-1);\n }\n\n const rotPick = (event)=>{\n if(done) return;\n\n var picker = event.target;\n picker.classList.add('tilt');\n picker.parentElement.children[1].classList.add('perTilt');\n setTimeout(()=>{\n incPick(fx());\n picker.classList.remove('tilt');\n picker.parentElement.children[1].classList.remove('perTilt');\n // setPnum(pnum+1);\n },200);\n }\n\n useEffect(() => {\n\n const interval = setInterval(() => {\n setPnum(pnum => pnum + 1);\n }, 1000);\n\n return () => clearInterval(interval);\n }, []);\n\n useEffect(()=>{\n check(picks);\n }, [picks]);\n\n return(\n
\n
\n
\n
\n {picks.map((pick, idx)=>{\n return (\n
\n \n \n \n \n \n \n \n
\n )\n })}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n}\n\nexport default LockPick;\n","D:\\Code\\ReactJs\\rough\\src\\components\\switchBox\\SwitchBox.js",[],"D:\\Code\\ReactJs\\rough\\src\\components\\wordSearch\\WordSearch.js",["224","225","226","227","228","229","230","231","232","233","234","235","236","237","238","239","240","241","242","243","244","245"],"import React, {useState, useEffect} from 'react';\r\nimport './wordSearch.css';\r\n\r\nexport default class WordSearch extends React.PureComponent{\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n rows: 16,\r\n wcell: 42,\r\n words: [\r\n [\"UNESCAPE\",2,2,1,1],\r\n [\"GAME\",4,1,0,1],\r\n [\"CIRCUMSTANCES\",1,14,1,0],\r\n [\"SURVIVE\",4,15,1,-1],\r\n [\"LEVEL\",9,8,0,1],\r\n [\"CHALLENGING\",11,1,-1,0],\r\n [\"DIFFICULTY\",14,2,0,1],\r\n [\"EFFORTFUL\",8,12,-1,-1],\r\n [\"FAILURE\",1,9,0,-1],\r\n [\"RIDDLE\",15,6,-1,0],\r\n [\"PROBLEM\",11,10,0,-1],\r\n [\"BLUEEDGE\",10,3,-1,1],\r\n [\"MAZE\",7,3,1,1],\r\n [\"SEARCH\",12,15,0,-1],\r\n [\"HELPME\",10,1,-1,1],\r\n [\"BREAKAWAY\",7,13,1,0]\r\n ],\r\n found: [],\r\n fstart: [0,0],\r\n fend: [0,0],\r\n dragging: false,\r\n vdrag: false,\r\n arr: []\r\n }\r\n }\r\n\r\n giveColor(idx){\r\n var idx = (idx * 729)%360;\r\n var r = Math.round(Math.sin(0.024 * idx + 0) * 256),\r\n g = Math.round(Math.sin(0.024 * idx + 2) * 256),\r\n b = Math.round(Math.sin(0.024 * idx + 4) * 90 + 240);\r\n\r\n return `rgba(${r},${g},${b},0.4)`;\r\n }\r\n\r\n DragStart(e){\r\n var img = new Image();\r\n img.src = null;\r\n e.dataTransfer.setDragImage(img, 0, 0);\r\n\r\n var ele = e.target;\r\n var x = ele.dataset.x,\r\n y = ele.dataset.y;\r\n\r\n if(x!=null && y!=null){\r\n this.setState({dragging: true, fstart: [x,y]});\r\n }\r\n }\r\n\r\n DragOver(e){\r\n if(!this.state.dragging) return;\r\n e.preventDefault();\r\n\r\n var ele = e.target;\r\n var x = ele.dataset.x,\r\n y = ele.dataset.y;\r\n\r\n if(x!=null && y!=null){\r\n var dx = this.state.fstart[0]-x,\r\n dy = this.state.fstart[1]-y;\r\n\r\n if(Math.abs(dx)==Math.abs(dy) || dx*dy==0){\r\n this.setState({fend: [x,y], vdrag: true});\r\n }else{\r\n this.setState({fend: [x,y], vdrag: false});\r\n }\r\n }\r\n }\r\n\r\n DragDrop(e){\r\n if(!this.state.dragging) return;\r\n\r\n var tstart = [...this.state.fstart];\r\n tstart[0] = parseInt(tstart[0]);\r\n tstart[1] = parseInt(tstart[1]);\r\n\r\n var tend = [...this.state.fend];\r\n\r\n var dx = tend[0] - tstart[0],\r\n dy = tend[1] - tstart[1];\r\n\r\n if((dx*dy==0 || Math.abs(dx)==Math.abs(dy)) && (Math.abs(dx) + Math.abs(dy))>2){\r\n var tmpWord = \"\";\r\n\r\n dx = Math.sign(dx);\r\n dy = Math.sign(dy);\r\n\r\n while ((tstart[0]-dx)!=tend[0] || (tstart[1]-dy)!=tend[1]) {\r\n tmpWord += this.state.arr[tstart[0]][tstart[1]];\r\n tstart[0] += dx;\r\n tstart[1] += dy;\r\n }\r\n\r\n var tmpFound = [...this.state.found], isWord = false;\r\n\r\n for (var i = 0; i < this.state.words.length; i++) {\r\n if(this.state.words[i][0]==tmpWord){\r\n isWord = true;\r\n };\r\n }\r\n\r\n if(!isWord){\r\n this.setState({dragging: false});\r\n return;\r\n };\r\n\r\n for (var i = 0; i < tmpFound.length; i++) {\r\n if(tmpFound[i][5]==tmpWord){\r\n this.setState({dragging: false});\r\n return;\r\n };\r\n }\r\n\r\n var tmp = [...this.state.fstart];\r\n tmp.push(this.lineSize());\r\n tmp.push(this.orientation());\r\n tmp.push(this.giveColor(tmpFound.length));\r\n tmp.push(tmpWord);\r\n\r\n tmpFound.push(tmp);\r\n this.setState({dragging: false, found: tmpFound},()=>{\r\n console.log(this.state.found);\r\n });\r\n }else{\r\n this.setState({dragging: false});\r\n }\r\n\r\n\r\n e.preventDefault();\r\n }\r\n\r\n componentWillMount(){\r\n var tmp = [];\r\n for (var i = 0; i < this.state.rows; i++) {\r\n tmp.push([]);\r\n for (var j = 0; j < this.state.rows; j++) {\r\n tmp[i].push(String.fromCharCode(65+Math.floor(Math.random()*26)));\r\n // tmp[i].push('');\r\n // tmp[i].push(i+''+j);\r\n }\r\n }\r\n\r\n for (var i = 0; i < this.state.words.length; i++) {\r\n var word = this.state.words[i];\r\n\r\n for (var j = 0; j < word[0].length; j++) {\r\n tmp[word[1] + word[3]*j][word[2] + word[4]*j] = word[0][j];\r\n }\r\n }\r\n\r\n this.setState({arr: tmp});\r\n window.addEventListener('dragstart', this.DragStart.bind(this));\r\n window.addEventListener('dragover', this.DragOver.bind(this));\r\n window.addEventListener('drop', this.DragDrop.bind(this));\r\n }\r\n\r\n orientation(){\r\n // 45*(this.state.dr[0]*this.state.dr[1]==0 ? 0: 1)\r\n\r\n var dx = this.state.fstart[0]-this.state.fend[0],\r\n dy = this.state.fstart[1]-this.state.fend[1]\r\n\r\n if(dx*dy==0){\r\n if(dx==0) return 180*(dy>0)\r\n else return 90 + 180*(dx>0)\r\n }else{\r\n if(dx<0 && dy<0) return 45;\r\n else if(dx<0 && dy>0) return 135;\r\n else if(dx>0 && dy>0) return -135;\r\n else if(dx>0 && dy<0) return -45;\r\n }\r\n }\r\n\r\n lineSize(){\r\n var dx = this.state.fstart[0]-this.state.fend[0],\r\n dy = this.state.fstart[1]-this.state.fend[1]\r\n\r\n var mx = Math.max(Math.abs(dx), Math.abs(dy));\r\n return this.state.wcell*(1+mx)*(1 + 0.38*(dx*dy!=0));\r\n }\r\n\r\n render(){\r\n return(\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n {this.state.arr.map((row, x)=>{\r\n var wrow = [];\r\n for (var y = 0; y < row.length; y++) {\r\n wrow.push(\r\n \r\n {row[y]}\r\n {\r\n this.state.dragging && this.state.vdrag &&\r\n (this.state.fstart[0]==x && this.state.fstart[1]==y)?(\r\n
\r\n
\r\n
\r\n ):null\r\n }\r\n {\r\n this.state.found.map((fnd, k)=>{\r\n if(fnd[0]==x && fnd[1]==y){\r\n return (\r\n
\r\n
\r\n
\r\n )\r\n }else{\r\n return null;\r\n }\r\n })\r\n }\r\n
\r\n )\r\n }\r\n\r\n return wrow;\r\n })}\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\levels.js",[],"D:\\Code\\ReactJs\\rough\\src\\components\\blockPuzzle\\allShapes.js",[],"D:\\Code\\ReactJs\\rough\\src\\components\\infLoops\\cells.js",["246"],"import React, {useState} from 'react';\r\n\r\nexport const OneCell = (props)=>{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport const TwoLcell = (props)=>{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport const TwoLineCell = (props)=>{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport const Threecell = (props)=>{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport const FourCell = (props)=>{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\ludo\\pieces.js",["247"],"import React, {\r\n useState\r\n} from 'react';\r\n\r\nexport const LudoPiece2 = (props) => {\r\n return (\r\n <>\r\n {props.pos==null?null:(\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport const LudoPiece = (props) => {\r\n return (\r\n <>\r\n {props.pos==null?null:(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n","D:\\Code\\ReactJs\\rough\\src\\components\\lockpick\\spring.js",["248","249"],"import React, {\r\n useState\r\n} from 'react';\r\n\r\nexport const Spring = (props) => {\r\n var arr = [];\r\n for (var i = 0; i < 12; i++) {\r\n arr.push(i);\r\n }\r\n\r\n const f = ()=>{\r\n if(props.h%6==0) return 0.1;\r\n\r\n var d = Math.floor(props.h/3);\r\n if(d&1) return 3 - props.h%3;\r\n else return props.h%3;\r\n }\r\n\r\n var scv = `scale(1,-${f()})`;\r\n\r\n return (\r\n
\r\n {arr.map(x=>{\r\n return
\r\n })}\r\n
\r\n )\r\n}\r\n\r\nexport const EmptyHolder = () => {\r\n return (\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport const SpButton = () => {\r\n return (\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport const BluePin = (props) => {\r\n const f = (v) => {\r\n var d = Math.floor(v/3);\r\n if(d&1) return 3 - v%3;\r\n else return v%3;\r\n }\r\n\r\n return (\r\n
\r\n
\r\n )\r\n}\r\n","D:\\Github\\bluelab\\src\\index.js",["250"],"D:\\Github\\bluelab\\src\\App.js",[],"D:\\Github\\bluelab\\src\\reportWebVitals.js",[],["251","252"],"D:\\Github\\bluelab\\src\\components\\bezcrv\\bezcrv.js",["253","254","255","256","257","258","259"],"import React, {useState, useEffect} from 'react';\r\nimport Sketch from \"react-p5\";\r\nimport * as math from 'mathjs';\r\n\r\nimport './bezcrv.css';\r\n\r\nconst BezCrv = ()=>{\r\n const [arr, setArr] = useState([])\r\n const [idx, setIdx] = useState(-1)\r\n const [cord, setCord] = useState([])\r\n const [n, setN] = useState(4)\r\n const [drag, setDrag] = useState(true)\r\n const [showLines, setLines] = useState(true)\r\n const w = window.innerWidth\r\n const h = window.innerHeight\r\n const r = 10, offY = 0.72, spd = 250\r\n\r\n const preload = (tmp)=>{\r\n var tmp2 = []\r\n for (var i = 0; i < spd; i++) {\r\n var z\r\n if(tmp!=null){\r\n z = compute(null, i/spd, 0, tmp)\r\n }else z = compute(null, i/spd)\r\n\r\n tmp2.push(z)\r\n }\r\n\r\n setCord(tmp2)\r\n }\r\n\r\n const mouseClicked = (p5) => {\r\n var d = w, z = 0\r\n\r\n for (var i = 0; i < arr.length; i++) {\r\n var dt = math.abs(math.subtract(\r\n arr[i],\r\n math.complex(p5.mouseX, p5.mouseY)\r\n ))\r\n\r\n if(dt {\r\n if(drag){\r\n if(idx+1>0){\r\n var tmp = [...arr]\r\n tmp[idx] = math.complex(p5.mouseX, p5.mouseY)\r\n setArr(tmp)\r\n }else if (idx+1==0) {\r\n mouseClicked(p5)\r\n }\r\n }\r\n }\r\n\r\n const mouseReleased = (p5) => {\r\n preload()\r\n setIdx(-1)\r\n }\r\n\r\n const setup = (p5, canvasParentRef) => {\r\n\t\tp5.createCanvas(w,h).parent(canvasParentRef)\r\n\t}\r\n\r\n const compute = (p5,t=0.5,fr=0,tmp=[...arr])=>{\r\n if(tmp.length==0) return math.complex(0,0)\r\n\r\n var lv = tmp.length,\r\n tmp2 = []\r\n for (var i = 0; i < lv-1; i++) {\r\n var z = math.subtract(tmp[i+1],tmp[i])\r\n z = math.add(tmp[i],math.multiply(z,t))\r\n tmp2.push(z)\r\n if(fr && showLines){\r\n p5.stroke(83, 84, 108)\r\n p5.strokeWeight(2)\r\n p5.line(\r\n tmp[i].re,\r\n tmp[i].im,\r\n tmp[i+1].re,\r\n tmp[i+1].im\r\n )\r\n\r\n p5.fill(83, 84, 108)\r\n p5.strokeWeight(0)\r\n p5.ellipse(z.re,z.im, r*0.6, r*0.6)\r\n }\r\n }\r\n\r\n if(tmp2.length==1){\r\n if(fr){\r\n p5.fill('#33d778')\r\n p5.strokeWeight(0)\r\n p5.ellipse(tmp2[0].re,tmp2[0].im, r*0.8, r*0.8)\r\n }\r\n return tmp2[0]\r\n }\r\n\r\n return compute(p5, t, fr, tmp2)\r\n }\r\n\r\n const osmod = (x,y)=>{\r\n var z = Math.floor(x/y), rm = x%y\r\n if(z&1) rm = y - rm\r\n\r\n return rm\r\n }\r\n\r\n const lerp = (t)=>{\r\n var col1 = [73, 240, 143],//[48, 168, 255],\r\n col2 = [5, 152, 71] //[177, 50, 232]\r\n\r\n return [\r\n col1[0]*(1-t) + t*col2[0],\r\n col1[1]*(1-t) + t*col2[1],\r\n col1[2]*(1-t) + t*col2[2]\r\n ]\r\n }\r\n\r\n\tconst draw = (p5) => {\r\n\t\tp5.background('#0e0e16')\r\n var rm = osmod(p5.frameCount,spd)\r\n\r\n var pz = compute(p5, 0, 1)\r\n document.getElementById('val').innerText = Math.round(rm*100/spd)/100\r\n for (var t = 1; t <= rm; t++) {\r\n var fr = t==rm?1:0,z\r\n if(fr) z = compute(p5, t/spd, fr)\r\n else{\r\n z = cord[t]\r\n // p5.stroke(\"#33d778\")\r\n p5.stroke(lerp(t/spd))\r\n p5.strokeWeight(4)\r\n p5.line(pz.re,pz.im,z.re,z.im)\r\n pz = math.clone(z)\r\n }\r\n }\r\n\r\n for (var i = 0; i < arr.length; i++) {\r\n p5.fill(20, 172, 254)\r\n p5.strokeWeight(0)\r\n p5.ellipse(arr[i].re,arr[i].im, r, r)\r\n }\r\n\t}\r\n\r\n const stop = ()=>setDrag(false)\r\n const start = ()=>setDrag(true)\r\n\r\n useEffect(()=>{\r\n var tmp = [],\r\n ln = 1/n,\r\n z = math.complex(w/2, h*offY),\r\n dir = math.complex(-ln*w,0),\r\n arg = 2*math.pi/n\r\n\r\n z = math.add(z, math.multiply(dir, 0.5))\r\n tmp.push(z)\r\n for (var i = 0; i < n-1; i++) {\r\n dir = math.multiply(dir, math.complex(\r\n math.cos(arg),\r\n math.sin(arg)\r\n ))\r\n\r\n z = math.add(z, dir)\r\n tmp.push(z)\r\n }\r\n\r\n setArr(tmp)\r\n preload(tmp)\r\n }, [n])\r\n\r\n\treturn (\r\n
\r\n
t = 0
\r\n
\r\n A Simple Visualization of\r\n \r\n {\" \"}Bézier Curve\r\n {\" \"}using recursive approach. Drag the blue dots to change the\r\n shape of curve.
\r\n Inspiration: \r\n Freya Holmér\r\n \r\n
\r\n
\r\n
\r\n \r\n { setN(e.target.value)}} min=\"2\" max=\"16\"/>\r\n
\r\n
\r\n \r\n { setLines(e.target.checked)}}\r\n min=\"5\" max=\"25\"/>\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default BezCrv;\r\n","D:\\Github\\bluelab\\src\\components\\invkin\\invkin.js",["260","261","262","263","264","265","266","267","268","269"],"import React, {useState, useEffect} from 'react';\r\nimport Sketch from \"react-p5\";\r\nimport * as math from 'mathjs';\r\n\r\nimport './invkin.css';\r\n\r\nconst InvKin = ()=>{\r\n const [arr, setArr] = useState([])\r\n const [final, setFinal] = useState(math.complex(0,0))\r\n const [allset, setAll] = useState(true)\r\n const [drag, setDrag] = useState(true)\r\n const [n, setN] = useState(4)\r\n const [ln, setLn] = useState(10)\r\n const w = window.innerWidth\r\n const h = window.innerHeight\r\n const r = 30\r\n\r\n const adjust = ()=>{\r\n var tmp = [...arr]\r\n var stl = ln*w/100, count = 2*10, i = n-1, d = -1\r\n\r\n while(count){\r\n if(i+1==n && d+1==0){\r\n tmp[n - 1] = math.clone(final)\r\n }else if (i==0 && d==1) {\r\n tmp[0] = math.complex(w/2, h/2)\r\n }\r\n\r\n i+=d\r\n while (i+1>0 && i{\r\n if(drag){\r\n setFinal(math.complex(p5.mouseX, p5.mouseY))\r\n setAll(false)\r\n }\r\n }\r\n\r\n const stop = ()=>setDrag(false)\r\n const start = ()=>setDrag(true)\r\n\r\n const setup = (p5, canvasParentRef) => {\r\n\t\tp5.createCanvas(w,h-5).parent(canvasParentRef)\r\n\t}\r\n\r\n\tconst draw = (p5) => {\r\n if(!allset && !drag) return\r\n\t\tp5.background('#0e0e16')\r\n\r\n\t\tfor (var i = 0; i < n; i++) {\r\n p5.fill('#53546c')\r\n p5.stroke('#53546c')\r\n p5.strokeWeight(0)\r\n p5.ellipse(arr[i].re,arr[i].im, r, r)\r\n if(i!=0){\r\n p5.strokeWeight(6)\r\n p5.line(\r\n arr[i-1].re,\r\n arr[i-1].im,\r\n arr[i].re,\r\n arr[i].im\r\n )\r\n }\r\n }\r\n\r\n p5.fill(51, 215, 120)\r\n p5.strokeWeight(0)\r\n p5.ellipse(final.re,final.im, r*0.6, r*0.6)\r\n p5.fill(20, 172, 254)\r\n p5.ellipse(w/2,h/2, r*0.6, r*0.6)\r\n\t}\r\n\r\n useEffect(()=>{\r\n if(!allset){\r\n adjust()\r\n }\r\n }, [allset])\r\n\r\n useEffect(()=>{\r\n var tmp = []\r\n for (var i = 0; i < n; i++) {\r\n tmp.push(math.complex((50 + i*ln)*w/100, h/2))\r\n }\r\n\r\n setArr(tmp)\r\n if(math.abs(final)==0){\r\n setFinal(math.complex(w/5, h/4))\r\n }\r\n\r\n setAll(false)\r\n }, [n, ln])\r\n\r\n\treturn (\r\n
\r\n
\r\n An Implementation of\r\n FABRIK\r\n {\" \"}algorithm for the simulation of Inverse Kinemetics.\r\n Drag the green dot to interact\r\n
\r\n Inpiration: \r\n Sebastian Lague\r\n \r\n
\r\n
\r\n
\r\n \r\n { setN(e.target.value)}} min=\"2\" max=\"16\"/>\r\n
\r\n
\r\n \r\n { setLn(e.target.value)}} min=\"5\" max=\"25\"/>\r\n
\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default InvKin;\r\n","D:\\Github\\bluelab\\src\\components\\ropesim\\ropesim.js",["270","271","272","273","274","275","276","277","278","279","280","281"],"D:\\Github\\bluelab\\src\\components\\ropesim\\items.js",["282"],"export const Vector = {\r\n diff: (pt1, pt2)=>{\r\n return pt1.map((x,i)=> pt1[i]-pt2[i])\r\n },\r\n scale: (pt, f)=>{\r\n return pt.map(x => x*f)\r\n },\r\n add: (pt1, pt2)=>{\r\n return pt1.map((x,i)=> pt1[i]+pt2[i])\r\n },\r\n unit: (pt)=>{\r\n var f = Math.pow(pt[0]*pt[0] + pt[1]*pt[1], 0.5)\r\n return pt.map(x => x/f)\r\n },\r\n dis: (pt1, pt2)=>{\r\n var d2 = Math.pow(pt1[0]-pt2[0],2) + Math.pow(pt1[1]-pt2[1],2)\r\n return Math.pow(d2,0.5)\r\n }\r\n}\r\n\r\nexport const shuffle = (n)=>{\r\n var array = [...Array(n)].map((x,i)=> i)\r\n let currentIndex = n, randomIndex;\r\n while (currentIndex != 0) {\r\n randomIndex = Math.floor(Math.random() * currentIndex);\r\n currentIndex--;\r\n\r\n [array[currentIndex], array[randomIndex]] = [\r\n array[randomIndex], array[currentIndex]]\r\n }\r\n\r\n return array;\r\n}\r\n\r\nexport class Point{\r\n constructor(x,y,locked=false) {\r\n this.x = [x,y]\r\n this.x0 = [x,y]\r\n this.locked = locked\r\n }\r\n}\r\n\r\nexport class Stick{\r\n constructor(p_a, p_b, ln) {\r\n this.a = p_a\r\n this.b = p_b\r\n this.ln = ln\r\n }\r\n}\r\n","D:\\Github\\bluelab\\src\\components\\clothsim\\clothsim.js",["283","284","285","286","287","288","289","290","291","292","293","294","295","296"],"D:\\Github\\bluelab\\src\\components\\clothsim\\items.js",["297"],{"ruleId":"298","replacedBy":"299"},{"ruleId":"300","replacedBy":"301"},{"ruleId":"302","severity":1,"message":"303","line":1,"column":16,"nodeType":"304","messageId":"305","endLine":1,"endColumn":24},{"ruleId":"302","severity":1,"message":"306","line":1,"column":26,"nodeType":"304","messageId":"305","endLine":1,"endColumn":35},{"ruleId":"307","severity":1,"message":"308","line":81,"column":24,"nodeType":"309","messageId":"310","endLine":81,"endColumn":26},{"ruleId":"302","severity":1,"message":"311","line":123,"column":9,"nodeType":"304","messageId":"305","endLine":123,"endColumn":13},{"ruleId":"307","severity":1,"message":"308","line":135,"column":13,"nodeType":"309","messageId":"310","endLine":135,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":137,"column":11,"nodeType":"309","messageId":"310","endLine":137,"endColumn":13},{"ruleId":"307","severity":1,"message":"308","line":162,"column":10,"nodeType":"309","messageId":"310","endLine":162,"endColumn":12},{"ruleId":"307","severity":1,"message":"312","line":168,"column":26,"nodeType":"309","messageId":"310","endLine":168,"endColumn":28},{"ruleId":"307","severity":1,"message":"308","line":194,"column":32,"nodeType":"309","messageId":"310","endLine":194,"endColumn":34},{"ruleId":"307","severity":1,"message":"308","line":196,"column":41,"nodeType":"309","messageId":"310","endLine":196,"endColumn":43},{"ruleId":"307","severity":1,"message":"308","line":224,"column":21,"nodeType":"309","messageId":"310","endLine":224,"endColumn":23},{"ruleId":"307","severity":1,"message":"308","line":250,"column":45,"nodeType":"309","messageId":"310","endLine":250,"endColumn":47},{"ruleId":"307","severity":1,"message":"308","line":257,"column":45,"nodeType":"309","messageId":"310","endLine":257,"endColumn":47},{"ruleId":"307","severity":1,"message":"308","line":264,"column":45,"nodeType":"309","messageId":"310","endLine":264,"endColumn":47},{"ruleId":"307","severity":1,"message":"308","line":271,"column":47,"nodeType":"309","messageId":"310","endLine":271,"endColumn":49},{"ruleId":"307","severity":1,"message":"308","line":278,"column":47,"nodeType":"309","messageId":"310","endLine":278,"endColumn":49},{"ruleId":"307","severity":1,"message":"308","line":294,"column":34,"nodeType":"309","messageId":"310","endLine":294,"endColumn":36},{"ruleId":"302","severity":1,"message":"303","line":1,"column":16,"nodeType":"304","messageId":"305","endLine":1,"endColumn":24},{"ruleId":"302","severity":1,"message":"306","line":1,"column":26,"nodeType":"304","messageId":"305","endLine":1,"endColumn":35},{"ruleId":"307","severity":1,"message":"308","line":24,"column":28,"nodeType":"309","messageId":"310","endLine":24,"endColumn":30},{"ruleId":"307","severity":1,"message":"308","line":28,"column":11,"nodeType":"309","messageId":"310","endLine":28,"endColumn":13},{"ruleId":"307","severity":1,"message":"308","line":58,"column":10,"nodeType":"309","messageId":"310","endLine":58,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":59,"column":13,"nodeType":"309","messageId":"310","endLine":59,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":60,"column":16,"nodeType":"309","messageId":"310","endLine":60,"endColumn":18},{"ruleId":"307","severity":1,"message":"308","line":61,"column":18,"nodeType":"309","messageId":"310","endLine":61,"endColumn":20},{"ruleId":"307","severity":1,"message":"308","line":65,"column":10,"nodeType":"309","messageId":"310","endLine":65,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":67,"column":16,"nodeType":"309","messageId":"310","endLine":67,"endColumn":18},{"ruleId":"307","severity":1,"message":"308","line":72,"column":10,"nodeType":"309","messageId":"310","endLine":72,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":74,"column":16,"nodeType":"309","messageId":"310","endLine":74,"endColumn":18},{"ruleId":"307","severity":1,"message":"308","line":79,"column":10,"nodeType":"309","messageId":"310","endLine":79,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":80,"column":13,"nodeType":"309","messageId":"310","endLine":80,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":81,"column":16,"nodeType":"309","messageId":"310","endLine":81,"endColumn":18},{"ruleId":"307","severity":1,"message":"308","line":82,"column":18,"nodeType":"309","messageId":"310","endLine":82,"endColumn":20},{"ruleId":"307","severity":1,"message":"308","line":92,"column":22,"nodeType":"309","messageId":"310","endLine":92,"endColumn":24},{"ruleId":"307","severity":1,"message":"308","line":93,"column":12,"nodeType":"309","messageId":"310","endLine":93,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":94,"column":12,"nodeType":"309","messageId":"310","endLine":94,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":95,"column":12,"nodeType":"309","messageId":"310","endLine":95,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":96,"column":12,"nodeType":"309","messageId":"310","endLine":96,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":99,"column":13,"nodeType":"309","messageId":"310","endLine":99,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":103,"column":17,"nodeType":"309","messageId":"310","endLine":103,"endColumn":19},{"ruleId":"307","severity":1,"message":"308","line":104,"column":12,"nodeType":"309","messageId":"310","endLine":104,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":105,"column":12,"nodeType":"309","messageId":"310","endLine":105,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":106,"column":12,"nodeType":"309","messageId":"310","endLine":106,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":107,"column":12,"nodeType":"309","messageId":"310","endLine":107,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":110,"column":17,"nodeType":"309","messageId":"310","endLine":110,"endColumn":19},{"ruleId":"307","severity":1,"message":"308","line":111,"column":12,"nodeType":"309","messageId":"310","endLine":111,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":112,"column":12,"nodeType":"309","messageId":"310","endLine":112,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":113,"column":12,"nodeType":"309","messageId":"310","endLine":113,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":114,"column":12,"nodeType":"309","messageId":"310","endLine":114,"endColumn":14},{"ruleId":"313","severity":1,"message":"314","line":130,"column":11,"nodeType":"304","messageId":"315","endLine":130,"endColumn":15},{"ruleId":"307","severity":1,"message":"312","line":91,"column":21,"nodeType":"309","messageId":"310","endLine":91,"endColumn":23},{"ruleId":"307","severity":1,"message":"312","line":98,"column":12,"nodeType":"309","messageId":"310","endLine":98,"endColumn":14},{"ruleId":"307","severity":1,"message":"308","line":116,"column":21,"nodeType":"309","messageId":"310","endLine":116,"endColumn":23},{"ruleId":"307","severity":1,"message":"312","line":137,"column":28,"nodeType":"309","messageId":"310","endLine":137,"endColumn":30},{"ruleId":"307","severity":1,"message":"308","line":141,"column":10,"nodeType":"309","messageId":"310","endLine":141,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":149,"column":21,"nodeType":"309","messageId":"310","endLine":149,"endColumn":23},{"ruleId":"307","severity":1,"message":"308","line":164,"column":25,"nodeType":"309","messageId":"310","endLine":164,"endColumn":27},{"ruleId":"307","severity":1,"message":"308","line":165,"column":38,"nodeType":"309","messageId":"310","endLine":165,"endColumn":40},{"ruleId":"313","severity":1,"message":"316","line":172,"column":14,"nodeType":"304","messageId":"315","endLine":172,"endColumn":15},{"ruleId":"313","severity":1,"message":"317","line":173,"column":16,"nodeType":"304","messageId":"315","endLine":173,"endColumn":17},{"ruleId":"307","severity":1,"message":"308","line":174,"column":32,"nodeType":"309","messageId":"310","endLine":174,"endColumn":34},{"ruleId":"307","severity":1,"message":"312","line":174,"column":40,"nodeType":"309","messageId":"310","endLine":174,"endColumn":42},{"ruleId":"307","severity":1,"message":"312","line":174,"column":59,"nodeType":"309","messageId":"310","endLine":174,"endColumn":61},{"ruleId":"307","severity":1,"message":"312","line":191,"column":28,"nodeType":"309","messageId":"310","endLine":191,"endColumn":30},{"ruleId":"307","severity":1,"message":"308","line":202,"column":29,"nodeType":"309","messageId":"310","endLine":202,"endColumn":31},{"ruleId":"302","severity":1,"message":"318","line":267,"column":9,"nodeType":"304","messageId":"305","endLine":267,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":280,"column":44,"nodeType":"309","messageId":"310","endLine":280,"endColumn":46},{"ruleId":"307","severity":1,"message":"308","line":289,"column":51,"nodeType":"309","messageId":"310","endLine":289,"endColumn":53},{"ruleId":"307","severity":1,"message":"308","line":312,"column":34,"nodeType":"309","messageId":"310","endLine":312,"endColumn":36},{"ruleId":"307","severity":1,"message":"308","line":316,"column":34,"nodeType":"309","messageId":"310","endLine":316,"endColumn":36},{"ruleId":"307","severity":1,"message":"308","line":323,"column":51,"nodeType":"309","messageId":"310","endLine":323,"endColumn":53},{"ruleId":"302","severity":1,"message":"319","line":9,"column":16,"nodeType":"304","messageId":"305","endLine":9,"endColumn":22},{"ruleId":"302","severity":1,"message":"320","line":13,"column":18,"nodeType":"304","messageId":"305","endLine":13,"endColumn":27},{"ruleId":"313","severity":1,"message":"316","line":45,"column":18,"nodeType":"304","messageId":"315","endLine":45,"endColumn":19},{"ruleId":"313","severity":1,"message":"316","line":57,"column":18,"nodeType":"304","messageId":"315","endLine":57,"endColumn":19},{"ruleId":"313","severity":1,"message":"317","line":59,"column":20,"nodeType":"304","messageId":"315","endLine":59,"endColumn":21},{"ruleId":"307","severity":1,"message":"308","line":60,"column":16,"nodeType":"309","messageId":"310","endLine":60,"endColumn":18},{"ruleId":"313","severity":1,"message":"317","line":64,"column":18,"nodeType":"304","messageId":"315","endLine":64,"endColumn":19},{"ruleId":"313","severity":1,"message":"321","line":65,"column":15,"nodeType":"304","messageId":"315","endLine":65,"endColumn":21},{"ruleId":"313","severity":1,"message":"316","line":66,"column":20,"nodeType":"304","messageId":"315","endLine":66,"endColumn":21},{"ruleId":"307","severity":1,"message":"308","line":67,"column":16,"nodeType":"309","messageId":"310","endLine":67,"endColumn":18},{"ruleId":"302","severity":1,"message":"322","line":97,"column":11,"nodeType":"304","messageId":"305","endLine":97,"endColumn":18},{"ruleId":"313","severity":1,"message":"316","line":103,"column":16,"nodeType":"304","messageId":"315","endLine":103,"endColumn":17},{"ruleId":"307","severity":1,"message":"312","line":110,"column":25,"nodeType":"309","messageId":"310","endLine":110,"endColumn":27},{"ruleId":"307","severity":1,"message":"312","line":110,"column":44,"nodeType":"309","messageId":"310","endLine":110,"endColumn":46},{"ruleId":"307","severity":1,"message":"308","line":112,"column":25,"nodeType":"309","messageId":"310","endLine":112,"endColumn":27},{"ruleId":"302","severity":1,"message":"322","line":139,"column":11,"nodeType":"304","messageId":"305","endLine":139,"endColumn":18},{"ruleId":"313","severity":1,"message":"316","line":145,"column":16,"nodeType":"304","messageId":"315","endLine":145,"endColumn":17},{"ruleId":"307","severity":1,"message":"312","line":156,"column":47,"nodeType":"309","messageId":"310","endLine":156,"endColumn":49},{"ruleId":"307","severity":1,"message":"312","line":156,"column":66,"nodeType":"309","messageId":"310","endLine":156,"endColumn":68},{"ruleId":"307","severity":1,"message":"308","line":162,"column":28,"nodeType":"309","messageId":"310","endLine":162,"endColumn":30},{"ruleId":"307","severity":1,"message":"308","line":177,"column":11,"nodeType":"309","messageId":"310","endLine":177,"endColumn":13},{"ruleId":"313","severity":1,"message":"316","line":206,"column":16,"nodeType":"304","messageId":"315","endLine":206,"endColumn":17},{"ruleId":"313","severity":1,"message":"317","line":208,"column":18,"nodeType":"304","messageId":"315","endLine":208,"endColumn":19},{"ruleId":"307","severity":1,"message":"308","line":209,"column":14,"nodeType":"309","messageId":"310","endLine":209,"endColumn":16},{"ruleId":"313","severity":1,"message":"317","line":213,"column":16,"nodeType":"304","messageId":"315","endLine":213,"endColumn":17},{"ruleId":"313","severity":1,"message":"321","line":214,"column":13,"nodeType":"304","messageId":"315","endLine":214,"endColumn":19},{"ruleId":"313","severity":1,"message":"316","line":215,"column":18,"nodeType":"304","messageId":"315","endLine":215,"endColumn":19},{"ruleId":"307","severity":1,"message":"308","line":216,"column":14,"nodeType":"309","messageId":"310","endLine":216,"endColumn":16},{"ruleId":"313","severity":1,"message":"316","line":274,"column":16,"nodeType":"304","messageId":"315","endLine":274,"endColumn":17},{"ruleId":"313","severity":1,"message":"317","line":276,"column":18,"nodeType":"304","messageId":"315","endLine":276,"endColumn":19},{"ruleId":"323","severity":1,"message":"324","line":289,"column":5,"nodeType":"325","endLine":289,"endColumn":13,"suggestions":"326"},{"ruleId":"323","severity":1,"message":"327","line":306,"column":5,"nodeType":"325","endLine":306,"endColumn":13,"suggestions":"328"},{"ruleId":"302","severity":1,"message":"329","line":13,"column":18,"nodeType":"304","messageId":"305","endLine":13,"endColumn":26},{"ruleId":"302","severity":1,"message":"330","line":17,"column":20,"nodeType":"304","messageId":"305","endLine":17,"endColumn":27},{"ruleId":"302","severity":1,"message":"331","line":19,"column":10,"nodeType":"304","messageId":"305","endLine":19,"endColumn":17},{"ruleId":"302","severity":1,"message":"332","line":19,"column":19,"nodeType":"304","messageId":"305","endLine":19,"endColumn":29},{"ruleId":"307","severity":1,"message":"308","line":43,"column":9,"nodeType":"309","messageId":"310","endLine":43,"endColumn":11},{"ruleId":"323","severity":1,"message":"333","line":88,"column":6,"nodeType":"325","endLine":88,"endColumn":13,"suggestions":"334"},{"ruleId":"302","severity":1,"message":"303","line":1,"column":16,"nodeType":"304","messageId":"305","endLine":1,"endColumn":24},{"ruleId":"302","severity":1,"message":"306","line":1,"column":26,"nodeType":"304","messageId":"305","endLine":1,"endColumn":35},{"ruleId":"313","severity":1,"message":"335","line":38,"column":9,"nodeType":"304","messageId":"315","endLine":38,"endColumn":12},{"ruleId":"307","severity":1,"message":"308","line":72,"column":22,"nodeType":"309","messageId":"310","endLine":72,"endColumn":24},{"ruleId":"307","severity":1,"message":"308","line":72,"column":45,"nodeType":"309","messageId":"310","endLine":72,"endColumn":47},{"ruleId":"307","severity":1,"message":"308","line":92,"column":14,"nodeType":"309","messageId":"310","endLine":92,"endColumn":16},{"ruleId":"307","severity":1,"message":"308","line":92,"column":33,"nodeType":"309","messageId":"310","endLine":92,"endColumn":35},{"ruleId":"307","severity":1,"message":"312","line":98,"column":28,"nodeType":"309","messageId":"310","endLine":98,"endColumn":30},{"ruleId":"307","severity":1,"message":"312","line":98,"column":55,"nodeType":"309","messageId":"310","endLine":98,"endColumn":57},{"ruleId":"307","severity":1,"message":"308","line":107,"column":34,"nodeType":"309","messageId":"310","endLine":107,"endColumn":36},{"ruleId":"313","severity":1,"message":"316","line":117,"column":16,"nodeType":"304","messageId":"315","endLine":117,"endColumn":17},{"ruleId":"307","severity":1,"message":"308","line":118,"column":26,"nodeType":"309","messageId":"310","endLine":118,"endColumn":28},{"ruleId":"313","severity":1,"message":"316","line":153,"column":14,"nodeType":"304","messageId":"315","endLine":153,"endColumn":15},{"ruleId":"313","severity":1,"message":"317","line":156,"column":16,"nodeType":"304","messageId":"315","endLine":156,"endColumn":17},{"ruleId":"307","severity":1,"message":"308","line":173,"column":13,"nodeType":"309","messageId":"310","endLine":173,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":174,"column":12,"nodeType":"309","messageId":"310","endLine":174,"endColumn":14},{"ruleId":"307","severity":1,"message":"312","line":189,"column":52,"nodeType":"309","messageId":"310","endLine":189,"endColumn":54},{"ruleId":"307","severity":1,"message":"308","line":223,"column":44,"nodeType":"309","messageId":"310","endLine":223,"endColumn":46},{"ruleId":"307","severity":1,"message":"308","line":223,"column":71,"nodeType":"309","messageId":"310","endLine":223,"endColumn":73},{"ruleId":"336","severity":1,"message":"337","line":238,"column":44,"nodeType":"338","messageId":"339","endLine":257,"endColumn":24},{"ruleId":"307","severity":1,"message":"308","line":239,"column":34,"nodeType":"309","messageId":"310","endLine":239,"endColumn":36},{"ruleId":"307","severity":1,"message":"308","line":239,"column":47,"nodeType":"309","messageId":"310","endLine":239,"endColumn":49},{"ruleId":"302","severity":1,"message":"303","line":1,"column":16,"nodeType":"304","messageId":"305","endLine":1,"endColumn":24},{"ruleId":"302","severity":1,"message":"303","line":2,"column":3,"nodeType":"304","messageId":"305","endLine":2,"endColumn":11},{"ruleId":"302","severity":1,"message":"303","line":2,"column":3,"nodeType":"304","messageId":"305","endLine":2,"endColumn":11},{"ruleId":"307","severity":1,"message":"308","line":12,"column":17,"nodeType":"309","messageId":"310","endLine":12,"endColumn":19},{"ruleId":"307","severity":1,"message":"312","line":18,"column":34,"nodeType":"309","messageId":"310","endLine":18,"endColumn":36},{"ruleId":"298","replacedBy":"340"},{"ruleId":"300","replacedBy":"341"},{"ruleId":"307","severity":1,"message":"308","line":60,"column":22,"nodeType":"309","messageId":"310","endLine":60,"endColumn":24},{"ruleId":"307","severity":1,"message":"308","line":76,"column":18,"nodeType":"309","messageId":"310","endLine":76,"endColumn":20},{"ruleId":"307","severity":1,"message":"308","line":100,"column":19,"nodeType":"309","messageId":"310","endLine":100,"endColumn":21},{"ruleId":"307","severity":1,"message":"308","line":137,"column":17,"nodeType":"309","messageId":"310","endLine":137,"endColumn":19},{"ruleId":"323","severity":1,"message":"342","line":180,"column":6,"nodeType":"325","endLine":180,"endColumn":9,"suggestions":"343"},{"ruleId":"344","severity":1,"message":"345","line":187,"column":9,"nodeType":"346","messageId":"347","endLine":187,"endColumn":83,"fix":"348"},{"ruleId":"344","severity":1,"message":"345","line":191,"column":22,"nodeType":"346","messageId":"347","endLine":191,"endColumn":83,"fix":"349"},{"ruleId":"307","severity":1,"message":"308","line":23,"column":13,"nodeType":"309","messageId":"310","endLine":23,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":23,"column":23,"nodeType":"309","messageId":"310","endLine":23,"endColumn":25},{"ruleId":"307","severity":1,"message":"308","line":25,"column":18,"nodeType":"309","messageId":"310","endLine":25,"endColumn":20},{"ruleId":"307","severity":1,"message":"308","line":25,"column":26,"nodeType":"309","messageId":"310","endLine":25,"endColumn":28},{"ruleId":"307","severity":1,"message":"312","line":69,"column":11,"nodeType":"309","messageId":"310","endLine":69,"endColumn":13},{"ruleId":"323","severity":1,"message":"350","line":91,"column":6,"nodeType":"325","endLine":91,"endColumn":14,"suggestions":"351"},{"ruleId":"307","severity":1,"message":"308","line":100,"column":23,"nodeType":"309","messageId":"310","endLine":100,"endColumn":25},{"ruleId":"323","severity":1,"message":"352","line":105,"column":6,"nodeType":"325","endLine":105,"endColumn":13,"suggestions":"353"},{"ruleId":"344","severity":1,"message":"345","line":111,"column":9,"nodeType":"346","messageId":"347","endLine":111,"endColumn":70,"fix":"354"},{"ruleId":"344","severity":1,"message":"345","line":115,"column":21,"nodeType":"346","messageId":"347","endLine":115,"endColumn":82,"fix":"355"},{"ruleId":"302","severity":1,"message":"356","line":3,"column":13,"nodeType":"304","messageId":"305","endLine":3,"endColumn":17},{"ruleId":"302","severity":1,"message":"357","line":9,"column":3,"nodeType":"304","messageId":"305","endLine":9,"endColumn":10},{"ruleId":"307","severity":1,"message":"312","line":50,"column":11,"nodeType":"309","messageId":"310","endLine":50,"endColumn":13},{"ruleId":"302","severity":1,"message":"358","line":54,"column":7,"nodeType":"304","messageId":"305","endLine":54,"endColumn":10},{"ruleId":"313","severity":1,"message":"316","line":100,"column":14,"nodeType":"304","messageId":"315","endLine":100,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":105,"column":11,"nodeType":"309","messageId":"310","endLine":105,"endColumn":13},{"ruleId":"323","severity":1,"message":"359","line":120,"column":6,"nodeType":"325","endLine":120,"endColumn":13,"suggestions":"360"},{"ruleId":"307","severity":1,"message":"308","line":126,"column":56,"nodeType":"309","messageId":"310","endLine":126,"endColumn":58},{"ruleId":"307","severity":1,"message":"312","line":131,"column":11,"nodeType":"309","messageId":"310","endLine":131,"endColumn":13},{"ruleId":"323","severity":1,"message":"361","line":138,"column":6,"nodeType":"325","endLine":138,"endColumn":13,"suggestions":"362"},{"ruleId":"344","severity":1,"message":"345","line":144,"column":9,"nodeType":"346","messageId":"347","endLine":144,"endColumn":84,"fix":"363"},{"ruleId":"344","severity":1,"message":"345","line":148,"column":21,"nodeType":"346","messageId":"347","endLine":148,"endColumn":82,"fix":"364"},{"ruleId":"307","severity":1,"message":"312","line":24,"column":23,"nodeType":"309","messageId":"310","endLine":24,"endColumn":25},{"ruleId":"302","severity":1,"message":"356","line":3,"column":13,"nodeType":"304","messageId":"305","endLine":3,"endColumn":17},{"ruleId":"302","severity":1,"message":"357","line":9,"column":3,"nodeType":"304","messageId":"305","endLine":9,"endColumn":10},{"ruleId":"302","severity":1,"message":"365","line":15,"column":7,"nodeType":"304","messageId":"305","endLine":15,"endColumn":19},{"ruleId":"302","severity":1,"message":"358","line":46,"column":7,"nodeType":"304","messageId":"305","endLine":46,"endColumn":10},{"ruleId":"313","severity":1,"message":"317","line":61,"column":14,"nodeType":"304","messageId":"315","endLine":61,"endColumn":15},{"ruleId":"313","severity":1,"message":"316","line":96,"column":14,"nodeType":"304","messageId":"315","endLine":96,"endColumn":15},{"ruleId":"307","severity":1,"message":"308","line":118,"column":42,"nodeType":"309","messageId":"310","endLine":118,"endColumn":44},{"ruleId":"307","severity":1,"message":"308","line":118,"column":52,"nodeType":"309","messageId":"310","endLine":118,"endColumn":54},{"ruleId":"313","severity":1,"message":"316","line":122,"column":14,"nodeType":"304","messageId":"315","endLine":122,"endColumn":15},{"ruleId":"313","severity":1,"message":"317","line":123,"column":16,"nodeType":"304","messageId":"315","endLine":123,"endColumn":17},{"ruleId":"307","severity":1,"message":"308","line":127,"column":15,"nodeType":"309","messageId":"310","endLine":127,"endColumn":17},{"ruleId":"307","severity":1,"message":"308","line":131,"column":15,"nodeType":"309","messageId":"310","endLine":131,"endColumn":17},{"ruleId":"344","severity":1,"message":"345","line":146,"column":9,"nodeType":"346","messageId":"347","endLine":146,"endColumn":84,"fix":"366"},{"ruleId":"344","severity":1,"message":"345","line":150,"column":21,"nodeType":"346","messageId":"347","endLine":150,"endColumn":82,"fix":"367"},{"ruleId":"307","severity":1,"message":"312","line":38,"column":23,"nodeType":"309","messageId":"310","endLine":38,"endColumn":25},"no-native-reassign",["368"],"no-negated-in-lhs",["369"],"no-unused-vars","'useState' is defined but never used.","Identifier","unusedVar","'useEffect' is defined but never used.","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","'tmp2' is assigned a value but never used.","Expected '!==' and instead saw '!='.","no-redeclare","'cell' is already defined.","redeclared","'i' is already defined.","'j' is already defined.","'dim' is assigned a value but never used.","'setRow' is assigned a value but never used.","'setShcell' is assigned a value but never used.","'isFill' is already defined.","'isValid' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'isPlay' and 'rows'. Either include them or remove the dependency array.","ArrayExpression",["370"],"React Hook useEffect has a missing dependency: 'rows'. Either include it or remove the dependency array.",["371"],"'setCount' is assigned a value but never used.","'setPass' is assigned a value but never used.","'seconds' is assigned a value but never used.","'setSeconds' is assigned a value but never used.","React Hook useEffect has a missing dependency: 'check'. Either include it or remove the dependency array.",["372"],"'idx' is already defined.","no-loop-func","Function declared in a loop contains unsafe references to variable(s) 'y'.","ArrowFunctionExpression","unsafeRefs",["368"],["369"],"React Hook useEffect has missing dependencies: 'h', 'preload', and 'w'. Either include them or remove the dependency array.",["373"],"react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXOpeningElement","noTargetBlank",{"range":"374","text":"375"},{"range":"376","text":"375"},"React Hook useEffect has a missing dependency: 'adjust'. Either include it or remove the dependency array.",["377"],"React Hook useEffect has missing dependencies: 'final', 'h', and 'w'. Either include them or remove the dependency array.",["378"],{"range":"379","text":"375"},{"range":"380","text":"375"},"'math' is defined but never used.","'shuffle' is defined but never used.","'cnv' is assigned a value but never used.","React Hook useEffect has missing dependencies: 'dix' and 'points'. Either include them or remove the dependency array.",["381"],"React Hook useEffect has a missing dependency: 'final'. Either include it or remove the dependency array.",["382"],{"range":"383","text":"375"},{"range":"384","text":"375"},"'LOCKED_GREEN' is assigned a value but never used.",{"range":"385","text":"375"},{"range":"386","text":"375"},"no-global-assign","no-unsafe-negation",{"desc":"387","fix":"388"},{"desc":"389","fix":"390"},{"desc":"391","fix":"392"},{"desc":"393","fix":"394"},[4249,4249]," rel=\"noreferrer\"",[4467,4467],{"desc":"395","fix":"396"},{"desc":"397","fix":"398"},[2514,2514],[2729,2729],{"desc":"399","fix":"400"},{"desc":"401","fix":"402"},[3550,3550],[3760,3760],[3846,3846],[4066,4066],"Update the dependencies array to be: [isPlay, rows, shapes]",{"range":"403","text":"404"},"Update the dependencies array to be: [isPlay, rows]",{"range":"405","text":"406"},"Update the dependencies array to be: [check, picks]",{"range":"407","text":"408"},"Update the dependencies array to be: [h, n, preload, w]",{"range":"409","text":"410"},"Update the dependencies array to be: [adjust, allset]",{"range":"411","text":"412"},"Update the dependencies array to be: [n, ln, final, w, h]",{"range":"413","text":"414"},"Update the dependencies array to be: [dix, final, points]",{"range":"415","text":"416"},"Update the dependencies array to be: [n, ln, final]",{"range":"417","text":"418"},[7539,7547],"[isPlay, rows, shapes]",[7851,7859],"[isPlay, rows]",[1744,1751],"[check, picks]",[3987,3990],"[h, n, preload, w]",[2064,2072],"[adjust, allset]",[2331,2338],"[n, ln, final, w, h]",[2944,2951],"[dix, final, points]",[3353,3360],"[n, ln, final]"] --------------------------------------------------------------------------------