Skip to content

Instantly share code, notes, and snippets.

@jordansinger
Created October 19, 2021 19:43
Show Gist options
  • Save jordansinger/1f9f5cea477426482246ce8f7d583c59 to your computer and use it in GitHub Desktop.
Save jordansinger/1f9f5cea477426482246ce8f7d583c59 to your computer and use it in GitHub Desktop.
lil dice FigJam widget
const { widget } = figma
const { Rectangle, AutoLayout, Frame, Text, useSyncedState, usePropertyMenu, useEffect, Ellipse } = widget
function Dot(props) {
let visible = props.visible
return (
<Ellipse
opacity={visible ? 1 : 0}
width={24}
height={24}
fill="#333333"
></Ellipse>
)
}
function Grid(props) {
let sides = props.sides
let attrs = {
direction: "vertical" as const,
spacing: 12,
width: "fill-parent" as const
}
switch(sides) {
case 1:
return <Dot visible={true} />
case 2:
case 3:
return <AutoLayout {...attrs}>
<AutoLayout horizontalAlignItems="start" width="fill-parent"><Dot visible={true} /></AutoLayout>
<AutoLayout horizontalAlignItems="center" width="fill-parent"><Dot visible={sides == 2 ? false : true} /></AutoLayout>
<AutoLayout horizontalAlignItems="end" width="fill-parent"><Dot visible={true} /></AutoLayout>
</AutoLayout>
case 4:
case 5:
return <AutoLayout {...attrs}>
<AutoLayout spacing="auto" width="fill-parent"><Dot visible={true} /><Dot visible={true} /></AutoLayout>
<AutoLayout horizontalAlignItems="center" width="fill-parent"><Dot visible={sides == 4 ? false : true} /></AutoLayout>
<AutoLayout spacing="auto" width="fill-parent"><Dot visible={true} /><Dot visible={true} /></AutoLayout>
</AutoLayout>
case 6:
return <AutoLayout {...attrs}>
<AutoLayout spacing="auto" width="fill-parent"><Dot visible={true} /><Dot visible={true} /><Dot visible={true} /></AutoLayout>
<AutoLayout horizontalAlignItems="center" width="fill-parent"><Dot visible={false} /></AutoLayout>
<AutoLayout spacing="auto" width="fill-parent"><Dot visible={true} /><Dot visible={true} /><Dot visible={true} /></AutoLayout>
</AutoLayout>
default:
return <Dot visible={true} />
}
}
function lildice() {
const [initialized, setInitialized] = useSyncedState("initialized", false)
const [sides, setSides] = useSyncedState("side", null)
usePropertyMenu(
[
{
tooltip: 'Roll',
propertyName: 'roll',
itemType: 'action',
},
],
async ({ propertyName }) => {
if (propertyName === 'roll') {
roll()
}
},
)
let roll = () => {
let number = Math.floor(Math.random() * 6) + 1
setSides(number)
console.log(number)
figma.notify('You rolled a ' + number)
}
useEffect(() => {
figma.widget.waitForTask(new Promise(async resolve => {
if (!initialized) {
roll()
setInitialized(true)
}
resolve(true)
}))
})
return (
<Frame
fill="#FFFFFF"
width={192}
height={192}
cornerRadius={32}
effect={[
{
type: 'drop-shadow',
color: { r: 0, g: 0, b: 0, a: 0.08 },
offset: { x: 0, y: 24 },
blur: 40,
spread: 0,
},
{
type: 'drop-shadow',
color: { r: 0, g: 0, b: 0, a: 0.12 },
offset: { x: 0, y: 2 },
blur: 8,
spread: 0,
},
]}
>
{sides ?
<AutoLayout
horizontalAlignItems="center"
verticalAlignItems="center"
width={192}
height={192}
padding={48}
>
<Grid sides={sides} />
</AutoLayout>
: null}
</Frame>
)
}
widget.register(lildice)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment