Skip to content

Commit 2083e57

Browse files
BrandonTheBusyBeaver117BrandonTheBusyBeaver117
committed
Merge branch 'feat/2024updates'
2 parents 4d5ef80 + e85aeb4 commit 2083e57

File tree

1 file changed

+124
-124
lines changed

1 file changed

+124
-124
lines changed

‎src/components/Scanner.jsx

+124-124
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,124 @@
1-
import React, { useEffect, useRef, useState } from "react"
2-
import { useSettings } from "../state"
3-
4-
import { version } from "../reducer"
5-
6-
import Reset from "./inputs/Reset"
7-
import { useZxing } from "react-zxing";
8-
import SetPanel from "./inputs/SetPanel"
9-
10-
import useAnim from "../hooks/useAnim"
11-
12-
import { parseCsvBody } from "../csv"
13-
14-
import "./Scanner.scss"
15-
import "./inputs/inputs.scss"
16-
import "./inputs/buttons.scss"
17-
/**
18-
* Scans QR code to store its data
19-
*/
20-
const Scanner = () => {
21-
const [settings] = useSettings()
22-
23-
const [error, setError] = useState(false)
24-
const matchScans = useRef(new Set(JSON.parse(localStorage.matchScanSet ?? "[]")))
25-
const qualScans = useRef(new Set(JSON.parse(localStorage.qualitativeScanSet ?? "[]")))
26-
const [scanCount, setScanCount] = useState(matchScans.current.size + qualScans.current.size)
27-
const [anim, onAnimEnd] = useAnim(scanCount)
28-
const [scanHint, setScanHint] = useState("")
29-
const [scan, setScan] = useState(true)
30-
const ctx = useRef({})
31-
32-
const beep = () => {
33-
const time = ctx.current.currentTime
34-
const osc = ctx.current.createOscillator()
35-
const gain = ctx.current.createGain()
36-
37-
osc.connect(gain)
38-
gain.connect(ctx.current.destination)
39-
40-
osc.onended = () => {
41-
gain.disconnect(ctx.current.destination)
42-
osc.disconnect(gain)
43-
}
44-
45-
osc.type = "sine"
46-
osc.frequency.value = 550
47-
osc.start(time)
48-
osc.stop(time + 0.1)
49-
}
50-
51-
useEffect(() => {
52-
ctx.current = new (window.AudioContext || window.webkitAudioContext)()
53-
return () => ctx.current.close()
54-
}, [ctx])
55-
56-
57-
58-
const { ref } = useZxing({
59-
onDecodeResult(result) {
60-
console.log(result.getText())
61-
handleScan(result.getText())
62-
}, onError (err) {
63-
console.error(err)
64-
setError(err)
65-
}
66-
});
67-
68-
69-
const handleScan = (val) => {
70-
71-
if (val === null) {
72-
if (scanHint !== "") setScanHint("")
73-
return
74-
}
75-
let objVal = parseCsvBody(val)
76-
console.log(objVal)
77-
const versionMatch = Number.parseInt(objVal.version) === version
78-
if ((!matchScans.current.has(val) && !qualScans.current.has(val)) && versionMatch) {
79-
80-
setScanCount(scanCount + 1)
81-
82-
// Checking if the quickness has been set
83-
// If it has, then the csv object must be from the qualitative scouting
84-
// Otherwise, it should be a normal match
85-
if(objVal?.team1Quickness) {
86-
qualScans.current.add(val)
87-
localStorage.qualitativeScanSet = JSON.stringify(Array.from(qualScans.current))
88-
} else {
89-
matchScans.current.add(val)
90-
localStorage.matchScanSet = JSON.stringify(Array.from(matchScans.current))
91-
}
92-
93-
if (settings.scannerBeep) beep()
94-
setScanHint("stored")
95-
} else {
96-
setScanHint(
97-
!versionMatch ? "CSV versioning mismatch" : "already scanned"
98-
)
99-
}
100-
}
101-
return (
102-
<>
103-
{scan && (
104-
<div className="QrWrapper wide veryTall" animate={anim} onAnimationEnd={onAnimEnd}>
105-
<video ref={ref}></video>
106-
</div>
107-
)}
108-
<button
109-
className={`wide ${scan ? "red" : "green"}`}
110-
onClick={() => setScan(!scan)}
111-
>
112-
{scan ? "Stop" : "Start"}
113-
</button>
114-
<div className="Center wide">{`Scanned ${scanCount} ${
115-
scanHint !== "" ? " - " : ""
116-
}${scanHint.toUpperCase()}`}</div>
117-
{error && <div className="wide Center">{error}</div>}
118-
<SetPanel width= "halfWide" label="Export" panelName="Export"></SetPanel>
119-
<Reset width = "halfWide"></Reset>
120-
</>
121-
)
122-
}
123-
124-
export default Scanner
1+
import React, { useEffect, useRef, useState } from "react"
2+
import { useSettings } from "../state"
3+
4+
import { version } from "../reducer"
5+
6+
import Reset from "./inputs/Reset"
7+
import { useZxing } from "react-zxing";
8+
import SetPanel from "./inputs/SetPanel"
9+
10+
import useAnim from "../hooks/useAnim"
11+
12+
import { parseCsvBody } from "../csv"
13+
14+
import "./Scanner.scss"
15+
import "./inputs/inputs.scss"
16+
import "./inputs/buttons.scss"
17+
/**
18+
* Scans QR code to store its data
19+
*/
20+
const Scanner = () => {
21+
const [settings] = useSettings()
22+
23+
const [error, setError] = useState(false)
24+
const matchScans = useRef(new Set(JSON.parse(localStorage.matchScanSet ?? "[]")))
25+
const qualScans = useRef(new Set(JSON.parse(localStorage.qualitativeScanSet ?? "[]")))
26+
const [scanCount, setScanCount] = useState(matchScans.current.size + qualScans.current.size)
27+
const [anim, onAnimEnd] = useAnim(scanCount)
28+
const [scanHint, setScanHint] = useState("")
29+
const [scan, setScan] = useState(true)
30+
const ctx = useRef({})
31+
32+
const beep = () => {
33+
const time = ctx.current.currentTime
34+
const osc = ctx.current.createOscillator()
35+
const gain = ctx.current.createGain()
36+
37+
osc.connect(gain)
38+
gain.connect(ctx.current.destination)
39+
40+
osc.onended = () => {
41+
gain.disconnect(ctx.current.destination)
42+
osc.disconnect(gain)
43+
}
44+
45+
osc.type = "sine"
46+
osc.frequency.value = 550
47+
osc.start(time)
48+
osc.stop(time + 0.1)
49+
}
50+
51+
useEffect(() => {
52+
ctx.current = new (window.AudioContext || window.webkitAudioContext)()
53+
return () => ctx.current.close()
54+
}, [ctx])
55+
56+
57+
58+
const { ref } = useZxing({
59+
onDecodeResult(result) {
60+
console.log(result.getText())
61+
handleScan(result.getText())
62+
}, onError (err) {
63+
console.error(err)
64+
setError(err)
65+
}
66+
});
67+
68+
69+
const handleScan = (val) => {
70+
71+
if (val === null) {
72+
if (scanHint !== "") setScanHint("")
73+
return
74+
}
75+
let objVal = parseCsvBody(val)
76+
console.log(objVal)
77+
const versionMatch = Number.parseInt(objVal.version) === version
78+
if ((!matchScans.current.has(val) && !qualScans.current.has(val)) && versionMatch) {
79+
80+
setScanCount(scanCount + 1)
81+
82+
// Checking if the quickness has been set
83+
// If it has, then the csv object must be from the qualitative scouting
84+
// Otherwise, it should be a normal match
85+
if(objVal?.typeOfData === "Qualitative") {
86+
qualScans.current.add(val)
87+
localStorage.qualitativeScanSet = JSON.stringify(Array.from(qualScans.current))
88+
} else {
89+
matchScans.current.add(val)
90+
localStorage.matchScanSet = JSON.stringify(Array.from(matchScans.current))
91+
}
92+
93+
if (settings.scannerBeep) beep()
94+
setScanHint("stored")
95+
} else {
96+
setScanHint(
97+
!versionMatch ? "CSV versioning mismatch" : "already scanned"
98+
)
99+
}
100+
}
101+
return (
102+
<>
103+
{scan && (
104+
<div className="QrWrapper wide veryTall" animate={anim} onAnimationEnd={onAnimEnd}>
105+
<video ref={ref}></video>
106+
</div>
107+
)}
108+
<button
109+
className={`wide ${scan ? "red" : "green"}`}
110+
onClick={() => setScan(!scan)}
111+
>
112+
{scan ? "Stop" : "Start"}
113+
</button>
114+
<div className="Center wide">{`Scanned ${scanCount} ${
115+
scanHint !== "" ? " - " : ""
116+
}${scanHint.toUpperCase()}`}</div>
117+
{error && <div className="wide Center">{error}</div>}
118+
<SetPanel width= "halfWide" label="Export" panelName="Export"></SetPanel>
119+
<Reset width = "halfWide"></Reset>
120+
</>
121+
)
122+
}
123+
124+
export default Scanner

0 commit comments

Comments
 (0)