cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              -# Pixel art no element builder markup
<canvas id="canvas" style="border:2px solid black;" width="1000" height="1000">
</canvas>
.app
    .zoom
        .pan
            .scene#scene
                .pcount
                    %h5 Pixel Count
                    
                    %span.c 0
                    %span / 1000
                    %p Because it's not built in canvas, will start to lag when drawing after a few 100 pixels
                .row
                .col
                .frame.frame1
                    .pixels
    -# Side menu
    %aside.menu
        -# Pixelizer main logo
        .menu_logo
            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pixelizer_logo.png'}
        -# Main scene options    
        .menu_options
            %h2 Scene options
            %p You must set these first otherwise your drawing will be deleted
            -# Pixel sizing options
            .menu_options__psize
                %h3 Pixel size
                %h3.abs Scene name
                %input.w{:type => 'number'}
                %input.name{:value => 'My no div pixel art'}
            -# Scene sizing options 
            
            .menu_options__ssize
                %h3 Scene size
                %button.s.active S
                %button.m M
                %button.l L
                %button.xl XL
                %input.w{:type => 'hidden'}
                %input.inactive.h{:type => 'hidden'}
            -# Scene bg color options        
            .menu_options__bcolor
                %h3 Scene background
                %input#bgpicker
                .coutput #2f303e
        -# Scene effects
        .menu_effects
            %h2 Scene effects
            %p Add dithering and reflections to your creation
            -# Scene reflection
            .menu_effects__reflect
                %label{:for => 'reflect'}
                    %h4 
                        %i.fa.fa-image
                        Reflect
                %input#reflect{:type => 'checkbox'}
        -# Scene animation options         
        .menu_animations
            %h2 Scene animations
            %p Add simple animations to your creation
            -# Scene animation selection
            .menu_animations__animation
                %h4 Select animation
                %select
                    %option No animation
                    %option Spin
                    %option Bounce
                    %option Wobble
    -# Top tool bar  
    .overlay
    %nav.tools
        -# Scene zoom slider
        .tools_zoom 
            %h5 Zoom level
            %input{:type => 'range', :value => '0', :min => '10', :max => '30'}
            .tip
                x 1.0
        -# Scene grid icon 
        .tools_grid
            %i.fa.fa-th
            .tipt Toggle grid [g]
        -# Scene pan icon 
        .tools_pan.inactive
            %i.fa.fa-arrows-alt
            .tipt Toggle pan [Hold space]
        -# Scene save icon 
        .tools_center.inactive
            %i.fa.fa-bullseye
            .tipt Re center [c]
        .tools_symx.inactive
            %i.fa.fa-arrows-h
            .tipt Symetry X [x]
        .tools_symy.inactive
            %i.fa.fa-arrows-v
            .tipt Symetry Y [Y]
        -# Scene export to codepen button
        .tools_export_code
        -# Scene export as png button
        .tools_export_png
            %a 
                Export as image
    -# Scene color picker
    .picker
        %h2 
            %i.fa.fa-paint-brush
            Color Selector
        %input#colorpicker
        .col
        .output #ffffff
        .pick
            .tipt Pick color [p]
            %i.fa.fa-crosshairs
.pickOverlay
.keyframes
    //.playhead
    .keyframes_control
        %h4 Timeline
        .controls
            %h4 Onion skin:
            .onion
                %input#onion{:type => 'checkbox', :checked => 'checked'}
                
            %h4 FPS:
            %input.f{:value => '30'}
            %h4 Controls:
            .start
                %i.fa.fa-fast-backward
            .prev
                %i.fa.fa-step-backward
            .play
                %i.fa.fa-play
            .next
                %i.fa.fa-step-forward
            .end
                %i.fa.fa-fast-forward
            
    .frames
        .o
        .wrap
            .frame.activeF.frame1{'data-frame' => 1}
                .frameTitle
                    Frame #1
                %i.fa.fa-trash
                %i.fa.fa-copy
    .add
        +

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');

