new design

src/client/assets/css/index.css

@@ -7,34 +7,59 @@
     src: url("../Roboto-Regular.ttf") format("truetype");
 }
 
+@font-face {
+	font-family: "French-Press";
+	src: url("../fonts/Frenchpress.otf") format("OpenType");
+}
+
 html{
 	height: 100%;
 }
 
 body{
-	background: white;
+	background: black;
 	margin:0;
 	height:100%;
 	font-family: "Roboto";
+	color: black;
 }
 
 #content{
-	display: flex;
 	height:100%;
 	padding-top:28px;
 }
 
 #sidebar{
-	flex:20%;
+	position:absolute;
-	background-color: rgb(43, 43, 43);
+	top: 50px;
-	color: white;
+	left: 20px;
-	padding:5px;
+	background-image: url("../images/svg/chapters_scroll.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	width: 322px;
+	height: 398px;
+}
+
+#media {
+	position: absolute;
+	top: 475px;
+	left:20px;
+	width: 322px;
+	display: flex;
+}
+
+#media > div {
+	background-image: url("../images/svg/buttons.svg");
+	background-size: 100%;
+	background-repeat: no-repeat;
+	padding: 9px;
+	flex: 33%;
+	cursor: pointer;
 }
 
 #main{
-	flex: 80%;
+	width: 100%;
-	background-color: rgb(216, 216, 216);
+	height:100%;
-	padding: 0px;
 }
 
 #main-img {
@@ -46,31 +71,25 @@ h3 {
 	margin-block-end: 0.5em;
 }
 
-#launch{
+#launch-text {
-	position: absolute;
+	font-family: "French-Press";
-	bottom:0;
+	font-size: 52px;
-	right:0;
+	font-weight: bold;
-	width:80%;
-	height:70px;
-	background-color:rgb(49, 49, 49);
 }
 
 #launch-btn {
-	position: relative;
+	background-color: transparent;
-	top: 50%;
+	position: absolute;
-	left:50%;
+	bottom: 20px;
-	transform: translate(-50%, -50%);
+	right: 25px;
-	width: 20%;
+	background-image: url("../images/svg/play_button.svg");
-	max-width:200px;
+	background-repeat: no-repeat;
-	height:50px;
+	background-size: 100%;
+	width:312px;
+	height:122px;
 	padding:10px;
 	text-align: center;
-	color:white;
+	border-width: 0px;
-	font-weight: bold;
-	font-size:1.2rem;
-	background-color: green;
-	border: 1px solid black;
-	border-radius: 3px;
 }
 
 .hidden{
@@ -92,9 +111,63 @@ h3 {
 }
 
 #loading-message{
-	width:80%;
+	width:100%;
 	position:relative;
 	margin: 0 auto;
 	height:28px;
+	font-family: "French-Press";
+	font-size: 24px;
 	color:white;
 }
+
+#account {
+	width:312px;
+	height: 105px;
+	background-image: url('../images/svg/nickname_scroll.svg');
+	background-repeat: no-repeat;
+	background-size: 100%;
+	position: absolute;
+	right: 25px;
+	top: 50px;
+	padding: 0px 30px;
+}
+
+#nick {
+	font-family: "French-Press";
+	font-size: 28px;
+	position: relative;
+	top:45%;
+	transform: translateY(-45%);
+}
+
+#fullscreen {
+	position:absolute;
+	top: 28px;
+	left: 0;
+	width: 100%;
+	height: calc(100% - 28px);
+	background-color: rgba(0, 0, 0, 0.6);
+	display: none;
+	z-index: 10;
+}
+
+#close {
+	position: absolute;
+	top: 28px;
+	left: 5px;
+	color: white;
+	cursor: pointer;
+}
+
+#settings {
+	position: relative;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 400px;
+	min-height: 470px;
+	background-image: url("../images/svg/chapters_scroll.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	padding: 10px 50px;
+}

src/client/assets/css/menubar.css

@@ -9,9 +9,9 @@
 	cursor: move;
 	-webkit-app-region: drag;
 	-webkit-user-select: none;
