From 58d4500d9043a8a15696f498cd03de41d3e1e2de Mon Sep 17 00:00:00 2001 From: Markus Koskimies Date: Sat, 12 Oct 2024 14:00:52 +0300 Subject: [PATCH] Study: Story Arcs (#239) Story Arc studies Just studying ways to split the stories to parts, using my existing stories as a playground. --- src/gui/arc/arc.js | 219 +++++++++++++++++++++++++------------ src/gui/common/docIndex.js | 7 +- 2 files changed, 154 insertions(+), 72 deletions(-) diff --git a/src/gui/arc/arc.js b/src/gui/arc/arc.js index b5b82014..ae28f50e 100644 --- a/src/gui/arc/arc.js +++ b/src/gui/arc/arc.js @@ -12,12 +12,7 @@ import React, { import { ResponsiveContainer, - CartesianGrid, Tooltip, - XAxis, YAxis, - BarChart, Bar, - LineChart, Line, PieChart, Pie, - Cell, } from "recharts" import { @@ -25,22 +20,24 @@ import { ToolBox, Button, Label, MakeToggleGroup, - Select, MenuItem, InputLabel, FormControl, Separator, Icon, + Separator, Icon, } from "../common/factory" import {DragDropContext, Droppable, Draggable} from "@hello-pangea/dnd"; import {DocIndex} from "../common/docIndex"; import {elemName, filterCtrlElems, mawe} from "../../document"; -//----------------------------------------------------------------------------- +//***************************************************************************** +// // Chart settings -//----------------------------------------------------------------------------- +// +//***************************************************************************** export function loadChartSettings(settings) { // TODO: Check that fields have valid values (table keys) return { elements: "scenes", - template: "plotpoints", + template: "beatsheet", mode: "topCCW", ...(settings?.attributes ?? {}) } @@ -56,26 +53,75 @@ export function saveChartSettings(settings) { } } -//----------------------------------------------------------------------------- +//***************************************************************************** +// // Story Arc view -//----------------------------------------------------------------------------- +// +//***************************************************************************** export function StoryArc({doc, updateDoc}) { //const section = doc.body + const setElements = useCallback(value => updateDoc(doc => {doc.ui.arc.elements = value}), [updateDoc]) + const setTemplate = useCallback(value => updateDoc(doc => {doc.ui.arc.template = value}), [updateDoc]) + const setMode = useCallback((mode) => {updateDoc(doc => {doc.ui.arc.mode = mode})}, [updateDoc]) + + /* + console.log("Beat sheet length=", tmplButtons.beatsheet.data + .map(data => data.size) + .reduce((a, b) => a + b, 0) + ) + */ + + //--------------------------------------------------------------------------- + // View + //--------------------------------------------------------------------------- + + const settings = { + elements: { + buttons: elemButtons, + choices: ["chapters", "scenes"], + selected: doc.ui.arc.elements, + setSelected: setElements, + exclusive: true, + }, + template: { + buttons: tmplButtons, + //choices: ["beatsheet", "plotpoints", "herosjourney", "heroacts", "fiveact", "7", "11"], + choices: ["beatsheet", "plotpoints", "herosjourney", "heroacts"], + selected: doc.ui.arc.template, + setSelected: setTemplate, + exclusive: true, + }, + mode: { + buttons: modeButtons, + choices: ["topCCW", "topCW", "bottomCCW", "bottomCW"], + selected: doc.ui.arc.mode, + setSelected: setMode, + exclusive: true, + } + } + + function selectInclude() { + switch(doc.ui.arc.elements) { + case "chapters": return ["chapter"] + } + return ["chapter", "scene"] + } + return - + - + @@ -98,9 +144,10 @@ const styles = { // Index toolbar //----------------------------------------------------------------------------- -function IndexToolbar({ }) { +function IndexToolbar({settings}) { return - + + } @@ -120,25 +167,10 @@ function mode2rotate(mode) { return { start: 0, rotate: 1 } } -function ChartView({doc, updateDoc}) { +function ChartView({settings, doc, updateDoc}) { const section = doc.body - //--------------------------------------------------------------------------- - // Data selection - //--------------------------------------------------------------------------- - - const setElements = useCallback(value => updateDoc(doc => {doc.ui.arc.elements = value}), [updateDoc]) - const setTemplate = useCallback(value => updateDoc(doc => {doc.ui.arc.template = value}), [updateDoc]) - const setMode = useCallback((mode) => {updateDoc(doc => {doc.ui.arc.mode = mode})}, [updateDoc]) - - /* - console.log("Beat sheet length=", tmplButtons.beatsheet.data - .map(data => data.size) - .reduce((a, b) => a + b, 0) - ) - */ - //--------------------------------------------------------------------------- // Chart directions //--------------------------------------------------------------------------- @@ -146,33 +178,9 @@ function ChartView({doc, updateDoc}) { const {start: selectStart, rotate: selectRotate} = mode2rotate(doc.ui.arc.mode) //--------------------------------------------------------------------------- - // View + // Data selection //--------------------------------------------------------------------------- - const settings = { - elements: { - buttons: elemButtons, - choices: ["scenes", "chapters"], - selected: doc.ui.arc.elements, - setSelected: setElements, - exclusive: true, - }, - template: { - buttons: tmplButtons, - choices: ["acts", "plotpoints", "beatsheet"], - selected: doc.ui.arc.template, - setSelected: setTemplate, - exclusive: true, - }, - mode: { - buttons: modeButtons, - choices: ["topCCW", "topCW", "bottomCCW", "bottomCW"], - selected: doc.ui.arc.mode, - setSelected: setMode, - exclusive: true, - } - } - return */} - - @@ -283,17 +289,8 @@ const elemButtons = { //----------------------------------------------------------------------------- const tmplButtons = { - acts: { - icon: "Acts", - data: [ - {size: 25, name: "Act I", fill: "lightgreen"}, - {size: 25, name: "Act II/1", fill: "yellow"}, - {name: "Midpoint"}, - {size: 25, name: "Act II/2", fill: "orange"}, - {size: 25, name: "Act III", fill: "red"}, - ] - }, plotpoints: { + tooltip: "K.M. Weiland's Plot Points", icon: "Plot Points", data: [ {size: 12.5, fill: "lightgreen", name: "Hook"}, {name: "Inciting Event"}, @@ -307,7 +304,9 @@ const tmplButtons = { {size: 2.5, fill: "orange", name: "Resolution"} ] }, + beatsheet: { + tooltip: "Snyder's Beatsheet", icon: "Beat Sheet", data: [ {size: 1, name: null, fill: "lightgreen"}, // Opening Image @@ -326,6 +325,88 @@ const tmplButtons = { {size: 1, name: null, fill: "orange"}, // Closing Image ] }, + + herosjourney: { + //tooltip: "Hero's Journey", + icon: "Hero's Journey", + data: [ + {size: 20, name: "Ordinary World", fill: "lightgreen"}, + {size: 10, name: "Call to Adventure", fill: "lightyellow"}, + {size: 0, name: "Refusal to Call"}, + {size: 20, name: null, fill: "yellow"}, + {size: 5, name: "Accept the Call", fill: "lightyellow"}, + {size: 10, name: "Crossing the Treshold", fill: "lightyellow"}, + {size: 25, name: "Road of Trials", fill: "yellow"}, + {size: 25, name: "Approach", fill: "orange"}, + {size: 10, name: "Death & Rebirth", fill: "red"}, + {size: 50, name: "Reward", fill: "orange"}, + {size: 10, name: "The Road Back", fill: "yellow"}, + {size: 35, name: "Resurrection", fill: "red"}, + {size: 0, name: "Return", fill: "magenta"}, + {size: 20, name: null, fill: "magenta"}, + ] + }, + + heroacts: { + icon: "Three Act", + data: [ + {size: 25, name: "I: Separation", fill: "lightgreen"}, + {size: 25, name: "II/A: Descent", fill: "yellow"}, + {size: 25, name: "II/B: Initiation", fill: "orange"}, + {size: 25, name: "III: Return", fill: "red"}, + ] + }, + + fiveact: { + icon: Five Act, + tooltip: "Experimental", + data: [ + {size: 20, name: "Exposition", fill: "lightgreen"}, + {size: 20, name: "Rising Movement", fill: "yellow"}, + {size: 20, name: "Climax", fill: "red"}, + {size: 20, name: "Falling Action", fill: "orange"}, + {size: 20, name: "Catastrophe/Resolution", fill: "red"}, + ] + }, + + "7": { + icon: 7, + tooltip: "Experimental", + data: [ + {size: 2, name: null, fill: "lightgreen"}, + {size: 18, name: "1", fill: "lightgreen"}, + {size: 10, name: "2 - To Act 2", fill: "orange"}, + {size: 20, name: "3", fill: "yellow"}, + {size: 10, name: "4 - Midpoint", fill: "red"}, + {size: 20, name: "5", fill: "orange"}, + {size: 10, name: "6 - To Act 3", fill: "red"}, + {size: 18, name: "7", fill: "orchid"}, + {size: 2, name: null, fill: "orchid"}, + ] + }, + + "11": { + icon: 11, + tooltip: "Experimental", + data: [ + {size: 2, name: null, fill: "lightgreen"}, + {size: 8, name: "1", fill: "lightgreen"}, + {size: 10, name: "2", fill: "yellow"}, + {size: 10, name: "3 - To Act 2", fill: "orange"}, + {size: 10, name: "4", fill: "yellow"}, + {size: 10, name: "5", fill: "orange"}, + {size: 10, name: "6 - Midpoint", fill: "red"}, + {size: 10, name: "7", fill: "orange"}, + {size: 10, name: "8", fill: "orange"}, + {size: 10, name: "9 - To Act 3", fill: "red"}, + {size: 10, name: "10", fill: "plum"}, + {size: 8, name: "11", fill: "orchid"}, + {size: 2, name: null, fill: "orchid"}, + //{size: 10, name: "12", fill: "red"}, + //{size: 10, name: "13", fill: "red"}, + ] + } + /* vogler: { icon: "Vogler", diff --git a/src/gui/common/docIndex.js b/src/gui/common/docIndex.js index 75a4b1d2..40172dda 100644 --- a/src/gui/common/docIndex.js +++ b/src/gui/common/docIndex.js @@ -179,7 +179,8 @@ class ChapterItem extends React.PureComponent { Draggable(provided, snapshot) { const {elem, include, wcFormat, onActivate, unfold, current, refCurrent} = this.props const {innerRef, draggableProps, dragHandleProps} = provided - const unnumbered=elemUnnumbered(elem) + + const hasDropzone = (include.includes("scene")) && (unfold || !elem.folded) return
- {(unfold || !elem.folded) && - {include.includes("scene") && filterCtrlElems(scenes).map((elem, index) =>