Circle correction

ago%!(EXTRA string=2 years) · 72809cd1c1
parent f9a82de0d3
commit 72809cd1c1
9 changed files with 96 additions and 132 deletions
--- a/css/style.css
+++ b/css/style.css
@ -1,5 +1,5 @@
-/* Copyright © 2023 Entreprise SpaceTarders */
 canvas {
-    border: 2px solid rgb(7, 18, 41);
+    background-color: rgb(0, 0, 43);
+    border: 2px solid black;
    border-radius: 5px;
 }
--- a/css/styleindex.css
+++ b/css/styleindex.css
@ -1,7 +1,6 @@
 /* Copyright © 2023 Entreprise SpaceTarders */
 html{
    background-color: rgb(7, 18, 41);
-    cursor: crosshair;
 }
 main{
    display: flex;
@ -16,7 +15,6 @@ main{
    display: flex;
    justify-content: left;
 }
-
 #menu {
    display: flex;
    justify-content: center;
@ -28,9 +26,8 @@ main{
    color: white;
    font-size: 11px;
    background-color: rgb(20, 20, 32); 
-    cursor: pointer;
 }
-#canvas {
+canvas {
    border: 2px solid rgb(7, 18, 41);
    border-radius: 5px;
 }
--- a/index.html
+++ b/index.html
@ -1,17 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="fr">
-    <head>
-        <title>Test</title>
-        
-        <script
-			  src="https://code.jquery.com/jquery-3.7.1.min.js"
-			  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-			  crossorigin="anonymous"></script>
-        <script src="js/SpaceTraders.js" defer></script>
-    </head>
-
-    <body>
-<canvas id="MonCanevas (https://www.google.com/search?q=monCanevas)"></canvas>
-    </body>
-</html>
--- a/js/SpaceTraders.js
+++ b/js/SpaceTraders.js
@ -1,75 +0,0 @@
-//© 2023 spacetardes
-function listSystem(page, limit){
-  const settings = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/systems',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json'
-    },
-    data : {
-      page: page,
-      limit: limit
-    }
-  };
-
-  
-  $.ajax(settings).done(function (response) {
-    console.log(response);
-  });
-
-  const waypoint = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/systems/X1-QA84/waypoints',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json'
-    }
-  };
-  
-  $.ajax(waypoint).done(function (response) {
-    console.log(response);
-    response.data.forEach(element => {
-      GetMarketForWaypoint(element.symbol);
-    });
-  });
-
-
-}
-function GetMarketForWaypoint(waypoint) {
-  const market = {
-    async: true,
-    crossDomain: true,
-    url: `https://api.spacetraders.io/v2/systems/X1-QA84/waypoints/${waypoint}`,
-    method: 'GET',
-    headers: {
-      Accept: 'application/json'
-    }
-  }
-
-    $.ajax(market).done(function (response) {
-      console.log(response);
-    });
-}
-
-$(document).ready(function(){
-  let systems = listSystem("6", "20")
-})
-
-let ScreenWidht = window.innerWidht;
-let ScreenHeight = window.innerHeight;
-let canvas = document.getElementById("monCanevas");
-let contexte = canvas.getContext("2d");
-var monCanevas = document.getElementById('monCanevas'); // Obtenez une référence vers votre <link>canevas</link>
-monCanevas.width = 800;
-monCanevas.height = 500;
-
-// Parcourir les rectangles du canevas
-contexte.beginPath();
-contexte.rect(100, 100, 100, 100);
-contexte.fillStyle = "black";
-contexte.fill();
-
-//type?MARKET//
--- a/js/TEST_F.JS
+++ b/js/TEST_F.JS
@ -1,4 +1,4 @@
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUEVVU0RPU0FDSEEiLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDI1Mzk4NjUsInN1YiI6ImFnZW50LXRva2VuIn0.QL4rSruHd8pjNczeZQ3S7gof7TRnwZKqQBvkojUXgmzRrWiDZVw65kt1UBns0zHAhZF-m-bvxfUBik01uIzc-_jSO63ZndquPFmv_UY3HBkVK7UKoSaxAp_NveJsE1TOpTotUChlMd1Sv7RuyeR9fso2eN3-mBEoE5ukWmGVDfnOYefuWORhisqIkh4ti3QpaV-obycZ4XGV2ukqkiNdHqR3MQJR99e2nCEZEsarNKTgm6mgn-qCCNv4xQUGwhNbD5_p-jPqQ088vuFCeZi8j6kf7-fmT5sysBxEA5nvNPDIEL1XMuzs7N66WpiP1uc7I1Ph164m2epV9vmEvzthCw";
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiU0hBRE9XIiwidmVyc2lvbiI6InYyLjEuNCIsInJlc2V0X2RhdGUiOiIyMDIzLTEyLTMwIiwiaWF0IjoxNzA0OTYwMjc3LCJzdWIiOiJhZ2VudC10b2tlbiJ9.AOqLimBeSt8TAhvG0uPf_Jyjo6GJGCm8sOKXp5H4vfUpdeR-fk3UTZYzee8Y5dUKEXC7f7IlgDDtMRWIXOEOQXUem2-lQuPiSXPY1M0wWwpUoUV0uVOARvTTIQy_Zo9ZcnwOHCHErEDTeyLtPByW7zb5O7Q9WVuGB0YfG0f4DXHDqVCIszS-qH77t_5oMk8VNl7ZEuI1hP3D0Wh47VpxdBv3aCaNNoF-mPs7f4sfU-YmpIPvRXEKABnv0gOGngaRk73ozGCRMfrcBHKnw4TndxB-tBK0SfwJrKSCpNMvGM8PleDl__GLDaNHNGUSu9GD3lNqxKumbq3dDt4K-vNGBQ";
 //décalage
 let offset = {
    x: 2,
@ -7,16 +7,14 @@ let offset = {
 let max = 40;
 let min = 35;
 let w = 1260;
-let h = 830;
-
+let h = 870;
 const canvas = new fabric.Canvas("canvas",{
    width: w,
    height: h,
    backgroundColor:"rgb(7, 18, 41)",
-    renderOnAddRemove: false,
-    defaultCursor :'crosshair',
-    hoverCursor :'pointer'
+    renderOnAddRemove: false 
 });
+
 canvas.renderAll();
 let planets = [];

@ -66,31 +64,56 @@ function offsetOrbits(waypoints){
        }
    });
 }