canvas {
    margin-left: 400px;
    display: none;
}
%abs {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}
.keyframes {
    width: calc(100% - 280px);
    position: absolute;
    bottom: 0;
    left: 280px;
    color: #728995;
    height: 60px;
       padding: 31px 20px 15px 6px;
    background:#282938;

    canvas {
        position: absolute;
        display: block;
        margin:0;
        left: 0;
        background: wheat;
    }

    &_control {
        position: absolute;
        top: -39px;
        width: calc(100% - 45px);
        background: #20212d;
        left: 0;
        padding: 10px;
        
        
        .controls {
            float: right;
            input, h4 {
                float: left;
                clear: none;
            }
            
            input {
                float: left;
    background: transparent;
    border: 1px solid #555877;
    outline: none;
    border-radius: 4px;
    padding: 6px 10px;
    text-align: center;
    color: #bea5dd;
                width:50px;
    box-sizing: border-box;
    font-size: 9px;
            }
            
            input[type="checkbox"] {float: right;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    padding: 0;
    position: relative;
                margin-left: -6px;
    top: 3px;
                background: transparent;
    border: 1px solid #555877;
    outline: none;
    border-radius: 4px;

    text-align: center;
    color: #bea5dd;
    box-sizing: border-box;
    font-size: 9px;
    cursor: pointer;
            
            &:checked {
                    &::after {
                        content: '\f00c';
                        display: block;
                        font-size: 7px;
                        font-family: 'fontawesome';
                        color: #787a8a;
                        position: relative;
                        top: 1px;
                        left: 0px;
                    }
                }
            }
            
            h4 {
                margin-left: 30px;
            }
            div {
                float: left;
                margin-right: 10px;
                cursor: pointer;
                transition: all 0.2s;
                position: relative;
               
                font-size: 12px;
                
                &:hover {
                    color: #81f0ef;
                }
                
                i {
                    position: relative;
                    top: 4px;
                }
            }
        }
        
        h4 {
            margin: 0;
                text-transform: uppercase;
    color: #81f0ef;
    margin: 4px 14px 0;
    font-weight: 600;
    clear: both;
            float: left;
            position: relative;
            top: 2px;
            font-size: 9px;
        }

    }

    .frame {
        height: 47px;

        background: #2f303e;
        cursor: pointer;
        float: left;
        border-radius: 4px;
        width: 70px;
        border: 1px solid #555877;
        margin: 4px -10px 4px 19px;
        position: relative;
        opacity: 0.6;

        canvas 
        {
            background:#2f303e;
            height: 100%; border-radius: 4px;
            width: 100%;
        }

        img {
            width: 100%;
        }
        &.activeF{
            border: 1px solid #81f0ef;
            opacity: 1;
            .frameTitle{
                color: white;
            }
        }

        .frameTitle{
            position: absolute;
            font-weight: 400;
            top: -16px;
            left: -1px;
            z-index: 1;
            color: #8789a9;
            font-size: 8px;
        }

        &:hover {
            .fa-trash,
            .fa-copy {
                opacity: 1;
            }
        }
    }


    .fa-trash,
    .fa-copy {
        position: absolute;
        bottom: 5px;
        font-size: 11px;
        z-index: 1;
        right: 5px;
        opacity: 0;
        transition: all .2s;
        
        &:hover {
            color: #81f0ef
        }
    }
    .fa-copy {
        right: 19px;   
    }
    .playhead {
        width:1px;
        height:102px;
        background: white;
        position: absolute;
        top:0;
        left: 25px;
            z-index: 11
    }
    .frames {
width: calc(100% - 140px);
    float: left;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 110px;
    position: relative;
    top: -20px;
    padding-top: 19px;
        
        .o{
                position: absolute;
    z-index: 1033;
    height: 200px;
    top: -10px;
    width: 100px;
    right: 0;
    background: -webkit-linear-gradient(left, rgba(125, 185, 232, 0) 0%, #282938 100%);
        }
        
        .wrap {
       
            width: 100000px;
        }
    }

    .add{
      height: 67px;
    cursor: pointer;
    float: right;
    border-radius: 4px;
    width: 70px;
    text-align: center;
    color: white;
    background: #363851;
    margin: -12px 23px 4px 19px;
    line-height: 67px;
    opacity: .6;
    transition: all .2s;

        &:hover {
            opacity: 1;
        }
    }

    .play,
    .stop{
        float: right;

    }
}

.pcount {
    position: absolute;
    right: -180px;
    font-size: 10px;

    p {
        width: 150px;
        margin: 4px 0;
        opacity: 0.3; font-size: 9px;
        line-height: 13px;
    }

    span {
        opacity: 0.3
    }
    span.c {
        opacity: 1
    }

    h5 {
        margin: 0 0 7px 0;
        font-size: 10px;
        color: #81f0ef;;
    }
}
.zoom {
    transform: scale(1);
    position: absolute;
    width: calc(100% - 280px);
    height: 100vh;
    top: 0;
    right: 0;
}
%scene {
    @extend %abs;

    -webkit-transform-origin: 0 0;





}

// Resets

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

* {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */ 
}

body {
    background: #2f303e;
    color: white;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;

    .pan {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .scene {
        @extend %abs;
        height: 200px;
        transition: transform 1s, top 0.2s, left 0.2s;
        border: 1px solid #d0baef;

        .symx {
            height: 120%;
            width: 2px;
            background: red;
            position: absolute;
            left: 50%;
            transform: translateY(-10%) translateX(-1px);
            z-index: 100;
        }

        .symy {
            height: 2px;
            width: 120%;
            background: red;
            position: absolute;
            top: 50%;
            transform: translateY(-1px) translateX(-10%);
            z-index: 100;
        }

        @keyframes spin {
            from{transform: translateY(-50%) rotate(0deg)}
            to{transform: translateY(-50%)  rotate(360deg)}
        }

        &.Spin {
            animation: spin 3s linear infinite;
        }

        @keyframes bounce {
            0%{    transform: translateY(-50%);}
            50%{    transform: translateY(-60%);}
            100%{    transform: translateY(-50%);}
        }

        &.Bounce {
            animation: bounce 1s linear infinite;
        }

        @keyframes wobble {
            0%{transform: translateY(-50%) translateX(-10px)}
            50%{transform: translateY(-50%) translateX(10px)}
            100%{transform: translateY(-50%) translateX(-10px)}
        }

        &.Wobble {
            animation: wobble 1s linear infinite;
        }

        &.reflect {
            -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 76%, white 107%);
        }

        & .row,
        & .col{
            position: absolute;  
            top: 0;
            //pointer-events: none;
        }

        &_pixelrow {
            box-shadow: 0px 1px rgba(255,255,255, 0.2) inset, 1px 0px rgba(255,255,255, 0.2) inset;
            pointer-events: none;
        }

        &_pixelcolumn {
            float: left;
            box-shadow: 0px 1px rgba(255,255,255, 0.2) inset, 1px 0px rgba(255,255,255, 0.2) inset;
            //pointer-events: none;
            z-index: 10;

        }

        &_pixel {

            position: absolute;
            float: left;
            //pointer-events: none;

        }
    }

    .picker {

        transform: translateY(0);
        left: 340px;
        top: 100px;
        position: relative;

        background: #363851;
        padding: 20px;
        border-radius: 4px;
        width: 182px;
        height: 235px;

        .pick {
            &:hover {
                .tipt {
                    opacity: 1;
                    top: 220px;
                }
            }
        }

        & .tipt {
            padding: 6px 10px;
            background: #ae88f0;
            transition: all 0.2s;
            opacity: 0;
            top: 230px;
            pointer-events: none;
            width: 80px;
            font-weight: 600;
            font-size: 10px;
            left: 140px;
            border-radius: 4px;
            text-transform: uppercase;
            color: white;
            position: absolute;
            text-align: center;
        }

        .col {
            border: 2px solid white;
            width: 20px;
            height: 14px;
            background: White;
            border-radius: 4px;
            float: left;
            margin-right: 10px;
            margin-left: 10px;
            position: relative;
            top: -3px;
        }

        .output {
            font-size: 10px;
            font-weight: 600;
            margin-left: 10px;
            display:none;

        }

        h2 {
            font-size: 11px;
            margin-bottom: -6px;
            margin-top: 30px;
            float: left;

            text-transform: uppercase;
            color: #81f0ef;
            margin: 0;
            font-weight: 600;
            clear: both;
            position: absolute;
            top: -30px;
            left: 0px;

            i {
                margin-right: 6px;
            }
        }

    }

    .extras {
        position: absolute;
        right: 0;
        height: 100%vh;
        top: 150px;
    }
    .overlay {
        background: #2f303e;
        height: 116px;
        width: 100%;
        position: absolute;
        top:0;
        left: 280px;
    }
    & .name {
        width:120px !important;
        float: left;
        background: transparent;
        border: 1px solid #555877;
        outline: none;
        margin-left: 10px;
        border-radius: 4px;
        padding: 12px 12px;
        text-align: left;
        position: relative;
        color: #bea5dd;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 9px;


    }
    .tools {
        position: relative;
        left: 409px;
        padding: 20px;
        margin-top: 28px;
        width: calc(100% - 440px);



        & .tipt {
            padding: 6px 10px;
            background: #ae88f0;
            transition: all 0.2s;
            opacity: 0;
            top: 32px;
            pointer-events: none;
            width: 80px;
            font-weight: 600;
            font-size: 10px;
            left: -40px;
            border-radius: 4px;
            text-transform: uppercase;
            color: white;
            position: absolute;
            text-align: center;
        }

        div {
            float: left;

            &:hover {
                .tipt {
                    opacity: 1;
                    top: 30px;
                }
            }
        }

        &_zoom {
            width: 230px;
            text-transform: uppercase;
            font-size: 11px;
            float: left;
            position: relative;
            margin-right: 20px;

            & .tip {
                padding: 6px 10px;
                background: #ae88f0;
                transition: opacity 0.2s;
                opacity: 0;
                top: 30px;
                font-weight: 600;
                font-size: 10px;
                left: -14px;
                border-radius: 4px;
                text-transform: uppercase;
                position: absolute;
                text-align: center;
            }

            h5 {
                position: absolute;
                font-weight: 700;
                top: -11px;
                left: -90px;
            }
        }

        &_grid,
        &_pan,
        &_save,
        &_center,
        &_symx,
        &_symy {
            color: #81f0ef;
            transition: all 0.2s;
            position: relative;
            top: -1px;
            font-size: 18px;
            margin: 0px 20px;
            cursor: pointer;

            &:hover {
                color: #81f0ef !important;
            }

            &.inactive {
                color: #464753
            }
        }

        %button {
            padding: 16px 26px;
            border-radius: 3px;
            margin-top: -14px;
            float: right !important;
            font-weight: 600;
            font-size: 11px;
            margin-right: 20px;
            transition: all 0.2s;
            cursor: pointer;
            i {
                transition: all 0.2s;
                margin-right: 10px;
            }

            &:hover {
                i {
                    margin-right: 20px;
                }
            }

        }
        &_export_png{
            @extend %button;
        }

        input[type="submit"] {
            @extend %button;
            background: #ae88f0;
            color: white;
            border: none;
            outline: 0;
            font-family: 'Montserrat', sans-serif;

            &:hover {
                background: darken(#ae88f0, 10);
            }

        }

        &_export_png {
            background: #81f0ef;
            color: #41a09f;

            &:hover {
                background: darken(#81f0ef, 10);
            }
        }

        &_export_code {
            float: right !important;
        }
    }

    .menu {
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        background: #363851;
        width: 200px;
        padding: 40px;

        &_options__psize {
            position: relative;
        }


        button {
            width: 41px;
            float: left;
            margin-right: 9px;
            background: transparent;
            border: 1px solid #555877;
            outline: none;
            border-radius: 4px;
            margin-bottom: 20px;
            margin-top: 6px;
            padding: 12px 10px;
            text-align: center;
            color: #bea5dd;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 9px;
            transition: all 0.2s;
            cursor: pointer;
            &.active {
                background: #81f0ef;
                border: 1px solid #81f0ef;
                color: #363851;
            }

            &:hover {
                background: #81f0ef;
                border: 1px solid #81f0ef;
                color: #363851;
            }
        }

        &_logo {
            border-bottom: 1px solid #555877;
            padding-bottom: 30px;
            margin-bottom: 10px;
        }

        img {
            width: 165px;
        }

        h2,
        h3,
        h4{
            text-transform: uppercase;
            color: #81f0ef;
            margin: 0;
            font-weight: 600;
            clear: both;

            &.abs {
                position: absolute;
                top: 104px;
                left: 73px;
            }
        }

        h2 {
            font-size: 11px;
            margin-bottom: -6px;
            margin-top: 30px;
            float: left;
        }

        h3 {
            font-size: 9px;
            margin-top: 10px;
            margin-bottom: 8px;
        }

        h4 {
            font-size: 9px;
            margin-top: 10px;
            color: #8789a9;
            margin-bottom: 8px;
            float: left;

            i {
                float:left;
                position: relative;
                top: 1px;
                margin-right: 5px;
            }
        }

        p {
            width: 100%;
            font-size: 9px;
            float: left;
            clear: both;
            line-height: 15px;
            color: #8789a9;
            border-bottom: 1px solid #555877;
            padding-bottom: 18px;
            margin-bottom: 18px;
        }

        input {
            width: 63px;
            float: left;
            background: transparent;
            border: 1px solid #555877;
            outline: none;
            border-radius: 4px;
            margin-bottom:  20px;
            margin-top: 6px;
            padding: 12px 10px;
            text-align: center;
            color: #bea5dd;
            box-sizing: border-box;
            font-size: 9px;

            &.inactive {
                color: #6e6489;
            }

            &[type="checkbox"] {
                float: right;
                appearance: none;
                width: 12px;
                height: 12px;
                padding: 0;
                position: relative;
                top: 3px;
                cursor: pointer;
                &:checked {
                    &::after {
                        content: '\f00c';
                        display: block;
                        font-size: 7px;
                        font-family: 'fontawesome';
                        color: #787a8a;
                        position: relative;
                        top: 1px;
                        left: 0px;
                    }
                }
            }
        }

        select {
            clear: both;
            float: left;
            width: 100%;
            appearance: none;
            float: left;
            background: transparent;
            border: 1px solid #555877;
            outline: none;
            font-weight: 600;
            border-radius: 4px;
            margin-bottom: 20px;
            margin-top: 6px;
            text-transform: uppercase;
            padding: 12px 10px;
            text-align: center;
            color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 9px;
        }

        label {
            cursor: pointer;

            &.active {
                h4 {
                    color: white;
                }
            }
        }

        &_animations__animation {
            position: relative;
            clear: both;

            &::after {
                content: '\f078';
                display: none;
                font-size: 8px;
                font-family: 'fontawesome';
                color: #787a8a;
                position: absolute;
                top: 48px;
                right: 14px;
            }
        }

        & .x {
            font-size: 8px;
            display: block;
            float: left;
            position: relative;
            top: 18px;
            margin: 0 10px;
            color: #bea5dd; 
        }

        & .lock {
            width: 26px;
            float: left;
            height: 26px;
            background: #2f303e;
            border-radius: 4px;
            position: relative;
            top: 10px;
            text-align: center;
            line-height: 27px;
            font-size: 12px;
            color: #b6a5d3;
            transition: all 0.2s;
            cursor: pointer;
        }
    }
}


// Color picker overwrites
.sp-button-container.sp-cf {
    display: none
}
.fa-crosshairs {
    position: absolute;
    right: 30px;
    bottom: 24px;
    color: #555877;
    transition: all 0.2s;
    cursor: pointer;

    &.active,
    &:hover {
        color: #81f0ef;
    }
}
.pickOverlay {
    display: none;
    border: 2px solid white;
    width: 40px;
    position: absolute;
    height: 20px;
    border-radius: 4px;
    background: white;
}

.sp-container {
    background: none;
    border: none;
    padding: 0;
    //transform: translateX(-40px);
}

.sp-picker-container {
    border: none;
    //padding: 0 0 300px 0;
    margin-top: 14px;
}

.sp-dd {
    left: 10px;
    position:relative;
    font-size: 0px;

    &::after {
        content: '\f078';
        display: block;
        font-size: 8px;
        font-family: 'fontawesome';
        color: #787a8a;
        position: relative;
        top: -17px;
        left: 10px;
    }
}
.sp-replacer {
    background: none;
    width: 50%;
    float: left;
    background: transparent;
    border: 1px solid #555877 !important;
    outline: none;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-top: 6px;
    padding: 7px 7px;
    text-align: center;
    color: #bea5dd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 9px;
}

.coutput {
    float: right;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: 15px;
}

.sp-color, .sp-val, .sp-sat {
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.sp-preview {
    border-radius: 3px;
    width: 44px;
    overflow: hidden;
    height: 20px;
    border: none;
}

.sp-hue {
    border: none;
    width: 3px;
    border-radius: 10px;
    margin-left: 16px;
}

.sp-dragger {
    transform: translateY(3px) translateX(3px);
    background: none !important;
}

.sp-slider,
.sp-dragger {
    position: absolute;
    top: 0;
    cursor: pointer;
    height: 11px;
    width: 11px;
    left: -6px;
    top: 4px;
    border-radius: 16px;
    border: 2px solid #fff;
    background: #363851;
    opacity: 1;
}

.sp-flat {
    margin-top: -13px;
}

// Styling Cross-Browser Compatible Range Inputs with Sass
// Github: https://github.com/darlanrod/input-range-sass
// Author: Darlan Rod https://github.com/darlanrod
// Version 1.4.1
// MIT License

$track-color: #464753 !default;
$thumb-color: #2f303e !default;

$thumb-radius: 7px !default;
$thumb-height: 14px !default;
$thumb-width: 14px !default;
$thumb-shadow-size: 0px !default;
$thumb-shadow-blur: 0px !default;
$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
$thumb-border-width: 2px !default;
$thumb-border-color: #81f0ef !default;

$track-width: 100% !default;
$track-height: 3px !default;
$track-shadow-size: 0px !default;
$track-shadow-blur: 0px !default;
$track-shadow-color: #464753 !default;
$track-border-width: 0px !default;
$track-border-color: red !default;

$track-radius: 0px !default;
$contrast: 5% !default;

@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
    box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
}

@mixin track {
    cursor: pointer;
    height: $track-height;
    transition: all .2s ease;
    width: $track-width;
}

@mixin thumb {
    @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
    background: $thumb-color;
    border: $thumb-border-width solid $thumb-border-color;
    border-radius: $thumb-radius;
    cursor: pointer;
    height: $thumb-height;
    width: $thumb-width;
}

[type='range'] {
    -webkit-appearance: none;
    margin: $thumb-height / 2 0;
    width: $track-width;

    &:focus {
        outline: 0;

        &::-webkit-slider-runnable-track {
            background: lighten($track-color, $contrast);
        }

        &::-ms-fill-lower {
            background: $track-color;
        }

        &::-ms-fill-upper {
            background: lighten($track-color, $contrast);
        }
    }

    &::-webkit-slider-runnable-track {
        @include track;
        @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius;
    }

    &::-webkit-slider-thumb {
        @include thumb;
        -webkit-appearance: none;
        margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
    }

    &::-moz-range-track {
        @include track;
        @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius;
    }

    &::-moz-range-thumb {
        @include thumb;
    }

    &::-ms-track {
        @include track;
        background: transparent;
        border-color: transparent;
        border-width: ($thumb-height / 2) 0;
        color: transparent;
    }

    &::-ms-fill-lower {
        @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
        background: darken($track-color, $contrast);
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius * 2;
    }

    &::-ms-fill-upper {
        @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius * 2;
    }

    &::-ms-thumb {
        @include thumb;
        margin-top: 0;
    }
}
select{
    display: none;
}
.select2-container--default .select2-selection--single {
    background-color: #363851;
    border: 1px solid #555877;
    border-radius: 4px;
    outline: 0;
    height: 38px;
}
.select2-results__option[aria-selected] {
    cursor: pointer;
    font-size: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    display: none;
}
.select2-search--dropdown {
    display: none;
    padding: 4px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ae88f0;
    color: white;
    /* font-size: 10px; */
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ae88f0;
}

.sp-input {
    font-size: 12px !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 10px 0 4px 0;
    width: 163px;
    background: transparent;
    border-radius: 3px;
    outline: none;
    border: 1px solid #555877 !important;
    color: #fff;
}
.select2-dropdown {
    background-color: #363851;
    border: 1px solid #555877 !important;
    border-radius: 4px !important;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: -8px;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 7px;
    right: 11px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    font-size: 10px;
    line-height: 28px;
    padding: 5px 12px;

}
.select2-container {
    width: 198px;
}
            
          
!
            
              // Default dimensions
let defPixelWidth = 10;
let defSceneHeight = 200;
let defSceneWidth = 300;
sh = defSceneHeight;
sw = defSceneWidth;
pw = defPixelWidth;

// Set up the ui
function setUI() {
    $('.menu_options__psize .w').val(defPixelWidth);
    $('.menu_options__psize .h').val(defPixelWidth);
    $('.menu_options__ssize .w').val(defSceneWidth);
    $('.menu_options__ssize .h').val(defSceneHeight);
    $('button.s').data('size',`${defSceneWidth},${defSceneHeight}`);
    $('button.m').data('size',`${defSceneWidth * 1.5},${defSceneHeight * 1.5}`);
    $('button.l').data('size',`${defSceneWidth * 2},${defSceneHeight * 2}`);
    $('button.xl').data('size',`${defSceneWidth * 2.5},${defSceneHeight * 2.5}`);
}

setUI();

// Render the scene
function drawGrid(sw, sh, pw) {
    $('.scene .row, .scene .col').html('');
    $('.scene').width(sw);
    $('.scene').height(sh);

    for(i = 0; i < sw / pw; i++) {
        $('.scene .col').append(`<div class="scene_pixelcolumn" style="width:${pw}px; height:${sh}px"></div>`);
    }

    for(i = 0; i < sh / pw; i++) {
        $('.scene .row').append(`<div class="scene_pixelrow" style="width:${sw}px; height:${pw}px"></div>`);
    }
}

drawGrid(defSceneWidth, defSceneHeight, defPixelWidth);

// Fire the render scene when input is changed
$('.menu_options__psize input.w').change(() => {
    if($('.menu_options__psize input.w').val() == '') {
        $('.menu_options__psize input.w').val('1');
    }
    if($('.scene_pixel').length != 0) {
        const r = confirm("Changing this will delete your current progress!");
        if (r == true) {
            $('.scene_pixel').remove()
            pw = $('.menu_options__psize input.w').val();
            sw = $('.menu_options__ssize input.w').val();
            sh = $('.menu_options__ssize input.h').val();
            checkAspectRatio(sw, sh, pw);
        } 
    } else {
        pw = $('.menu_options__psize input.w').val();
        sw = $('.menu_options__ssize input.w').val();
        sh = $('.menu_options__ssize input.h').val();
        checkAspectRatio(sw, sh, pw);
    }
});

function changeSceneSize(button) {
    if($('.scene_pixel').length != 0) {
        const r = confirm("Changing this will delete your current progress!");
        if (r == true) {
            if($('.tools_grid').hasClass('inactive')){
                $('.tools_grid').click();
            }

            $('.scene_pixel').remove()
            pw = $('.menu_options__psize input.w').val();
            sw = button.data('size').split(',')[0];
            sh = button.data('size').split(',')[1];
            $('button').removeClass('active');
            button.addClass('active');
            drawGrid(sw, sh, pw);
        }
    } else { 
        if($('.tools_grid').hasClass('inactive')){
            $('.tools_grid').click();
        }
        pw = $('.menu_options__psize input.w').val();
        sw = button.data('size').split(',')[0];
        sh = button.data('size').split(',')[1];
        $('button').removeClass('active');
        button.addClass('active');
        drawGrid(sw, sh, pw);
    }
}

$('button.s, button.m, button.l, button.xl').click(function() {
    button = $(this);
    changeSceneSize(button);
});


// Let's work some magic on the scene size to keep things aspect ratio
function checkAspectRatio(sw, sh, pw) {

    let nearestW = Math.ceil(sw / pw) * pw;
    let nearestH = Math.ceil(sh / pw) * pw;

    $('.menu_options__ssize input.w').val(nearestW);
    $('.menu_options__ssize input.w').val(nearestW);
    $('.menu_options__ssize input.h').val(nearestH);

    sw = $('.menu_options__ssize input.w').val();
    sh = $('.menu_options__ssize input.h').val();

    $('button.s').data('size',`${sw},${sh}`);
    $('button.m').data('size',`${sw * 1.5},${sh * 1.5}`);
    $('button.l').data('size',`${sw * 2},${sh * 2}`);
    $('button.xl').data('size',`${sw * 2.5},${sh * 2.5}`);

    drawGrid(sw, sh, pw);
}

// Toggle reflect

reflection = false;
hasReflect = ''



$('input#reflect').change(function() {
    $('.scene').toggleClass('reflect');
    $(this).prev().toggleClass('active');
    updateForm()

    if(reflection == false) {
        reflection = true;
        hasReflect = '-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 76%, white 107%);\r\n'

    } else {
        reflection = false;
        hasReflect = ''
    }
    console.log(hasReflect)

});

// Toggle grid
let grid = true;

$('.tools_grid').click(function() {
    if(grid) {
        $('.scene_pixelrow, .scene_pixelcolumn').css('box-shadow', 'none');
        $('.scene').css('border', 'none');
        $(this).addClass('inactive')
        grid = false;
    } else {
        $('.scene').css('border', '1px solid #d0baef');
        $('.scene_pixelrow').css('box-shadow', '0px 1px rgba(255,255,255, 0.2) inset, 1px 0px rgba(255,255,255, 0.2) inset')
        $('.scene_pixelcolumn').css('box-shadow', '0px 1px rgba(255,255,255, 0.2) inset, 1px 0px rgba(255,255,255, 0.2) inset')
        grid = true;
        $(this).removeClass('inactive')
    }

})

let level = 1;
let scrollLevel = 10;

function zoom() {
    level = $('.tools_zoom input').val() / 10;
    scrollLevel = $('.tools_zoom input').val();

    $('.tip').html(`x ${level}`);
    $('.tip').css('left', `${level * 102 - 110}px`);
    $('.tip').css('opacity', 1);
    $('.zoom').css('transform',`scale(${level})`);
}

// Let's get the zoom working
$('.tools_zoom input').on("input change", () => {
    zoom();
})

$('.tools_zoom input').on("change", () => {
    setTimeout(() => {
        $('.tip').css('opacity', 0);
    }, 200)
});


$('.pan').bind('mousewheel', e => {
    level = $('.tools_zoom input').val() / 10;

    if(e.originalEvent.wheelDelta /120 > 0) {
        if(scrollLevel < 30) {
            scrollLevel++
        }
    } else {
        if(scrollLevel > 10) {
            scrollLevel--
        }
    }
    $('.tools_zoom input').val(scrollLevel)
    zoom()

    setTimeout(() => {
        $('.tip').css('opacity', 0);
    }, 200)
});

// Draw

let drawing = false;
let deleting = false;

$('.scene').mousedown(e => {
    if (e.which === 1) {
        drawing = true;
        console.log('drawing')
    }
    if (e.which === 3) {
        deleting = true
    }

});

$(document).mouseup(() => {

    drawing = false;
    deleting = false;

});

$('.scene').contextmenu(e => {
    deletePixel(e, $('.scene'));
    return false;
})


document.onmousemove = e => {

    if(picking){
        $('.pickOverlay').css('left', e.clientX - 20 + 'px')
        //console.log(e.clientX)
        $('.pickOverlay').css('top', e.clientY + - 25 + 'px')
    }

    if(!pan && drawing && !picking){
        draw(e, $('.scene'));
    }


    if(deleting) {
        deletePixel(e, $('.scene'));
    }
}

$('.scene').click(function(e) {
    if(!pan && !picking){
        draw(e, $(this));
    }

});

output = '';
symY = false;
symX = false;
sym = ''
symA = ''

// Get where the pixel should be whilst taking into account scaling

function getRelativePosition(e, el) {
    div = document.getElementById("scene");
    dim = div.getBoundingClientRect();
    x = Math.floor( ((e.clientX - dim.left) / pw) / level);
    y = Math.floor(((e.clientY - dim.top) / pw) / level);
}

function addPixelsToOutput() {
    frameObject = [];

    if($('.keyframes .frame').length == 1) {
        $('.scene_pixel').each(function() {
            output = `${output}${$(this).css('left').slice(0, -2) + 'px'} ${$(this).css('top').slice(0, -2) + 'px'} ${$(this).css('background-color')}, `;
        });
    } else {
        console.log('frame')
        $('.scene .frame').each(function() {
            frame = []
            $(this).find('.scene_pixel').each(function() {
                frame.push(`${$(this).css('left').slice(0, -2) + 'px'} ${$(this).css('top').slice(0, -2) + 'px'} ${$(this).css('background-color')} `)

            })
            frameObject.push(frame)
        })

        endAnimation = []

        if(frameObject[0] == '') {

            endAnimation.push(0 + '%{box-shadow: 0}')

        } else {
            endAnimation.push(0 + '%{box-shadow: ' + frameObject[0].join() + '}')
        }

        for(i = 1; i < frameObject.length; i++) {
            if(frameObject[i] == '') {
                endAnimation.push(0 + (i * (100 / frameObject.length)) + '%{box-shadow: 0}')
                endAnimation.push(0 + (i * (100 / frameObject.length) - 1) + '%{box-shadow: 0}')
                endAnimation.push(0 + (i * (100 / frameObject.length) + 1) + '%{box-shadow: 0}')
            } else {
                endAnimation.push(0 + (i * (100 / frameObject.length)) + '%{box-shadow: ' + frameObject[i].join() + '}')
                endAnimation.push(0 + (i * (100 / frameObject.length) - 1) + '%{box-shadow: ' + frameObject[i - 1].join() + '}')
                endAnimation.push(0 + (i * (100 / frameObject.length) + 1) + '%{box-shadow: ' + frameObject[i].join() + '}')
            }

        }

        if(frameObject[0] == '') {

            endAnimation.push(100 + '%{box-shadow: ' + frameObject[0].join() + '}')

        } else {
            endAnimation.push(100 + '%{box-shadow:0}')
        }

        if(frameObject[frameObject.length - 1] == '') {
            endAnimation.push(99 + '%{box-shadow:0}')

        } else {
            endAnimation.push(99 + '%{box-shadow: ' + frameObject[frameObject.length - 1].join() + '}')
        }

        animationTime = (1000 / fpsInput) * frameObject.length + 'ms';

        console.log(animationTime)

    }

}

function checkSymetry(el) {
    // If symetry is on for y plane
    if(symY == true && symX == false) {
        if(pw % 2 != true){
            sym = (sh) - (y + 1) * pw
        } else {
            sym = (sh) - (y - 0.5) * pw;
        }
        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${relativex}px; top:${sym}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);
    }

    // If symetry is on for x plane
    if(symX == true && symY == false) {
        sym = (sw) - (x + 1) * pw
        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${sym}px; top:${relativey}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);
    }

    if(symX == true && symY == true) {
        sym = (sw) - (x + 1) * pw;
        symA = (sh) - (y + 1) * pw;
        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${relativex}px; top:${symA}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);
        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${sym}px; top:${relativey}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);

        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${sym}px; top:${symA}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);
    }
}

