footer
*/} 7 |Loading...
27 | } 28 | 29 | )); 30 | 31 | ScaleSelector.propTypes = { 32 | dispatch: PropTypes.func.isRequired, 33 | localUserId: PropTypes.string.isRequired, 34 | selectedScale: PropTypes.number.isRequired, 35 | }; 36 | 37 | export default ScaleSelector; 38 | 39 | const ScaleTitle = styled.li` 40 | margin: auto 0.4em auto 20px; 41 | ${'' /* padding: 5px; */} 42 | font-size: 0.95em; 43 | float: left; 44 | color: #eaeaea; 45 | `; 46 | 47 | const ScaleOption = styled.button` 48 | color: #ababab; 49 | margin: 0.3em; 50 | float: left; 51 | font-size: 0.95em; 52 | background: transparent; 53 | font-weight: ${(props) => (props.isSelected ? 700 : 200)}; 54 | `; 55 | -------------------------------------------------------------------------------- /src/client/components/Knob.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React, { useEffect, useRef, memo } from 'react'; 3 | import * as Nexus from 'nexusui'; 4 | 5 | let id = 0; 6 | function getId() { 7 | id += 1; 8 | return id; 9 | } 10 | 11 | function NO_OP() {} 12 | 13 | const Dial = memo(({ 14 | size, 15 | interaction, 16 | max, 17 | min, 18 | mode, 19 | value, 20 | onChange = NO_OP, 21 | onReady = NO_OP, 22 | }) => { 23 | const dial = useRef(null); 24 | const elementId = useRef(`nexus-ui-dial-${getId()}`); 25 | 26 | useEffect(() => { 27 | dial.current = new Nexus.Dial(elementId.current, { 28 | size, 29 | interaction, 30 | max, 31 | min, 32 | mode, 33 | }); 34 | onReady(dial.current); 35 | // dial.current.colorize('accent', 'rgba(201, 249, 255, 0.7)'); 36 | dial.current.colorize('accent', '#c1c1c1'); 37 | dial.current.colorize('fill', '#333'); 38 | dial.current.on('change', (newState) => { 39 | onChange(newState); 40 | }); 41 | return () => { 42 | dial.current.destroy(); 43 | }; 44 | }, []); 45 | 46 | useEffect(() => { 47 | if (dial.current === null) return; 48 | if (!Array.isArray(size)) { 49 | return; 50 | } 51 | dial.current.resize(...size); 52 | }, [size]); 53 | 54 | useEffect(() => { 55 | if (dial.current === null) return; 56 | if (value === undefined) return; 57 | 58 | dial.current.value = value; 59 | }, [value]); 60 | 61 | useEffect(() => { 62 | if (dial.current === null) return; 63 | if (min === undefined) return; 64 | dial.current.min = min; 65 | }, [min]); 66 | 67 | useEffect(() => { 68 | if (dial.current === null) return; 69 | if (max === undefined) return; 70 | dial.current.max = max; 71 | }, [max]); 72 | 73 | useEffect(() => { 74 | if (dial.current === null) return; 75 | if (interaction === undefined) return; 76 | dial.current.interaction = interaction; 77 | }, [interaction]); 78 | return ; 79 | }); 80 | 81 | export default Dial; 82 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const path = require('path'); 4 | 5 | module.exports = { 6 | mode: process.env.NODE_ENV, 7 | entry: './src/client/index.js', 8 | 9 | // Enable sourcemaps for debugging webpack's output. 10 | devtool: 'source-map', 11 | 12 | output: { 13 | path: path.resolve(__dirname, 'dist'), 14 | publicPath: './', 15 | filename: 'bundle.js', 16 | }, 17 | 18 | devServer: { 19 | host: 'localhost', 20 | port: 8080, 21 | // match the output path 22 | contentBase: path.resolve(__dirname, 'dist'), 23 | // enable HMR on the devServer 24 | hot: true, 25 | // match the output 'publicPath' 26 | publicPath: '/', 27 | // fallback to root for other urls 28 | historyApiFallback: true, 29 | }, 30 | 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.(ts|js)x?$/, 35 | include: [path.resolve(__dirname, './src')], 36 | use: { 37 | loader: 'babel-loader', 38 | options: { 39 | presets: [ 40 | '@babel/preset-env', 41 | '@babel/preset-react', 42 | // "@babel/preset-typescript", 43 | ], 44 | plugins: [ 45 | '@babel/transform-runtime', 46 | ], 47 | }, 48 | }, 49 | }, 50 | { 51 | test: /\.s[ac]ss$/i, 52 | use: ['style-loader', 'css-loader', 'sass-loader'], 53 | }, 54 | { 55 | test: /\.(mp3|wav)$/, 56 | use: { 57 | loader: 'file-loader', 58 | options: { 59 | name: '[name].[contenthash].[ext]', 60 | outputPath: 'assets/audio/', 61 | publicPath: 'assets/audio/', 62 | }, 63 | }, 64 | }, 65 | { 66 | test: /\.(png|svg|jpg|gif)$/, 67 | use: ['file-loader'], 68 | }, 69 | ], 70 | }, 71 | resolve: { 72 | extensions: ['.tsx', '.ts', '.js', '.jsx'], 73 | }, 74 | plugins: [ 75 | new HtmlWebpackPlugin({ 76 | title: 'stepSeq', 77 | favicon: 'public/favicon-32x32.png', 78 | }), 79 | ], 80 | }; 81 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | package-lock.json 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | 76 | # parcel-bundler cache (https://parceljs.org/) 77 | .cache 78 | 79 | # Next.js build output 80 | .next 81 | 82 | # Nuxt.js build / generate output 83 | .nuxt 84 | dist 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | -------------------------------------------------------------------------------- /src/client/components/KnobPanel.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React, { useState, useCallback } from 'react'; 3 | import styled from 'styled-components'; 4 | // import { Dial } from 'react-nexusui'; 5 | import Dial from './Knob'; 6 | 7 | const Knobs = React.memo(({ 8 | k1Val, k2Val, k3Val, k4Val, 9 | handleK1Change, handleK2Change, handleK3Change, handleK4Change, 10 | }) => { 11 | // console.log('Knobs, k1Val: ', k1Val, 'k2Val', k2Val); 12 | 13 | return ( 14 |Loading...
36 | } 37 |