+let ring = [];
+
 function drawSystem(wayPoints) {
    if(wayPoints) {
        wayPoints.forEach(wayPoint => {
            drawWaypoint(wayPoint);
-            //TestPlanetClicked(wayPoint);
        });
    }
+    drawRing();
 }
-function drawWaypoint(wayPoint) {
-    let shadow = new fabric.Shadow({
-        color: "white",
-        blur: 5,
-        offsetX: 0,
-        offsetY: 0,
-      });

+function drawRing()
+{
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (250 - 100) + 100;
+        // create a circle
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (400 - 250) + 250;
+        // create a circle
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+    for(let i = 0; i < 4; i++){
+        let random = Math.random() * (550 - 400) + 400;
+        // create a circle
+        let circle = new fabric.Circle({
+            radius: random, fill: 'transparent', left: (canvas.width/2)-random, top: (canvas.height/2)-random
+        });
+        circle.set({ strokeWidth: 3, stroke: 'rgba(10,53,66,2)' });
+        
+        canvas.add(circle);
+    }
+}
+
+function drawWaypoint(wayPoint) {
    fabric.Image.fromURL('http://127.0.0.1:5500/img/planets/planetproto.png', function(planet) {
-        //FABRICJS
-        planet.set({selectable: false});
-        planet.set({shadow: shadow});
-        //AJOUT DES PROPRIÉTÉS DES WAYPOINT SUR LES PLANETES
        planet.set({left: wayPoint.x/offset.x + w/2});
        planet.set({top: wayPoint.y/offset.y+ h/2});
-        planet.set({name: wayPoint.symbol});
-        planet.set({type: wayPoint.type});
+        planet.set({selectable: false});
        canvas.add(planet);
      });
    planets.push(wayPoint);
@ -106,13 +129,4 @@ setTimeout(function animate() {
    movePlanets();
    canvas.renderAll();
    setTimeout(animate, 1000);
-}, 10);
-
-canvas.on('mouse:up', function (e) {
-    if(e.target.shadow.color == "red"){
-        e.target.shadow.color = "white"
-    }
-    else{
-        e.target.shadow.color = "red"
-    }
-})
+}, 10);
--- a/js/test.js
+++ b/js/test.js
@ -0,0 +1,16 @@
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUFJSUk9VVCIsInZlcnNpb24iOiJ2Mi4xLjQiLCJyZXNldF9kYXRlIjoiMjAyMy0xMi0wMiIsImlhdCI6MTcwMjAzODIwOCwic3ViIjoiYWdlbnQtdG9rZW4ifQ.iCm_0x9shooAE7028tBHw-p8NAXf8_EWBZl-wnqIpMIIRCe8A6rzEkaKnX-1OORBh31YQTekSOLdP5_FnA0AEP2KP00YzGEZWQBxSTndkpivtcS6X-arc4F6yJGvcLfT1m3ZD47LGylTELR3I-sXomX2Va8_13oN6kdDJyXpVWFe5OIC01bP_cwHpjztUTO-8ASPJ_8cLZH6GTSAzy5ozF1teTEdfq93s2i9oTPhynQKogdzaXAUIkAXv7hYv5XUbevorRaCfTl52CU7WK5__3org5ardHuITmbl0QyHYIWtkbpcZLcawfEGG0EK66iqwefdXIkTeWC3T1b_ERShMw";
+
+// create a wrapper around native canvas element (with id="c")
+var canvas = new fabric.Canvas('test');
+
+// create a rectangle object
+var rect = new fabric.Rect({
+    left: 100,
+    top: 100,
+    fill: 'red',
+    width: 100,
+    height: 100
+});
+      
+// "add" rectangle onto canvas
+canvas.add(rect);
--- a/templates/index.html
+++ b/templates/index.html
@ -6,7 +6,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/styleindex.css">
-    <link rel="icon" type="image/png" href="/img/spaceships/spaceship.png">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src ="/js/fabric.min.js" defer></script>
    <script src="/js/TEST_F.JS" defer></script>