+	z-index: 100;
 }
 
-
 #menubar ul{
 	margin:0;
 	padding:0;
@@ -21,7 +21,6 @@
 	float:left;
 }
 
-
 #menubar .right{
 	float: right;
 	-webkit-app-region: no-drag;

src/client/assets/images/svg/discord.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#42210B;}
+</style>
+<g>
+	<path class="st0" d="M222.63,225.21c-10.33,0-18.48,9.06-18.48,20.11c0,11.05,8.33,20.11,18.48,20.11
+		c10.33,0,18.48-9.06,18.48-20.11C241.29,234.27,232.95,225.21,222.63,225.21z M288.76,225.21c-10.33,0-18.48,9.06-18.48,20.11
+		c0,11.05,8.33,20.11,18.48,20.11c10.33,0,18.48-9.06,18.48-20.11C307.24,234.27,299.08,225.21,288.76,225.21z"/>
+	<path class="st0" d="M378.28,74.94H133.72c-20.62,0-37.41,16.66-37.41,37.3v244.79c0,20.64,16.79,37.3,37.41,37.3h206.96
+		l-9.67-33.5l23.36,21.55l22.08,20.28l39.24,34.4V112.24C415.69,91.6,398.9,74.94,378.28,74.94z M306.87,309.82
+		c0,0-6.52-7.79-11.96-14.68c23.73-6.7,32.79-21.56,32.79-21.56c-7.43,4.89-14.49,8.33-20.84,10.69c-9.06,3.8-17.76,6.34-26.27,7.79
+		c-17.39,3.26-33.34,2.36-46.93-0.18c-10.33-1.99-19.2-4.89-26.63-7.79c-4.17-1.63-8.7-3.62-13.23-6.16
+		c-0.54-0.36-1.09-0.54-1.63-0.91c-0.36-0.18-0.54-0.36-0.72-0.54c-3.26-1.81-5.07-3.08-5.07-3.08s8.7,14.49,31.71,21.38
+		c-5.44,6.88-12.14,15.04-12.14,15.04c-40.04-1.27-55.26-27.54-55.26-27.54c0-58.34,26.09-105.63,26.09-105.63
+		c26.09-19.57,50.91-19.02,50.91-19.02l1.81,2.17c-32.61,9.42-47.65,23.73-47.65,23.73s3.99-2.17,10.69-5.25
+		c19.39-8.52,34.79-10.87,41.13-11.41c1.09-0.18,1.99-0.36,3.08-0.36c11.05-1.45,23.55-1.81,36.6-0.36
+		c17.21,1.99,35.69,7.07,54.53,17.39c0,0-14.31-13.59-45.11-23.01l2.54-2.9c0,0,24.82-0.54,50.91,19.02
+		c0,0,26.09,47.29,26.09,105.63C362.31,282.28,346.91,308.55,306.87,309.82z"/>
+</g>
+</svg>

