JSFiddle - React, Tailwind, and code Playground

by Simo990

HTML

<div id = "coverand1_button">Go to page 2</div>

<div id="book_case">
<canvas id="pageflip-canvas"></canvas>
    <div id="pages">
        <section>
            <div id = "page1" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
         <section>
            <div id = "page2" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page3" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page4" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page5" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page6" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page7" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page8" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page9" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page10" class="svgpage"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg></div>
        </section>
     <section>
            <div id = "page11" class="svgpage"><svg...

CSS

#book_case {
    background: url("http://localhost/epson/assets/img/book.png") no-repeat;
    background-size: 100%;
    position: relative;
    width: 1132px;
    height: 431px;
    margin-left: 0px;
    background-size: 100%;
}

#pages section {
    background-color: gray;
    bacground-size: 100%;
    display: block;
    width: 1132px;
    height: 426px;
    position: absolute;
    left: 0px;
    top: 5px;
    overflow: hidden;
}

#pageflip-canvas {
    position: absolute;
    z-index: 0;
}

.svgpage {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    background-color: white;
    display: block;
}

JavaScript

var BOOK_WIDTH = 1132;
var BOOK_HEIGHT = 431;

// Dimensions of one page in the book
var PAGE_WIDTH = 566;
var PAGE_HEIGHT = 426;

// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = (BOOK_HEIGHT - PAGE_HEIGHT) / 2;

// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 0;

var page = 0;

var canvas = document.getElementById("pageflip-canvas");
//alert(canvas);
var context = canvas.getContext("2d");



var mouse = {
    x: 0,
    y: 0
};

var flips = [];

var book = document.getElementById("book_case");

// List of all the page elements in the DOM
var pages = book.getElementsByTagName("section");

// Organize the depth of our pages and create the flip definitions
for (var i = 0, len = pages.length; i < len; i++) {
    pages[i].style.zIndex = len - i;

    flips.push({
        // Current progress of the flip (left -1 to right +1)
        progress: 1,
        // The target value towards which progress is always moving
        target: 1,
        // The page DOM element related to this flip
        page: pages[i],
        // True while the page is being dragged
        dragging: false
    });
}
var total_pages = flips.length - 1;
//console.log(total_pages);
console.log(flips);

// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + (CANVAS_PADDING * 2);
canvas.height = BOOK_HEIGHT + (CANVAS_PADDING * 2);

// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";

// Render the page flip 60 times a second
setInterval(render, 1000 / 20);
var page2_button = document.getElementById("coverand1_button");
page2_button.addEventListener("mousedown", page2Down, false);
page2_button.addEventListener("mouseup", page2Up, false);

function page2Down(event) {
    //page = 1;
    //alert("in");
    //console.log(page);
    if (page != 1) {
        var canvas = document.getElementById("pageflip-canvas");
 ...