.eslintcache

[{"D:\\ichimi-tavern\\src\\components\\NavBar.jsx":"1","D:\\ichimi-tavern\\src\\components\\Footer.jsx":"2","D:\\ichimi-tavern\\src\\App.tsx":"3","D:\\ichimi-tavern\\src\\utils\\device.js":"4","D:\\ichimi-tavern\\src\\screens\\Homepage.tsx":"5","D:\\ichimi-tavern\\src\\reportWebVitals.tsx":"6","D:\\ichimi-tavern\\src\\components\\MarineGallery.jsx":"7","D:\\ichimi-tavern\\src\\index.tsx":"8","D:\\ichimi-tavern\\src\\utils\\storage.ts":"9","D:\\ichimi-tavern\\src\\components\\MarineDiscordServer.js":"10","D:\\ichimi-tavern\\src\\utils\\lang.ts":"11","D:\\ichimi-tavern\\src\\screens\\Disclaimer.jsx":"12","D:\\ichimi-tavern\\src\\components\\MarineBackground.tsx":"13","D:\\ichimi-tavern\\src\\components\\MarineBtn.tsx":"14","D:\\ichimi-tavern\\src\\utils\\player.ts":"15"},{"size":1888,"mtime":1610960921035,"results":"16","hashOfConfig":"17"},{"size":2183,"mtime":1610952112004,"results":"18","hashOfConfig":"17"},{"size":636,"mtime":1610137115088,"results":"19","hashOfConfig":"17"},{"size":216,"mtime":1609855807400,"results":"20","hashOfConfig":"17"},{"size":11609,"mtime":1610528315224,"results":"21","hashOfConfig":"17"},{"size":425,"mtime":1608395970081,"results":"22","hashOfConfig":"17"},{"size":1594,"mtime":1609855676505,"results":"23","hashOfConfig":"17"},{"size":643,"mtime":1609775243956,"results":"24","hashOfConfig":"17"},{"size":1903,"mtime":1610436955079,"results":"25","hashOfConfig":"17"},{"size":528,"mtime":1609696454830,"results":"26","hashOfConfig":"17"},{"size":688,"mtime":1610003435139,"results":"27","hashOfConfig":"17"},{"size":3876,"mtime":1610822785259,"results":"28","hashOfConfig":"17"},{"size":821,"mtime":1610159440432,"results":"29","hashOfConfig":"17"},{"size":4401,"mtime":1610527494418,"results":"30","hashOfConfig":"17"},{"size":1244,"mtime":1609954068404,"results":"31","hashOfConfig":"17"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"49fti2",{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"41"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":10,"fixableErrorCount":0,"fixableWarningCount":0,"source":"44","usedDeprecatedRules":"45"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\ichimi-tavern\\src\\components\\NavBar.jsx",["66"],"D:\\ichimi-tavern\\src\\components\\Footer.jsx",[],"D:\\ichimi-tavern\\src\\App.tsx",[],["67","68"],"D:\\ichimi-tavern\\src\\utils\\device.js",[],["69","70"],"D:\\ichimi-tavern\\src\\screens\\Homepage.tsx",["71","72","73","74","75","76","77","78","79","80"],"import MarineBtn, {MarineBtnState} from '../components/MarineBtn';\r\nimport categoryNames from '../assets/categories.json';\r\nimport {getLang, langs} from '../utils/lang';\r\nimport {getConfig, setConfig} from '../utils/storage'\r\nimport MarineBtnData from '../utils/data';\r\nimport React, {useCallback, useEffect, useState} from 'react';\r\n// @ts-ignore\r\nimport {useSelector, useDispatch} from 'react-redux';\r\nimport MarineBackground from \"../components/MarineBackground\";\r\nimport { playingRandom, playingRandomCtg } from '../redux/reducer';\r\n\r\n// TODO: Fix non-stop random functions\r\nconst Homepage = () => {\r\n\r\n    const [state, setState] = useState({\r\n        disableGallery: false,\r\n        imageIndex: 0,\r\n        loop: false,\r\n        overlap: false,\r\n        bgm: new Audio(),\r\n        playingBgm: false,\r\n    });\r\n\r\n    // overall app state\r\n    const siteLang = useSelector((state: any) => state.siteLang);\r\n    const imgIndex = useSelector((state: any) => state.imageIndex);\r\n    const video = useSelector((state: any) => state.video);\r\n    const random = useSelector((state: any) => state.random);\r\n    const randomCtg = useSelector((state: any) => state.randomCtg);\r\n    const dispatch = useDispatch();\r\n\r\n    // get configure from local storage\r\n    useEffect(() => {\r\n        // @ts-ignore\r\n        setState(prevState => {\r\n            return {\r\n                ...prevState,\r\n                disableGallery: !!localStorage.getItem('disableGallery'),\r\n                imageIndex: localStorage.getItem('imageIndex') ? Number(localStorage.getItem('imageIndex')) : 0,\r\n                loop: !!localStorage.getItem('loop'),\r\n                overlap: !!localStorage.getItem('overlap'),\r\n                bgm: new Audio(require('../assets/bgm.mp3').default)\r\n            }\r\n        })\r\n    }, [])\r\n\r\n    const buttons = (voices:Array<MarineBtnData>) => {\r\n        return (\r\n            <div className=\"voices\">\r\n                {voices.map((data: MarineBtnData) =>\r\n                    <MarineBtn\r\n                        data={data}\r\n                        setImageIndex={setImageIndex}\r\n                        onRandom={chooseRandom}\r\n                        onRandomCtg={chooseRandomCtg}\r\n                    />\r\n                )}\r\n            </div>\r\n        )\r\n    }\r\n\r\n    const categories = () => {\r\n        const categories: Record<string, Array<MarineBtnData>> = {};\r\n        const getCategoryName = (ctg: string) => {\r\n            return getLang((categoryNames as any)[ctg]);\r\n        };\r\n        const r = require.context('../assets/meta/', false, /\\.json$/);\r\n        r.keys().forEach((path: string) => {\r\n            const data = r(path);\r\n            data.isPlaying = false;\r\n            const ctg = getCategoryName(data.category)\r\n            if (Object.prototype.hasOwnProperty.call(categories, ctg)) {\r\n                categories[ctg].push(data);\r\n            }\r\n            else {\r\n                categories[ctg] = [data];\r\n            }\r\n        })\r\n        return categories;\r\n    }\r\n\r\n    let current = {\r\n        btnState: {} as MarineBtnState,\r\n        audio: new Audio(),\r\n    };\r\n\r\n    const toggleGallery = useCallback(() => {\r\n        setConfig();\r\n        setState((prevState => {\r\n            return {\r\n                ...prevState,\r\n                disableGallery: !prevState.disableGallery,\r\n                imageIndex: Number(localStorage.getItem('imageIndex'))\r\n            }\r\n        }))\r\n    }, [state.disableGallery])\r\n\r\n    const setImageIndex = useCallback(() => {\r\n        setConfig();\r\n        setState((prevState => {\r\n            return {\r\n                ...prevState,\r\n                imageIndex: imgIndex\r\n            }\r\n        }))\r\n    } , [imgIndex])\r\n\r\n    const toggleLoop = useCallback(() => {\r\n        setConfig();\r\n        setState((prevState => {\r\n            return {\r\n                ...prevState,\r\n                loop: !prevState.loop\r\n            }\r\n        }))\r\n    }, [state.loop]);\r\n\r\n    const toggleOverlap = useCallback(() => {\r\n        setConfig();\r\n        setState((prevState => {\r\n            return {\r\n                ...prevState,\r\n                overlap: !prevState.overlap\r\n            }\r\n        }))\r\n    }, [state.overlap]);\r\n\r\n    const toggleBgm = useCallback(() => {\r\n        setState((prevState) => {\r\n            return {\r\n                ...prevState,\r\n                playingBgm: !prevState.playingBgm\r\n            }\r\n        })\r\n    }, [state.playingBgm])\r\n\r\n    useEffect(() => {\r\n        if (!state.playingBgm) {\r\n            state.bgm.onended = null;\r\n            state.bgm.pause();\r\n        }\r\n        else {\r\n            state.bgm.volume = getConfig().bgmVolume;\r\n            state.bgm.play();\r\n            state.bgm.onended = () => {\r\n                if (state.playingBgm) state.bgm.play();\r\n            }\r\n        }\r\n    }, [state.bgm, state.playingBgm])\r\n\r\n    const bgmVolumeChange = useCallback(() => {\r\n        const value = Number((document.getElementById('bgmVolume') as HTMLInputElement).value) / 100;\r\n        localStorage.setItem('bgmVolume', String(value));\r\n        state.bgm.volume = value;\r\n        setState(prevState => {\r\n            return({\r\n                ...prevState,\r\n                bgm: prevState.bgm\r\n            })\r\n        })\r\n    }, [state.bgm])\r\n\r\n    const chooseRandom = useCallback(() => {\r\n      const pool = document.getElementsByClassName('MarineBtn');\r\n      const selected = pool[Math.floor(Math.random() * pool.length)] as any;\r\n      selected.click();\r\n    }, [])\r\n\r\n    const playRandom = useCallback(() => {\r\n      dispatch(playingRandom(!random));\r\n    }, [random]);\r\n    \r\n    useEffect(() => {\r\n        if (random) chooseRandom();\r\n    }, [random])\r\n\r\n    const chooseRandomCtg = useCallback((ctg: string) => {\r\n        const pool = document.getElementsByClassName(ctg);\r\n        const selected = pool[Math.floor(Math.random() * pool.length)] as any;\r\n        selected.click();\r\n      }, [randomCtg])\r\n  \r\n    const playRandomCtg = useCallback((ctg: string) => {\r\n        dispatch(playingRandomCtg(randomCtg ? '' : ctg));\r\n    }, [randomCtg]);\r\n      \r\n    useEffect(() => {\r\n        if (randomCtg) chooseRandomCtg(randomCtg);\r\n    }, [randomCtg])\r\n\r\n    const Controller = () => {\r\n        return (\r\n            <div className=\"controller\">\r\n                <div>\r\n                    <button\r\n                        className=\"btn\"\r\n                        onClick={chooseRandom}\r\n                        disabled={random || randomCtg !== \"\"}\r\n                    >\r\n                        {/* @ts-ignore */}\r\n                        {langs()[siteLang].action.random}\r\n                    </button>\r\n                    <button\r\n                        className=\"btn\"\r\n                        onClick={playRandom}\r\n                        disabled={randomCtg !== \"\"}\r\n                    >\r\n                        {/* @ts-ignore */}\r\n                        {random ? langs()[siteLang].action.stop : langs()[siteLang].action.nonstop}\r\n                    </button>\r\n                    <div>\r\n                        <label className=\"checkbox-container\">\r\n                            {/* @ts-ignore */}\r\n                            {langs()[siteLang].action.noGallery}\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                checked={state.disableGallery}\r\n                                name=\"disable-gallery\" id=\"disable-gallery\"\r\n                                onChange={toggleGallery}\r\n                            />\r\n                            <span className=\"checkmark\"></span>\r\n                        </label>\r\n                    </div>\r\n                    <div>\r\n                        <label className=\"checkbox-container\">\r\n                            {/* @ts-ignore */}\r\n                            {langs()[siteLang].action.loop}\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                checked={state.loop}\r\n                                disabled={random}\r\n                                name=\"loop\" id=\"loop\"\r\n                                onChange={toggleLoop}\r\n                            />\r\n                            <span className=\"checkmark\"></span>\r\n                        </label>\r\n                    </div>\r\n                    <div>\r\n                        {/* @ts-ignore */}\r\n                        <label className=\"checkbox-container\">{langs()[siteLang].action.overlap}\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                checked={state.overlap}\r\n                                disabled={random}\r\n                                name=\"overlap\" id=\"overlap\"\r\n                                onChange={toggleOverlap}\r\n                            />\r\n                            <span className=\"checkmark\"></span>\r\n                        </label>\r\n                    </div>\r\n                    <div>\r\n                        {/* @ts-ignore */}\r\n                        <label className=\"checkbox-container\">{langs()[siteLang].action.bgm}\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                checked={state.playingBgm}\r\n                                name=\"bgm\" id=\"bgm\"\r\n                                onChange={toggleBgm}\r\n                            />\r\n                            <span className=\"checkmark\"></span>\r\n                        </label>\r\n                    </div>\r\n                    <div hidden={!state.playingBgm}>\r\n                        <label className=\"slider-container\">\r\n                            {/* @ts-ignore */}\r\n                            {langs()[siteLang].action.volume}\r\n                            <input\r\n                                type=\"range\" min=\"1\" max=\"100\"\r\n                                className=\"slider\" id=\"bgmVolume\"\r\n                                value={getConfig(true).bgmVolume * 100}\r\n                                onChange={bgmVolumeChange}\r\n                            />\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    const Contents = () => {\r\n        return (\r\n            <div>\r\n                {\r\n                    Object.entries(categories()).map(([ctg, voices]) =>\r\n                        <div className=\"group\">\r\n                            <div className=\"group-header\">\r\n                                <h4>{ctg}</h4>\r\n                                <button\r\n                                    className=\"btn\"\r\n                                    onClick={() => playRandomCtg(ctg)}\r\n                                    disabled={random || (randomCtg !== '' && randomCtg !== ctg)}\r\n                                >\r\n                                    {/* @ts-ignore */}\r\n                                    {randomCtg === ctg ? langs()[siteLang].action.stop : langs()[siteLang].action.nonstop}\r\n                                </button>\r\n                            </div>\r\n                            {buttons(voices)}\r\n                        </div>\r\n                    )\r\n                }\r\n            </div>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <MarineBackground\r\n                video={video}\r\n                loop={state.loop}\r\n                disableGallery={state.disableGallery}\r\n                imageIndex={state.imageIndex}\r\n            />\r\n            {Controller()}\r\n            {Contents()}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Homepage;\r\n",["81","82"],"D:\\ichimi-tavern\\src\\reportWebVitals.tsx",[],"D:\\ichimi-tavern\\src\\components\\MarineGallery.jsx",[],"D:\\ichimi-tavern\\src\\index.tsx",[],"D:\\ichimi-tavern\\src\\utils\\storage.ts",[],"D:\\ichimi-tavern\\src\\components\\MarineDiscordServer.js",[],"D:\\ichimi-tavern\\src\\utils\\lang.ts",[],"D:\\ichimi-tavern\\src\\screens\\Disclaimer.jsx",[],"D:\\ichimi-tavern\\src\\components\\MarineBackground.tsx",[],"D:\\ichimi-tavern\\src\\components\\MarineBtn.tsx",["83"],"D:\\ichimi-tavern\\src\\utils\\player.ts",[],{"ruleId":"84","severity":1,"message":"85","line":18,"column":8,"nodeType":"86","endLine":18,"endColumn":18,"suggestions":"87"},{"ruleId":"88","replacedBy":"89"},{"ruleId":"90","replacedBy":"91"},{"ruleId":"88","replacedBy":"92"},{"ruleId":"90","replacedBy":"93"},{"ruleId":"94","severity":1,"message":"95","line":82,"column":9,"nodeType":"96","messageId":"97","endLine":82,"endColumn":16},{"ruleId":"84","severity":1,"message":"98","line":96,"column":8,"nodeType":"86","endLine":96,"endColumn":30,"suggestions":"99"},{"ruleId":"84","severity":1,"message":"100","line":116,"column":8,"nodeType":"86","endLine":116,"endColumn":20,"suggestions":"101"},{"ruleId":"84","severity":1,"message":"102","line":126,"column":8,"nodeType":"86","endLine":126,"endColumn":23,"suggestions":"103"},{"ruleId":"84","severity":1,"message":"104","line":135,"column":8,"nodeType":"86","endLine":135,"endColumn":26,"suggestions":"105"},{"ruleId":"84","severity":1,"message":"85","line":171,"column":8,"nodeType":"86","endLine":171,"endColumn":16,"suggestions":"106"},{"ruleId":"84","severity":1,"message":"107","line":175,"column":8,"nodeType":"86","endLine":175,"endColumn":16,"suggestions":"108"},{"ruleId":"84","severity":1,"message":"109","line":181,"column":10,"nodeType":"86","endLine":181,"endColumn":21,"suggestions":"110"},{"ruleId":"84","severity":1,"message":"85","line":185,"column":8,"nodeType":"86","endLine":185,"endColumn":19,"suggestions":"111"},{"ruleId":"84","severity":1,"message":"112","line":189,"column":8,"nodeType":"86","endLine":189,"endColumn":19,"suggestions":"113"},{"ruleId":"88","replacedBy":"92"},{"ruleId":"90","replacedBy":"93"},{"ruleId":"94","severity":1,"message":"114","line":80,"column":24,"nodeType":"96","messageId":"97","endLine":80,"endColumn":37},"react-hooks/exhaustive-deps","React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array.","ArrayExpression",["115"],"no-native-reassign",["116"],"no-negated-in-lhs",["117"],["116"],["117"],"@typescript-eslint/no-unused-vars","'current' is assigned a value but never used.","Identifier","unusedVar","React Hook useCallback has an unnecessary dependency: 'state.disableGallery'. Either exclude it or remove the dependency array.",["118"],"React Hook useCallback has an unnecessary dependency: 'state.loop'. Either exclude it or remove the dependency array.",["119"],"React Hook useCallback has an unnecessary dependency: 'state.overlap'. Either exclude it or remove the dependency array.",["120"],"React Hook useCallback has an unnecessary dependency: 'state.playingBgm'. Either exclude it or remove the dependency array.",["121"],["122"],"React Hook useEffect has a missing dependency: 'chooseRandom'. Either include it or remove the dependency array.",["123"],"React Hook useCallback has an unnecessary dependency: 'randomCtg'. Either exclude it or remove the dependency array.",["124"],["125"],"React Hook useEffect has a missing dependency: 'chooseRandomCtg'. Either include it or remove the dependency array.",["126"],"'setIsDisabled' is assigned a value but never used.",{"desc":"127","fix":"128"},"no-global-assign","no-unsafe-negation",{"desc":"129","fix":"130"},{"desc":"129","fix":"131"},{"desc":"129","fix":"132"},{"desc":"129","fix":"133"},{"desc":"134","fix":"135"},{"desc":"136","fix":"137"},{"desc":"129","fix":"138"},{"desc":"139","fix":"140"},{"desc":"141","fix":"142"},"Update the dependencies array to be: [dispatch]",{"range":"143","text":"144"},"Update the dependencies array to be: []",{"range":"145","text":"146"},{"range":"147","text":"146"},{"range":"148","text":"146"},{"range":"149","text":"146"},"Update the dependencies array to be: [dispatch, random]",{"range":"150","text":"151"},"Update the dependencies array to be: [chooseRandom, random]",{"range":"152","text":"153"},{"range":"154","text":"146"},"Update the dependencies array to be: [dispatch, randomCtg]",{"range":"155","text":"156"},"Update the dependencies array to be: [chooseRandomCtg, randomCtg]",{"range":"157","text":"158"},[651,661],"[dispatch]",[3435,3457],"[]",[3934,3946],[4188,4203],[4425,4443],[5594,5602],"[dispatch, random]",[5679,5687],"[chooseRandom, random]",[5928,5939],[6070,6081],"[dispatch, randomCtg]",[6175,6186],"[chooseRandomCtg, randomCtg]"]