test/testcard.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body { background-color: #ccc }
      canvas {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>

    <div id="window"></div>
    <!-- <script src="../build/simple2d.js"></script> -->
    <script>var S2D = {};</script>
    <script src="../src/simple2d.js"></script>
    <script src="../src/shapes.js"></script>
    <script src="../src/image.js"></script>
    <script src="../src/sprite.js"></script>
    <script src="../src/text.js"></script>
    <script src="../src/sound.js"></script>
    <script src="../src/music.js"></script>
    <script src="../src/input.js"></script>
    <script src="../src/window.js"></script>
    <script src="../src/gl.js"></script>
    <script>


var font = "sans-serif";
var font_size = 20;
var sprite_step = 0;

var pointer = {
  x: null,
  y: null
}

var click_pointer = {
  x: null,
  y: null
}

var mouse_click = false;


function on_key(e) {
  switch (e.type) {
    case S2D.KEY_DOWN:
      console.log("Key down: " + e.key);
      if (e.key == "Escape") S2D.Close(win);
      break;

    case S2D.KEY_HELD:
      console.log("Key held: " + e.key);
      break;

    case S2D.KEY_UP:
      console.log("Key up: " + e.key);
      break;
  }
}


function print_mouse_button(e) {
  switch (e) {
    case S2D.MOUSE_LEFT:
      console.log("Button left");
      break;
    case S2D.MOUSE_MIDDLE:
      console.log("Button middle");
      break;
    case S2D.MOUSE_RIGHT:
      console.log("Button right");
      break;
    case S2D.MOUSE_X1:
      console.log("Button X1");
      break;
    case S2D.MOUSE_X2:
      console.log("Button X2");
      break;
  }
}


function on_mouse(e) {
  console.log("=== Mouse Event ===");

  switch (e.type) {
    case S2D.MOUSE_DOWN:
      console.log("Mouse down");
      print_mouse_button(e.button);
      mouse_click = true;
      click_pointer.x = e.x;
      click_pointer.y = e.y;
      break;

    case S2D.MOUSE_UP:
      console.log("Mouse up");
      print_mouse_button(e.button);
      break;

    case S2D.MOUSE_SCROLL:
      console.log("Mouse scroll");
      if (e.direction == S2D.MOUSE_SCROLL_NORMAL) {
        console.log("Direction normal");
      } else if (e.direction == S2D.MOUSE_SCROLL_INVERTED) {
        console.log("Direction inverted");
      }
      console.log("delta x: "+ e.delta_x +"\ndelta y: "+ e.delta_y);
      break;

    case S2D.MOUSE_MOVE:
      console.log("Mouse movement");
      console.log("delta x: "+ e.delta_x +"\ndelta y: "+ e.delta_y);
      break;
  }

  if (e.type != S2D.MOUSE_SCROLL) console.log("x: "+ e.x +", y: "+ e.y);
}


function update() {
  pointer.x = win.mouse.x;
  pointer.y = win.mouse.y;
}


function render() {

  S2D.DrawQuad( 0,   0, 1, 0, 0, 1,
               50,   0, 1, 0, 0, 1,
               50, 100, 1, 0, 0, 1,
                0, 100, 1, 0, 0, 1);

  S2D.DrawQuad( 50,   0, 0, 1, 0, 1,
               100,   0, 0, 1, 0, 1,
               100, 100, 0, 1, 0, 1,
                50, 100, 0, 1, 0, 1);

  S2D.DrawQuad(100,   0, 0, 0, 1, 1,
               150,   0, 0, 0, 1, 1,
               150, 100, 0, 0, 1, 1,
               100, 100, 0, 0, 1, 1);

  // Color combinations

  S2D.DrawQuad(150,  0, 0, 1, 1, 1,
               200,  0, 0, 1, 1, 1,
               200, 50, 0, 1, 1, 1,
               150, 50, 0, 1, 1, 1);

  S2D.DrawQuad(200,  0, 1, 0, 1, 1,
               250,  0, 1, 0, 1, 1,
               250, 50, 1, 0, 1, 1,
               200, 50, 1, 0, 1, 1);

  S2D.DrawQuad(250,  0, 1, 1, 0, 1,
               325,  0, 1, 1, 0, 1,
               325, 50, 1, 1, 0, 1,
               250, 50, 1, 1, 0, 1);

  S2D.DrawQuad(150, 50,  1, .5, 0, 1,
               200, 50,  1, .5, 0, 1,
               200, 100, 1, .5, 0, 1,
               150, 100, 1, .5, 0, 1);

  S2D.DrawQuad(200,  50, .5, 1, 0, 1,
               250,  50, .5, 1, 0, 1,
               250, 100, .5, 1, 0, 1,
               200, 100, .5, 1, 0, 1);

  S2D.DrawQuad(250,  50, 1, 0, .5, 1,
               325,  50, 1, 0, .5, 1,
               325, 100, 1, 0, .5, 1,
               250, 100, 1, 0, .5, 1);

  // White to black gradient

  S2D.DrawQuad(  0, 100, 1, 1, 1, 1,
               600, 100, 0, 0, 0, 1,
               600, 125, 0, 0, 0, 1,
                 0, 125, 1, 1, 1, 1);

  // Color gradient

  S2D.DrawQuad(  0, 125, 1, 0, 0, 1,
               600, 125, 0, 1, 0, 1,
               600, 175, 0, 0, 1, 1,
                 0, 175, 1, 1, 0, 1);

  // Transparancy

  S2D.DrawQuad(  0, 165, 1, 1, 1, 0,
               600, 165, 1, 1, 1, 1,
               600, 200, 1, 1, 1, 1,
                 0, 200, 1, 1, 1, 0);

  // Triangles

  S2D.DrawTriangle(25, 200, 1, 0, 0, 1,
                   50, 250, 1, 0, 0, 1,
                    0, 250, 1, 0, 0, 1);

  S2D.DrawTriangle( 75, 200, 0, 1, 0, 1,
                   100, 250, 0, 1, 0, 1,
                    50, 250, 0, 1, 0, 1);

  S2D.DrawTriangle(125, 200, 0, 0, 1, 1,
                   150, 250, 0, 0, 1, 1,
                   100, 250, 0, 0, 1, 1);

  S2D.DrawTriangle(175, 200, 1, 0, 0, 1,
                   200, 250, 0, 1, 0, 1,
                   150, 250, 0, 0, 1, 1);

  S2D.DrawTriangle(175, 200, 1, 0, 0, 1,
                   200, 250, 0, 1, 0, 1,
                   150, 250, 0, 0, 1, 1);

  S2D.DrawQuad(200, 200, 1, 1, 1, .5,
               250, 200, 1, 1, 1, .5,
               250, 250, 1, 1, 1, .5,
               200, 250, 1, 1, 1, .5);

  S2D.DrawTriangle(225, 200, 1, 1, 1, 1,
                   250, 250, 0, 0, 0, 1,
                   200, 250, 1, 1, 1, 0);

  // Quadrilaterals

  S2D.DrawQuad(300, 200, 1, 0, 0, 1,
               350, 200, 0, 1, 0, 1,
               300, 250, 0, 0, 1, 1,
               250, 250, 1, 1, 0, 1);

  S2D.DrawQuad(250, 200, 1, 1, 1, 0,
               300, 200, 1, 1, 1, 0,
               350, 250, 1, 1, 1, 1,
               300, 250, 1, 1, 1, 0);

  // Lines

  S2D.DrawLine(
    354, 204, 397, 247,
    11,
    1, 1, 1, 1,
    1, 1, 1, 1,
    1, 1, 1, 1,
    1, 1, 1, 1
  );

  S2D.DrawLine(
    395, 205, 355, 245,
    15,
    1, 0, 0, 0.5,
    0, 1, 0, 0.5,
    0, 0, 1, 0.5,
    1, 0, 1, 0.5
  );

  // Images

  S2D.DrawImage(img_png);
  S2D.DrawImage(img_jpg);
  S2D.DrawImage(img_bmp);
  S2D.DrawImage(img_clr_r);
  S2D.DrawImage(img_clr_g);
  S2D.DrawImage(img_clr_b);

  // Sprites

  if (win.frames % 50 == 0) {
    if (sprite_step == 0) {
      S2D.ClipSprite(spr, 0, 0, 50, 50);
      sprite_step++;
    } else if (sprite_step == 1) {
      S2D.ClipSprite(spr, 50, 0, 50, 50);
      sprite_step++;
    } else if (sprite_step == 2) {
      S2D.ClipSprite(spr, 100, 0, 50, 50);
      sprite_step++;
    } else if (sprite_step == 3) {
      S2D.ClipSprite(spr, 150, 0, 50, 50);
      sprite_step = 0;
    }
  }

  S2D.DrawSprite(spr);

  // Text

  S2D.DrawText(txt_clr_r);
  S2D.DrawText(txt_clr_g);
  S2D.DrawText(txt_clr_b);
  S2D.DrawText(default_font);

  // Window stats

  S2D.DrawText(fps);
  if (win.frames % 20 == 0) S2D.SetText(fps_val, win.fps.toFixed(3));
  S2D.DrawText(fps_val);

  // Mouse positions

  S2D.DrawQuad(pointer.x - 5, pointer.y - 7,  1, 1, 1, 1,
               pointer.x + 5, pointer.y - 7,  1, 1, 1, 1,
               pointer.x + 5, pointer.y + 4,  1, 1, 1, 1,
               pointer.x - 5, pointer.y + 4,  1, 1, 1, 1);

  if (mouse_click) {
    S2D.DrawQuad(click_pointer.x - 9, click_pointer.y - 11, 0, 1, 0, 1,
                 click_pointer.x + 9, click_pointer.y - 11, 0, 1, 0, 1,
                 click_pointer.x + 9, click_pointer.y + 8,  0, 1, 0, 1,
                 click_pointer.x - 9, click_pointer.y + 8,  0, 1, 0, 1);
    mouse_click = false;
  }
}


var win = S2D.CreateWindow(
  "Test Card", 600, 500, update, render, "window", {}
);

win.on_key   = on_key;
win.on_mouse = on_mouse;

var img_png = S2D.CreateImage("media/image.png");
img_png.x = 300;
img_png.y = 0;

var img_jpg = S2D.CreateImage("media/image.jpg");
img_jpg.x = 400;
img_jpg.y = 0;

var img_bmp = S2D.CreateImage("media/image.bmp");
img_bmp.x = 500;
img_bmp.y = 0;

var img_clr_r = S2D.CreateImage("media/colors.png");
img_clr_r.x = 400;
img_clr_r.y = 200;
img_clr_r.width  = 50;
img_clr_r.height = 25;
img_clr_r.color.r = 1.0;
img_clr_r.color.g = 0.3;
img_clr_r.color.b = 0.3;
img_clr_r.color.a = 1.0;

var img_clr_g = S2D.CreateImage("media/colors.png");
img_clr_g.x = 400;
img_clr_g.y = 225;
img_clr_g.width  = 25;
img_clr_g.height = 25;
img_clr_g.color.r = 0.3;
img_clr_g.color.g = 1.0;
img_clr_g.color.b = 0.3;
img_clr_g.color.a = 1.0;

var img_clr_b = S2D.CreateImage("media/colors.png");
img_clr_b.x = 425;
img_clr_b.y = 225;
img_clr_b.width  = 25;
img_clr_b.height = 25;
img_clr_b.color.r = 0.3;
img_clr_b.color.g = 0.3;
img_clr_b.color.b = 1.0;
img_clr_b.color.a = 1.0;

var spr = S2D.CreateSprite("media/sprite_sheet.png");
spr.x = 450;
spr.y = 200;
// Change size of sprite
//   spr.width  = 100;
//   spr.height = 100;
// Change color of sprite
//   spr.color.r = 1.0;
//   spr.color.g = 1.0;
//   spr.color.b = 1.0;
//   spr.color.a = 1.0;

var txt_clr_r = S2D.CreateText(font, "R", font_size);
txt_clr_r.x = 44;
txt_clr_r.y = 202;
txt_clr_r.color.r = 1.0;
txt_clr_r.color.g = 0.0;
txt_clr_r.color.b = 0.0;
txt_clr_r.color.a = 1.0;

var txt_clr_g = S2D.CreateText(font, "G", font_size);
txt_clr_g.x = 92;
txt_clr_g.y = 202;
txt_clr_g.color.r = 0.0;
txt_clr_g.color.g = 1.0;
txt_clr_g.color.b = 0.0;
txt_clr_g.color.a = 1.0;

var txt_clr_b = S2D.CreateText(font, "B", font_size);
txt_clr_b.x = 144;
txt_clr_b.y = 202;
txt_clr_b.color.r = 0.0;
txt_clr_b.color.g = 0.0;
txt_clr_b.color.b = 1.0;
txt_clr_b.color.a = 1.0;

var default_font = S2D.CreateText("", "Default font", font_size);
default_font.x = 5;
default_font.y = 270;

var fps = S2D.CreateText(font, "FPS:", font_size);
fps.x = 460;
fps.y = 470;

var fps_val = S2D.CreateText(font, "", font_size);
fps_val.x = 515;
fps_val.y = 470;

S2D.Show(win);


    </script>
  </body>
</html>