├── .vscode ├── settings.json └── launch.json ├── src ├── img │ ├── 0.png │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 2.png │ ├── 20.png │ ├── 21.png │ ├── 22.png │ ├── 23.png │ ├── 24.png │ ├── 25.png │ ├── 26.png │ ├── 27.png │ ├── 28.png │ ├── 29.png │ ├── 3.png │ ├── 30.png │ ├── 31.png │ ├── 32.png │ ├── 33.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ ├── akey.png │ ├── dkey.png │ ├── fkey.png │ ├── logo.png │ ├── pick.png │ ├── caravan.png │ ├── cardec.png │ ├── hearts.png │ ├── skulls.png │ ├── sprites.png │ ├── hourglass.png │ ├── skulls_blue.png │ ├── skulls_red.png │ ├── fork.js │ └── star.js ├── components │ ├── Loading.js │ ├── Squiggle.js │ ├── Bar.js │ ├── Flytext.js │ ├── KButton.js │ ├── PicSelect.js │ ├── Credit.js │ ├── Die.js │ ├── HowTo.js │ ├── NavInput.js │ ├── Tub.js │ ├── SlidePane.js │ ├── ServerSetup.js │ ├── CharSelect.js │ ├── Side.js │ ├── Settings.js │ └── Game.js ├── setupTests.js ├── reportWebVitals.js ├── index.js ├── NavHooks.js ├── logo.svg ├── util │ ├── Server.js │ ├── Profile.js │ ├── Utils.js │ └── AI.js ├── App.js └── game.sass ├── .yarnrc.yml ├── public ├── logo.png ├── favicon.ico ├── robots.txt ├── manifest.json └── index.html ├── docs └── img │ └── screens │ ├── main.png │ ├── game_ai_1.png │ ├── game_ai_2.png │ ├── mobile_pvp.png │ ├── select_ai.png │ ├── mobile_pvp_1.png │ ├── mobile_pvp_2.png │ └── mobile_settings.png ├── .eslintrc.js ├── .gitignore ├── package.json └── README.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /src/img/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/0.png -------------------------------------------------------------------------------- /src/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/1.png -------------------------------------------------------------------------------- /src/img/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/10.png -------------------------------------------------------------------------------- /src/img/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/11.png -------------------------------------------------------------------------------- /src/img/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/12.png -------------------------------------------------------------------------------- /src/img/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/13.png -------------------------------------------------------------------------------- /src/img/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/14.png -------------------------------------------------------------------------------- /src/img/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/15.png -------------------------------------------------------------------------------- /src/img/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/16.png -------------------------------------------------------------------------------- /src/img/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/17.png -------------------------------------------------------------------------------- /src/img/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/18.png -------------------------------------------------------------------------------- /src/img/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/19.png -------------------------------------------------------------------------------- /src/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/2.png -------------------------------------------------------------------------------- /src/img/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/20.png -------------------------------------------------------------------------------- /src/img/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/21.png -------------------------------------------------------------------------------- /src/img/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/22.png -------------------------------------------------------------------------------- /src/img/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/23.png -------------------------------------------------------------------------------- /src/img/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/24.png -------------------------------------------------------------------------------- /src/img/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/25.png -------------------------------------------------------------------------------- /src/img/26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/26.png -------------------------------------------------------------------------------- /src/img/27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/27.png -------------------------------------------------------------------------------- /src/img/28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/28.png -------------------------------------------------------------------------------- /src/img/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/29.png -------------------------------------------------------------------------------- /src/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/3.png -------------------------------------------------------------------------------- /src/img/30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/30.png -------------------------------------------------------------------------------- /src/img/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/31.png -------------------------------------------------------------------------------- /src/img/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/32.png -------------------------------------------------------------------------------- /src/img/33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/33.png -------------------------------------------------------------------------------- /src/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/4.png -------------------------------------------------------------------------------- /src/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/5.png -------------------------------------------------------------------------------- /src/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/6.png -------------------------------------------------------------------------------- /src/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/7.png -------------------------------------------------------------------------------- /src/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/8.png -------------------------------------------------------------------------------- /src/img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/9.png -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | yarnPath: .yarn/releases/yarn-3.6.1.cjs -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/public/logo.png -------------------------------------------------------------------------------- /src/img/akey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/akey.png -------------------------------------------------------------------------------- /src/img/dkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/dkey.png -------------------------------------------------------------------------------- /src/img/fkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/fkey.png -------------------------------------------------------------------------------- /src/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/logo.png -------------------------------------------------------------------------------- /src/img/pick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/pick.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/img/caravan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/caravan.png -------------------------------------------------------------------------------- /src/img/cardec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/cardec.png -------------------------------------------------------------------------------- /src/img/hearts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/hearts.png -------------------------------------------------------------------------------- /src/img/skulls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/skulls.png -------------------------------------------------------------------------------- /src/img/sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/sprites.png -------------------------------------------------------------------------------- /src/img/hourglass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/hourglass.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/img/skulls_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/skulls_blue.png -------------------------------------------------------------------------------- /src/img/skulls_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/src/img/skulls_red.png -------------------------------------------------------------------------------- /docs/img/screens/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/main.png -------------------------------------------------------------------------------- /docs/img/screens/game_ai_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/game_ai_1.png -------------------------------------------------------------------------------- /docs/img/screens/game_ai_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/game_ai_2.png -------------------------------------------------------------------------------- /docs/img/screens/mobile_pvp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/mobile_pvp.png -------------------------------------------------------------------------------- /docs/img/screens/select_ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/select_ai.png -------------------------------------------------------------------------------- /docs/img/screens/mobile_pvp_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/mobile_pvp_1.png -------------------------------------------------------------------------------- /docs/img/screens/mobile_pvp_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/mobile_pvp_2.png -------------------------------------------------------------------------------- /docs/img/screens/mobile_settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nafeij/kbclone/HEAD/docs/img/screens/mobile_settings.png -------------------------------------------------------------------------------- /src/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | const Loading = () => ( 5 |
6 |
7 |
8 | ) 9 | 10 | export default Loading -------------------------------------------------------------------------------- /src/components/Squiggle.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import sprites from "../img/sprites.png" 4 | 5 | const Squiggle = ()=>( 6 |
7 | ) 8 | 9 | export default Squiggle -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended' 8 | ], 9 | overrides: [ 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 'latest', 13 | sourceType: 'module' 14 | }, 15 | plugins: [ 16 | 'react' 17 | ], 18 | rules: {} 19 | } 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "KBClone", 3 | "name": "KnuckleClone", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/img/fork.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Fork = () => ( 4 | 5 | 6 | 7 | 8 | 9 | 10 | ) 11 | 12 | export default Fork 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 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | /.vscode 26 | .eslintrc.js 27 | 28 | /.github 29 | 30 | .pnp.* 31 | .yarn/* 32 | !.yarn/patches 33 | !.yarn/plugins 34 | !.yarn/releases 35 | !.yarn/sdks 36 | !.yarn/versions -------------------------------------------------------------------------------- /src/img/star.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Star = () => ( 4 | 5 | 6 | 7 | ) 8 | 9 | export default Star 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { HashRouter } from 'react-router-dom' 4 | import reportWebVitals from './reportWebVitals' 5 | 6 | // import './game.css' 7 | import { NavTree } from 'react-navtree' 8 | import App from './App' 9 | import './game.sass' 10 | // At the bootstrap phase (before rendering the app): 11 | 12 | const navTree = new NavTree() 13 | const root = ReactDOM.createRoot(document.getElementById('root')) 14 | root.render( 15 | 16 | 17 | // Switch to BrowserRouter if deploying somewhere other than github pages 18 | ) 19 | 20 | // If you want to start measuring performance in your app, pass a function 21 | // to log results (for example: reportWebVitals(console.log)) 22 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 23 | reportWebVitals() -------------------------------------------------------------------------------- /src/components/Bar.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | const Bar = (props) => ( 5 |
10 |
15 |
16 | ) 17 | 18 | Bar.propTypes = { 19 | baseImg: PropTypes.string, 20 | dim: PropTypes.shape({ 21 | width: PropTypes.string.isRequired, 22 | height: PropTypes.string.isRequired 23 | }).isRequired, 24 | progress: PropTypes.number.isRequired, 25 | fillImg: PropTypes.string.isRequired 26 | } 27 | 28 | export default Bar -------------------------------------------------------------------------------- /src/NavHooks.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import { useNavigate, useParams, useLocation } from 'react-router-dom'; 4 | 5 | export function withNavigate(Component) { 6 | return function WrappedComponent(props) { 7 | return ; 8 | } 9 | } 10 | 11 | withNavigate.propTypes = { 12 | Component: PropTypes.elementType.isRequired 13 | } 14 | 15 | export function withParams(Component) { 16 | return function WrappedComponent(props) { 17 | return ; 18 | } 19 | } 20 | 21 | withParams.propTypes = { 22 | Component: PropTypes.elementType.isRequired 23 | } 24 | 25 | export function withLocation(Component) { 26 | return function WrappedComponent(props) { 27 | return ; 28 | } 29 | } 30 | 31 | withLocation.propTypes = { 32 | Component: PropTypes.elementType.isRequired 33 | } -------------------------------------------------------------------------------- /src/components/Flytext.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import KButton from "./KButton" 4 | 5 | export default function Flytext(props){ 6 | return props.display ? ( 7 |
11 |

{props.message}

12 | {props.timeOut < 0 && 13 |
14 | {props.buttons.map((b,i)=>( 15 | 16 | ))} 17 |
18 | } 19 |
20 | ) : null 21 | } 22 | 23 | Flytext.propTypes = { 24 | display: PropTypes.bool.isRequired, 25 | show: PropTypes.bool.isRequired, 26 | message: PropTypes.string.isRequired, 27 | slideEnd: PropTypes.func, 28 | timeOut: PropTypes.number.isRequired, 29 | buttons: PropTypes.arrayOf(PropTypes.shape({ 30 | text: PropTypes.string.isRequired, 31 | onClick: PropTypes.func.isRequired 32 | })), 33 | hover: PropTypes.bool 34 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kbclone", 3 | "version": "0.1.0", 4 | "homepage": "https://nafeij.github.io/kbclone", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.3.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "peerjs": "^1.4.7", 11 | "prop-types": "^15.8.1", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-navtree": "^0.0.6", 15 | "react-router-dom": "^6.8.2", 16 | "react-transition-group": "^4.4.5", 17 | "universal-cookie": "^8.0.1", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "devDependencies": { 21 | "cross-env": "^7.0.3", 22 | "gh-pages": "^6.3.0", 23 | "react-scripts": "^5.0.1", 24 | "sass": "^1.58.0" 25 | }, 26 | "resolutions": { 27 | "react-scripts/@svgr/webpack": "^6.2.1" 28 | }, 29 | "scripts": { 30 | "predeploy": "yarn run build", 31 | "deploy": "gh-pages -d build", 32 | "start": "react-scripts start", 33 | "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build", 34 | "test": "react-scripts test", 35 | "eject": "react-scripts eject" 36 | }, 37 | "eslintConfig": { 38 | "extends": [ 39 | "react-app", 40 | "react-app/jest" 41 | ] 42 | }, 43 | "browserslist": { 44 | "production": [ 45 | ">0.2%", 46 | "not dead", 47 | "not op_mini all" 48 | ], 49 | "development": [ 50 | "last 1 chrome version", 51 | "last 1 firefox version", 52 | "last 1 safari version" 53 | ] 54 | }, 55 | "packageManager": "yarn@3.6.1" 56 | } 57 | -------------------------------------------------------------------------------- /src/components/KButton.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import PropTypes from "prop-types"; 3 | import Nav from 'react-navtree'; 4 | 5 | const KButton = (props) => { 6 | 7 | let el = useRef(null) 8 | 9 | const {defaultFocused, text, onClick, hasSpacer, scrollOnFocus, ...rest} = props 10 | 11 | const setRef = (nav) => { 12 | el = scrollOnFocus && nav && nav.tree.el 13 | } 14 | 15 | const onInputClick = (key, ...rest) => { 16 | if (key === 'enter') { 17 | onClick(key, ...rest) 18 | } 19 | } 20 | 21 | const scrollTo = (behavior="smooth") => { 22 | el.scrollIntoView({ behavior, block: "center"}) 23 | } 24 | 25 | const onInputNav = (path) => { 26 | if (scrollOnFocus && path) { 27 | scrollTo() 28 | } 29 | } 30 | 31 | return ( 32 | 44 | ) 45 | } 46 | 47 | KButton.propTypes = { 48 | defaultFocused: PropTypes.bool, 49 | text: PropTypes.string, 50 | onClick: PropTypes.func, 51 | hasSpacer: PropTypes.bool, 52 | scrollOnFocus: PropTypes.bool 53 | } 54 | 55 | KButton.defaultProps = { 56 | defaultFocused: false, 57 | text: "placeholder", 58 | onClick: () => {}, 59 | hasSpacer: false, 60 | scrollOnFocus: false 61 | } 62 | 63 | export default KButton -------------------------------------------------------------------------------- /src/components/PicSelect.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import PropTypes from 'prop-types' 3 | import Nav, { navDynamic } from 'react-navtree' 4 | 5 | import Profile from '../util/Profile' 6 | 7 | const PicSelect = (props) => { 8 | 9 | const scrollRefs = useRef(Array(Profile.cosm.length)) 10 | 11 | const scrollTo = (index, behavior = "smooth") => { 12 | scrollRefs.current[index].scrollIntoView({ behavior, block: "center"}) 13 | } 14 | 15 | const setRef = (nav, i) => { 16 | scrollRefs.current[i] = nav && nav.tree.el 17 | } 18 | 19 | const inputFunc = (i) => (key) => { 20 | if (key === 'enter') { 21 | props.onClick(i); return 22 | } 23 | if (key === 'up' || key === 'down') { 24 | scrollTo(i) 25 | } 26 | } 27 | 28 | useEffect(() => { 29 | scrollTo(props.playProfileInd, "auto") 30 | }, []) 31 | 32 | return ( 33 |