src/client/assets/images/svg/settings.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#42210B;}
+</style>
+<g>
+	<path class="st0" d="M395.39,222l-24.53-3.12c-2.02-6.22-4.51-12.22-7.42-17.93l15.15-19.5c6.13-7.89,5.41-19.03-1.59-25.82
+		l-20.55-20.55c-6.85-7.07-17.99-7.78-25.9-1.66l-19.48,15.15c-5.7-2.91-11.7-5.4-17.94-7.42l-3.12-24.49
+		c-1.17-9.82-9.51-17.22-19.39-17.22h-29.23c-9.88,0-18.21,7.4-19.39,17.18l-3.12,24.53c-6.24,2.02-12.24,4.5-17.94,7.42
+		l-19.49-15.15c-7.88-6.12-19.02-5.41-25.82,1.59l-20.55,20.54c-7.07,6.86-7.79,18-1.66,25.91l15.15,19.49
+		c-2.92,5.7-5.4,11.7-7.42,17.93L116.66,222c-9.82,1.17-17.22,9.51-17.22,19.39v29.22c0,9.88,7.4,18.21,17.18,19.39l24.53,3.12
+		c2.02,6.22,4.51,12.22,7.42,17.93l-15.15,19.5c-6.13,7.89-5.41,19.03,1.59,25.82l20.55,20.55c6.86,7.06,17.99,7.76,25.9,1.64
+		l19.49-15.15c5.7,2.92,11.7,5.41,17.93,7.42l3.12,24.48c1.17,9.85,9.51,17.25,19.39,17.25h29.23c9.88,0,18.21-7.4,19.39-17.18
+		l3.12-24.53c6.22-2.02,12.23-4.51,17.93-7.42l19.51,15.15c7.89,6.13,19.04,5.41,25.82-1.59l20.55-20.55
+		c7.07-6.86,7.79-17.99,1.66-25.9l-15.15-19.49c2.92-5.7,5.41-11.7,7.42-17.93l24.48-3.12c9.82-1.17,17.22-9.51,17.22-19.39v-29.22
+		C412.57,231.51,405.17,223.17,395.39,222L395.39,222z M257.76,319.55c-35.91,0-65.13-29.22-65.13-65.13s29.22-65.13,65.13-65.13
+		s65.13,29.22,65.13,65.13S293.67,319.55,257.76,319.55L257.76,319.55z"/>
+</g>
+</svg>

src/client/assets/images/svg/web.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#42210B;}
+</style>
+<g>
+	<g id="XMLID_1_">
+		<path id="XMLID_17_" class="st0" d="M180.85,261.33h-63.8c0.97,16.78,4.97,32.98,11.75,47.96h56.33
+			C182.65,294.08,181.2,277.93,180.85,261.33z"/>
+		<path id="XMLID_16_" class="st0" d="M297.49,147.99c-5.76-13.69-12.44-24.29-19.51-31.27c-3.74-0.52-7.52-0.89-11.32-1.11v65.78
+			h41.46C305.28,169.27,301.72,158.04,297.49,147.99L297.49,147.99z"/>
+		<path id="XMLID_15_" class="st0" d="M197.47,245.34h47.87v-47.96h-43.39C199.36,212.48,197.84,228.64,197.47,245.34z"/>
+		<path id="XMLID_14_" class="st0" d="M310.05,197.38h-43.39v47.96h47.87C314.16,228.64,312.64,212.48,310.05,197.38L310.05,197.38z
+			"/>
+		<path id="XMLID_13_" class="st0" d="M266.66,330.61v65.78c3.81-0.22,7.58-0.59,11.32-1.11c7.06-6.98,13.74-17.58,19.51-31.27
+			c4.23-10.05,7.79-21.29,10.64-33.4H266.66z"/>
+		<path id="XMLID_12_" class="st0" d="M214.51,147.99c-4.23,10.05-7.79,21.29-10.64,33.4h41.46v-65.78
+			c-3.81,0.22-7.58,0.59-11.32,1.11C226.96,123.7,220.28,134.3,214.51,147.99z"/>
+		<path id="XMLID_11_" class="st0" d="M214.51,364.01c5.76,13.69,12.44,24.29,19.51,31.27c3.74,0.52,7.52,0.89,11.32,1.11v-65.78
+			h-41.46C206.72,342.73,210.28,353.96,214.51,364.01L214.51,364.01z"/>
+		<path id="XMLID_10_" class="st0" d="M185.12,197.38h-56.33c-6.78,14.99-10.78,31.19-11.75,47.96h63.8
+			C181.2,228.74,182.65,212.59,185.12,197.38z"/>
+		<path id="XMLID_9_" class="st0" d="M201.71,141.58c2.95-7.01,6.15-13.33,9.56-18.97c-20.3,6.8-38.9,18.26-54.47,33.84
+			c-7.64,7.64-14.28,16-19.87,24.93h52.45C192.56,166.91,196.69,153.5,201.71,141.58z"/>
+		<path id="XMLID_8_" class="st0" d="M189.37,330.61h-52.45c5.59,8.93,12.24,17.3,19.87,24.93c15.58,15.58,34.18,27.04,54.47,33.84
+			c-3.41-5.63-6.61-11.96-9.56-18.97C196.69,358.5,192.56,345.09,189.37,330.61z"/>
+		<path id="XMLID_7_" class="st0" d="M322.63,181.39h52.45c-5.59-8.93-12.24-17.3-19.87-24.93c-15.58-15.58-34.18-27.04-54.47-33.84
+			c3.41,5.63,6.61,11.96,9.56,18.97C315.31,153.5,319.44,166.91,322.63,181.39z"/>
+		<path id="XMLID_6_" class="st0" d="M310.29,370.42c-2.95,7.01-6.15,13.33-9.56,18.97c20.3-6.8,38.9-18.26,54.47-33.84
+			c7.64-7.64,14.28-16,19.87-24.93h-52.45C319.44,345.09,315.31,358.5,310.29,370.42z"/>
+		<path id="XMLID_5_" class="st0" d="M201.95,309.29h43.39v-47.96h-47.87C197.84,278.03,199.36,294.19,201.95,309.29L201.95,309.29z
+			"/>
+		<path id="XMLID_4_" class="st0" d="M314.53,261.33h-47.87v47.96h43.39C312.64,294.19,314.16,278.03,314.53,261.33L314.53,261.33z"
+			/>
+		<path id="XMLID_3_" class="st0" d="M326.88,309.29h56.33c6.78-14.99,10.78-31.19,11.75-47.96h-63.8
+			C330.8,277.93,329.35,294.08,326.88,309.29z"/>
+		<path id="XMLID_2_" class="st0" d="M331.15,245.34h63.8c-0.97-16.78-4.97-32.98-11.75-47.96h-56.33
+			C329.35,212.59,330.8,228.74,331.15,245.34z"/>
+	</g>
+</g>
+</svg>