function draw(e, el) {
    // Calculate positions
    getRelativePosition(e, el);

    output = ''; // Reset our end CSS

    $('.pcount .c').html($('.scene_pixel').length)
    let f = $('.activeF').data('frame'); // This will need to change
    console.log(f)
    makeCanvasPreview(f)


    if(x < (sw / pw) && y < (sh / pw) && x > -1 && y > -1) { // Check if not out of bounds
        // Remove any overlapping pixels
        $('.frame' + activeFrame + ' .scene_pixel').each(function() {
            if($(this).css('top') == `${y * pw}px` && $(this).css('left') == `${x * pw}px`) {
                $(this).remove();
            }
        })

        relativex = (x * pw); // Cater for scale
        relativey = (y * pw); // Cater for scale

        // Add pixel
        console.log(activeFrame)
        $('.frame' + activeFrame + ' .pixels').append(`<div class="scene_pixel" style="left:${relativex}px; top:${relativey}px; width:${pw}px; position: absolute; height:${pw}px; background:${currentColor}"></div>`);

        checkSymetry(el);

        // Add all scene pixels to an output variable which is injected in to the form post for a new pen
        addPixelsToOutput()
    }
    // Inject data
    updateForm();
}

function deletePixel(e, el) {
    // Calculate positions
    getRelativePosition(e, el);
    output = '';  // Reset our end CSS

    $('.pcount .c').html($('.scene_pixel').length)

    // Remove pixels
    $('.frame' + activeFrame + ' .scene_pixel').each(function() {
        if($(this).css('top') == `${y * defPixelWidth}px` && $(this).css('left') == `${x * defPixelWidth}px`) {
            $(this).remove();
        }
    });

    // Add all scene pixels to an output variable which is injected in to the form post for a new pen
    addPixelsToOutput();

    // Inject data
    updateForm();
}

