Here is my next prompt 6:
The alignment still is broken and has not really changed the last few tries so let's try this way. After making the Tile of Steppers which looks good then loop through the Tile's items2D[0] to loop through the first row of Steppers. Inside the loop make the TextInputs with reg(LEFT, BOTTOM) and set their x to the x of the Tile + the x of the Stepper for each column. Then loop through the Tile's items2DCols[0] to loop through the first column of the Steppers. Inside the loop, make the TextInputs with reg(RIGHT, BOTTOM) and set their y to the y of the Tile + the y of the Stepper for each row. Then the proper corners will point to the center of the related stepper.
For the border colors, the alternating colors are good for the columns but please make the borderWidth be 4 for the steppers that are not the average steppers. Also, the left column TextInputs should not have border colors of blue and salmon as I did not yet ask for those to be set. You can set them now to be alternating green and yellow border colors and then leave all the central steppers as is with the blue and salmon, but make the average steppers on the right hand column have border colors that match the alternating green and yellow border colors of the left column of TextInputs. These can keep the default borderWidth of 1.
At this point, for now, I am giving up. I mean, I could go in and fix it... but the amount of time describing what the problem is and how to fix it is longer than coding it. And, I sort of know how to try and guide it better than the average person, and certainly a beginner. But still, it is messing up. Will continue to build without AI and perhaps if I have patience later, will come back to it.
It got the colors right.
The code from Claude:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Rank</title>
<script type="module">
import zim from "https://zimjs.org/cdn/019/zim";
new Frame(FIT, 768, 1024, interstellar, interstellar.lighten(0.2), ready, "gf_Asimovian");
function ready() {
// Logo
new Label({
text: "RA\nNK",
color: pink,
font: "Asimovian",
size: 72,
lineHeight: 68
}).pos(30, 20);
const cols = 7;
const rows = 11;
const cellScale = 0.62;
const spacingH = 10;
const spacingV = 20;
const colColors = [blue, salmon]; // alternating for data columns
const rowColors = [green, yellow]; // alternating for data rows / avg col
const srcStepper = new Stepper({ arrows: false }).centerReg();
const tile = new Tile({
obj: srcStepper,
cols: cols,
rows: rows,
spacingH: spacingH,
spacingV: spacingV
}).sca(cellScale).pos(140, 260);
// Restyle steppers: avg col/row get black textBox + white label
// data steppers get alternating blue/salmon borderColor with borderWidth 4
// avg col steppers (col 6) get alternating green/yellow borderColor, borderWidth 1
tile.loop((child) => {
const c = child.tileCol;
const r = child.tileRow;
const isAvgCol = (c === cols - 1);
const isAvgRow = (r === rows - 1);
if (isAvgCol || isAvgRow) {
if (child.textBox) child.textBox.color = black;
if (child.label) child.label.color = white;
if (isAvgCol) {
if (child.textBox) child.textBox.borderColor = rowColors[r % 2];
}
} else {
if (child.textBox) {
child.textBox.borderColor = colColors[c % 2];
child.textBox.borderWidth = 4;
}
}
});
S.update();
const tileX = tile.x;
const tileY = tile.y;
const tinW = 110;
const tinH = 26;
// Top TextInputs: loop through first row of Tile (items2D[0])
// reg(LEFT, BOTTOM), x = tileX + stepper.x, y = tileY
loop(tile.items2D[0], (stepper, i) => {
if (i === cols - 1) return; // skip avg column
new TextInput({
width: tinW,
height: tinH,
size: 11,
backgroundColor: black,
color: light,
borderColor: colColors[i % 2],
placeholder: "Col " + (i + 1)
})
.reg(LEFT, BOTTOM)
.rot(-45)
.loc(tileX + stepper.x, tileY);
});
// Left TextInputs: loop through first column of Tile (items2DCols[0])
// reg(RIGHT, BOTTOM), x = tileX, y = tileY + stepper.y
loop(tile.items2DCols[0], (stepper, i) => {
if (i === rows - 1) return; // skip avg row
new TextInput({
width: tinW,
height: tinH,
size: 11,
backgroundColor: black,
color: light,
borderColor: rowColors[i % 2],
placeholder: "Row " + (i + 1)
})
.reg(RIGHT, BOTTOM)
.rot(-45)
.loc(tileX, tileY + stepper.y);
});
S.update();
}
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
Weird, it looks right, I thought it did something wrong, but it did what I asked. Maybe I will poke around and see what is happening.