src/client/assets/js/index.js

@@ -1,9 +1,12 @@
-const os = require('os');
+const { shell } = require('electron')
-const launchBtn = document.querySelector('#launch-btn');
+const os = require('os')
+const launchBtn = document.querySelector('#launch-btn')
+const launchText = document.querySelector("#launch-text")
 const fullProgressBar = document.querySelector('#fullprogressbar')
 const progressBar = document.querySelector('#progressbar')
 const loadingMessage = document.querySelector('#loading-message')
 const disconnectBtn = document.querySelector('#disconnect-btn')
+const fullscreen = document.querySelector('#fullscreen')
 const minMem = document.querySelector('#minMem')
 const maxMem = document.querySelector('#maxMem')
 const outputMinMem = document.querySelector('#outputMinMem')
@@ -21,13 +24,13 @@ document.body.onload = (e) => {
 
 ipcRenderer.on("nick", (event, args) => {
     console.log(args)
-    document.querySelector("#nick-span").innerHTML = args.name
+    document.querySelector("#nick").innerHTML = args.name
 })
 
 launchBtn.addEventListener("click", e => {
-    launchBtn.classList.add('hidden');
+    launchText.classList.add('hidden')
-    fullProgressBar.classList.remove('hidden');
+    fullProgressBar.classList.remove('hidden')
-    loadingMessage.classList.remove('hidden');
+    loadingMessage.classList.remove('hidden')
     if(Number(minMem.value) <= Number(maxMem.value)){
         ipcRenderer.send('launch', {
             minMem: minMem.value + "M",
@@ -45,23 +48,39 @@ launchBtn.addEventListener("click", e => {
     
 })
 
+document.querySelector("#web").addEventListener("click", e => {
+    shell.openExternal("https://altarik.fr")
+})
+
+document.querySelector("#options").addEventListener("click", e => {
+    fullscreen.style.display = "block"
+})
+
+document.querySelector("#discord").addEventListener("click", e => {
+    shell.openExternal("https://discord.gg/b923tMhmRE")
+})
+
+document.querySelector("#close").addEventListener("click", e => {
+    fullscreen.style.display = "none"
+});
+
 ipcRenderer.on("progress", (e, args) => {
-    progressBar.style.width = (args.task / args.total) * 100 + "%"
+    progressBar.style.width = (args.task / Math.max(args.total, args.task)) * 100 + "%"
-    loadingMessage.innerHTML = "Téléchargement de " + args.type + ": " + args.task + " sur " + args.total;
+    loadingMessage.innerHTML = "Téléchargement de " + args.type + ": " + args.task + " sur " + Math.max(args.total, args.task)
 })
 
 ipcRenderer.on("close", (e, args) => {
-    launchBtn.classList.remove('hidden');
+    launchText.classList.remove('hidden')
-    fullProgressBar.classList.add('hidden');
+    fullProgressBar.classList.add('hidden')
-    loadingMessage.classList.add('hidden');
+    loadingMessage.classList.add('hidden')
     loadingMessage.innerHTML = "Chargement de Minecraft en cours..."
     progressBar.style.width = "0"
     launchBtn.disabled = false
 })
 
 ipcRenderer.on('launch', (e, args) => {
-    fullProgressBar.classList.add('hidden');
+    fullProgressBar.classList.add('hidden')
-    loadingMessage.classList.add('hidden');
+    loadingMessage.classList.add('hidden')
 })
 
 disconnectBtn.addEventListener('click', e => {

src/client/assets/js/script.js

@@ -1,5 +1,5 @@
 'use strict';
-const { ipcRenderer } = require('electron');
+const { ipcRenderer, shell } = require('electron');
 
 window.addEventListener("DOMContentLoaded", () => {
     const minimizeButton = document.getElementById("minimize-btn")

src/client/index.html

@@ -18,27 +18,44 @@
             <li id="minimize-btn"><i class="material-icons">minimize</i></li><!--<li id="max-unmax-btn"><i class="material-icons">crop_square</i></li>--><li id="close-btn"><i class="material-icons">close</i></li>
         </ul>
     </div>
-    <div id="content">
+    <div id="fullscreen">
-        <div id="sidebar">
+        <div id="close"><i class="material-icons">close</i></div>
-            <h3>Compte</h3>
+        <div id="settings">
-            <hr>
-                <span id="nick-span"></span>
-                <button id="disconnect-btn">Se déconnecter</button>
                 <h3>Modifier la configuration</h3>
-            <hr>
+                <button id="disconnect-btn">Se déconnecter</button>
                 <h4>Allocation mémoire</h4>
                 <label for="minMem">mémoire minimale : <div id="outputMinMem"></div></label>
                 <input type="range" min="1024" max="2048" step="128" value="1" class="slider" id="minMem">
                 <label for="maxMem">mémoire maximale : <div id="outputMaxMem"></div></label>
                 <input type="range" min="1024" max="2048" step="128" value="1" class="slider" id="maxMem">
         </div>
+    </div>
+    <div id="content">
+        <div id="sidebar">
+            
+        </div>
+        <div id="media">
+            <div id="options">
+                <img src="assets/images/svg/settings.svg">
+            </div>
+            <div>
+                <img src="assets/images/svg/discord.svg">
+            </div>
+            <div id="web">
+                <img src="assets/images/svg/web.svg">
+            </div>
+            
+        </div>
         <div id="main">
             <img id="main-img" src="assets/images/maxresdefault.jpg">
-            <div id="launch">
+            <div id="account">
-                <button id="launch-btn">Lancer le jeu</button>
+                <div id="nick"></div><!-- <img src=""> Head du joueur -->
+            </div>
+            <button id="launch-btn">
+                <div id="launch-text">JOUER</div>
                 <div id="loading-message" class="hidden">Téléchargement de Minecraft en cours...</div>
                 <div id="fullprogressbar" class="hidden"><div id="progressbar"></div></div>
-            </div>
+            </button>
         </div>
     </p>
     </div>

src/server/main.js

@@ -35,7 +35,7 @@ function createWindow () {
     },
     frame: false,
   })
-  Menu.setApplicationMenu(null)
+  // Menu.setApplicationMenu(null)
   win.loadFile('src/client/login.html')
 }