From f392bd6ae726faec0244d88b120716603a73fb3f Mon Sep 17 00:00:00 2001 From: Michael Stewart Date: Tue, 6 Feb 2024 10:54:37 -0500 Subject: [PATCH] theoretical seems to show the steps correctly for freedom2040band at least, next: add back the chordscale buckets references and test submitting --- components/student/create/theoretical.js | 324 ++++++----------------- 1 file changed, 81 insertions(+), 243 deletions(-) diff --git a/components/student/create/theoretical.js b/components/student/create/theoretical.js index 242131b..8eef0a0 100644 --- a/components/student/create/theoretical.js +++ b/components/student/create/theoretical.js @@ -18,11 +18,21 @@ import { } from '../../../actions'; import { UploadStatusEnum } from '../../../types'; import { notes, tonicScoreJSON } from '../../../lib/flat'; +import { sub } from 'date-fns'; const FlatEditor = dynamic(() => import('../../flatEditor'), { ssr: false, }); +const ChordScaleBucketScore = dynamic( + () => import('../../chordScaleBucketScore'), + { + ssr: false, + } +); + +const MEASURES_PER_STEP = 4; + const bucketColors = { tonic: '#E75B5C', subdominant: '#265C5C', @@ -32,7 +42,6 @@ const bucketColors = { export default function CreativityActivity() { const tonicNotes = notes(tonicScoreJSON); - // console.log('got into aural component'); const dispatch = useDispatch(); // I think this should show the melody for the current piece, but in the student's transposition // need to get the student's current assignment @@ -40,13 +49,18 @@ export default function CreativityActivity() { const { slug, piece } = router.query; const actCategory = 'Create'; const [melodyJson, setMelodyJson] = useState(''); - const [score1JSON, setScore1JSON] = useState(''); - const [score2JSON, setScore2JSON] = useState(''); - const [score3JSON, setScore3JSON] = useState(''); - const [score4JSON, setScore4JSON] = useState(''); - const [totalScoreJSON, setTotalScoreJSON] = useState(''); - const userInfo = useSelector((state) => state.currentUser); + // let's just store the calculated 4 measure slices of + // the score and the corresponding colors + const [subScores, setSubScores] = useState([]); + const [subColors, setSubColors] = useState([]); + // const [score1JSON, setScore1JSON] = useState(''); + // const [score2JSON, setScore2JSON] = useState(''); + // const [score3JSON, setScore3JSON] = useState(''); + // const [score4JSON, setScore4JSON] = useState(''); + // const [totalScoreJSON, setTotalScoreJSON] = useState(''); + + // const userInfo = useSelector((state) => state.currentUser); const { isLoading: loaded, @@ -56,10 +70,39 @@ export default function CreativityActivity() { enabled: !!slug, }); + //only when melodyJson is updated, calculate the steps + useEffect(() => { + if (melodyJson && melodyJson.length > 0) { + const referenceScoreObj = JSON.parse(melodyJson); + let partialScores = []; + let partialColors = []; + const measureCount = referenceScoreObj['score-partwise'].part[0].measure.length; + for (let i = 0; i < measureCount; i += MEASURES_PER_STEP) { + const slice = JSON.parse(melodyJson); + slice['score-partwise'].part[0].measure = slice['score-partwise'].part[0].measure.slice(i, i + MEASURES_PER_STEP); + slice['score-partwise'].part[0].measure[0].attributes[0].divisions = '8'; + slice['score-partwise'].part[0].measure[0].attributes[0].time = { beats: '4', 'beat-type': '4' }; + slice['score-partwise'].part[0].measure[0].attributes[0].clef = { sign: 'G', line: '2' }; + slice['score-partwise'].part[0].measure[0].attributes[0].key = { fifths: '-3' }; + slice['score-partwise'].part[0].measure[0].attributes[0]['staff-details'] = { 'staff-lines': '5' }; + partialScores.push(JSON.stringify(slice)); + + const colorSlice = currentAssignment?.part?.chord_scale_pattern?.slice(i, i+MEASURES_PER_STEP).map( + (color) => bucketColors[color] + ) + partialColors.push(colorSlice); + } + setSubScores(partialScores); + setSubColors(partialColors); + console.log('partialScores', partialScores); + console.log('partialColors', partialColors); + } + + }, [melodyJson]); + // const assignment = useSelector((state) => state.selectedAssignment); // useEffect(() => { - // console.log('does assignment have id?', assignment) // if (loaded) { // dispatch( // fetchSingleStudentAssignment({ @@ -71,32 +114,22 @@ export default function CreativityActivity() { // }, [slug, loaded, assignment]); // if (assignments) { - // console.log('assignments', assignments); // } const mutation = useMutation(mutateCreateSubmission({ slug })); let composition = ''; // FIXME: why isn't this useState??? - let score1Data = ''; - let score2Data = ''; - let score3Data = ''; - let score4Data = ''; - let scoreTotalData = ''; - // const currentAssignment = assignments && assignments?.filter((assn) => assn.part.piece.slug === piece && assn.activity.activity_type.category === actCategory)?.[0] const currentAssignment = assignments && Object.values(assignments) .reduce((prev, current) => [...prev, ...current], []) .filter((assn) => { - // console.log('assn', assn); return ( assn.piece_slug === piece && assn.activity_type_category === actCategory ); })?.[0]; const currentTransposition = currentAssignment?.transposition; - // console.log('currentAssignment', currentAssignment); - // console.log('currentTransposition', currentTransposition); const flatIOScoreForTransposition = currentAssignment?.part?.transpositions?.filter( (partTransposition) => @@ -119,238 +152,43 @@ export default function CreativityActivity() { submissionId, }) ); - console.log('flatIOScoreForTransposition', flatIOScoreForTransposition); let scoreJSON; if (flatIOScoreForTransposition) { scoreJSON = JSON.parse(flatIOScoreForTransposition); } - console.log('scoreJSON', scoreJSON); + let scoreData = []; + // const origJSON return flatIOScoreForTransposition ? ( <> - -

Step 1

- Compose a four-measure melody using only quarter notes and half notes and - only the pitches that correspond with the color-coded measures. -
-
- -
-
- -
-
- -
-
- { - // console.log('updated composition', data); - score1Data = data; - }} - orig={melodyJson} - colors={currentAssignment?.part?.chord_scale_pattern?.map( - (color) => bucketColors[color] - )} - sliceIdx={0} - /> -

Step 2

- Compose a four-measure melody using only quarter notes and half notes and - only the pitches that correspond with the color-coded measures. -
-
- -
-
- -
-
- -
-
- { - // console.log('updated composition', data); - score2Data = data; - }} - orig={melodyJson} - colors={currentAssignment?.part?.chord_scale_pattern?.map( - (color) => bucketColors[color] - )} - sliceIdx={0} - /> -

Step 3

- Compose a four-measure melody using only quarter notes and half notes and - only the pitches that correspond with the color-coded measures. -
-
- -
-
- -
-
- -
-
- { - // console.log('updated composition', data); - score3Data = data; - }} - orig={melodyJson} - colors={currentAssignment?.part?.chord_scale_pattern?.map( - (color) => bucketColors[color] - )} - sliceIdx={2} - /> -

Step 4

- Compose a four-measure melody using only quarter notes and half notes and - only the pitches that correspond with the color-coded measures. -
-
- -
-
- -
-
- -
-
- { - // console.log('updated composition', data); - score4Data = data; - }} - orig={melodyJson} - colors={currentAssignment?.part?.chord_scale_pattern?.map( - (color) => bucketColors[color] - )} - sliceIdx={3} - /> -

Step 5 - Combined

+ + { + // subScores.slice(0, 1).map((subScore, idx) => { + subScores.map((subScore, idx) =>{ + scoreData[idx] = {}; + console.log('subScore', idx); + return ( +
+

Step {idx + 1}

+ { + scoreData[idx] = data; + }} + orig={subScore} + colors={subColors[idx]} + debugMsg={`error in rendering the subScore[${idx}]`} + /> +
+ ); + })} + {/*

Step 5 - Combined

+ /> */} ) : (