// Make panable
$('.picker').draggable();

$('.tools_symx').click(function(){
    $(this).toggleClass('inactive')    

    if(symX == false) {
        symX = true;
        $('.scene').append('<div class="symx"></div>')
    } else {
        symX = false;
        $('.symx').remove();
    }
    console.log(symX)
})

$('.tools_symy').click(function(){
    $(this).toggleClass('inactive')    

    if(symY == false) {
        symY = true;
        $('.scene').append('<div class="symy"></div>')
    } else {
        symY = false;
        $('.symy').remove();
    }
    console.log(symX)
})
// Animations
$('select').change(function(){
    $('.scene').removeClass('Spin');
    $('.scene').removeClass('Bounce')
    $('.scene').removeClass('Wobble')
    $('.scene').addClass($(this).val())
})

// Let's initiate our color pickers
var currentColor = '#ffffff';
let bgColor = '#2f303e';

$("#colorpicker").spectrum({
    color: "ffffff",
    preferredFormat: "hex",
    flat: true,
    showInput: true,
    move(color) {
        currentColor = color.toHexString(); // #ff0000
        $('.output').html(currentColor);
        $('.picker .col').css('background', currentColor);
    }
});

$("#bgpicker").spectrum({
    color: "2f303e",
    preferredFormat: "hex",
    showInput: true,
    move(color) {
        bgColor = color.toHexString(); // #ff0000
        $('body').css('background', bgColor);
        $('.coutput').html(bgColor);
    }
});

