Swipe snap

Hi i was wondering if anyone could help me fix this problem.
I want to make all the pages in my game snap to position (you will see what i mean if you run the code).
I have done it with all of them except for the first one to the right from where u start.

--x=768
--y=1024
displayMode(FULLSCREEN_NO_BUTTONS)
supportedOrientations(PORTRAIT_ANY)
function setup()
    rectMode(CENTER)
    dx=0
end

function draw()
    background(147, 97, 27, 255)
    strokeWidth(38)
    stroke(127, 127, 127, 255)

    --page 0
    fill(255, 255, 255, 255)
    rect(WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    fill(255, 0, 0, 255)
    font("Copperplate-Bold")
    fontSize(70)
    text("ANIMAL KINGDOM",WIDTH/2+dx,HEIGHT/1.3)
    
    --page -2
    fill(255, 255, 255, 255)
    rect(-WIDTH/2-WIDTH+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    
    --page -1
    rect(-WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    
    --page +1
    fill(17, 194, 66, 255)
    rect(WIDTH+WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    
    --page +2
    fill(17, 194, 66, 255)
    rect(WIDTH*2+WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    
    strokeWidth(10)
    fill(212, 209, 156, 255)
    rect(WIDTH/2,HEIGHT/2-60,WIDTH+22,100)
    noStroke()
    rect(WIDTH/2+dx,HEIGHT/2-60+dx,WIDTH,150)
    fill(255, 255, 0, 241)
    rect(WIDTH/2,HEIGHT-60,WIDTH,120)
    fill(0, 0, 0, 255)
    text("$500",WIDTH/2,HEIGHT-60)

    --dx==right side of screen
    if scroll then
        dx=dx+mv
        if dx>WIDTH*2 then
            dx=WIDTH*2
            scroll=false
        end
        if dx<-WIDTH*2 then
            dx=-WIDTH*2
            scroll=false
        end
        
        --left of homescreen
        if dx>-50 and dx<50 then
            dx=0
            scroll=false
        end
        
        if dx>1486 and dx<1586 then
            dx=1536
            scroll=false
        end
        
        --left of +1
        if dx>718 and dx<818 then
            dx=768
            scroll=false
        end
        
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
        mv=t.deltaX
    end
    if t.state==ENDED then
        scroll=true
    end
end

If anyone knows how to fix this it would be greatly appreciated

@Klupa56 Try this. Made a few changes so you don’t have to do all the page calculations.

EDIT: You should be able to add as many pages to the left or right without changing the snap calculations.


displayMode(FULLSCREEN_NO_BUTTONS)
supportedOrientations(PORTRAIT_ANY)

function setup()
    rectMode(CENTER)
    dx=0
    page=0
end

function draw()
    background(147, 97, 27, 255)
    strokeWidth(38)
    stroke(127, 127, 127, 255)

    --page 0
    fill(255, 255, 255, 255)
    rect(WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)
    fill(255, 0, 0, 255)
    font("Copperplate-Bold")
    fontSize(70)
    text("ANIMAL KINGDOM",WIDTH/2+dx,HEIGHT/1.3)

    --page -2
    fill(255, 255, 255, 255)
    rect(-WIDTH/2-WIDTH+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)

    --page -1
    rect(-WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)

    --page +1
    fill(17, 194, 66, 255)
    rect(WIDTH+WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)

    --page +2
    fill(17, 194, 66, 255)
    rect(WIDTH*2+WIDTH/2+dx,HEIGHT/2-60,WIDTH+50,HEIGHT-120)

    strokeWidth(10)
    fill(212, 209, 156, 255)
    rect(WIDTH/2,HEIGHT/2-60,WIDTH+22,100)
    noStroke()
    rect(WIDTH/2+dx,HEIGHT/2-60+dx,WIDTH,150)
    fill(255, 255, 0, 241)
    rect(WIDTH/2,HEIGHT-60,WIDTH,120)
    fill(0, 0, 0, 255)
    text("$500",WIDTH/2,HEIGHT-60)

    if scroll then
        dx=dx+mv
        if mv>0 and dx>page*WIDTH then
            dx=page*WIDTH
            scroll=false
        end
        if mv<0 and dx<page*WIDTH then
            dx=page*WIDTH
            scroll=false
        end
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
        mv=t.deltaX
    end
    if t.state==ENDED then
        scroll=true
        if mv>0 then
            page=page+1
        else
            page=page-1
        end
    end
end

@Klupa56 Actually the snap code I have above can be reduced to the code below.

    if scroll then
        dx=dx+mv
        if mv>0 and dx>page*WIDTH or mv<0 and dx<page*WIDTH then
            dx=page*WIDTH
            scroll=false
        end
    end