Skip to content

Commit

Permalink
bring new version to master branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@hlorenzi
hlorenzi committed Jul 21, 2019
2 parents 70517c8 + 0bcc2ba commit e5fe51a
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 57 deletions.
14 changes: 0 additions & 14 deletions .babelrc
View file

This file was deleted.

100 changes: 100 additions & 0 deletions examples/whensomebodylovedme.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{
"version": 3,
"bpm": 80,

"tracks":
[
{
"notes":
[
[[0,0,1],[0,1,8],60],
[[0,0,1],[0,1,4],41],
[[0,0,1],[0,1,4],53],
[[0,0,1],[0,1,4],57],
[[0,1,8],[0,1,8],65],
[[0,1,4],[0,1,8],65],
[[0,1,4],[0,1,4],55],
[[0,1,4],[0,1,4],43],
[[0,1,4],[0,1,4],58],
[[0,3,8],[0,433,6930],65],
[[0,12127,27720],[0,1733,27720],64],
[[0,1,2],[0,1,8],65],
[[0,1,2],[0,1,4],45],
[[0,1,2],[0,1,4],53],
[[0,1,2],[0,1,8],60],
[[0,5,8],[0,1,8],60],
[[1,0,1],[0,1,8],62],
[[1,0,1],[0,1,4],46],
[[1,0,1],[0,1,4],53],
[[1,1,8],[0,1,8],65],
[[1,1,4],[0,1,8],65],
[[1,1,4],[0,1,4],47],
[[1,1,4],[0,1,4],55],
[[1,3,8],[0,1,8],69],
[[1,1,2],[0,433,6930],67],
[[1,1,2],[0,1,2],48],
[[1,1,2],[0,1,2],55],
[[1,1949,3465],[0,1733,27720],65],
[[1,5,8],[0,1,8],67],
[[2,0,1],[0,1,8],64],
[[2,0,1],[0,1,4],52],
[[2,0,1],[0,1,4],58],
[[2,0,1],[0,1,4],62],
[[2,1,8],[0,1,8],67],
[[2,1,4],[0,5197,27720],69],
[[2,1,4],[0,1,4],49],
[[2,1,4],[0,1,4],57],
[[2,1,4],[0,1,4],64],
[[2,12127,27720],[0,1733,27720],67],
[[2,1,2],[0,1,8],65],
[[2,1,2],[0,1,4],50],
[[2,1,2],[0,1,4],57],
[[2,1,2],[0,1,4],62],
[[2,5,8],[0,433,6930],67],
[[2,19057,27720],[0,1,8],69],
[[2,19057,27720],[0,1,4],60],
[[2,19057,27720],[0,1,4],65],
[[2,19057,27720],[0,1,4],67],
[[2,19057,27720],[0,1,4],48],
[[2,11261,13860],[0,2599,13860],72],
[[3,0,1],[0,5197,27720],62],
[[3,0,1],[0,1,8],46],
[[3,1,8],[0,1,8],53],
[[3,5197,27720],[0,1733,27720],60],
[[3,1,4],[0,1,8],62],
[[3,1,4],[0,1,4],58],
[[3,3,8],[0,1,8],65],
[[3,1,2],[0,1,4],67],
[[3,1,2],[0,1,8],60],
[[3,5,8],[0,1,8],55],
[[3,3,4],[0,1,4],48]
]
}
],

"chords":
[
[[0,0,1],[0,1,4],5,0,"M",[],0],
[[0,1,4],[0,1,4],7,0,"m",[],0],
[[0,1,2],[0,1,4],5,0,"M",[],0],
[[1,0,1],[0,1,4],10,0,"M",[],0],
[[1,1,4],[0,1,4],7,0,"M",[],0],
[[1,1,2],[0,1,4],0,0,"M",[],0],
[[2,0,1],[0,1,4],10,0,"M",[],0],
[[2,1,4],[0,1,4],9,0,"M",[],0],
[[2,1,2],[0,3,16],2,0,"m",[],0],
[[2,11,16],[0,5,16],5,0,"M",["add9"],0],
[[3,0,1],[0,1,2],10,0,"M",[],0],
[[3,1,2],[0,1,2],0,0,"M",[],0]
],

"keyChanges":
[
[[0,0,1],5,0,[0,2,4,5,7,9,11]]
],

"meterChanges":
[
[[0,0,1],4,4]
]
}
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<html>

<head>
<meta charset="utf-8"/>
<title>Music Analysis</title>
</head>

Expand Down Expand Up @@ -43,6 +44,6 @@
</style>


<script src=".webpack/main.js"></script>
<script src="webpack/main.js"></script>

