June Update - New Logo

.gitignore

@@ -2,6 +2,9 @@ dist/
 node_modules
 settings.json
 
+extract.html
+extract.css
+
 index-linux
 index-macos
 index-win.exe

CHANGELOG.md

@@ -1,30 +1,28 @@
-## v1.7.0
+## v1.8.0
 ### Displayer
-- New animation for scores.
-  <br><img src="https://akinariosu.s-ul.eu/oKt8BHKY">
-- Fixed the transparent background for displayer styles.
-- Now Score Reverse changes based on the **Old Colors** setting you have.
-    + Old Colors not active = Use Score Reverse if the first team is not red
-    + Old Colors active = Use Score Reverse if the first team is not blue
-- Team Section added.
-- To add a team click on the "Open Teams Folder" button and put here the image of the team. After this you can switch to match section and return to Teams section and you will see your new team.
-- Now Teams can be edited with players and team name.
-  <br><img src="https://akinariosu.s-ul.eu/XqX97WqC">
-- After editing the name of the team it will reload the app. (There's a bug that I'll fix, but for now this is a method to prevent the bug. Still WIP)
-- The team name should be the same as the team name in the lobby name! (Ex. (Little Pug) vs (Polished) / image name = Little Pug.png / Team name in the team edit should be the same too!)
+- Fixed error regards teams images, the previous update broke all the displayer!
 
 ### App
-- Performance improvement, now the app should use less memory!
+- Added **"Export Team"** button.
+- The app now will accept files with the extension <code>.otmdt</code>
+- <code>.otmdt</code> are files that contain the info about one team.<br>These files can be open with a double click or using the **"Add Team"** button.
+- **"Export Team"** button will create the <code>.otmdt</code> file that you can send to your teammates for a faster configuration without doing it manually!
+- Added **"Add Team"** button, will open the dialog to choose the <code>.otmdt</code> file.
+- Changed style and position of **"Open Teams Folder"** button.
+- Fixed error while trying to find teams with spaces in the name.
+- Fixed adding new players for teams with spaces in the name.
+- Changed style of **"Edit Team"** button.
+- New Logo
+  <br><img src="https://akinariosu.s-ul.eu/f72xTlsv">
+- Revert to fast installer without the possibility to choose where to install the app. When updating you'll not see anymore the annoying window that require your click to close.
 
 ### Known Issues
-- While editing and removing players from the team, sometimes the userid will appear wrong but it'll be saved correctly!
+- Error while changing name with a team that doesn't have a team.json file
 
 ### Tournaments