$('.name').keyup(() => {
    updateForm()
})
function updateForm() {

    console.log(' There are ' + $('.keyframes .frame').length)
    if($('.keyframes .frame').length == 1) {
        console.log('test')
        CSS = `$baseSize: ${pw}px; \/\/ Change base size\r\n$pixelWidth: ${sw};\r\n$pixelHeight: ${sh};\r\n$bg: ${bgColor};\r\n$dither: 10;\r\n$r: #ea1818;\r\n$black: #c38f4e;\r\n$w: #ffffff;\r\n\r\n\/\/ x, y, c\r\n$shadows:(  \r\n);\r\n\r\n$end-shadow: '';\r\n\r\n@each $x, $y, $c in $shadows {\r\n    $rand: random($dither);\r\n    $shadow-x: $baseSize * $x; \r\n    $shadow-y: $baseSize * $y; \r\n    $shadow: $shadow-x $shadow-y 0 $c;\r\n    $end-shadow: $end-shadow + $shadow + ', ';\r\n    @debug($end-shadow);\r\n}\r\n\r\n%abs {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    margin: auto;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n%scene {\r\n    @extend %abs;\r\n\r\n    ${hasReflect}width: $pixelWidth + px;\r\n    height: $pixelHeight + px;\r\n    background: $bg;\r\n    \r\n    &::after {\r\n        position: relative;\r\n        box-shadow: ${output}; \r\n        width: $baseSize;\r\n        height: $baseSize;\r\n        display: block;\r\n        content: '';\r\n    }\r\n}\r\n\r\nbody {\r\n    @extend %scene;\r\n}`  
    } else {
        console.log('test2')
        CSS = `$baseSize: ${pw}px; \/\/ Change base size\r\n$pixelWidth: ${sw};\r\n$pixelHeight: ${sh};\r\n$bg: ${bgColor};\r\n$dither: 10;\r\n$r: #ea1818;\r\n$black: #c38f4e;\r\n$w: #ffffff;\r\n\r\n\/\/ x, y, c\r\n$shadows:(  \r\n);\r\n\r\n$end-shadow: '';\r\n\r\n@each $x, $y, $c in $shadows {\r\n    $rand: random($dither);\r\n    $shadow-x: $baseSize * $x; \r\n    $shadow-y: $baseSize * $y; \r\n    $shadow: $shadow-x $shadow-y 0 $c;\r\n    $end-shadow: $end-shadow + $shadow + ', ';\r\n    @debug($end-shadow);\r\n}\r\n\r\n%abs {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    margin: auto;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n%scene {\r\n    @extend %abs;\r\n\r\n    ${hasReflect}width: $pixelWidth + px;\r\n    height: $pixelHeight + px;\r\n    background: $bg;\r\n    \r\n    &::after {\r\n        position: relative;\r\n        animation: anim ${animationTime} infinite; \r\n        width: $baseSize;\r\n        height: $baseSize;\r\n        display: block;\r\n        content: '';\r\n    }\r\n}\r\n\r\nbody {\r\n    @extend %scene;\r\n} @keyframes anim {${endAnimation.join('')}}`  
    }


    CSS.replace(/"/g, "&quot;").replace(/'/g, "&apos;");

    const data = {
        title              : $('.name').val(),
        css                : CSS,
        css_pre_processor  : "scss",
        html : "<!-- Made using the No Div Pixel Art Scene Builder by Jamie Coulter https://codepen.io/jcoulterdesign/pen/oqPNXL -->"
    };

    const JSONstring = JSON.stringify(data);

    $('.change').val(JSONstring);
}

const el = $('body');
var CSS = "";


const data = {
    title              : "",
};

const JSONstring = 
      JSON.stringify(data);

const form = 
      `<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input class="change" type="hidden" name="data" value='${JSONstring}'><input type="submit" width="40" height="40" value="Export to new pen"></form>`;

$('.tools_export_code').append(form);

function makeCanvas(f) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = sw;
    canvas.height = sh;
    
    


    let data = `<svg xmlns="http://www.w3.org/2000/svg" style="background:${bgColor};" width="1000" height="1000"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">${$('.frame' + f + ' .pixels').html()}</div></foreignObject></svg>`;
    data = encodeURIComponent(data);
    const img = new Image();
    img.onload = () => {
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(blob => {
            const newImg = document.createElement('img');
            const url = URL.createObjectURL(blob);
            window.open(url);
        });
    }
    img.src = `data:image/svg+xml,${data}`

    return img;
}



