VSinerva/freesewing
1
0
Fork 0
Code Activity

wip: More work on line drawings

Browse source
This commit is contained in:
joostdecock 2024-12-27 10:18:25 +01:00
parent c8808695e5
commit 9f2da8b926
15 changed files with 263 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/react/components/Collection/index.mjs
View file

@ -280,15 +280,19 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => {
} }
return ( return (
<Link href={linkTo === 'new' ? `/-/` : `/designs/${name}/`}> <Link
href={linkTo === 'new' ? `/-/` : `/designs/${name}/`}
className="hover:tw-bg-secondary hover:tw-bg-opacity-10 tw-rounded-lg tw-group hover:tw-no-underline"
title={about[name].description}
>
<div <div
className={`tw-flex tw-flex-col tw-flex-nowrap tw-items-start tw-justify-between tw-gap-2 tw-border-neutral-500 className={`tw-flex tw-flex-col tw-flex-nowrap tw-items-start tw-justify-between tw-gap-2 tw-border-neutral-500 group-hover:tw-border-secondary
tw-w-full tw-h-full tw-border tw-border-2 tw-border-solid tw-p-0 tw-relative tw-rounded-lg tw-rounded-lg`} tw-w-full tw-h-full tw-border tw-border-2 tw-border-solid tw-p-0 tw-relative tw-rounded-lg tw-rounded-lg`}
style={bg} style={bg}
> >
<h5 <h5
className={`tw-text-center tw-py-2 tw-px-4 tw-rounded-t tw-m-0 tw-w-full className={`tw-text-center tw-py-2 tw-px-4 tw-rounded-t tw-m-0 tw-w-full group-hover:tw-no-underline group-hover:tw-bg-secondary group-hover:tw-bg-opacity-70
${lineDrawing ? '' : 'tw-bg-neutral tw-text-neutral-content tw-bg-opacity-70'}`} ${lineDrawing ? '' : 'tw-bg-neutral tw-text-neutral-content tw-bg-opacity-80'}`}
> >
{about[name].name} {about[name].name}
</h5> </h5>
@ -303,7 +307,7 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => {
className={`tw-flex tw-flex-row tw-items-center tw-justify-center tw-py-1 tw-px-2 tw-rounded-b tw-m-0 tw-w-full className={`tw-flex tw-flex-row tw-items-center tw-justify-center tw-py-1 tw-px-2 tw-rounded-b tw-m-0 tw-w-full
${lineDrawing ? '' : `tw-text-neutral-content`}`} ${lineDrawing ? '' : `tw-text-neutral-content`}`}
> >
<Difficulty score={about[name].difficulty} /> <Difficulty score={about[name].difficulty} className="group-hover:tw-text-secondary" />
</div> </div>
</div> </div>
</Link> </Link>
@ -316,8 +320,8 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => {
* @param {object} props - All React props * @param {object} props - All React props
* @param {number} props.score - The difficulty score of the design (1-5) * @param {number} props.score - The difficulty score of the design (1-5)
*/ */
const Difficulty = ({ score = 0 }) => ( const Difficulty = ({ score = 0, className = '' }) => (
<div className="tw-flex tw-flex-row"> <div className={`tw-flex tw-flex-row ${className}`}>
{[0, 1, 2, 3, 4].map((i) => ( {[0, 1, 2, 3, 4].map((i) => (
<CircleIcon fill={i < score ? true : false} className={`tw-w-4 tw-h-4`} /> <CircleIcon fill={i < score ? true : false} className={`tw-w-4 tw-h-4`} />
))} ))}

2
packages/react/components/LineDrawing/benjamin.mjs
View file

@ -5,7 +5,7 @@ import { LineDrawingWrapper, regular, thin } from './shared.mjs'
* This strokeScale factor is used to normalize the stroke across * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection * designs so we have a consistent look when showing our collection
*/ */
const strokeScale = 1 const strokeScale = 1.2
/** /**
* A linedrawing component for Benjamin * A linedrawing component for Benjamin

2
packages/react/components/LineDrawing/bob.mjs
View file

@ -5,7 +5,7 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
* This strokeScale factor is used to normalize the stroke across * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection * designs so we have a consistent look when showing our collection
*/ */
const strokeScale = 0.2 const strokeScale = 0.15
/** /**
* A linedrawing component for Bob * A linedrawing component for Bob

2
packages/react/components/LineDrawing/charlie.mjs
View file

@ -5,7 +5,7 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
* This strokeScale factor is used to normalize the stroke across * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection * designs so we have a consistent look when showing our collection
*/ */
const strokeScale = 1 const strokeScale = 1.5
/** /**
* A linedrawing component for Charlie * A linedrawing component for Charlie

2
packages/react/components/LineDrawing/cornelius.mjs
View file

@ -5,7 +5,7 @@ import { LineDrawingWrapper, thin, regular, dashed } from './shared.mjs'
* This strokeScale factor is used to normalize the stroke across * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection * designs so we have a consistent look when showing our collection
*/ */
const strokeScale = 1 const strokeScale = 1.3
/** /**
* A linedrawing component for Cornelius * A linedrawing component for Cornelius

59
packages/react/components/LineDrawing/lumira.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.5
export const Lumira = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 187 220" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/* /*
* React component for the front * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/ */
export const LumiraFront = ({ const strokeScale = 0.8
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return ( /**
<LineDrawingWrapper viewBox="0 0 94 220" {...{ className, stroke }}> * A linedrawing component for Lumira
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const Lumira = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 187 220" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/**
* A linedrawing component for the front of Lumira
*
* @param {object} props - All React props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
*/
export const LumiraFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-60 0 220 220" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

47
packages/react/components/LineDrawing/lunetius.mjs
View file

@ -1,38 +1,27 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.6
export const Lunetius = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 152 294" {...{ className, stroke }}>
<Front stroke={stroke} />
</LineDrawingWrapper>
)
}
/* /*
* React component for the front * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/ */
export const LunetiusFront = ({ const strokeScale = 1.2
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return ( /**
<LineDrawingWrapper viewBox="0 0 152 294" {...{ className, stroke }}> * A linedrawing component for Lunetius
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const Lunetius = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-60 0 294 294" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
// Front is the same
export const LunetiusFront = Lunetius
/* /*
* SVG elements for the front * SVG elements for the front

59
packages/react/components/LineDrawing/noble.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.5
export const Noble = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 152 83" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/* /*
* React component for the front * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/ */
export const NobleFront = ({ const strokeScale = 0.4
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return ( /**
<LineDrawingWrapper viewBox="0 0 76 83" {...{ className, stroke }}> * A linedrawing component for Noble
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const Noble = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 152 83" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/**
* A linedrawing component for the front of Noble
*
* @param {object} props - All React props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
*/
export const NobleFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-5 0 83 83" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

2
packages/react/components/LineDrawing/shared.mjs
View file

@ -23,7 +23,7 @@ export const LineDrawingWrapper = ({
stroke="currentColor" stroke="currentColor"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className={className + ' linedrawing tw-bg-base-300'} className={className + ' linedrawing'}
style={style} style={style}
> >
{children} {children}

59
packages/react/components/LineDrawing/simon.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.35
export const Simon = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 157 121" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/* /*
* React component for the front * This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/ */
export const SimonFront = ({ const strokeScale = 0.15
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return ( /**
<LineDrawingWrapper viewBox="0 0 79 121" {...{ className, stroke }}> * A linedrawing component for Simon
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const Simon = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 157 121" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/**
* A linedrawing component for the front of Simon
*
* @param {object} props - All React props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
*/
export const SimonFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 122 122" {...{ className, stroke }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

57
packages/react/components/LineDrawing/teagan.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
/*
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.5 const strokeScale = 0.5
export const Teagan = ({ /**
className = 'w-64', // CSS classes to apply * A linedrawing component for Teagan
stroke = 1, // Stroke width to use *
}) => { * @param {object} props - All React props
// Normalize stroke across designs * @param {string} props.className - Any CSS classes to apply
stroke = stroke * strokeScale * @param {number} props.stroke - The stroke width to apply
return (
<LineDrawingWrapper viewBox="0 0 170 90" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
*/ */
export const TeaganFront = ({ export const Teagan = ({ className, stroke = 1 }) => (
className = 'w-64', // CSS classes to apply <LineDrawingWrapper viewBox="0 0 170 90" {...{ className }}>
stroke = 1, // Stroke width to use <Front stroke={stroke * strokeScale} />
}) => { <Back stroke={stroke * strokeScale} />
// Normalize stroke across designs </LineDrawingWrapper>
stroke = stroke * strokeScale )
return ( /**
<LineDrawingWrapper viewBox="0 0 85 90" {...{ className, stroke }}> * A linedrawing component for the front of Teagan
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const TeaganFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-2 0 90 90" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

57
packages/react/components/LineDrawing/tristan.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, regular } from './shared.mjs' import { LineDrawingWrapper, regular } from './shared.mjs'
/*
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.5 const strokeScale = 0.5
export const Tristan = ({ /**
className = 'w-64', // CSS classes to apply * A linedrawing component for Tristan
stroke = 1, // Stroke width to use *
}) => { * @param {object} props - All React props
// Normalize stroke across designs * @param {string} props.className - Any CSS classes to apply
stroke = stroke * strokeScale * @param {number} props.stroke - The stroke width to apply
return (
<LineDrawingWrapper viewBox="0 0 152 102" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
*/ */
export const TristanFront = ({ export const Tristan = ({ className, stroke = 1 }) => (
className = 'w-64', // CSS classes to apply <LineDrawingWrapper viewBox="0 0 152 102" {...{ className }}>
stroke = 1, // Stroke width to use <Front stroke={stroke * strokeScale} />
}) => { <Back stroke={stroke * strokeScale} />
// Normalize stroke across designs </LineDrawingWrapper>
stroke = stroke * strokeScale )
return ( /**
<LineDrawingWrapper viewBox="0 0 76 102" {...{ className, stroke }}> * A linedrawing component for the front of Tristan
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const TristanFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-15 0 102 102" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

57
packages/react/components/LineDrawing/uma.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
/*
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.5 const strokeScale = 0.5
export const Uma = ({ /**
className = 'w-64', // CSS classes to apply * A linedrawing component for Uma
stroke = 1, // Stroke width to use *
}) => { * @param {object} props - All React props
// Normalize stroke across designs * @param {string} props.className - Any CSS classes to apply
stroke = stroke * strokeScale * @param {number} props.stroke - The stroke width to apply
return (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
*/ */
export const UmaFront = ({ export const Uma = ({ className, stroke = 1 }) => (
className = 'w-64', // CSS classes to apply <LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
stroke = 1, // Stroke width to use <Front stroke={stroke * strokeScale} />
}) => { <Back stroke={stroke * strokeScale} />
// Normalize stroke across designs </LineDrawingWrapper>
stroke = stroke * strokeScale )
return ( /**
<LineDrawingWrapper viewBox="0 0 110 75" {...{ className, stroke }}> * A linedrawing component for the front of Uma
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const UmaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

57
packages/react/components/LineDrawing/umbra.mjs
View file

@ -1,39 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
/*
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.5 const strokeScale = 0.5
export const Umbra = ({ /**
className = 'w-64', // CSS classes to apply * A linedrawing component for Umbra
stroke = 1, // Stroke width to use *
}) => { * @param {object} props - All React props
// Normalize stroke across designs * @param {string} props.className - Any CSS classes to apply
stroke = stroke * strokeScale * @param {number} props.stroke - The stroke width to apply
return (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
*/ */
export const UmbraFront = ({ export const Umbra = ({ className, stroke = 1 }) => (
className = 'w-64', // CSS classes to apply <LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
stroke = 1, // Stroke width to use <Front stroke={stroke * strokeScale} />
}) => { <Back stroke={stroke * strokeScale} />
// Normalize stroke across designs </LineDrawingWrapper>
stroke = stroke * strokeScale )
return ( /**
<LineDrawingWrapper viewBox="0 0 110 75" {...{ className, stroke }}> * A linedrawing component for the front of Umbra
<Front stroke={stroke} /> *
</LineDrawingWrapper> * @param {object} props - All React props
) * @param {string} props.className - Any CSS classes to apply
} * @param {number} props.stroke - The stroke width to apply
*/
export const UmbraFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
/* /*
* React component for the back * React component for the back

58
packages/react/components/LineDrawing/wahid.mjs
View file

@ -1,36 +1,38 @@
import React from 'react' import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs' import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.4 /*
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.5
export const Wahid = ({ /**
className = 'w-64', // CSS classes to apply * A linedrawing component for Wahid
stroke = 1, // Stroke width to use *
}) => { * @param {object} props - All React props
// Normalize stroke across designs * @param {string} props.className - Any CSS classes to apply
stroke = stroke * strokeScale * @param {number} props.stroke - The stroke width to apply
*/
export const Wahid = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
return ( /**
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className, stroke }}> * A linedrawing component for the front of Wahid
<Front stroke={stroke} /> *
<Back stroke={stroke} /> * @param {object} props - All React props
</LineDrawingWrapper> * @param {string} props.className - Any CSS classes to apply
) * @param {number} props.stroke - The stroke width to apply
} */
export const WahidFront = ({ className, stroke = 1 }) => (
export const WahidFront = ({ <LineDrawingWrapper viewBox="-20 0 126 126" {...{ className }}>
className = 'w-64', // CSS classes to apply <Front stroke={stroke * strokeScale} />
stroke = 1, // Stroke width to use </LineDrawingWrapper>
}) => { )
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 81 126" {...{ className, stroke }}>
<Front stroke={stroke} />
</LineDrawingWrapper>
)
}
export const WahidBack = ({ export const WahidBack = ({
className = 'w-64', // CSS classes to apply className = 'w-64', // CSS classes to apply