Artist ordering demo: mock-up drawn to scale for 12", 10" and 7"
Deploy test site / deploy (push) Successful in 46s
Deploy test site / deploy (push) Successful in 46s
The record and jacket in the mock-up (sidebar and fan campaign page) now scale with the chosen format: record diameters 302 / 250 / 175 mm (IEC 60098), jackets 314 / 260 / 184 mm, labels 100 / 100 / 90 mm, so a 7" label is relatively larger as on the real disc. Smaller formats show a dashed 12" jacket outline for scale and a caption with the sizes.
This commit is contained in:
grabowski committed
1 parent
a07faf6ef0
commit
2a3da0778f
1 file changed
+18
-10
+18
-10
@@ -590,24 +590,29 @@ function checkList(){
|
||||
|
||||
/* ---- mock-up ---- */
|
||||
function rnd(seed){return function(){seed|=0;seed=seed+0x6D2B79F5|0;let t=Math.imul(seed^seed>>>15,1|seed);t=t+Math.imul(t^t>>>7,61|t)^t;return ((t^t>>>14)>>>0)/4294967296;};}
|
||||
/* real sizes, mm: record diameter (IEC 60098: 301.6 / 250.8 / 174.6), jacket (12.375" / 10.25" / 7.25"), label */
|
||||
const SIZE_MM={"12":{rec:302,jk:314,lab:100,name:"12\" LP"},"10":{rec:250,jk:260,lab:100,name:"10\""},"7":{rec:175,jk:184,lab:90,name:"7\" single"}};
|
||||
function mockSVG(id){
|
||||
const dark=S.colour==="black",base=dark?"#161616":S.c1,groove=dark?"rgba(255,255,255,0.07)":"rgba(0,0,0,0.10)";
|
||||
let defs=`<clipPath id="${id}c"><circle r="105"/></clipPath><clipPath id="${id}l"><circle r="34"/></clipPath>`+
|
||||
const Z=SIZE_MM[S.size],k=Z.rec/SIZE_MM["12"].rec,kj=Z.jk/SIZE_MM["12"].jk,rl=105*Z.lab/Z.rec,fs=rl/34.8;
|
||||
const JW=212*kj,JX=8,JY=228-JW,cy=JY+JW/2,cx=JX+JW+rl*k+6;
|
||||
let defs=`<clipPath id="${id}c"><circle r="105"/></clipPath><clipPath id="${id}l"><circle r="${rl.toFixed(1)}"/></clipPath>`+
|
||||
`<radialGradient id="${id}sh" cx="0.35" cy="0.3" r="0.9"><stop offset="0" stop-color="#fff" stop-opacity="0.13"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></radialGradient>`+
|
||||
`<filter id="${id}m" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.008 0.03" numOctaves="3" seed="4" result="n"/><feColorMatrix in="n" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0 0 0 -3.3" result="m"/><feFlood flood-color="${S.c2}" result="f"/><feComposite in="f" in2="m" operator="in"/></filter>`+
|
||||
`<linearGradient id="${id}g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${dark?"#3a4d70":S.c1}"/><stop offset="1" stop-color="#0d1322"/></linearGradient>`;
|
||||
function disc(cx){
|
||||
let g=`<g transform="translate(${cx} 122)"><circle r="105" fill="${base}"/>`;
|
||||
function disc(x){
|
||||
let g=`<g transform="translate(${x.toFixed(1)} ${cy.toFixed(1)}) scale(${k.toFixed(3)})"><circle r="105" fill="${base}"/>`;
|
||||
if(S.colour==="marbled")g+=`<rect x="-105" y="-105" width="210" height="210" fill="${S.c2}" filter="url(#${id}m)" clip-path="url(#${id}c)"/>`;
|
||||
if(S.colour==="splatter"){const r=rnd(7);let dots="";for(let i=0;i<80;i++){const a=r()*6.283,d=Math.sqrt(r())*100,s=1+r()*5;dots+=`<circle cx="${(Math.cos(a)*d).toFixed(1)}" cy="${(Math.sin(a)*d).toFixed(1)}" r="${s.toFixed(1)}" fill="${r()<0.8?S.c2:"#ffffff"}"/>`;}g+=`<g clip-path="url(#${id}c)">${dots}</g>`;}
|
||||
for(let r=100;r>=40;r-=4)g+=`<circle r="${r}" fill="none" stroke="${groove}" stroke-width="0.6"/>`;
|
||||
for(let r=100;r>=rl+5;r-=4)g+=`<circle r="${r}" fill="none" stroke="${groove}" stroke-width="${(0.6/k).toFixed(2)}"/>`;
|
||||
g+=`<circle r="105" fill="url(#${id}sh)"/>`;
|
||||
if(S.art.label&&S.art.label.url)g+=`<image href="${S.art.label.url}" x="-34" y="-34" width="68" height="68" preserveAspectRatio="xMidYMid slice" clip-path="url(#${id}l)"/>`;
|
||||
else g+=`<circle r="34" fill="#efe6d2"/><text y="-6" text-anchor="middle" font-size="7" font-weight="700" fill="#2a2a2a">${esc(S.artist.slice(0,20))}</text><text y="14" text-anchor="middle" font-size="6" fill="#444">${esc(S.title.slice(0,24))}</text>`;
|
||||
return g+`<circle r="2.6" style="fill:var(--panel)"/></g>`;
|
||||
const L=rl.toFixed(1);
|
||||
if(S.art.label&&S.art.label.url)g+=`<image href="${S.art.label.url}" x="-${L}" y="-${L}" width="${(2*rl).toFixed(1)}" height="${(2*rl).toFixed(1)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${id}l)"/>`;
|
||||
else g+=`<circle r="${L}" fill="#efe6d2"/><text y="${(-6*fs).toFixed(1)}" text-anchor="middle" font-size="${(7*fs).toFixed(1)}" font-weight="700" fill="#2a2a2a">${esc(S.artist.slice(0,20))}</text><text y="${(14*fs).toFixed(1)}" text-anchor="middle" font-size="${(6*fs).toFixed(1)}" fill="#444">${esc(S.title.slice(0,24))}</text>`;
|
||||
return g+`<circle r="${(2.6/k).toFixed(2)}" style="fill:var(--panel)"/></g>`;
|
||||
}
|
||||
let recs=(S.discs>1?disc(292):"")+disc(260),jk="";
|
||||
const J={x:8,y:16,w:212};
|
||||
const recs=(S.discs>1?disc(cx+32*k):"")+disc(cx);
|
||||
let jk="";const J={x:0,y:0,w:212};
|
||||
if(S.jacket==="gatefold")jk+=`<rect x="${J.x-4}" y="${J.y-4}" width="${J.w}" height="${J.w}" fill="#0b101c" stroke="#30405e"/>`;
|
||||
if(S.jacket==="none")jk+=`<rect x="${J.x}" y="${J.y}" width="${J.w}" height="${J.w}" fill="none" style="stroke:var(--mute)" stroke-dasharray="6 5"/><text x="${J.x+J.w/2}" y="${J.y+J.w/2}" text-anchor="middle" font-size="13" style="fill:var(--mute)">your own jacket</text>`;
|
||||
else if(S.art.jacket&&S.art.jacket.url&&S.jacket!=="plain")jk+=`<image href="${S.art.jacket.url}" x="${J.x}" y="${J.y}" width="${J.w}" height="${J.w}" preserveAspectRatio="xMidYMid slice"/>`;
|
||||
@@ -618,7 +623,10 @@ function mockSVG(id){
|
||||
if(S.sticker)jk+=`<circle cx="${J.x+J.w-30}" cy="${J.y+28}" r="19" fill="#ffd23f"/><text x="${J.x+J.w-30}" y="${J.y+32}" text-anchor="middle" font-size="10" font-weight="700" fill="#222">NEW</text>`;
|
||||
if(S.numbered)jk+=`<text x="${J.x+J.w-8}" y="${J.y+J.w-8}" text-anchor="end" font-size="9" fill="#fff" opacity="0.85">No. 001</text>`;
|
||||
}
|
||||
return `<svg viewBox="0 0 402 246" role="img" aria-label="Mock-up of the record"><defs>${defs}</defs>${recs}${jk}</svg>`;
|
||||
/* a 12" jacket outline for scale when a smaller format is chosen */
|
||||
const ghost=S.size==="12"?"":`<rect x="8" y="16" width="212" height="212" fill="none" style="stroke:var(--stroke)" stroke-dasharray="5 5"/><text x="14" y="30" font-size="10" style="fill:var(--mute)">12" jacket, for scale</text>`;
|
||||
const cap=`<text x="398" y="243" text-anchor="end" font-size="10" style="fill:var(--mute)">${Z.name}: record ${Z.rec} mm, jacket ${Z.jk} mm</text>`;
|
||||
return `<svg viewBox="0 0 402 248" role="img" aria-label="Mock-up of the ${esc(Z.name)} record"><defs>${defs}</defs>${ghost}${recs}<g transform="translate(${JX} ${JY.toFixed(1)}) scale(${kj.toFixed(3)})">${jk}</g>${cap}</svg>`;
|
||||
}
|
||||
|
||||
/* ---- price curve ---- */
|
||||
|
||||
Reference in new issue
Block a user