</html>
11 changes: 6 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "composer",
"version": "1.0.0",
"name": "musicanalysis",
"version": "0.3.0",
"description": "",
"private": true,
"main": "index.js",
Expand All @@ -10,9 +10,9 @@
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserslist": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions"
"> 0.2%",
"not dead",
"not ie 11"
],
"author": "",
"dependencies": {
Expand All @@ -25,6 +25,7 @@
"pako": "^1.0.10",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"regenerator-runtime": "^0.13.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}
Expand Down
4 changes: 4 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import "core-js"
import "regenerator-runtime/runtime"


import React from "react"
import ReactDOM from "react-dom"
import { Editor } from "./editor/editor.js"
Expand Down
120 changes: 85 additions & 35 deletions src/toolbox/toolbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function PlaybackToolbox(props)
"dontstarve",
"chronotrigger",
"jimmyneutron",
"whensomebodylovedme",
]

return <div style={{ height:"auto", display:"grid", gridTemplate:"auto auto auto auto auto 1fr / auto", gridGap:"0.25em 0.25em", gridAutoFlow:"row", justifyItems:"left", padding:"0.5em" }}>
Expand Down Expand Up @@ -244,6 +245,7 @@ function ChordToolbox(props)
{
setState({
kindDropdown: -1,
mainTab: 0,
accidentalTab: 0,
inKeyType: 0,
embelishments: {}
Expand All @@ -253,15 +255,55 @@ function ChordToolbox(props)

const ChordButton = (props2) =>
{
const ref = React.createRef()
const refChord = React.createRef()
const refPitches = []
for (let i = 0; i < 10; i++)
refPitches.push(React.createRef())

const pitches = props2.chord.getPitches().map(p => mod(p - props2.chord.rootPitch - props2.chord.rootAccidental, 12))
pitches.sort((a, b) => b - a)

const pitchW = 35
const pitchH = 20

React.useEffect(() =>
{
const ctx = ref.current.getContext("2d")
drawChordOnCanvas(ctx, new Rect(0, 0, 80, 58), props2.chord, props.songKey, false, false)
const ctxChord = refChord.current.getContext("2d")
drawChordOnCanvas(ctxChord, new Rect(0, 0, 80, 58), props2.chord, props.songKey, false, false)

for (let i = 0; i < pitches.length; i++)
{
const pitch = pitches[i] + props2.chord.rootPitch + props2.chord.rootAccidental
const degree = getScaleDegreeForPitch(props.songKey, pitch)
const noteName = getNameForPitch(props.songKey, pitch)
const colorRotation = getColorRotationForScale(props.songKey.scalePitches)

const ctxPitch = refPitches[i].current.getContext("2d")
ctxPitch.fillStyle = getFillStyleForScaleDegree(ctxPitch, degree + colorRotation)
ctxPitch.fillRect(0, 0, pitchW, pitchH)

ctxPitch.fillStyle = "#fff"
ctxPitch.globalAlpha = 0.6
ctxPitch.fillRect(3, 3, pitchW - 6, pitchH - 6)

ctxPitch.globalAlpha = 1
ctxPitch.font = "14px Verdana"
ctxPitch.fillStyle = "#000"
ctxPitch.textAlign = "center"
ctxPitch.textBaseline = "middle"
ctxPitch.fillText(noteName, pitchW / 2, pitchH / 2 + 1)
}
})

return <canvas ref={ref} width="80" height="58" onClick={ () => props.onSelectChord(props2.chord) } style={{ width:"80px", height:"58px", margin:"0.1em" }}/>
return <div style={{ display:"inline-block", textAlign:"center" }}>
<canvas ref={refChord} width="80" height="58" onClick={ () => props.onSelectChord(props2.chord) } style={{ width:"80px", height:"58px", margin:"0.1em" }}/>
{ pitches.map((pitch, i) =>
<React.Fragment key={i}>
<br/>
<canvas ref={refPitches[i]} width={pitchW} height={pitchH} style={{ width:(pitchW + "px"), height:(pitchH + "px"), margin:"0.05em" }}/>
</React.Fragment>
)}
</div>
}

const KindDropdown = () =>
Expand All @@ -283,9 +325,11 @@ function ChordToolbox(props)
}

let chordButtons = null
let title = null
switch (state.kindDropdown)
{
case -1:
title = "Chords in " + props.songKey.getName()
chordButtons = [0, 1, 2, 3, 4, 5, 6].map(degree =>
{
const root = getPitchForScaleDegree(props.songKey, degree)
Expand Down Expand Up @@ -313,19 +357,14 @@ function ChordToolbox(props)
break

default:
title = chords[state.kindDropdown].name + " chords"
chordButtons = <React.Fragment>
{ [0, 1, 2, 3, 4, 5, 6].map(degree => {
const kind = getChordKindFromPitches(chords[state.kindDropdown].pitches)
const root = getPitchForScaleDegree(props.songKey, degree)

return <ChordButton key={degree} chord={ new Chord(root, state.accidentalTab, kind, state.embelishments) }/>
})}
<br/>
<div style={{ fontSize:"125%", textAlign:"center" }}>
<TabButton value={-1} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })}>♭</TabButton>
<TabButton value={ 0} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })}>♮</TabButton>
<TabButton value={ 1} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })}>♯</TabButton>
</div>
</React.Fragment>
break
}
Expand Down Expand Up @@ -361,37 +400,48 @@ function ChordToolbox(props)