function makeCanvasPreview(frame) {
    console.log('f is' + frame);
    const canvas = document.getElementById('canvas' + frame);
    console.log(canvas)
    const ctx = canvas.getContext('2d');
    canvas.width = sw;
    canvas.height = sh;


    let data = `<svg xmlns="http://www.w3.org/2000/svg" style="background:${bgColor};" width="1000" height="1000"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">${$('.frame' + frame).html()}</div></foreignObject></svg>`;
    data = encodeURIComponent(data);
    const img = new Image();
    img.onload = () => {
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(blob => {
            const newImg = document.createElement('img');
            const url = URL.createObjectURL(blob);
        });
    }
    img.src = `data:image/svg+xml,${data}`

    return img;
}

$('.tools_export_png').click(() => {
    makeCanvas($('.activeF').data('frame'));
})

pan = false;
$('.pan').draggable();
$('.pan').draggable('disable');



$('.tools_pan').click(function() {
    $(this).toggleClass('inactive')
    if(pan == false) {
        $('.pan').draggable('enable');
        $('.pan').css('cursor','move');
        pan = true
    } else {
        pan = false
        $('.pan').css('cursor','default');
        $('.pan').draggable('disable');
    }

})
$(document).keydown(event => {
    if ( event.which == 32 ) {
        pan = true
        $('.tools_pan').removeClass('inactive')
        $('.pan').draggable('enable');
        $('.pan').css('cursor','move');
    }
    if ( event.which == 80 ) {
        $('.pick').click();
    }

    if ( event.which == 71 ) {
        $('.tools_grid').click();
    }

    if ( event.which == 67 ) {
        $('.tools_center').click();
    }

    if ( event.which == 88 ) {
        $('.tools_symx').click();
    }

    if ( event.which == 89 ) {
        $('.tools_symy').click();
    }
})

