pixsy/index.pug

doctype html
html(lang="en-gb")
    head
        meta(charset="utf-8")
        title pixsy
        link(rel="stylesheet" href="includes/style.css")
        link(rel="stylesheet" href="includes/croppie.css")
        script(src="includes/croppie.min.js")
    body
        header
            h1 pixsy
            p.
                version 0.710.0
                |
                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") old version]
                |
                #[a(href="mailto:max@tinybird.info") email]
                |
                #[a(href="https://twitter.com/synth_ruiner") twitter]
        .pages
            .page#start
                p.
                    #[b pixsy] is a tool for #[a(href="https://bitsy.org/") Bitsy Game Maker]
                    that allows you to generate a room from an image and add it to your game.
                p.
                    this version is tested to be compatible with Bitsy version 7.10 and earlier.
                    later versions may also work fine, but make sure you have a backup of your game data.
                p.
                    #[b pixsy] does not currently work via the Itch desktop program.
                    if pixsy does not work for you, please try the
                    #[a(href="http://tinybird.info/image-to-bitsy/old/") old version] instead.
                p.
                    if your image is already the correct size for a bitsy room (128×128),
                    simply leave the zoom slider at the default setting.
                    you can draw your room in a pixel-art program and import it here.
                p.
                    full instructions can be found on the
                    #[a(href="https://ruin.itch.io/pixsy/") itch.io page] -
                    scroll down to "how to use".

                button.normal.pagination.next#new create a new bitsy game
                button.normal.pagination.next#load load an existing bitsy game
            .page.game-data
                h2 game data

                p.
                    your game data is available from the #[i game data] window in bitsy,
                    under the #[i tools] dropdown.

                input#game(type="file" accept=".bitsy,.txt" autocomplete="off")
                br

                textarea#game-data(
                    placeholder="Paste your game data here or use the file chooser button above"
                    autocomplete="off"
                )

                button.pagination.prev previous
                button.pagination.next#game-data-next(disabled=true) next
            .page.image#page-image
                h2 image

                .image-container
                    input#image(type="file" accept="image/*")
                    #crop(style="display: none;")

                button.pagination.prev previous
                button.pagination.next#image-next(disabled=true) next
            .page.room#page-room
                h2 room

                table
                    tbody
                        tr
                            td(style="width: 60%")
                                img#preview(alt="preview")
                                br

                                label
                                    | brightness
                                    input#brightness(type="range" min=-96 max=96 value=0)
                            td(style="vertical-align: top;")
                                label
                                    | name (optional)
                                    input#room-name(type="text" placeholder="e.g. 'bedroom'" autocomplete="off")

                                label
                                    | palette
                                    select#palette

                                #new-palette(style="display: none;")
                                    .half
                                        input#colour-background(type="color" value="#000000")
                                    .half
                                        input#colour-foreground(type="color" value="#ffffff")

                                label
                                    input#dither(type="checkbox")
                                    | dither
                                p (approximates a greyscale effect)
                                br

                button.pagination.prev#back-to-image previous
                button.pagination.next#room-next add room
            .page.download
                h2 done!

                p#added

                textarea#output(autocomplete="off")

                button#clipboard.half copy to clipboard
                button#download.half download

                button.pagination.prev#add add another image
                button.pagination.start#reset start again
        script(type="module")
            include script.js