return <div style={{ height:"auto", display:"grid", gridTemplate:"auto auto auto 1fr / auto auto", gridGap:"0.25em 0.25em", gridAutoFlow:"row", justifyItems:"left", padding:"0.5em" }}>

<span>{ "Chords in " + props.songKey.getName() }</span>
<div>
<TabButton value={0} current={state.mainTab} setCurrent={(i) => setState({ mainTab: i })}>{ title }</TabButton>
<TabButton value={1} current={state.mainTab} setCurrent={(i) => setState({ mainTab: i })}>Search</TabButton>
</div>

<div/>

<div>{ chordButtons }</div>
{ state.mainTab != 0 ? null :
<div>{ chordButtons }</div>
}

<div>
<div style={{ display:"grid", gridTemplate:"auto 1fr / auto auto auto 1fr", gridGap:"0.25em 0.25em", gridAutoFlow:"row", justifyItems:"left", textAlign:"left" }}>
<div>
<KindDropdown/>
</div>

<div style={{ paddingLeft:"0.5em" }}>
<RadioButton label="5" value={0} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="7" value={1} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="9" value={2} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="11" value={3} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="13" value={4} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
</div>

<div style={{ paddingLeft:"0.5em" }}>
<EmbelishmentCheckbox label="sus2"/><br/>
<EmbelishmentCheckbox label="sus4"/><br/>
<EmbelishmentCheckbox label="add9"/><br/>
<EmbelishmentCheckbox label="add11"/><br/>
<EmbelishmentCheckbox label="add13"/><br/>
<EmbelishmentCheckbox label="no3"/><br/>
<EmbelishmentCheckbox label="no5"/><br/>
{ state.mainTab != 0 ? null :
<div>
<div style={{ display:"grid", gridTemplate:"auto 1fr / auto auto auto 1fr", gridGap:"0.25em 0.25em", gridAutoFlow:"row", justifyItems:"left", textAlign:"left" }}>
<div>
<KindDropdown/>
<br/>
<RadioButton label="♭" value={-1} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })} disabled={state.kindDropdown < 0}/><br/>
<RadioButton label="♮" value={0} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })} disabled={state.kindDropdown < 0}/><br/>
<RadioButton label="♯" value={1} current={state.accidentalTab} setCurrent={(i) => setState({ accidentalTab: i })} disabled={state.kindDropdown < 0}/><br/>
</div>

<div style={{ paddingLeft:"0.5em" }}>
<RadioButton label="5" value={0} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="7" value={1} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="9" value={2} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="11" value={3} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
<RadioButton label="13" value={4} current={state.inKeyType} setCurrent={(i) => setState({ inKeyType: i })} disabled={state.kindDropdown >= 0}/><br/>
</div>

<div style={{ paddingLeft:"0.5em" }}>
<EmbelishmentCheckbox label="sus2"/><br/>
<EmbelishmentCheckbox label="sus4"/><br/>
<EmbelishmentCheckbox label="add9"/><br/>
<EmbelishmentCheckbox label="add11"/><br/>
<EmbelishmentCheckbox label="add13"/><br/>
<EmbelishmentCheckbox label="no3"/><br/>
<EmbelishmentCheckbox label="no5"/><br/>
</div>
</div>
</div>
</div>
}

</div>

Expand Down
9 changes: 7 additions & 2 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const path = require("path")


module.exports =
{
mode: "production",
Expand All @@ -11,7 +12,7 @@ module.exports =
output:
{
filename: "[name].js",
path: path.resolve(__dirname, ".webpack")
path: path.resolve(__dirname, "webpack")
},

module:
Expand All @@ -23,7 +24,11 @@ module.exports =
exclude: /node_modules/,
use:
{
loader: "babel-loader"
loader: "babel-loader",
options: {
plugins: ["@babel/plugin-proposal-class-properties"],
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
]
Expand Down
31 changes: 31 additions & 0 deletions webpack/main.js
View file

Large diffs are not rendered by default.

0 comments on commit e5fe51a

Please sign in to comment.