{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://giraffe.js/schema/graphics.json",
  "title": "Giraffe.js Graphics Definition Schema",
  "description": "JSON schema for defining Giraffe.js graphics scenes and objects",
  "type": "object",
  "properties": {
    "canvas": {
      "$ref": "#/definitions/Canvas"
    },
    "objects": {
      "type": "array",
      "items": {
        "$ref": "#/definitions/GraphicsObject"
      }
    },
    "animations": {
      "type": "array",
      "items": {
        "$ref": "#/definitions/Animation"
      }
    },
    "interactions": {
      "type": "array",
      "items": {
        "$ref": "#/definitions/Interaction"
      }
    }
  },
  "required": ["canvas", "objects"],
  "definitions": {
    "Canvas": {
      "type": "object",
      "properties": {
        "id": {
          "type": "string",
          "description": "Canvas element ID"
        },
        "width": {
          "type": "number",
          "minimum": 1
        },
        "height": {
          "type": "number",
          "minimum": 1
        },
        "backgroundColor": {
          "type": "string",
          "pattern": "^(#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})|rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)|rgba\\(\\d+,\\s*\\d+,\\s*\\d+,\\s*[01]?\\.?\\d*\\)|[a-zA-Z]+)$"
        },
        "interactive": {
          "type": "boolean",
          "default": false
        },
        "animated": {
          "type": "boolean",
          "default": false
        },
        "frameRate": {
          "type": "number",
          "minimum": 1,
          "maximum": 120,
          "default": 30
        }
      },
      "required": ["id", "width", "height"]
    },
    "Point": {
      "type": "object",
      "properties": {
        "x": {"type": "number"},
        "y": {"type": "number"}
      },
      "required": ["x", "y"]
    },
    "Color": {
      "type": "string",
      "pattern": "^(#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})|rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)|rgba\\(\\d+,\\s*\\d+,\\s*\\d+,\\s*[01]?\\.?\\d*\\)|[a-zA-Z]+)$"
    },
    "LineStyle": {
      "type": "object",
      "properties": {
        "width": {
          "type": "number",
          "minimum": 0
        },
        "cap": {
          "type": "string",
          "enum": ["butt", "round", "square"]
        },
        "join": {
          "type": "string",
          "enum": ["bevel", "round", "miter"]
        },
        "dash": {
          "type": "array",
          "items": {"type": "number"}
        }
      }
    },
    "Shadow": {
      "type": "object",
      "properties": {
        "color": {"$ref": "#/definitions/Color"},
        "blur": {"type": "number", "minimum": 0},
        "offsetX": {"type": "number"},
        "offsetY": {"type": "number"}
      }
    },
    "Gradient": {
      "type": "object",
      "oneOf": [
        {
          "properties": {
            "type": {"const": "linear"},
            "color1": {"$ref": "#/definitions/Color"},
            "color2": {"$ref": "#/definitions/Color"},
            "x1": {"type": "number"},
            "y1": {"type": "number"},
            "x2": {"type": "number"},
            "y2": {"type": "number"}
          },
          "required": ["type", "color1", "color2", "x1", "y1", "x2", "y2"]
        },
        {
          "properties": {
            "type": {"const": "radial"},
            "color1": {"$ref": "#/definitions/Color"},
            "color2": {"$ref": "#/definitions/Color"},
            "centerX": {"type": "number"},
            "centerY": {"type": "number"},
            "radius": {"type": "number", "minimum": 0}
          },
          "required": ["type", "color1", "color2", "centerX", "centerY", "radius"]
        }
      ]
    },
    "BaseGraphicsObject": {
      "type": "object",
      "properties": {
        "id": {"type": "string"},
        "x": {"type": "number"},
        "y": {"type": "number"},
        "visible": {"type": "boolean", "default": true},
        "rotation": {"type": "number", "default": 0},
        "scaleX": {"type": "number", "default": 1},
        "scaleY": {"type": "number", "default": 1},
        "fillColor": {
          "oneOf": [
            {"$ref": "#/definitions/Color"},
            {"$ref": "#/definitions/Gradient"}
          ]
        },
        "strokeColor": {"$ref": "#/definitions/Color"},
        "lineStyle": {"$ref": "#/definitions/LineStyle"},
        "shadow": {"$ref": "#/definitions/Shadow"},
        "alpha": {"type": "number", "minimum": 0, "maximum": 1, "default": 1}
      },
      "required": ["x", "y"]
    },
    "GraphicsObject": {
      "allOf": [
        {"$ref": "#/definitions/BaseGraphicsObject"},
        {
          "type": "object",
          "properties": {
            "type": {
              "type": "string",
              "enum": [
                "circle",
                "rectangle",
                "roundedRectangle",
                "line",
                "arc",
                "text",
                "picture",
                "polygon",
                "pixelCanvas",
                "composite"
              ]
            }
          },
          "required": ["type"]
        }
      ],
      "oneOf": [
        {
          "properties": {
            "type": {"const": "circle"},
            "radius": {"type": "number", "minimum": 0}
          },
          "required": ["radius"]
        },
        {
          "properties": {
            "type": {"const": "rectangle"},
            "width": {"type": "number", "minimum": 0},
            "height": {"type": "number", "minimum": 0}
          },
          "required": ["width", "height"]
        },
        {
          "properties": {
            "type": {"const": "roundedRectangle"},
            "width": {"type": "number", "minimum": 0},
            "height": {"type": "number", "minimum": 0},
            "cornerRadius": {"type": "number", "minimum": 0}
          },
          "required": ["width", "height", "cornerRadius"]
        },
        {
          "properties": {
            "type": {"const": "line"},
            "x2": {"type": "number"},
            "y2": {"type": "number"}
          },
          "required": ["x2", "y2"]
        },
        {
          "properties": {
            "type": {"const": "arc"},
            "startAngle": {"type": "number"},
            "sweepAngle": {"type": "number"},
            "radius": {"type": "number", "minimum": 0}
          },
          "required": ["startAngle", "sweepAngle", "radius"]
        },
        {
          "properties": {
            "type": {"const": "text"},
            "text": {"type": "string"},
            "fontSize": {"type": "number", "minimum": 1},
            "fontFamily": {"type": "string", "default": "Arial"},
            "textAlign": {
              "type": "string",
              "enum": ["left", "center", "right"],
              "default": "left"
            },
            "textBaseline": {
              "type": "string",
              "enum": ["top", "middle", "bottom", "alphabetic"],
              "default": "alphabetic"
            }
          },
          "required": ["text", "fontSize"]
        },
        {
          "properties": {
            "type": {"const": "picture"},
            "src": {"type": "string"},
            "width": {"type": "number", "minimum": 0},
            "height": {"type": "number", "minimum": 0}
          },
          "required": ["src"]
        },
        {
          "properties": {
            "type": {"const": "polygon"},
            "points": {
              "type": "array",
              "items": {"$ref": "#/definitions/Point"},
              "minItems": 3
            }
          },
          "required": ["points"]
        },
        {
          "properties": {
            "type": {"const": "pixelCanvas"},
            "width": {"type": "number", "minimum": 1},
            "height": {"type": "number", "minimum": 1},
            "pixelData": {
              "type": "array",
              "items": {
                "type": "array",
                "items": {"type": "integer", "minimum": 0, "maximum": 255},
                "minItems": 3,
                "maxItems": 4
              }
            }
          },
          "required": ["width", "height"]
        },
        {
          "properties": {
            "type": {"const": "composite"},
            "children": {
              "type": "array",
              "items": {"$ref": "#/definitions/GraphicsObject"}
            }
          },
          "required": ["children"]
        }
      ]
    },
    "Animation": {
      "type": "object",
      "properties": {
        "id": {"type": "string"},
        "targetObjectId": {"type": "string"},
        "type": {
          "type": "string",
          "enum": [
            "flipOutX",
            "flipInX", 
            "flipOutY",
            "flipInY",
            "moveSequence",
            "rotationSequence",
            "explodeSequence",
            "custom"
          ]
        },
        "frames": {"type": "integer", "minimum": 1},
        "loop": {"type": "boolean", "default": false},
        "autoStart": {"type": "boolean", "default": true}
      },
      "required": ["targetObjectId", "type", "frames"],
      "allOf": [
        {
          "if": {"properties": {"type": {"const": "moveSequence"}}},
          "then": {
            "properties": {
              "matrix": {
                "type": "array",
                "items": {"$ref": "#/definitions/Point"}
              }
            },
            "required": ["matrix"]
          }
        },
        {
          "if": {"properties": {"type": {"const": "rotationSequence"}}},
          "then": {
            "properties": {
              "steps": {"type": "number"}
            },
            "required": ["steps"]
          }
        },
        {
          "if": {"properties": {"type": {"const": "custom"}}},
          "then": {
            "properties": {
              "animationFunction": {
                "type": "string",
                "description": "JavaScript function body for custom animation"
              }
            },
            "required": ["animationFunction"]
          }
        }
      ]
    },
    "Interaction": {
      "type": "object",
      "properties": {
        "id": {"type": "string"},
        "targetObjectId": {"type": "string"},
        "eventType": {
          "type": "string",
          "enum": [
            "click",
            "mouseDown",
            "mouseUp",
            "mouseMove",
            "mouseEnter",
            "mouseLeave",
            "drag",
            "keyDown",
            "keyUp"
          ]
        },
        "handler": {
          "type": "string",
          "description": "JavaScript function body for event handler"
        },
        "draggable": {"type": "boolean", "default": false}
      },
      "required": ["targetObjectId", "eventType", "handler"]
    }
  },
  "examples": [
    {
      "canvas": {
        "id": "gameCanvas",
        "width": 800,
        "height": 600,
        "backgroundColor": "lightblue",
        "interactive": true,
        "animated": true,
        "frameRate": 60
      },
      "objects": [
        {
          "id": "background",
          "type": "rectangle",
          "x": 0,
          "y": 0,
          "width": 800,
          "height": 600,
          "fillColor": "lightblue"
        },
        {
          "id": "bouncingBall",
          "type": "circle",
          "x": 100,
          "y": 100,
          "radius": 25,
          "fillColor": "red",
          "strokeColor": "darkred"
        },
        {
          "id": "paddle",
          "type": "roundedRectangle",
          "x": 350,
          "y": 550,
          "width": 100,
          "height": 20,
          "cornerRadius": 10,
          "fillColor": "brown",
          "strokeColor": "black"
        },
        {
          "id": "scoreText",
          "type": "text",
          "x": 10,
          "y": 30,
          "text": "Giraffe.js Demo",
          "fontSize": 24,
          "fontFamily": "Arial",
          "strokeColor": "black"
        }
      ],
      "animations": [
        {
          "id": "ballBounce",
          "targetObjectId": "bouncingBall",
          "type": "custom",
          "frames": 1000,
          "loop": true,
          "animationFunction": "this.x += this.vx || 4; this.y += this.vy || 3; if (this.x < 25 || this.x > 775) this.vx *= -1; if (this.y < 25 || this.y > 575) this.vy *= -1;"
        }
      ],
      "interactions": [
        {
          "id": "paddleDrag",
          "targetObjectId": "paddle",
          "eventType": "drag",
          "handler": "",
          "draggable": true
        },
        {
          "id": "ballClick",
          "targetObjectId": "bouncingBall", 
          "eventType": "click",
          "handler": "alert('Ball clicked!');"
        }
      ]
    }
  ]
}