implementing styles (that works) + Text + some fixes (#9)

* implement first version of docs with mkdocs (only the content will be to update and the ci script if there's a problem now)

* setup build project that will be published on npmjs + the updates needed on the build for that

* update docs for the new graphic drawing api

* fix types

* add content on all index.md for documentation

* fix typos + remove useless comas + put imports in alphabetical order

* fix pb in tests servers + add doc link in both package.json + rename setShortcutHandler in setKeyboardHandler

* improve styles system + implement Text

* improve api signatures (graphics + keyboard events)

* edit docs content to fit with the current version of cazan + improve some api signatures (styles)

* edit docs + jsdoc + add 2022-2024 for licenses

Author: Welpike

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 AeliaDev & cazan contributors
+Copyright (c) 2022-2024 AeliaDev & cazan contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dist/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 AeliaDev & cazan contributors
+Copyright (c) 2022-2024 AeliaDev & cazan contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dist/package.json

@@ -19,5 +19,5 @@
   "bugs": {
     "url": "https://github.com/AeliaDev/cazan.js/issues"
   },
-  "homepage": "https://github.com/AeliaDev/cazan.js"
+  "homepage": "https://aeliadev.github.io/cazan.js"
 }

docs/community/licence.md

@@ -3,7 +3,7 @@
 ````
 MIT License
 
-Copyright (c) 2023 AeliaDev & cazan contributors
+Copyright (c) 2024 AeliaDev & cazan contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docs/events/keyboard.md

@@ -7,7 +7,7 @@ In this page we'll use the ``cazan.events.keyboard`` namespace.
 !!!example
     There's a little example:
     ````js
-    keyboard.setShortcutHandler({
+    keyboard.setKeyboardHandler({
         on: 'keydown', //(1)!
         shortcutCallback: (event) => event.key === 'ArrowLeft', //(2)!
         callback: () => { //(3)!
@@ -19,25 +19,25 @@ In this page we'll use the ``cazan.events.keyboard`` namespace.
     })
     ````
 
-    1. Define the type of the keyboard listener (`keydown` or `keyup`).
+    1. Define the type of the keyboard listener (`keydown` or `keyup`). By default, it's 'keydown'.
     2. That's here that you define the keys to press, so this function must return a boolean.
     3. The function that will be called if the keys are pressed.
 
     This example consists of moving of 10px on the left a rectangle when the left arrow is pressed.
 
 !!! warning
-    If you want to use a shortcut with ctrl, you should put ``(event.ctrlKey || event.metaKey)`` for multiplatform compatibility.
+    If you want to use a shortcut with ``ctrl``, you should put ``(event.ctrlKey || event.metaKey)`` for multiplatform compatibility.
 
 
 ## Reference
 
-``SetKeyboardShortcutInterface`` is used for typing ``keyboard.setShortcutHandler()`` params.
+``SetKeyboardHandlerInterface`` is used for typing ``keyboard.setKeyboardHandler()`` params.
 
 ````ts
-interface SetKeyboardShortcutInterface {
-    on: string & ('keyup' | 'keydown')
+interface SetKeyboardHandlerInterface {
+    on?: string & ('keyup' | 'keydown')
     /**
-     * Define the key combination of the shortcut here.
+     * Define the key combination of the event here.
      * More information on how to set custom keyboard shortcuts : https://stackoverflow.com/a/60279187/21402860
      *
      * ------------------------------------------------------------------------------------------

docs/events/popups.md

@@ -8,7 +8,7 @@ You can use the cazan I/O API to use popups. We are using the ``cazan.events.io`
 
 ### ``io.showMsg()``
 
-Use it when you want to tell to the user an important message, such an announcement or an error, for example.
+Use it when you want to tell to the user an important message, such as an announcement or an error, for example.
 
 ````js
 await io.showMsg({title: "myGame", msg: 'Unknown error', btnText: "Ok"})
@@ -80,12 +80,12 @@ By default, cazan applies a default style on popups;
 In fact, it appends a `<style id="cazan-popup-style" text="text/css">` in the end of the `<head>` of your HTML document.
 
 !!!tip
-    But if you define manually this HTML tag and putting in custom CSS to customize the popups, cazan won't override it.
+    But if you define manually this HTML tag and putting in custom CSS to customize the popups, Cazan won't override it, and your popup will be customized.
 
 !!! warning
     Attention: you can customize everything you want but if you want that it keeps working, don't customize `display`, `position` or `z-index`, these properties are needed because they will be used by cazan.
 
-## References
+## Reference
 
 - I/O API: ``IOEventInterface`` is used for typing ``io.showMsg()``, ``io.getUserConfirm()`` and ``io.getUserInput()`` params.
 ````ts

docs/graphics/circle.md

@@ -6,11 +6,11 @@ We'll use the ``cazan.graphics`` namespace here.
 
 Little example:
 ````js
-let myCircle = new graphics.Circle(
-    game, 
-    {x: 540, y: 100}, //(1)!
-    25 //(2)!
-)
+let myCircle = new graphics.Circle({
+    game: game,
+    position: {x: 540, y: 100}, //(1)!
+    radius: 25 //(2)!
+})
 ````
 
 1. The center of the circle.
@@ -30,19 +30,25 @@ class Circle extends Graphic implements CurveInterface, ImageHandlingInterface {
     private image?: CanvasImageSource
     private drawingOptions: CurveDrawingOptionsInterface
 
-    constructor(
-        game: Game,
-        position: Position,
-        private radius: number,
-        srcImage?: string,
-        toDisplay?: boolean,
-        drawingOptions?: CurveDrawingOptionsInterface
-    ) {
-    }
+    constructor(options: CircleConstructorInterface) {}
 
     setRadius(radius: number): void {}
 
     getRadius(): number {}
 }
 ````
 
+Information about the constructor:
+
+````ts
+interface CircleConstructorInterface {
+    game: Game,
+    position: Position,
+    radius: number,
+    styles?: GenericGraphicStylesInterface,
+    srcImage?: string,
+    toDisplay?: boolean,
+    drawingOptions?: CurveDrawingOptionsInterface
+}
+````
+

docs/graphics/ellipse.md

@@ -6,12 +6,12 @@ We'll use the ``cazan.graphics`` namespace here.
 
 Little example:
 ````js
-let myEllispe = new graphics.Ellipse(
-    game, 
-    {x: 540, y: 100}, //(1)!
-    25, //(2)!
-    15, //(3)!
-)
+let myEllispe = new graphics.Ellipse({
+    game: game, 
+    position: {x: 540, y: 100}, //(1)!
+    radiusX: 25, //(2)!
+    radiusY: 15, //(3)!
+})
 ````
 
 1. The center of the ellipse.
@@ -27,21 +27,14 @@ rad and an end circle different from 2pi rad (the circle is not complete).
 For other further information, see the page about ``Graphic``, ``CurveInterface`` and ``CurveDrawingOptionsInterface``.
 
 ````ts
-export class Ellipse extends Graphic implements CurveInterface {
+class Ellipse extends Graphic implements CurveInterface {
     private drawingOptions: CurveDrawingOptionsInterface = {
         startAngle: 0,
         endAngle: Math.PI * 2,
         rotation: Math.PI / 4
     }
 
-    constructor(
-        game: Game,
-        position: Position,
-        protected radiusX: number,
-        protected radiusY: number,
-        toDisplay?: boolean,
-        drawingOptions?: CurveDrawingOptionsInterface
-    ) {}
+    constructor(options: EllipseConstructorInterface) {}
 
 
     setRadius(options: {x?: number, y?: number}): void {}
@@ -50,3 +43,17 @@ export class Ellipse extends Graphic implements CurveInterface {
 }
 ````
 
+Information about the constructor:
+
+````ts
+interface EllipseConstructorInterface {
+    game: Game,
+    position: Position,
+    radiusX: number,
+    radiusY: number,
+    styles?: GenericGraphicStylesInterface,
+    toDisplay?: boolean,
+    drawingOptions?: CurveDrawingOptionsInterface
+}
+````
+

docs/graphics/index.md

@@ -10,16 +10,19 @@ This is the parent class of each shape that you can draw with Cazan. Don't hesit
 class Graphic {
     readonly id!: number
 
-    constructor(
-        protected game: Game,
-        protected position: Position,
-        protected dimensions: Dimensions,
-        protected toDisplay = true
-    ) {}
+    constructor(options: GraphicConstructorInterface) {}
 
     draw(): void {}
 
     hide(): void {}
+
+    setupStylesForDrawing(): void {}
+
+    private setDefaultStyles(): void {}
+
+    setStyles(styles: GenericGraphicStylesInterface): void {}
+
+    getStyles(): GenericGraphicStylesInterface | undefined {}
 
     getId(): number {}
 
@@ -44,6 +47,18 @@ class Graphic {
 }
 ````
 
+By the way, there's ``GraphicContstructorInterface``.
+
+````ts
+interface GraphicConstructorInterface {
+    game: Game,
+    position: Position,
+    dimensions: Dimensions,
+    styles?: GenericGraphicStylesInterface,
+    toDisplay?: boolean
+}
+````
+
 Some shapes can handle images on them. If they do, they implement ``ImageHandlingInterface``.
 
 ````ts

docs/graphics/line.md

@@ -6,11 +6,11 @@ We'll use the ``cazan.graphics`` namespace here.
 
 There's how to create a line with Cazan.
 ````js
-let myLine = new graphics.Line(
-    game, 
-    {x: 10, y: 10},  //(1)! 
-    {x: 50, y: 150}  //(2)!
-)
+let myLine = new graphics.Line({
+    game: game, 
+    firstPoint: {x: 10, y: 10},  //(1)! 
+    secondPoint: {x: 50, y: 150}  //(2)!
+})
 ````
 
 1. Position of the first point.
@@ -21,12 +21,19 @@ let myLine = new graphics.Line(
 For other further information, see the page about ``Graphic``, the parent of ``Line``.
 
 ````ts
-export class Line extends Graphic {
-    constructor(
-        game: Game,
-        firstPoint: Position,
-        secondPoint: Position,
-        toDisplay?: boolean
-    ) {}
+class Line extends Graphic {
+    constructor(options: LineConstructorInterface) {}
 }
 ````
+
+Information about the constructor:
+
+`````ts
+interface LineConstructorInterface {
+    game: Game,
+    firstPoint: Position,
+    secondPoint: Position,
+    styles?: GenericGraphicStylesInterface,
+    toDisplay?: boolean
+}
+`````

docs/graphics/rectangle.md

@@ -6,22 +6,22 @@ We'll use the ``cazan.graphics`` namespace here.
 
 Little example:
 ````js
-let myRect = new graphics.Rectangle(
-    game, 
-    {x: 10, y: 10}, 
-    {x: 50, y: 50}
-)
+let myRect = new graphics.Rectangle({
+    game: game, 
+    position: {x: 10, y: 10}, 
+    dimensions: {width: 50, height: 50},
+})
 ````
 
-You can add an image if you want and decide to not display it now.
-````js hl_lines="4-6 11"
-let myRect = new graphics.Rectangle(
-    game, 
-    {x: 10, y: 10}, 
-    {x: 50, y: 50},
-    'img.png',
-    false
-)
+You can add an image if you want and decide to not display the element right now.
+````js hl_lines="5-6 11"
+let myRect = new graphics.Rectangle({
+    game: game, 
+    position: {x: 10, y: 10}, 
+    dimensions: {width: 50, height: 50},
+    srcImage: 'img.png',
+    toDisplay: false
+})
 
 // ...
 
@@ -38,13 +38,20 @@ For other further information, see the page about ``Graphic`` and ``ImageHandlin
 class Rectangle extends Graphic implements ImageHandlingInterface {
     private image?: CanvasImageSource
 
-    constructor(
-        game: Game,
-        position: Position,
-        dimensions: Dimensions,
-        srcImage?: string,
-        toDisplay?: boolean
-    ) {}
+    constructor(options: RectangleConstructorInterface) {}
+}
+````
+
+Information about the constructor:
+
+````ts
+interface RectangleConstructorInterface {
+    game: Game,
+    position: Position,
+    dimensions: Dimensions,
+    styles?: GenericGraphicStylesInterface,
+    srcImage?: string,
+    toDisplay?: boolean
 }
 ````