Skip to content

Commit

Permalink
visually differentiate too deep escape mark from normal escape mark
Browse files Browse the repository at this point in the history
  • Loading branch information
vezwork committed Dec 11, 2024
1 parent a062ea0 commit 9bd7471
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 11 deletions.
7 changes: 6 additions & 1 deletion src/interpreter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export type Step = {
scene: Scene;
caller: Call | undefined;
isStuck?: boolean;
tooDeep?: boolean;
};

export type Call = {
Expand Down Expand Up @@ -230,6 +231,7 @@ export function runAll(

// Otherwise, we follow all arrows.
let continuedSuccessfully = false;
let error;
for (const nextArrow of nextArrows) {
const nextFrameId = nextArrow.to;
const nextFrame = flowchart.frames[nextFrameId];
Expand All @@ -247,6 +249,7 @@ export function runAll(
);
continuedSuccessfully = true;
} catch (e) {
error = e;
// console.log(e);
// TODO: fail silently (aside from lack of
// continuedSuccessfully); would be nice to surface this
Expand All @@ -256,6 +259,8 @@ export function runAll(
if (!continuedSuccessfully) {
// TODO: first time we've mutated a step after adding it? idk
step.isStuck = true;
if ((error as RangeError).message === "call depth overflow")
step.tooDeep = true;
if (frame.escapeRouteFrameId) {
const nextStep: Step = {
id: `${step.id}${frameId}${frame.escapeRouteFrameId}`,
Expand Down Expand Up @@ -334,7 +339,7 @@ function performAction(
]);
} else if (action.type === "call") {
// console.log("callDepth", callDepth);
if (callDepth > 10) {
if (callDepth > 9) {
throw new RangeError("call depth overflow");
}

Expand Down
31 changes: 21 additions & 10 deletions src/ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1267,19 +1267,21 @@ Promise.all([
lyr: Layer,
centerPos: Vec2,
onClick?: Function,
tooDeep?: boolean,
) => {
const markRadius = 13;

// draw a circle with shadow before drawing
// the actual circle with texture because it caused perf issues
// to draw the actual circle with a shadow.
lyr.save();
lyr.shadowColor = `rgba(100,10,10,0.8)`;
lyr.shadowColor = tooDeep
? `rgba(100,10,100,0.8)`
: `rgba(100,10,10,0.8)`;
// lyr.shadowOffsetY = 4;
lyr.shadowBlur = 15;
lyr.beginPath();
lyr.arc(...centerPos, markRadius, 0, 2 * Math.PI);
lyr.fillStyle = "red";
lyr.fill();
lyr.restore();

Expand All @@ -1292,15 +1294,17 @@ Promise.all([
lyr.restore();
const flickeringOpacity =
Math.sin(t / 20) / 30 + 0.5 + Math.random() * 0.05;
lyr.fillStyle = `rgba(128,0,0,${flickeringOpacity})`;
lyr.fillStyle = tooDeep
? `rgba(60,0,60,${flickeringOpacity})`
: `rgba(128,0,0,${flickeringOpacity})`;
lyr.fill();

lyr.save();
lyr.fillStyle = "rgba(0, 0, 0, 0.8)";
lyr.font = "25px serif";
lyr.font = tooDeep ? "25px monospace" : "25px serif";
lyr.textAlign = "center";
lyr.textBaseline = "middle";
lyr.fillText("⛧", ...add(centerPos, v(0, 3)));
lyr.fillText(tooDeep ? "↓" : "⛧", ...add(centerPos, v(0, 3)));
lyr.restore();

if (onClick) {
Expand Down Expand Up @@ -1659,11 +1663,18 @@ Promise.all([
if (steps.some((step) => step.isStuck) && !frame.escapeRouteFrameId) {
const markPos = add(lastConnectionJoint, [0, escapeRouteDropY]);
renderConnectorLine(lyr, lastConnectionJoint, markPos);
renderEscapeRouteMark(lyr, markPos, () => {
if (!frame.escapeRouteFrameId) {
modifyFlowchart(flowchartId, (old) => addEscapeRoute(old, frameId));
}
});
renderEscapeRouteMark(
lyr,
markPos,
() => {
if (!frame.escapeRouteFrameId) {
modifyFlowchart(flowchartId, (old) =>
addEscapeRoute(old, frameId),
);
}
},
steps.some((step) => step.tooDeep),
);
lyr.save();
const pos = add(markPos, v(15, 0));
lyr.translate(...pos);
Expand Down

0 comments on commit 9bd7471

Please sign in to comment.