add reference in documentation + some cleaning

AeliaDev · Sep 21, 2024 · 60535dc · 60535dc
1 parent 1fac12c
commit 60535dc
Show file tree

Hide file tree

Showing 19 changed files with 1,056 additions and 56 deletions.
diff --git a/docs/events/popups.md b/docs/events/popups.md
@@ -29,14 +29,16 @@ Use it when you want a text input from a user.
 
 ````js
 let username = await io.getUserInput({
-    title: "myGame", 
-    msg: "What's your name?", 
+    title: "myGame",
+    msg: "What's your name?",
     promptPlaceholder: "John Doe, ..."
 })
 ````
 
 !!!info
-    The user won't be able to click on the confirm button if the input does not belong to [minLength; maxLength] (if not defined, it's [0;255])
+You can set a minimum and a maximum length to the input, by adding a `minLength` and/or a `maxLength`. The user
+won't be able to click on the confirm button if the input does not belong to [minLength; maxLength] (if not defined,
+it's [0;255])
 
 
 ## Using the Popup API
@@ -64,27 +66,27 @@ popup.removePopup() //(1)!
 By default, cazan applies a default style on popups;
 
 ??? info "cazan popups' default style"
-    ````css
-    #cazan-popup{
-        flex-direction: column; gap: 15px;
-        padding: 10px;
-        background-color: #fff; color: #000;
-        min-width: 200px;
-        box-shadow: 0.5px 0.5px 5px 1px #111;
-        border-radius: 1.5px;
-        font-family: monospace;
-    }
-    #cazan-popup h1 { margin: 0; }
-    #cazan-popup p { margin: 0; text-align: center; }
-    #cazan-popup div { display: flex; justify-content: space-around; }
-    ````
+````css
+#cazan-popup{
+flex-direction: column; gap: 15px;
+padding: 10px;
+background-color: #fff; color: #000;
+min-width: 200px;
+box-shadow: 0.5px 0.5px 5px 1px #111;
+border-radius: 1.5px;
+font-family: monospace;
+}
+#cazan-popup h1 { margin: 0; }
+#cazan-popup p { margin: 0; text-align: center; }
+#cazan-popup div { display: flex; justify-content: space-around; }
+````
 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, and your popup will be customized.
+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.
+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.
 
 ## Reference
 

diff --git a/docs/get-started.md b/docs/get-started.md
@@ -3,48 +3,57 @@
 ## Installation
 
 !!!note
-    Another system for installing + project management is in conception. This page will change in the future.
+Another system for installing + project management is in conception. This page will change in the future.
 
 1) Clone project  
-   ``git clone https://github.com/AeliaDev/cazan.js.git``  
+   ``git clone https://github.com/AeliaDev/cazan.js.git``
+
 2) Install dependencies  
-   ``yarn``  
+   ``yarn``
+
 3) Build assets  
-   ``yarn run build``  
+   ``yarn run build``
+
 4) Launch tests server  
-    - With Go ``cd tests && go run server.go``  
-    - With Python ``cd tests && python server.py``  
+   ``cd tests && node server.js``
 
 !!!tip
-    We recommend for the moment to clone Cazan in your project folder (in `./vendor`)
+We recommend for the moment to clone Cazan in your project folder (in `./vendor`)
 
 ## Project creation
 
-1) Create an HTML file (with the classic base structure)  
-2) Create a `<canvas>` and put an id to it (for example 'game')  
-3) Create a JavaScript file and include it into the HTML file (the script tag must have `type="module"` in attribute)  
-4) In the JS file, import Cazan: ``import * as cazan from "./path/to/cazan.js``  
-!!!tip 
-        We advise to use the non-minified bundled file in development and the minified one in production.
+1) Create an HTML file (with the classic base structure)
+
+2) Create a `<canvas>` and put an id to it (for example 'game')
+
+3) Create a JavaScript file and include it into the HTML file (the script tag must have `type="module"` in attribute)
+
+4) In the JS file, import Cazan: ``import * as cazan from "./path/to/cazan.js``
+
+!!!tip
+We advise to use the non-minified bundled file in development and the minified one in production.
+
 !!!warning