$(document).keyup(event => {
    if ( event.which == 32 ) {
        pan = false   
        $('.tools_pan').addClass('inactive')
        $('.pan').css('cursor','default');
        $('.pan').draggable('disable');
    }
})

$('.tools_center').click(function() {
    $('.pan').css({'left': '0px'})
    $('.pan').css({'top': '0px'})
    $('.pan').css({'transition': 'transform .5s, top .5s, left .5s'})

    setTimeout(function(){
        $('.pan').css({'transition': 'transform 0s, top 0s, left 0s'})

    }, 1000)

})
picking = false;


$('.pick').click(function(e){
    picking = true;
    $('.pickOverlay').css('background', bgColor)
    $('.pickOverlay').show()
    $('.fa-crosshairs').addClass('active')
    $('.pickOverlay').css('left', e.clientX - 20 + 'px')
    //console.log(e.clientX)
    $('.pickOverlay').css('top', e.clientY + - 25 + 'px')
})



$(document).on('click', '.scene_pixel', function(){
    if(picking){
        $("#colorpicker").spectrum("set", $(this).css('background'));
        currentColor = $(this).css('background')
        picking = false;
        $('.pickOverlay').hide()
        $('.fa-crosshairs').removeClass('active')
    }
})

$(document).on('click', '.pan', function(){
    if(picking){
        picking = false;
        $('.pickOverlay').hide()
        $('.fa-crosshairs').removeClass('active')
    }
})

