webglmusti 0.0.0

package/src/App/puzzle_box/app.ts

@@ -0,0 +1,10 @@
+import * as WebGL from "./../../WebGL/globals";
+import { PuzzleEngine } from "./engine";
+import { PuzzleRenderer } from "./renderer";
+
+type Int32 = number;
+export function newPuzzleApp(w: Int32, h:Int32): WebGL.App.App<PuzzleEngine>{
+  const engine = new PuzzleEngine();
+  const renderer = new PuzzleRenderer(w, h);
+  return new WebGL.App.App(engine, renderer);
+}

package/src/App/puzzle_box/engine.ts

@@ -0,0 +1,374 @@
+import * as WebGL from "./../../WebGL/globals";
+import * as Options from "./../../Interface/options";
+import * as Button from "./../../Interface/button";
+import * as InterfaceElement from "./../../Interface/interface_element";
+
+type Int32 = number;
+type Float = number;
+
+class IdGrid{
+  width: Int32;
+  height: Int32;
+  object_id: (Int32 | undefined)[];
+  constructor(w: Int32, h: Int32){
+    this.width = w;
+    this.height = h;
+    this.object_id = Array.from({length: this.height*this.width}, () => undefined);
+  }
+  getId(x: Int32, y: Int32) : (Int32 | undefined){
+    return this.object_id[x + y*this.width];
+  }
+}
+
+export class ShapeGridInterface{
+  x: Int32;
+  y: Int32;
+  cell_size: Int32;
+  grid: ShapeIdGrid;
+  constructor(x: Int32, y: Int32, size: Int32, grid: ShapeIdGrid){
+    this.x = x;
+    this.y = y;
+    this.cell_size = size;
+    this.grid = grid;
+  }
+  isInside(point: WebGL.Matrix.Point2D): boolean{
+    const in_x = this.x < point.x && point.x < this.x+this.interfaceWidth();
+    const in_y = this.y < point.y && point.y < this.y+this.interfaceHeight();
+    return in_x && in_y;
+  }
+  interfaceWidth(): Int32{
+    return this.cell_size*this.grid.width;
+  }
+  interfaceHeight(): Int32{
+    return this.cell_size*this.grid.height;
+  }
+  getCoord(point: WebGL.Matrix.Point2D): Coord | undefined{
+    if(!this.isInside(point)) return undefined;
+    const x = Math.floor((point.x-this.x)/this.cell_size);
+    const y = Math.floor((point.y-this.y)/this.cell_size);
+    return {x, y};
+  }
+  trueCoord(point: WebGL.Matrix.Point2D): WebGL.Matrix.Point2D | undefined{
+    return new WebGL.Matrix.Point2D((point.x-this.x)/this.cell_size, (point.y-this.y)/this.cell_size);
+  }
+}
+
+class ShapeIdGrid extends IdGrid{
+  isFree(x: Int32, y: Int32): boolean{
+    return this.object_id[x+y*this.width] == undefined;
+  }
+  canFitShape(shape: GridShapeInstance, x: Int32, y: Int32): boolean{
+    //test borders
+    if(x < 0 || y < 0 || x+shape.width > this.width || y+shape.height > this.height){
+      return false;
+    }
+
+    //test individual parts
+    for(let py = 0; py < shape.height; py++){
+      for(let px = 0; px < shape.width; px++){
+        if(shape.getPart(px, py) && !this.isFree(x+px, y+py)){
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  addShape(shape: GridShapeInstance, x: Int32, y: Int32){
+    for(let py = 0; py < shape.height; py++){
+      for(let px = 0; px < shape.width; px++){
+        if(shape.getPart(px, py)){
+          this.object_id[(x+px)+(y+py)*this.width] = shape.id;
+        }
+      }
+    }
+  }
+}
+
+
+export const RotationEnum = {
+  None: 0,
+  Clockwise: 1,
+  Opposite: 2,
+  AntiClockwise: 3
+} as const;
+
+export type Rotation = (typeof RotationEnum)[keyof typeof RotationEnum];
+
+//shape made out of grid pieces
+export class GridShape{
+  width: Int32;
+  height: Int32;
+  parts: boolean[];
+
+  constructor(w: Int32, h: Int32, parts?: boolean[]){
+    this.width = w;
+    this.height = h;
+    this.parts = parts != undefined ? parts : Array.from({length: this.height*this.width}, () => false);
+  }
+  addPart(x: Int32, y: Int32){
+    this.parts[this.getIndexKey(x, y)] = true;
+  }
+  private getIndexKey(x: Int32, y: Int32){
+    return x+(y*this.width);
+  }
+  hasPartAt(x: Int32, y: Int32){
+    return this.parts[this.getIndexKey(x, y)];
+  }
+
+  static equals(s1: GridShape, s2: GridShape){
+
+  }
+}
+
+export class GridShapeInstance{
+  static current_id = 0;
+  id: Int32;
+  shape: GridShape;
+  private rotation: Rotation;
+  width: Int32;
+  height: Int32;
+  constructor(shape: GridShape){
+    this.id = GridShapeInstance.current_id;
+    GridShapeInstance.current_id++;
+    this.shape = shape;
+    this.rotation = RotationEnum.None;
+    this.width = this.shape.width;
+    this.height = this.shape.height;
+  }
+  setRotation(rotation: Rotation){
+    this.rotation = rotation;
+    if(this.rotation == RotationEnum.Clockwise || this.rotation == RotationEnum.AntiClockwise){
+      this.width = this.shape.height;
+      this.height = this.shape.width;
+    }else{
+      this.width = this.shape.width;
+      this.height = this.shape.height;
+    }
+  }
+  isInside(x: Int32, y: Int32){
+    const in_x = 0 <= x && x < this.width;
+    const in_y = 0 <= y && y < this.height;
+    return in_x && in_y;
+  }
+  getTrueCoord(x: Int32, y: Int32, rotation: Rotation=RotationEnum.None): {x: Int32, y: Int32}{
+    switch(rotation){
+      case RotationEnum.AntiClockwise:
+        return {x: this.height-1-y, y: x};
+      case RotationEnum.Clockwise:
+        return {x: y, y: this.width-1-x};
+      case RotationEnum.Opposite:
+        return {x: this.width-1-x, y: this.height-1-y};
+    }
+    return {x, y};
+  }
+  getIndexKey(x: Int32, y: Int32, rotation: Rotation=RotationEnum.None){
+    switch(rotation){
+      case RotationEnum.AntiClockwise:
+        return (this.height-1-y) + x*this.height;
+      case RotationEnum.Clockwise:
+        return (y) + (this.width-1-x)*this.height;
+      case RotationEnum.Opposite:
+        return (this.width-1-x) + (this.height-1-y)*this.width;
+    }
+    return x + y*this.width;
+  }
+  getPart(x: Int32, y: Int32): boolean | undefined{
+    if(!this.isInside(x, y)) return undefined;
+    return this.shape.parts[this.getIndexKey(x, y, this.rotation)];
+  }
+}
+
+
+export class ShapeLabel extends InterfaceElement.InterfaceElement{
+  shape: GridShape;
+  is_hovered: boolean;
+  onSelect: ((shape: GridShape) => void) | undefined;
+  constructor(x: Int32, y: Int32, width: Int32, height: Int32, shape: GridShape, on_select?: () => void){
+    super(x, y, width, height);
+    this.shape = shape;
+    this.is_hovered = false;
+    this.onSelect = on_select;
+  }
+  onMouseDown(){
+    if(this.is_hovered){
+      if(this.onSelect) this.onSelect(this.shape);
+    }
+  }
+  onMouseOver(point: WebGL.Matrix.Point2D){
+    this.is_hovered = this.isInside(point);
+  }
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, colour_shader: WebGL.Shader.MVPColourProgram){
+    const bg = this.is_hovered ? WebGL.Colour.ColourUtils.blue() : WebGL.Colour.ColourUtils.red();
+    this.drawBackground(vp, colour_shader, bg);
+    const green = WebGL.Colour.ColourUtils.green();
+
+    //draw shape
+    const mx = this.x+(this.width*0.5);
+    const my = this.y+(this.height*0.5);
+    const cell_size = 24;
+    const rect_size = 20;
+    const clear_border = (cell_size-rect_size)*0.5;
+    let y = my-(cell_size*this.shape.height*0.5);
+    const sx = mx-(cell_size*this.shape.width*0.5);
+    let gx = sx;
+    for(let py = 0; py < this.shape.height; py++){
+      gx = sx;
+      for(let px = 0; px < this.shape.width; px++){
+        if(this.shape.hasPartAt(px, py)){
+          WebGL.WebGL.drawColourRect(vp, colour_shader, 
+            gx+clear_border, y+clear_border, 
+            rect_size, rect_size, green);
+        }
+        gx += cell_size;
+      }
+      y += cell_size;
+    }
+    //WebGL.WebGL.drawColourRect(vp, colour_shader, this.x, )
+  }
+}
+
+type LayoutPosition = WebGL.Matrix.Point2D;
+
+class GridLayout{
+  start_x: Int32;
+  start_y: Int32;
+  cell_width: Int32;
+  cell_height: Int32;
+  layout_width: Int32;
+  layout_height: Int32;
+  constructor(start_x: Int32, start_y: Int32, 
+    cell_width: Int32, cell_height: Int32, 
+    layout_width: Int32, layout_height: Int32){
+    this.start_x = start_x;
+    this.start_y = start_y;
+    this.cell_width = cell_width;
+    this.cell_height = cell_height;
+    this.layout_width = layout_width;
+    this.layout_height = layout_height;
+  }
+  firstPosition(): LayoutPosition{
+    return new WebGL.Matrix.Point2D(this.start_x, this.start_y);
+  }
+  next(position: LayoutPosition): LayoutPosition | undefined{
+    let next_x = position.x + this.cell_width;
+    let next_y = position.y;
+    if(next_x > this.start_x + this.layout_width){
+      next_y = position.y + this.cell_height;
+      if(next_y > this.start_y + this.layout_height){
+        return undefined;
+      }
+    }
+    return new WebGL.Matrix.Point2D(next_x, next_y);
+  }
+}
+type Coord = {
+  x: Int32,
+  y: Int32
+}
+
+export class PuzzleEngine extends WebGL.App.BaseEngine{
+  option_select: Options.DropdownOptions;
+  mouse_point: WebGL.Matrix.Point2D | undefined;
+
+  my_shapes: GridShape[]; 
+
+  shape_label_layout: GridLayout;
+  shape_labels: ShapeLabel[];
+
+  dragged_shape: Int32 | undefined;
+
+  grid: ShapeIdGrid;
+  interface_grid: ShapeGridInterface;
+
+  hovered_coord: Coord | undefined;
+
+  pieces_on_grid: Map<Int32, GridShapeInstance>;
+  constructor(){
+    super();
+    this.option_select = new Options.DropdownOptions(100, 100, 150, 25, ["hello", "good", "bye"]);
+    this.my_shapes = this.createShapes();
+
+    this.shape_label_layout = new GridLayout(100, 100, 120, 80, 500, 500);
+    this.shape_labels = [];
+
+    let position: LayoutPosition | undefined = this.shape_label_layout.firstPosition();
+    for(const shape of this.my_shapes){
+      if(position == undefined) break;
+      const label = new ShapeLabel(position.x, position.y, 
+        this.shape_label_layout.cell_width, 
+        this.shape_label_layout.cell_height,
+        shape
+      );
+      this.shape_labels.push(label);
+      position = this.shape_label_layout.next(position);
+    }
+
+    this.grid = new ShapeIdGrid(10, 10);
+    this.interface_grid = new ShapeGridInterface(100, 250, 25, this.grid);
+    this.hovered_coord = undefined;
+
+    this.pieces_on_grid = new Map();
+  }
+  createShapes(): GridShape[]{
+    const one = new GridShape(1, 1, [true]);
+    const two = new GridShape(2, 1, [true, true]);
+    const l = new GridShape(3, 2, [false, false, true, true, true, true]);
+    const t = new GridShape(3, 2, [false, true, false, true, true, true]);
+    return [one, two, l, t];
+  }
+
+  override handleKeyDown(ev: KeyboardEvent){};
+  //to override
+  override handleKeyUp(ev: KeyboardEvent){};
+  //to override
+  override handleMouseMove(ev: MouseEvent){
+    const point = new WebGL.Matrix.Point2D(ev.clientX, ev.clientY);
+    this.mouse_point = point;
+    this.option_select.onMouseOver(point);
+
+    for(const label of this.shape_labels){
+      label.onMouseOver(point);
+    }
+    this.hovered_coord = this.interface_grid.getCoord(point);
+    //console.log(this.hovered_coord);
+  };
+  //to override
+  override handleMouseDown(ev: MouseEvent){
+    if(this.mouse_point != undefined){  
+      this.option_select.onMouseDown(this.mouse_point);
+    }
+    for(let i = 0; i < this.shape_labels.length; i++){
+      const label = this.shape_labels[i];
+      label.onMouseDown();
+      if(label.is_hovered){
+        this.dragged_shape = i;
+      }
+    }
+  };
+  //to override
+  override handleMouseUp(ev: MouseEvent){
+    const shape = 0;
+    if(this.mouse_point != undefined){ 
+      const coord = this.interface_grid.trueCoord(this.mouse_point);
+      console.log(coord);
+      if(this.dragged_shape != undefined && coord != undefined){
+        const shape_label = this.shape_labels[this.dragged_shape];
+        coord.x -= (shape_label.shape.width*0.5 - 0.5);
+        coord.y -= (shape_label.shape.height*0.5 - 0.5);
+        const x = Math.floor(coord.x);
+        const y = Math.floor(coord.y);
+        console.log({x, y});
+        const new_shape = new GridShapeInstance(shape_label.shape);
+        if(this.grid.canFitShape(new_shape, x, y)){
+          this.grid.addShape(new_shape, x, y);
+        }else{
+          console.log("no room for shape");
+        }
+      }
+    }
+
+
+
+    this.dragged_shape = undefined;
+  };
+}

package/src/App/puzzle_box/renderer.ts

@@ -0,0 +1,102 @@
+import * as WebGL from "./../../WebGL/globals";
+import * as PEngine from "./engine";
+import { PuzzleEngine } from "./engine";
+
+type Int32 = number;
+
+export class PuzzleRenderer extends WebGL.App.SimpleAppRenderer<PuzzleEngine>{
+  colour_shader: WebGL.Shader.MVPColourProgram;
+
+  my_shape_colour: WebGL.Colour.ColourRGB;
+  grid_colours: WebGL.Colour.ColourRGB[];
+  constructor(w: Int32, h: Int32){
+    super(w, h);
+    this.font_names.push("font16-Sheet.png");
+
+    this.colour_shader = new WebGL.Shader.MVPColourProgram();
+    this.my_shape_colour = WebGL.Colour.ColourUtils.red();
+    this.grid_colours = [];
+  }
+  render(engine: PuzzleEngine){
+    engine.option_select.draw(this.orthographic, this.colour_shader, this.text_drawer);
+
+    //this.drawStaticShapeLabel(engine.my_shapes[2], 200, 200);
+
+    this.drawShapeGrid(engine, engine.interface_grid);
+
+    for(const label of engine.shape_labels){
+      this.drawShapeLabel(label);
+    }
+
+    if(engine.dragged_shape != undefined && engine.mouse_point != undefined){
+      this.drawShape(engine.shape_labels[engine.dragged_shape].shape, engine.mouse_point.x, engine.mouse_point.y);
+    }
+    if(engine.hovered_coord != undefined){
+      const id = engine.grid.getId(engine.hovered_coord.x, engine.hovered_coord.y);
+      if(id != undefined){
+        this.text_drawer.drawText(this.orthographic, 50, 50, id.toString(), 15);
+      }
+    }
+  }
+
+  fillColours(n_colours: Int32){
+    while(this.grid_colours.length < n_colours){
+      this.grid_colours.push(WebGL.Colour.ColourUtils.random());
+    }
+  }
+
+  drawShapeGrid(engine: PuzzleEngine, grid: PEngine.ShapeGridInterface){
+    const grey = WebGL.Colour.ColourUtils.grey();
+    WebGL.WebGL.drawColourRect(this.orthographic, this.colour_shader, 
+      grid.x, grid.y, 
+      grid.interfaceWidth(), grid.interfaceHeight(), 
+      grey
+    );
+    const black = WebGL.Colour.ColourUtils.black();
+    const red = WebGL.Colour.ColourUtils.red();
+    const rect_size = grid.cell_size - 4;
+    const clear_border = (grid.cell_size-rect_size)*0.5;
+    for(let gy = 0; gy < grid.grid.height; gy++){
+      for(let gx = 0; gx < grid.grid.width; gx++){
+        const id = grid.grid.object_id[gx+gy*grid.grid.width];
+        let col = black;
+        if(id != undefined){
+          this.fillColours(id+1);
+          col = this.grid_colours[id];
+        }
+        WebGL.WebGL.drawColourRect(this.orthographic, this.colour_shader, 
+          grid.x+gx*grid.cell_size+clear_border, grid.y+gy*grid.cell_size+clear_border, 
+          rect_size, rect_size, col
+        );
+        
+      }
+    }
+  }
+
+  drawShapeLabel(label: PEngine.ShapeLabel){
+    label.draw(this.orthographic, this.colour_shader);
+  }
+  drawShape(shape: PEngine.GridShape, x: Int32, y: Int32){
+    const mx = x+(shape.width*0.5);
+    const my = y+(shape.height*0.5);
+    const cell_size = 24;
+    const rect_size = 20;
+    const clear_border = (cell_size-rect_size)*0.5;
+    let sy = my-(cell_size*shape.height*0.5);
+    const sx = mx-(cell_size*shape.width*0.5);
+    let gx = sx;
+    for(let py = 0; py < shape.height; py++){
+      gx = sx;
+      for(let px = 0; px < shape.width; px++){
+        if(shape.hasPartAt(px, py)){
+          WebGL.WebGL.drawColourRect(this.orthographic, this.colour_shader, 
+            gx+clear_border, sy+clear_border, 
+            rect_size, rect_size, this.my_shape_colour);
+        }
+        gx += cell_size;
+      }
+      sy += cell_size;
+    }
+  }
+  
+}

package/src/App/puzzle_box/test.test.ts

@@ -0,0 +1,49 @@
+import {test, expect} from "vitest";
+import * as Puzzle from "./engine";
+
+test("grid_shape", () => {
+  const shape = new Puzzle.GridShape(3, 2);
+  shape.addPart(0, 0);
+  shape.addPart(1, 0);
+  shape.addPart(2, 0);
+  shape.addPart(2, 1);
+
+  const i1 = new Puzzle.GridShapeInstance(shape);
+
+  expect(i1.getPart(0, 0)).toBe(true);
+  expect(i1.getPart(1, 0)).toBe(true);
+  expect(i1.getPart(2, 0)).toBe(true);
+  expect(i1.getPart(0, 1)).toBe(false);
+  expect(i1.getPart(1, 1)).toBe(false);
+  expect(i1.getPart(2, 1)).toBe(true);
+
+  const i2 = new Puzzle.GridShapeInstance(shape);
+  i2.setRotation(Puzzle.RotationEnum.Clockwise);
+  expect(i2.getPart(0, 0)).toBe(false);
+  expect(i2.getPart(1, 0)).toBe(true);
+  expect(i2.getPart(0, 1)).toBe(false);
+  expect(i2.getPart(1, 1)).toBe(true);
+  expect(i2.getPart(0, 2)).toBe(true);
+  expect(i2.getPart(1, 2)).toBe(true);
+  expect(i2.getPart(2, 2)).toBe(undefined);
+
+  const i3 = new Puzzle.GridShapeInstance(shape);
+  i3.setRotation(Puzzle.RotationEnum.AntiClockwise);
+  expect(i3.getPart(0, 0)).toBe(true);
+  expect(i3.getPart(1, 0)).toBe(true);
+  expect(i3.getPart(0, 1)).toBe(true);
+  expect(i3.getPart(1, 1)).toBe(false);
+  expect(i3.getPart(0, 2)).toBe(true);
+  expect(i3.getPart(1, 2)).toBe(false);
+  expect(i3.getPart(2, 2)).toBe(undefined);
+
+  const i4 = new Puzzle.GridShapeInstance(shape);
+  i4.setRotation(Puzzle.RotationEnum.Opposite);
+  expect(i4.getPart(0, 0)).toBe(true);
+  expect(i4.getPart(1, 0)).toBe(false);
+  expect(i4.getPart(2, 0)).toBe(false);
+  expect(i4.getPart(0, 1)).toBe(true);
+  expect(i4.getPart(1, 1)).toBe(true);
+  expect(i4.getPart(2, 1)).toBe(true);
+  expect(i4.getPart(2, 2)).toBe(undefined);
+});