Skip to content

Commit 9c392c3

Browse files
ddyson1claude
ddyson1
and
claude
authored
Fix card play button emoji + show all 8 editions (#9)
* Rewrite README to reflect the PlotFlow brand Lead with what PlotFlow is (pen-plotter art house, one-continuous-line mobile suit editions) and the process, while keeping the local-run, deploy, and structure notes. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Crop plots to bounding box for consistent sizing Compute each suit's bounding box at runtime (getBBox) and crop the viewBox to a padded version, so every edition fills its card and the live-plot stage at a consistent scale instead of being letterboxed in the original canvas. Fix the paper bed to a single 4:3 shape so the canvas is consistent across designs, and reset the animation clock on load so the live plot always starts from a blank sheet. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Fix live plot blank-start flash and rename to PLOTFLOW Hide the path before swapping suit data so the old dash values don't flash the full path for a frame. Rename "PLOTFLOW ART HOUSE" to "PLOTFLOW" in all footer copyright lines. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Fix live plot revealing whole path at once The animated hero path used vector-effect:non-scaling-stroke, which measures stroke-dasharray in screen pixels while getTotalLength returns user units. The mismatch made the full path render as one solid dash (visible immediately) with the trace drawing over it. Drop non-scaling-stroke from the animated path and set its width in user units per-load so it stays ~1.2px. Static shop-card paths are unchanged. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Remove "art house" from brand copy Replace "art house" with "studio" in the hero sub, contact page, README, and design system doc; drop "ART HOUSE" from the README copyright line. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Plot live drawing on a canvas instead of dash-offset The suit paths contain thousands of M-command subpaths, which the CSS stroke-dashoffset reveal renders all at once — so the whole design appeared instantly instead of being traced. Replace the dash technique with progressive canvas stroking: walk the geometry with getPointAtLength, lifting the pen at subpath jumps, so ink only appears where the pen has passed. The SVG path is kept for geometry only (stroke:none) and the pen reticle stays on top. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Replace 'avant-garde' with 'independent' in brand copy https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Add multi-item cart with Stripe checkout + mobile hero layout Cart: client-side cart (localStorage) with a slide-out drawer, nav count badge, and per-edition Acquire buttons. Checkout posts edition keys+quantities to a Cloudflare Worker that resolves prices server-side and creates a Stripe Checkout Session (prices never trusted from the client). Adds success.html, scripts/config.js (public endpoint config), and worker/ (Worker + wrangler.toml + setup README). Secrets stay out of the repo via wrangler secrets. Mobile: taller portrait plot bed and a reordered hero stack (plot › progress › controls › lockup) so controls no longer overlap. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Multi-item cart + Stripe checkout, mobile hero layout, copy tweak - Cart: localStorage cart, slide-out drawer, nav badge, per-edition Acquire buttons; checkout posts keys+qty to a Cloudflare Worker that resolves prices server-side and creates a Stripe Checkout Session. Adds success.html, scripts/config.js, scripts/cart.js, and worker/. - Mobile: taller portrait plot bed and reordered hero stack so the controls no longer overlap. - Copy: 'avant-garde' -> 'independent'. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Site polish: SEO/OG meta, favicon, 404, sitemap, footer link wiring https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Fix emoji play button on mobile by adding text variation selector Appends U+FE0E after ▶ and ▸ characters so mobile Safari renders them as text glyphs instead of colored emoji. https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS * Force text rendering on play buttons + show all 8 editions in shop - Add font-family:var(--sans) to .plotbtn and .replay span CSS to prevent iOS emoji rendering of the ▶ character - Add gm and guntank to shopOrder so all editions appear in the grid https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent 2ad4b1b commit 9c392c3

3 files changed

Lines changed: 6 additions & 4 deletions

File tree

‎data/editions.js‎

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles/styles.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ nav{position:sticky;top:0;z-index:60;background:rgba(31,33,28,.72);backdrop-filt
5454
#ppath{fill:none;stroke:none}
5555
.replay{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;background:rgba(20,18,12,.12);cursor:pointer}
5656
.replay.show{display:flex}
57-
.replay span{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#15160f;background:var(--paper);border:1px solid #15160f;padding:10px 18px}
57+
.replay span{font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#15160f;background:var(--paper);border:1px solid #15160f;padding:10px 18px}
5858

5959
/* big jp lockup lower-left like the reference */
6060
.hero-jp{position:absolute;z-index:5;left:26px;bottom:96px;pointer-events:none}
@@ -134,7 +134,7 @@ select{appearance:none;background:rgba(245,244,239,.06);color:var(--white);borde
134134
.card .cover .jp{position:absolute;z-index:5;right:10px;top:42px;font-family:var(--jp);font-weight:700;font-size:11px;color:var(--mute);writing-mode:vertical-rl}
135135
.card .cover .ast{position:absolute;z-index:5;width:26px;height:26px;color:var(--red);left:10px;top:40%}
136136
.card .cover .foot{position:relative;z-index:5;margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding:9px 10px}
137-
.card .cover .plotbtn{position:absolute;z-index:6;right:10px;bottom:10px;font-weight:800;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--white);padding:5px 8px;background:rgba(20,21,16,.4)}
137+
.card .cover .plotbtn{position:absolute;z-index:6;right:10px;bottom:10px;font-family:var(--sans);font-weight:800;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--white);padding:5px 8px;background:rgba(20,21,16,.4)}
138138
.card .cover .plotbtn:hover{background:var(--white);color:var(--ink)}
139139
.card .buy{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 2px 0}
140140
.card .buy .t{font-weight:800;font-size:1.05rem;line-height:1}

‎tools/build_data.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
# order of the dropdown in the live plotter, and of the cards in the shop grid
2828
PLOTTER_ORDER = ["zaku","dom","guncannon","bigzam","zgok","gp02","gm","guntank"]
29-
SHOP_ORDER = ["zaku","guncannon","bigzam","dom","zgok","gp02"]
29+
SHOP_ORDER = ["zaku","guncannon","bigzam","dom","zgok","gp02","gm","guntank"]
3030

3131
def extract(file):
3232
s = open(os.path.join(PLOTS, file + ".svg")).read()

0 commit comments

Comments
 (0)