Update v0.4.0

README.md

@@ -1,24 +1,35 @@
 # OblivionDraft
-Small Pick and Bans tracker for stream written in go 
+Small Stream utils (draft, endgame) written in go 
 
 ![image](https://github.com/UrbsKali/OblivionDraft/assets/22664596/304e785f-6cb9-4d9b-a51a-6d4dad195c31)
 
 
 > Used during 2023 TWC, 2024 TI (more [here](https://oblivion-esport.fr/))
+
+## Features
+- Endgame Stats Overlay (Riot API key needed)
+- Draft Overlay
+- Easy to use Admin panel
+- Editable Overlay (HTML, CSS, JS)
+- Local first, but Supabase Compatible
+
 ## Installation
 - Download latest `update.exe` [here](https://github.com/UrbsKali/OblivionDraft/releases/latest)
 - Put `update.exe` inside a new folder
 - Double click on `update.exe`
 - You're good to go 👌
 ## Usage
-- Execute `draft.exe`
-- connect the overlay to OBS using web url : http://localhost/
-- Change teams settings at http://localhost/admin
-- Show endgame stats at http://localhost/endgame
+- Execute `draft.exe` (if first time, open it in a console to see potential error)
+- connect the overlay to OBS using web url : http://localhost/ui/overlay (or overlay_alt if you want)
+- Change teams settings at http://localhost/ui/admin
+- Show endgame stats at http://localhost/ui/endgame
 - When you join a draft, the overlay will change accordingly
 
 ## Update
 You can update the app by double clicking on `update.exe`
 
+## Todo's
+- [X] Endgame Stats
+- [ ] Customizable Overlays
+- [ ] Ingame Overlay (See you soon Vanguard)
 
-#### Please note that the Overlay is still under developpement, but you can improve it by modifying the html in `/overlay/`

TODO

@@ -1,5 +1,5 @@
-TO IMPROVE PERFOMANCE : LOCAL /draft/summoner/info (maybe)
+TO IMPROVE PERFOMANCE : LOCAL /api/draft/summoner/info (maybe)
 LISIBILITY : admin and overlay js split 
 admin: main.js refactor fetch to use async await
 overlay: remove unused code (shadow and score)
-idea: GUI, full updater
+idea: GUI

api/DraftFull.go

@@ -11,7 +11,10 @@ func DraftFull(c *fiber.Ctx) error {
 	g := c.Locals("getter").(models.LcuGetter)
 	s, err := utils.GetDraft(g)
 	if err != nil {
-		return c.SendStatus(404)
+		return c.Status(404).JSON(fiber.Map{
+			"error":   "Draft not found",
+			"message": err.Error(),
+		})
 	}
 	return c.JSON(s)
 }

api/TeamsDelete.go

@@ -10,6 +10,17 @@ import (
 
 func TeamsDelete(c *fiber.Ctx) error {
 	nameURL := c.Params("name")
+	reset := c.Query("reset")
+	if reset == "true" {
+		// remove all teams
+		err := utils.ResetTeams()
+		if err != nil {
+			log.Println(err)
+			return c.SendStatus(404)
+		}
+		return c.SendStatus(200)
+	}
+
 	name, err := url.QueryUnescape(nameURL)
 	if err != nil {
 		log.Println(err)

routes/AdminRoutes.go

@@ -7,7 +7,7 @@ import (
 )
 
 func AdminRoutes(app *fiber.App) {
-	r := app.Group("/admin")
+	r := app.Group("/api/admin")
 	teams := r.Group("/teams")
 
 	teams.Get("/full", api.TeamsFull)

routes/LcuRoutes.go

@@ -25,7 +25,7 @@ func LcuRoutes(app *fiber.App) {
 		time.Sleep(2 * time.Second)
 	}
 
-	r := app.Group("/draft")
+	r := app.Group("/api/draft")
 	r.Use(middleware.DraftMiddleware(g))
 
 	//  ----------- Draft Routes ----------- //

routes/RiotApiRoutes.go

@@ -16,7 +16,7 @@ func RiotApiRoutes(app *fiber.App) {
 		panic(err)
 	}
 
-	r := app.Group("/riot")
+	r := app.Group("/api/riot")
 	r.Use(middleware.RiotMiddleware(g))
 
 	r.Get("/puuid/:name/:tag", api.APIGetPuuid)

routes/StaticRoutes.go

@@ -3,7 +3,5 @@ package routes
 import "github.com/gofiber/fiber/v2"
 
 func StaticRoutes(app *fiber.App) {
-	app.Static("/", "./overlay/")
-	app.Static("/admin/", "./admin/")
-	app.Static("/endgame/", "./endgame/")
+	app.Static("/ui", "./ui/")
 }

routes/SupabaseRoutes.go

@@ -10,7 +10,7 @@ import (
 )
 
 func SupabaseRoutes(app *fiber.App) {
-	r := app.Group("/db")
+	r := app.Group("/api/db")
 
 	supabaseUrl := os.Getenv("SUPABASE_URL")
 	supabaseKey := os.Getenv("SUPABASE_KEY")

admin/index.html → ui/admin/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
-  <link rel="stylesheet" href="/admin/styles.css">
+  <link rel="stylesheet" href="./styles.css">
   <title>Team Scores</title>
 </head>
 
@@ -72,7 +72,7 @@ <h3>Match ID</h3>
 
   </div>
 
-  <script src="/admin/main.js"></script>
+  <script src="./main.js"></script>
 </body>
 
 </html>

admin/main.js → ui/admin/main.js

@@ -3,7 +3,9 @@ const teamNameSelectTwo = document.getElementById('team2');
 const btnSelect = document.getElementById('btnSelect');
 
 const matchIdInput = document.getElementById('matchId');
-fetch('/admin/match/id')
+
+let toastSlot = [false, false, false, false, false, false, false, false, false, false, false, false];
+fetch('/api/admin/match/id')
     .then(resp => resp.text())
     .then(text => matchIdInput.value = text);
 
@@ -19,7 +21,7 @@ function changeSelect(select) {
     loadTeamSettings(select, select.selectedIndex - 1);
 }
 
-fetch('/admin/teams/full')
+fetch('/api/admin/teams/full')
     .then(response => response.json())
     .then(data => {
         data.forEach(team => {
@@ -44,7 +46,7 @@ async function saveTeamSettings(el) {
     };
     let response;
     try {
-        response = await fetch('/admin/teams/add/', {
+        response = await fetch('/api/admin/teams/add/', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -53,9 +55,11 @@ async function saveTeamSettings(el) {
         });
     } catch (error) {
         console.error('An error occurred:', error);
+        sendToast('Failed to add team.', 'error');
     }
     if (response.ok) {
         console.log('Team added successfully!');
+        sendToast('Team added successfully!', 'success');
         // add an option to the select
         console.log(response.status);
         if (response.status == 201) {
@@ -69,6 +73,7 @@ async function saveTeamSettings(el) {
         }
     } else {
         console.error('Failed to add team.');
+        sendToast('Failed to add team.', 'error');
     }
 }
 
@@ -77,10 +82,11 @@ function RemoveTeamSettings(el) {
     if (selectObj.value === 'New') {
         return;
     }
-    fetch('/admin/teams/delete/' + selectObj.value)
+    fetch('/api/admin/teams/delete/' + selectObj.value)
         .then(resp => {
             if (resp.ok) {
                 console.log('Team deleted successfully!');
+                sendToast('Team deleted successfully!', 'success');
                 // remove the option from the select
                 if (selectObj == teamNameSelectOne) {
                     teamNameSelectTwo.removeChild(teamNameSelectTwo.children[selectObj.selectedIndex]);
@@ -92,13 +98,14 @@ function RemoveTeamSettings(el) {
                 emptyTeamSettings(selectObj);
             } else {
                 console.error('Failed to delete team.');
+                sendToast('Failed to delete team.', 'error');
             }
         });
 }
 
 async function select() {
     // POST to /admin/teams/selected with the selected team
-    resp = await fetch('/admin/teams/selected', {
+    resp = await fetch('/api/admin/teams/selected', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -107,8 +114,10 @@ async function select() {
     });
     if (resp.ok) {
         console.log('Team selected successfully!');
+        sendToast('Teams selected successfully!', 'success');
     } else {
         console.error('Failed to select team.');
+        sendToast('Failed to select team.', 'error');
     }
 }
 
@@ -124,7 +133,7 @@ function emptyTeamSettings(el) {
 }
 
 function loadTeamSettings(el, i) {
-    fetch('/admin/teams/full')
+    fetch('/api/admin/teams/full')
         .then(response => response.json())
         .then(data => {
             savedSettings = data[i]
@@ -144,7 +153,7 @@ async function loadTeamFromDB() {
     // fetch the tournaments from the server
 
     // fetch the teams from the server
-    let response = await fetch('/db/tournaments');
+    let response = await fetch('/api/db/tournaments');
     let tournaments = await response.json();
 
     // create the popup
@@ -178,7 +187,7 @@ async function loadTeams() {
     let select = document.getElementById('tournamentSelect');
     let tournamentId = select.value;
     // fetch the teams from the server
-    let response = await fetch('/db/teams/' + tournamentId);
+    let response = await fetch('/api/db/teams/' + tournamentId);
     let teams = await response.json();
 
     let body = [];
@@ -193,7 +202,7 @@ async function loadTeams() {
         })
     });
 
-    await fetch("/admin/teams/add/?many=true", {
+    await fetch("/api/admin/teams/add/?many=true", {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -208,7 +217,7 @@ async function loadTeams() {
     // reload the select
     teamNameSelectOne.innerHTML = '<option value="New">New</option>';
     teamNameSelectTwo.innerHTML = '<option value="New">New</option>';
-    fetch('/admin/teams/full')
+    fetch('/api/admin/teams/full')
         .then(response => response.json())
         .then(data => {
             data.forEach(team => {
@@ -218,12 +227,13 @@ async function loadTeams() {
                 teamNameSelectOne.appendChild(option);
                 teamNameSelectTwo.appendChild(option.cloneNode(true));
             });
+            sendToast('Teams loaded successfully!', 'success');
         });
 }
 
 async function updateMatchId(el) {
     let matchId = el.value;
-    let resp = await fetch('/admin/match/id', {
+    let resp = await fetch('/api/admin/match/id', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -232,7 +242,37 @@ async function updateMatchId(el) {
     })
     if (resp.ok) {
         console.log('Match ID updated successfully!');
+        sendToast('Match ID updated successfully!', 'success');
     } else {
         console.error('Failed to update match ID.');
+        sendToast('Failed to update match ID.', 'error');
     }
+}
+
+function sendToast(message, level ='') {
+    let toast = document.createElement('div');
+    toast.className = 'toast ' + level;
+    toast.innerText = message;
+    // find an empty slot
+    let toastNumber = toastSlot.indexOf(false);
+    if (toastNumber === -1) {
+        toastNumber = 0;
+    } else {
+        toastSlot[toastNumber] = true;
+    }
+
+    toast.style.top = 20 + 50 * toastNumber + 'px';
+    toast.style.right = `calc(-10% - ${message.length * 5}px)`;
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+        toast.classList.toggle('show');
+    }, 1);
+    setTimeout(() => {
+        toast.classList.toggle('show');
+    }, 8500);
+    setTimeout(() => {
+        toastSlot[toastNumber] = false
+        document.body.removeChild(toast);
+    }, 9000);
 }

admin/styles.css → ui/admin/styles.css

@@ -213,5 +213,27 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 
 .popup::before {
   content: "Load Teams from Tournament";
-
+}
+
+.toast {
+  position: fixed;
+  top: 20px;
+  background-color: #007bff;
+  color: white;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.6s cubic-bezier(0.5, -0.2, 0.3, 1.5);
+}
+
+.toast.show {
+  right: 20px !important;
+}
+
+.toast.alert {
+  background-color: #dc3545;
+}
+
+.toast.success {
+  background-color: #28a745;
 }