-- Added [Seal Cup](https://osu.ppy.sh/community/forums/topics/1306857)
-- Added [Corsace Closed 2021](https://osu.ppy.sh/community/forums/topics/1324620)
-- Added [Cursed Tourney #2](https://osu.ppy.sh/community/forums/topics/1306163)
-- Added [Finnish Duo Cup](https://osu.ppy.sh/community/forums/topics/1313956)
-- Added [Great Singapore Tournament 3](https://osu.ppy.sh/community/forums/topics/1323720)
-- Added [Centaurea Open 2021](https://osu.ppy.sh/community/forums/topics/1323736)
-- Added [Baku's Summer Trios](https://osu.ppy.sh/community/forums/topics/1331732)
-- Added [Endless Mirage Tournament](https://discord.com/invite/RT9MBs6)
+- Added [Entropy's Summer Tournament](https://osu.ppy.sh/community/forums/topics/1334728)
+- Added [Full Technical Tournament 3](https://osu.ppy.sh/community/forums/topics/1337843)
+- Added [North America Tournament](https://osu.ppy.sh/community/forums/topics/1333199)
+- Added [Asuna's Asia Tournament](https://osu.ppy.sh/community/forums/topics/1330959)
+- Added [osu! India Summer Tournament](https://osu.ppy.sh/community/forums/topics/1328854)
+- Added [Scarlet's Touhou Tournament](https://osu.ppy.sh/community/forums/topics/1323843)

README.md

@@ -1,4 +1,4 @@
-<img src="https://akinariosu.s-ul.eu/2zvhZbVV">
+<img src="https://akinariosu.s-ul.eu/CKOXOZMi">
 
 # osu! Tourney Match Displayer
 
@@ -10,8 +10,9 @@ osu! Tourney Match Displayer is a simple displayer made to be used as a browser
 -   <b>[Change the fields](https://github.com/AkinariHex/oTMD#change-the-fields)</b>
     -   [Match Section](https://github.com/AkinariHex/oTMD#match-section)
     -   [Displayer Settings Section](https://github.com/AkinariHex/oTMD#displayer-settings-section)
+    -   [Teams Section](https://github.com/AkinariHex/oTMD#teams-section)
     -   [App Settings Section](https://github.com/AkinariHex/oTMD#app-settings-section)
--   <b>[How to add custom teams pic](https://github.com/AkinariHex/oTMD#how-to-add-custom-teams-pic)</b>
+-   <b>[How to add a team](https://github.com/AkinariHex/oTMD#how-to-add-a-team)</b>
 -   <b>[Display on OBS](https://github.com/AkinariHex/oTMD#display-on-obs)</b>
 -   <b>[Join the community](https://github.com/AkinariHex/oTMD#join-the-community)</b>
 -   <b>[Contacts](https://github.com/AkinariHex/oTMD#contacts)</b>
@@ -85,16 +86,33 @@ Now you can open the folder and run `osu! Tourney Match Displayer.exe`!
 -   `Width`: shows the current width of the displayer | This value will be used in OBS
 -   `Height`: shows the current height of the displayer | This value will be used in OBS
 
+### Teams Section
+
+-   `Add Team`: Open dialog to import `.otmdt` files
+-   `Open Teams Folder`: Open Teams Directory
+
 ### App Settings section
+
 -   `User Interface`: Enable compact UI
 -   `System Tray`: Enable minimize to system tray
 
-## How to add custom teams pic
+## How to add a team
 
-Open the o!TMD directory (%appdata% > otmd) and go to `Teams` folder!<br>
+### Using the .otmdt files
 
-Put here the images of the teams! The images should have the same name of the teams! (Ex. Team name: `Alligator Space Jam` // Image name: `Alligator Space Jam`)
+``.otmdt`` files are archive files that contain all the info about a team. These files are generated by the app.
+Double clicking these files the app will automatically add the teams. You can see them by switching between teams section and another section to reload the teams list.
 
+### Using the Add Team button
+
+The ``Add Team`` button will open a dialog that will make you choose the ``.otmdt`` file to import.
+The app will execute the import of the team and you can see the team switching between this section and another section to reload the teams list.
+
+### Using the Open Teams Folder button
+
+The ``Open Teams Folder`` button will open the Teams Directory where you can add your teams manually or add the image of the team to initialize the configuration of it.
+Switch between the Teams section and another section to reload the teams list and start editing the team.
+
 ## Display on OBS
 
  On OBS add a new ``source > browser source``, name it and put these settings:

frontend/app.js

@@ -213,15 +213,18 @@ function matchdata(api, mpid, warmups, interval, reverse, bestof, country, tourn
 							team2imgstring = `<img class="countryimg" src="https://osu.ppy.sh/images/flags/${country[team2pos].id}.png"> <br />`;
 						}
 					}
-					// CHECK FOR TEAMS IMAGE
-					data.images.forEach(image => {
-						if(image.includes(team1nameNoSpan)){
-							team1imgstring = `<img class="teamimg" src="/teamsimg/${image}"> <br />`;
-						}
-						if(image.includes(team2nameNoSpan)){
-							team2imgstring = `<img class="teamimg" src="/teamsimg/${image}"> <br />`;
-						}
-					});
+					//CHECK IF TEAMS IMAGES ARE AVAILABLE
+					if(data.status === 0) {
+						// CHECK FOR TEAMS IMAGE
+						data.images.forEach(image => {
+							if(image.includes(team1nameNoSpan)){
+								team1imgstring = `<img class="teamimg" src="/teamsimg/${image}"> <br />`;
+							}
+							if(image.includes(team2nameNoSpan)){
+								team2imgstring = `<img class="teamimg" src="/teamsimg/${image}"> <br />`;
+							}
+						});
+					}
 					// CHECK IF FOUND THE FLAG AND REPLACE THE BLANK IMAGE WITH A BLANK FLAG
 			if(team1imgstring == ''){
 				team1imgstring = `<img class="countryimg" src="https://osu.ppy.sh/images/flags/A1.png"> <br />`;

frontend/assets/style.css

@@ -336,6 +336,11 @@ input::-webkit-inner-spin-button {
     height: 24px;
     margin-right: 4.6px;
     -webkit-app-region: no-drag;
+	cursor: unset !important;
+}
+
+#applicationButtons button:hover, #applicationButtons button svg:hover {
+    cursor: unset !important;
 }
 
 .headerappbarbutton {
@@ -344,7 +349,8 @@ input::-webkit-inner-spin-button {
     background-color: transparent !important;
     fill: #fff !important;
     border-radius: 0px !important;
-    margin: 0px !important
+    margin: 0px !important;
+	cursor: unset !important;
 }
 
 .headerappbarbutton:hover {
@@ -601,6 +607,73 @@ input::selection, textarea::selection {
 
 /*----------------------------------------------------------- Teams List -------------------------------------------*/
 
+[data-position~=bottom][data-tooltip]:after{
+	font-size: 12px;
+    font-family: 'QSVF';
+	z-index: 12;
+}
+
+[data-position~=top][data-tooltip]:after{
+	font-size: 12px;
+    font-family: 'QSVF';
+	z-index: 12;
+}
+
+.card.newcard {
+    height: 264.7px;
+    border: 2px dashed #80c3ff !important;
+	display: grid !important;
+	grid-template-areas: 	'a'
+							'b';
+	grid-template-rows: 50% 50%;
+	cursor: pointer !important;
+}
+
+.card.newcard::after {
+	content: "";
+    background-color: #80c3ffb8;
+    height: 0.2px;
+    width: 70%;
+    bottom: 130px;
+    left: 21.907px;
+    position: absolute;
+}
+
+.card.newcard .addteam {
+	grid-area: a;
+    width: auto;
+	height: 100%;
+	display: flex;
+	cursor: pointer !important;
+}
+
+.card.newcard .openfolder {
+    grid-area: b;
+    width: auto;
+	height: 100%;
+	display: flex;
+	cursor: pointer !important;
+}
+
+.card.newcard .addteam .content, .card.newcard .openfolder .content{
+    color: #80c3ff;
+    fill: #80c3ff;
+    width: auto;
+    text-align: center;
+    font-size: 14px;
+    align-self: center;
+	margin: auto;
+	cursor: pointer !important;
+}
+
+.card.newcard .addteam .content #text, .card.newcard .openfolder .content #text{
+  	cursor: pointer !important;
+}
+
+.card.newcard .addteam:hover, .card.newcard .openfolder:hover {
+	background-color:rgba(0, 0, 0, 0.11)
+}
+
 #openfolderteams {
 	margin: 0px 0px 10px 0px;
     padding: 10px;
@@ -643,6 +716,23 @@ input::selection, textarea::selection {
 	position: relative;
 }
 
+.ui.two.bottom.attached.buttons {
+	width: 150px !important;
+	display: flex;
+    position: unset;
+}
+
+.ui.two.bottom.attached.buttons .button {
+	background: transparent;
+	color: #ddd;
+	fill: #ddd;
+	box-shadow: 0 0 0 0px transparent inset !important;
+}
+
+.ui.two.bottom.attached.buttons .button:hover {
+	background: rgba(0, 0, 0, 0.11);
+}
+
 .team_player_list {
 	display: flex;
     flex-direction: row;
@@ -654,8 +744,6 @@ input::selection, textarea::selection {
 
 .listeditteam {
 	background: #181818;
-	box-shadow: 0 1px 3px 0 #2b2b2b, 0 0 0 1px #222223;
-	-webkit-box-shadow: 0 1px 3px 0 #2b2b2b, 0 0 0 1px #222223;
 }
 
 .listeditteam_players {