$(document).on('mouseenter', '.scene_pixel', function(){
    if(picking){
        console.log('tesdt')
        $('.pickOverlay').css('background', $(this).css('background'))
    }
})

$('select').select2();
$(document).on('mouseleave', '.scene_pixel', function() {
    if(picking){
        console.log('tesdt')
        $('.pickOverlay').css('background', bgColor)
    }
})

// keyframes

frames = 1;
activeFrame = 1;
onionSkinOn = true;

function onionSkin(e){
    if(onionSkinOn) {
        $('.scene .frame').css('opacity',1)
        $('.scene .frame' + (e - 1)).show().css('opacity', 0.4)
        console.log($('.scene .frame' + (e-1)))
    } else {
        $('.scene .frame' + (e - 1)).hide()
        $('.scene .frame').css('opacity',1)
    }
}


$('#onion').click(function(){
    if(onionSkinOn) {
        onionSkinOn = false
    } else {
        onionSkinOn = true
    }

    onionSkin($('.activeF').data('frame'))
})

function buildKeyframes() {
    animation = 0;
    base = 100 / $('.scene .frame').length;


    console.log(animation);
}

animationProgress = 0;
fpsInput = 30;

$('.controls input.f').change(function(){
    stopAnimation()
    fpsInput = $(this).val();
})

function playAnimation(){
    fps = 1000 / fpsInput
    $('.scene .frame').css('opacity',1)
    anim = setInterval(function() {
        animationProgress++;
        if(animationProgress < $('.scene .frame').length + 1){
            $('.scene .frame').hide();
            $('.scene .frame' + animationProgress).show();
        } else {
            animationProgress = 0;
        }
        console.log(animationProgress)
    }, fps)    
}

playing = false;

$('.play').click(function(){

    if(playing) {
        stopAnimation()
        playing = false;
        $(this).html('<i class="fa fa-play"></i>')
    } else {
        playAnimation()
        playing = true;
        $(this).html('<i class="fa fa-stop"></i>')
    }
})
frame = 1;
$('.stop').click(function(){
    stopAnimation()
})

$('.keyframes .frames .frame1').append('<canvas id="canvas' + 1 + '"></canvas>')


function stopAnimation() {
    clearInterval(anim);
}

$('.wrap').draggable({ axis: "x" })

$('.fa-copy').click(function(){
    frames++;
    $('.scene .frame').hide();
    $('.scene').append('<div class="frame frame' + frames +'"><div class="pixels">' + $('.scene .frame' + $(this).parent().data('frame')).html() + '</div></div>');
    

    $('.activeF').removeClass('activeF')
    $('.keyframes .frames .wrap').append('<div data-frame="' + frames +'" class="frame activeF frame' + frames +'"><div class="frameTitle">Frame #' + frames + '</div><i class="fa fa-trash"> </i><i class="fa fa-copy"> </i></div>');
    $('.keyframes .frames .frame' + frames).append('<canvas id="canvas' + frames + '"></canvas>')
    activeFrame = frames;
    onionSkin(frames);
    buildKeyframes();
     makeCanvasPreview(parseInt($(this).parent().data('frame') + 1))
})

$('.keyframes .add').click(function() {
    frames++;
    $('.scene .frame').hide();
    $('.scene').append('<div class="frame frame' + frames +'"><div class="pixels"></div></div>');
    $('.activeF').removeClass('activeF')
    $('.keyframes .frames .wrap').append('<div data-frame="' + frames +'" class="frame activeF frame' + frames +'"><div class="frameTitle">Frame #' + frames + '</div><i class="fa fa-trash"> </i><i class="fa fa-copy"> </i></div>');
    $('.keyframes .frames .frame' + frames).append('<canvas id="canvas' + frames + '"></canvas>')
    activeFrame = frames;
    onionSkin(frames);
    buildKeyframes();
});

$(document).on('click', '.keyframes .frame', function() {
    $('.activeF').removeClass('activeF');
    $(this).addClass('activeF')

    let clicked = $(this).data('frame');

    $('.scene .frame').hide();
    $('.scene .frame' + clicked).show();
    activeFrame = clicked;
    onionSkin(clicked);
    buildKeyframes();
});

$('.fa.fa-step-forward').click(function(){
    $('.activeF').next().click()
})

$('.fa.fa-fast-forward').click(function(){
    $('.keyframes .frame:last').click()
})

$('.fa.fa-fast-backward').click(function(){
    $('.keyframes .frame:first').click()
})

$('.fa.fa-step-backward').click(function(){
    $('.activeF').prev().click()
})

// clone
// delete
// Rearrange
// prevent overdragging












// Width of canvas shouldnt reset when pixel size is changed. It needs to multiply inside the check aspect function
// Symetry only works on even pixels
// Output reflection to css
// reflect works but only if you draw after the selection
// Export animation to new pen
// key commands shouldnt fire on an input
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console