diff --git a/package-lock.json b/package-lock.json index 719538f..1f75c2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "angular-electron", - "version": "11.1.0", + "name": "skirda-launcher", + "version": "0.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "angular-electron", - "version": "11.1.0", + "name": "skirda-launcher", + "version": "0.0.0", "hasInstallScript": true, "dependencies": { "@angular/common": "14.0.6", @@ -57,7 +57,7 @@ "karma-jasmine-html-reporter": "2.0.0", "node-polyfill-webpack-plugin": "2.0.0", "npm-run-all": "4.1.5", - "playwright": "1.23.4", + "playwright": "^1.23.4", "ts-node": "10.9.1", "typescript": "~4.7.4", "wait-on": "6.0.1", diff --git a/package.json b/package.json index 7f156b0..c72ea7a 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "karma-jasmine-html-reporter": "2.0.0", "node-polyfill-webpack-plugin": "2.0.0", "npm-run-all": "4.1.5", - "playwright": "1.23.4", + "playwright": "^1.23.4", "ts-node": "10.9.1", "typescript": "~4.7.4", "wait-on": "6.0.1", diff --git a/src/app/game-side-button/game-side-button.component.html b/src/app/game-side-button/game-side-button.component.html index ac1d30b..afc96f5 100644 --- a/src/app/game-side-button/game-side-button.component.html +++ b/src/app/game-side-button/game-side-button.component.html @@ -1 +1,18 @@ -AAAAAAAA \ No newline at end of file +
+
+ +
+
+
+
+ Warface +
+
+ Pirate +
+
+
+ 2 people voted. Need 4 more to play. +
+
+
\ No newline at end of file diff --git a/src/app/game-side-button/game-side-button.component.scss b/src/app/game-side-button/game-side-button.component.scss index e69de29..943fb86 100644 --- a/src/app/game-side-button/game-side-button.component.scss +++ b/src/app/game-side-button/game-side-button.component.scss @@ -0,0 +1,27 @@ +/*********************************************/ +/************** Games Bar *******************/ +/*********************************************/ + +#GamesBar { + margin-left: 15px; +} +.GameBar { + display: flex; + margin-top: 13px; + padding: 10px 0 2px 10px; + margin-right: 15px; +} +.GameBar:hover { + background-color: rgba(255, 255, 255, 0.2); + border-radius: 10px; + -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); + backdrop-filter: drop-shadow(5px 5px 4px #ffffff); +} +.GameBar > .two-lines-centered { + margin-top: 5px; + margin-left: 15px; +} +.SessionCount { + font-size: 13px; + margin: 20px 0 20px 10px; +} \ No newline at end of file diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index e57a09d..d45a9be 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,9 +1,67 @@
-

- {{ 'PAGES.HOME.TITLE' | translate }} -

-
asdasdasdasdasdasd
- {{ 'PAGES.HOME.GO_TO_DETAIL' | translate }} +
+
+
+ +
+
+
+
+ MrSandyMoon +
+
+ Booster +
+
+
+ Administrator +
+
+
+ +
+ +
+ +
+ 2 + sessions active +
+ + +
+ 1 + session announced +
+ + +
+ 2 + sessions to be voted +
+ +
+ +
+
+ +
+
+
+ Minecraft +
+
+ Survival +
+
+ 1.12.2 +
+
+
+ Survival world with mods such as Industrial Craft, RailCraft, etc. +
+
+
diff --git a/src/assets/background.jpg b/src/assets/background.jpg deleted file mode 100644 index 6058e77..0000000 Binary files a/src/assets/background.jpg and /dev/null differ diff --git a/src/styles.scss b/src/styles.scss index 4c1c4b2..bc162b5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,50 +1,151 @@ /* You can add global styles to this file, and also import other style files */ html, body { - margin: 0; - padding: 0; - - height: 100%; - font-family: Arial, Helvetica, sans-serif; + margin: 0; + background: url("./assets/6.png") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + font-family: "Poppins-Regular"; + color: white; + height: 100%; } -/* CAN (MUST) BE REMOVED ! Sample Global style */ +/*********************************************/ +/************** Text Styling *****************/ +/*********************************************/ + +@font-face { + font-family: "Poppins-Regular"; + src: url("./assets/Poppins/Poppins-Regular.ttf"); +} +@font-face { + font-family: "Poppins-Light"; + src: url("./assets/Poppins/Poppins-Light.ttf"); +} +@font-face { + font-family: "Poppins-SemiBold"; + src: url("./assets/Poppins/Poppins-SemiBold.ttf"); +} + +.SemiBold { + font-family: "Poppins-SemiBold" +} +.Light { + font-family: "Poppins-Light" +} + +/*********************************************/ +/************** Main Frame *******************/ +/*********************************************/ + .container { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - background: url(./assets/background.jpg) no-repeat center fixed; - -webkit-background-size: cover; /* pour anciens Chrome et Safari */ - background-size: cover; /* version standardisée */ - - .title { - color: white; - margin: 0; - padding: 50px 20px; - } - - a { - color: #fff !important; - text-transform: uppercase; - text-decoration: none; - background: #ed3330; - padding: 20px; - border-radius: 5px; - display: inline-block; - border: none; - transition: all 0.4s ease 0s; - - &:hover { - background: #fff; - color: #ed3330 !important; - letter-spacing: 1px; - -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); - -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); - box-shadow: 5px 40px -10px rgba(0,0,0,0.57); - transition: all 0.4s ease 0s; - } - } + display: flex; + height: 100%; +} +#LeftBar { + width: 30%; + display: inline-block; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + min-width: 350px; +} +#RightBar { + width: 70%; + display: inline-block; + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); + padding-left: 20px; } +/*********************************************/ +/************** Default Set ******************/ +/*********************************************/ + + +.two-lines-centered { + +} +.two-lines-centered > .first-line { + display: flex; +} +.two-lines-centered > .light { + font-size: 12px; +} +.light { + font-family: "Poppins-Light"; +} +.label { + color: white; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 6px; + height: min-content; + padding: 0 5px 0 5px; + font-size: 10px; + margin: 5px 0 0 5px; +} +.rounded > img{ + border-radius: 50%; +} +.cornering > img { + border-radius: 10px; +} + +hr { + border: 1px solid rgba(0, 0, 0, 0.1); +} + +/*********************************************/ +/************** Profile Bar ******************/ +/*********************************************/ + +.ProfileBar { + display: flex; + padding: 5px 0 0 10px; + margin-bottom: -10px; + height: 60px; +} +.ProfileBar > .two-lines-centered { + margin-top: 4px; + margin-left: 15px; +} +#ProfilePicture { + padding-top: 3px; +} + +.first-line > .header { + font-size: 19px; + margin-bottom: -5px; +} + +/*********************************************/ +/************** Games Bar *******************/ +/*********************************************/ + +#GamesBar { + margin-left: 15px; +} +.GameBar { + display: flex; + margin-top: 13px; + padding: 10px 0 2px 10px; + margin-right: 15px; +} +.GameBar:hover { + background-color: rgba(255, 255, 255, 0.2); + border-radius: 10px; + -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); + backdrop-filter: drop-shadow(5px 5px 4px #ffffff); +} +.GameBar > .two-lines-centered { + margin-top: 5px; + margin-left: 15px; +} +.SessionCount { + font-size: 13px; + margin: 20px 0 20px 10px; +} + +.big { + font-size: calc(+20%); +}