@ -24,8 +23,8 @@
        <div id="menu">
            <button id="agentbutton">Agent</button>
            <button id="factionbutton">Faction</button>
-            <button id="shipbutton">Ships</button>
-            <button id="contractbutton">Contracts</button>
+            <button id="shipbutton">Vaisseau</button>
+            <button id="contractbutton">Contrats</button>
        </div>
    </footer>
 </body>
--- a/templates/text.html
+++ b/templates/text.html
@ -0,0 +1,31 @@
+<!-- Copyright © 2023 Entreprise SpaceTarders -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styleindex.css">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src ="/js/fabric.min.js" defer></script>
+    <script src="/js/TEST_F.JS" defer></script>
+    <title>Space Traders : by SKAMKRAFT</title>
+</head>
+<body>
+    <header>
+        <div id="title">SpaceTraders</div>
+    </header>
+    <main class="main-window">
+        <br>
+        <canvas id="test"></canvas>
+    </main>
+    <footer>
+        <div id="menu">
+            <button id="agentbutton">Agent</button>
+            <button id="factionbutton">Faction</button>
+            <button id="shipbutton">Vaisseau</button>
+            <button id="contractbutton">Contrats</button>
+        </div>
+    </footer>
+</body>
+</html>
--- a/token.txt
+++ b/token.txt
@ -1 +0,0 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQ0hBRE9XIiwidmVyc2lvbiI6InYyLjEuMSIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTA0IiwiaWF0IjoxNjk5NjI5MDYwLCJzdWIiOiJhZ2VudC10b2tlbiJ9.F4UuUsnL6SNv_hMZUankaGCu6e1813BpMR28K2U8CMTpkiLbncDSkNfgZ9ASCV9g5p3DtPuEIruLlzKH5nfZFniTPX8jTjuS33nGy1zeiCDxdAZaISibMpc2ABjeiySA99Z3tFUPsObCAl6umOyTiQEO6lcRk5maxKr2AG7j0LpiY_KKT905-8vz0_IaKSsHGadd9tuJuz4K558Qia5eQMaFKT5x0Gqu5pJz0Y9IrfGvyXnRktcwPWNN0OPhDqIvCs2SL5l_MFb-oNWfgr6ymflpU_e0sZxDB_64rFnzlj7hsMfZAOnt9ZJkbr-IUlbBppfj-wiLZU9yIeZtSKF0Xg
				`@ -1 +0,0 @@`
				eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQ0hBRE9XIiwidmVyc2lvbiI6InYyLjEuMSIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTA0IiwiaWF0IjoxNjk5NjI5MDYwLCJzdWIiOiJhZ2VudC10b2tlbiJ9.F4UuUsnL6SNv_hMZUankaGCu6e1813BpMR28K2U8CMTpkiLbncDSkNfgZ9ASCV9g5p3DtPuEIruLlzKH5nfZFniTPX8jTjuS33nGy1zeiCDxdAZaISibMpc2ABjeiySA99Z3tFUPsObCAl6umOyTiQEO6lcRk5maxKr2AG7j0LpiY_KKT905-8vz0_IaKSsHGadd9tuJuz4K558Qia5eQMaFKT5x0Gqu5pJz0Y9IrfGvyXnRktcwPWNN0OPhDqIvCs2SL5l_MFb-oNWfgr6ymflpU_e0sZxDB_64rFnzlj7hsMfZAOnt9ZJkbr-IUlbBppfj-wiLZU9yIeZtSKF0Xg