-        This kind of import needs a local server to work (you can use the vscode extension live server or using a local development server).
-5) Create the base of each Cazan game: 
+This kind of import needs a local server to work (you can use the vscode extension live server or using a local development server).
+
+5) Create the base of each Cazan game:
 ````js title="app.js"
 function runApp() {
 }
 
 window.addEventListener("load", runApp);
 ````
 !!!abstract
-        We add an event listener on the 'load' event on the window to interact with the canvas after the page loading.
+We add an event listener on the 'load' event on the window to interact with the canvas after the page loading.
 !!!note
-        In some cases, the usage of Cazan's APIs can lead to make ``runApp()`` to asynchronous.
+In some cases, the usage of Cazan's APIs can lead to make ``runApp()`` to asynchronous.
+
 6) Setup Cazan and start coding!
 ````js title="app.js" hl_lines="2-7"
 function runApp() {
     let game = cazan.setup("#yourCanvasId", "2d")
     game.setSize(600, 350)
-    
+
     let rectangle = new cazan.graphics.Rectangle(game, {x: 10, y: 10}, {x: 50, y: 50})
 
     game.update()
@@ -59,12 +68,12 @@ function runApp() {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
+
     <title>Your game name</title>
     <script src="/app.js" type="module"></script>
 </head>
 <body>
-    <canvas id="yourCanvasId"></canvas>
+<canvas id="yourCanvasId"></canvas>
 </body>
 </html>
 ````
@@ -75,7 +84,7 @@ import * as cazan from "./path/to/cazan.js"
 function runApp() {
     let game = cazan.setup("#yourCanvasId", "2d")
     game.setSize(600, 350)
-    
+
     let rectangle = new cazan.shapes.Shape(game, {x: 10, y: 10}, {x: 50, y: 50})
 
     game.update()

diff --git a/docs/graphics/groups.md b/docs/graphics/groups.md
@@ -0,0 +1,90 @@
+# Groups
+
+Groups are set of many graphics put together in order to move them or display/hide them all at the same moment.
+
+We'll use the ``cazan.graphics`` namespace here.
+
+## Demonstration
+
+````js
+let head = new Rectangle({
+    game: game,
+    position: {x: 0, y: 0},
+    dimensions: {width: 50, height: 50},
+    styles: {graphic: {color: "rgba(255,165,0,1)", type: "fill"}},
+    toDisplay: false //(1)!
+})
+
+let body = new Rectangle({
+    game: game,
+    position: {x: 0, y: 50},
+    dimensions: {width: 50, height: 100},
+    styles: {graphic: {color: "rgba(0,0,0,1)",type: "fill"}},
+    toDisplay: false
+})
+
+let man = new Group(
+    "man",
+    {x: 100, y: 100}, //(2)!
+    {
+        "head": head, //(3)!
+        "body": body
+    }
+)
+
+man.show() //(4)!
+````
+
+1. You don't need to show them immediately after their creation (otherwise they will be displayed in order of the canvas origin)
+2. This is the position of the group. It will be the origin of all graphics that belong to this group.
+3. Here put the graphics and name them.
+4. Don't forget to display the shapes after the initialisation! And you can use the Group properties already!
+
+This will create a kind of man (that have an orange head and a black suit).
+
+And there's how we can move the little man:
+````js
+man.setPosition({x: man.getPosition().x + 25})
+````
+
+## Reference
+
+````ts
+class Group {
+    protected graphicsRelativesPositions: Record<string, Position> = {}
+
+    constructor(
+        protected name: string,
+        protected position: Position,
+        protected graphics: Record<string, Graphic>
+    ) {}
+
+    show(): void {}
+
+    hide(): void {}
+
+    setPosition(newPosition: {x?: number, y?: number}): void {}
+
+    getPosition(): Position {}
+
+    setGraphicRelativePositions(graphicName: string, newPosition: Position): void {}
+
+    getGraphicsRelativePositions(): Record<string, Position> {}
+
+    setName(name: string): void {}
+
+    getName(): string {}
+
+    setGraphics(graphics: Record<string, Graphic>): void {}
+
+    addGraphic(newGraphic: {name: string, graphic: Graphic}): void {}
+
+    removeGraphic(graphicName: string): void {}
+
+    getGraphics(): Record<string, Graphic> {}
+
+    getGraphic(name: string): Graphic {}
+
+    private _registerRelativesPositions(graphic?: {name: string, graphic: Graphic}): void {}
+}
+````
diff --git a/docs/graphics/sprites.md b/docs/graphics/sprites.md
@@ -0,0 +1,94 @@
+# Sprites
+
+!!!warning
+This feature isn't already tested well. It could evolve.
+
+## Demonstration
+
+````js
+let rectangle = new Rectangle({ /* .... */ })
+let sprite = new Sprite(
+    rectangle, //(1)! 
+    "seq1", //(2)!
+    {
+        "seq1": [ //(3)!
+            {image: "img1.1", time: 500},
+            {image: "img1.2", time: 1500}, //(4)!
+            {image: "img1.3", time: 500}
+        ],
+        "seq2": [
+            {image: "img2.1", time: 500},
+            {image: "img2.2", time: 500},
+            {image: "img2.3", time: 500}
+        ]
+    }
+)
+````
+
+1. The graphic that hosts the sprite.
+2. The current sequence. It's the name of the sequence that will be automatically be used by Cazan.
+3. Here define your different sequences of images.
+4. This image here will be displayed a bit longer than the other of its sequence.
+
+It creates a sprite on the ``rectangle``. On this sprite there's two different sequences of three images each.
+
+If you want to change of sequence, just type:
+
+````js
+sprite.changeSequence("seq2")
+````
+
+!!!tip "About multiple sequences..."
+We invented this system to help you to animate characters! You know, there's many steps to animate somebody walking,
+but with this set of many sequences, you can create a sequence of animations for each direction on only one sprite!
+
+    Example:
+    ````js
+    let player = new Rectangle({ /* .... */ })
+    let sprite = new Sprite(
+        player,
+        "right",
+        {
+            "right": [
+                {image: "img1.1", time: 500},
+                {image: "img1.2", time: 500},
+                {image: "img1.3", time: 500}
+            ],
+            "left": [
+                {image: "img2.1", time: 500},
+                {image: "img2.2", time: 500},
+                {image: "img2.3", time: 500}
+            ]
+            // ......
+        }
+    )
+    ````
+
+## Reference
+
+````ts
+class Sprite {
+    currentImage = 0
+
+    /**
+     *
+     * @param rectangle
+     * @param currentSequence It must be the name of one of the sequences of the ``images`` argument.
+     * @param images It's an object that can contain multiple sequences of images.
+     */
+    constructor(
+        protected rectangle: Rectangle,
+        protected currentSequence: string,
+        protected images: Record<string, SpriteImage[]>
+    ) {}
+
+    changeSequence(newSequence: string): void {}
+
+    /**
+     * You can use this method to create new sequences.
+     */
+    setImageSequence(sequence: string, images: SpriteImage[]): void {}
+
+    getImageSequence(sequence: string): SpriteImage[] {}
+}
+````
diff --git a/docs/graphics/styling.md b/docs/graphics/styling.md
@@ -72,7 +72,7 @@ let myText = new graphics.Text({
 ````
 
 !!!note
-    For texts, you must provide a different color for the text and for the background of the text. That's better for reading it. 
+    For texts, you must provide a different color for the text and for the background of the text. That's better for reading it.
 
 !!!tip
     If the styles aren't set on an element, Cazan will use the latest created element style. But attention: you have to style the first element!
@@ -96,7 +96,7 @@ Same thing as ``styles.setFill()`` but it's for stroke.
 
 #### setLineStyle(game, options)
 
-Customize the drawing line options. 
+Customize the drawing line options.
 
 Note: ``options``'s type is ``LineStyleInterface``.
 
@@ -136,7 +136,7 @@ interface TextStyleInterface {
 }
 ````
 
-#### GraphicStylesInterface 
+#### GraphicStylesInterface
 
 ````ts
 interface GraphicStylesInterface {

diff --git a/docs/multimedia/audio.md b/docs/multimedia/audio.md
@@ -1,6 +1,6 @@
 # Audio
 
-There's how to use cazan assets' API for audios. We'll use the ``cazan.assets`` namespace here.
+There's how to use cazan assets' API for audios. We'll use the ``cazan.multimedia`` namespace here.
 
 ## Demonstration