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 (
<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
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`}
style={bg}
>
<h5
className={`tw-text-center tw-py-2 tw-px-4 tw-rounded-t tw-m-0 tw-w-full
${lineDrawing ? '' : 'tw-bg-neutral tw-text-neutral-content tw-bg-opacity-70'}`}
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-80'}`}
>
{about[name].name}
</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
${lineDrawing ? '' : `tw-text-neutral-content`}`}
>
<Difficulty score={about[name].difficulty} />
<Difficulty score={about[name].difficulty} className="group-hover:tw-text-secondary" />
</div>
</div>
</Link>
@ -316,8 +320,8 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => {
* @param {object} props - All React props
* @param {number} props.score - The difficulty score of the design (1-5)
*/
const Difficulty = ({ score = 0 }) => (
<div className="tw-flex tw-flex-row">
const Difficulty = ({ score = 0, className = '' }) => (
<div className={`tw-flex tw-flex-row ${className}`}>
{[0, 1, 2, 3, 4].map((i) => (
<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
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 1
const strokeScale = 1.2
/**
* 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
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 0.2
const strokeScale = 0.15
/**
* 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
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 1
const strokeScale = 1.5
/**
* 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
* designs so we have a consistent look when showing our collection
*/
const strokeScale = 1
const strokeScale = 1.3
/**
* A linedrawing component for Cornelius

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

@ -1,39 +1,38 @@
import React from 'react'
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 = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
const strokeScale = 0.8
return (
<LineDrawingWrapper viewBox="0 0 94 220" {...{ className, stroke }}>
<Front stroke={stroke} />
/**
* A linedrawing component for 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 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

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

@ -1,38 +1,27 @@
import React from 'react'
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 = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
const strokeScale = 1.2
return (
<LineDrawingWrapper viewBox="0 0 152 294" {...{ className, stroke }}>
<Front stroke={stroke} />
/**
* A linedrawing component for Lunetius
*
* @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

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

@ -1,39 +1,38 @@
import React from 'react'
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 = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
const strokeScale = 0.4
return (
<LineDrawingWrapper viewBox="0 0 76 83" {...{ className, stroke }}>
<Front stroke={stroke} />
/**
* A linedrawing component for 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 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

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

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

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

@ -1,39 +1,38 @@
import React from 'react'
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 = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
const strokeScale = 0.15
return (
<LineDrawingWrapper viewBox="0 0 79 121" {...{ className, stroke }}>
<Front stroke={stroke} />
/**
* A linedrawing component for 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 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

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

@ -1,39 +1,38 @@
import React from 'react'
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
export const Teagan = ({
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 170 90" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
/**
* A linedrawing component for Teagan
*
* @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 = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 85 90" {...{ className, stroke }}>
<Front stroke={stroke} />
export const Teagan = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 170 90" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
/**
* A linedrawing component for the front of Teagan
*
* @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

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

@ -1,39 +1,38 @@
import React from 'react'
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
export const Tristan = ({
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 102" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
/**
* A linedrawing component for Tristan
*
* @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 = '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 102" {...{ className, stroke }}>
<Front stroke={stroke} />
export const Tristan = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 152 102" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
/**
* A linedrawing component for the front of Tristan
*
* @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

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

@ -1,39 +1,38 @@
import React from 'react'
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
export const Uma = ({
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 221 75" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
/**
* A linedrawing component for Uma
*
* @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 = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 110 75" {...{ className, stroke }}>
<Front stroke={stroke} />
export const Uma = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
/**
* A linedrawing component for the front of Uma
*
* @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

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

@ -1,39 +1,38 @@
import React from 'react'
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
export const Umbra = ({
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 221 75" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
/**
* A linedrawing component for Umbra
*
* @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 = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 110 75" {...{ className, stroke }}>
<Front stroke={stroke} />
export const Umbra = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
/**
* A linedrawing component for the front of Umbra
*
* @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

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

@ -1,36 +1,38 @@
import React from 'react'
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
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className, stroke }}>
<Front stroke={stroke} />
<Back stroke={stroke} />
/**
* A linedrawing component for Wahid
*
* @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 Wahid = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className }}>
<Front stroke={stroke * strokeScale} />
<Back stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
export const WahidFront = ({
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 81 126" {...{ className, stroke }}>
<Front stroke={stroke} />
/**
* A linedrawing component for the front of Wahid
*
* @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 WahidFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 126 126" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
}
)
export const WahidBack = ({
className = 'w-64', // CSS classes to apply