Making Polyominos

Making Polyominos



A fast and flexible approach

While there are a few ways to do polyominos in Dextrous, I think the fastest and easiest way to approach polyominos is to use regular  In-text icons .
Follow these steps:
1. Make a text zone with a font size as big as you want your polyomino squares to be and center-align the text.
2. Create your polyomino images (for my examples below I'm just using square webp images in basic colors).
3. Insert an in-text icon like normal (In this example you'll see I've inserted 1 yellow icon).

https://slite.com/api/files/6q8JFZVyO7zDFp/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
4. Now to make a 3x3 yellow square I can just insert 3 rows of {polyomino/yellow.webp} with line breaks after each one:
That is quite the wall of text though, so next you'll create  Variables  to shorten the icon text code.

https://slite.com/api/files/1YhWUID1t0YozW/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
5. Create a variable for each color of square that you're using.
In this example you'll see the variable I made for my yellow squares.

https://slite.com/api/files/WjzyWSqojPXZPb/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
6. Using variables, you can now shorten what you're using in the text zone table cell to something super clean and readable like this:
Bonus: Once every colored square is a variable, it also means you can very easily switch between colors or make multi-color shapes!

https://slite.com/api/files/9VxaJZG_uQF-g9/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I

https://slite.com/api/files/bqUK5_l0-wGx9k/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
7. One little gotcha to be aware of is that because the text is all being centered, if you have an uneven number of squares (say 2 and 3) the squares will be offset like this, which is probably not what you want:

To fix this, just make a 'blank'polyomino that you can use as a placeholder in this situation. In the examples below, I've made a blank image with a border just so you can see it, but note you're better off just making it be a transparent square.

https://slite.com/api/files/jAHzgiQ35sbBZd/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
8. Use your blank polyomino squares to hold space in the grid where you need it.
I've set my blank square to the variable {x}, so now to fix my yellow tiles I can simply do this.
And of course you can use the blank before or after other squares depending on how you want them to go in the grid.

https://slite.com/api/files/GZhhBZN97z_4MK/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I

https://slite.com/api/files/BqLQ3gTdpGQ8At/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
Tip: If your polyomino game is using lots of weird and wonderful shapes you might be best of starting with the grid of blanks, and then just typing the letters where you want the colored tiles to go.

https://slite.com/api/files/-FhALCLRmuX1SE/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I

https://slite.com/api/files/maakvv0-_emPzp/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoibzZlaXpwX3ZsNzdwM0IiLCJpYXQiOjE3ODMzNjg1MzUsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiaGdkUUdYUWZhNTFpZzgiLCJleHAiOjE3ODU5NjA1MzV9.hyiEToXnLMdLR90lYkGjsAuwFbKYDksFrUm6G2FSW1I
Hopefully that gets you off to a good start with your polyomino game!