Adding oidc initialisation.

.vscode/tasks.json

@@ -19,6 +19,16 @@
             "type": "shell",
             "command": "gulp watch",
             "group": "build"
+        },
+        {
+            "label": "Watch Typescript",
+            "type": "typescript",
+            "tsconfig": "tsconfig.json",
+            "option": "watch",
+            "group": "build",
+            "problemMatcher": [
+                "$tsc-watch"
+            ]
         }
     ]
 }

dist/css/carousel.css

@@ -1,77 +0,0 @@
-.scene {
-  margin: 40px 0;
-  position: relative;
-  width: 210px;
-  height: 140px;
-  margin: 80px auto;
-  -webkit-perspective: 1000px;
-          perspective: 1000px;
-}
-
-.carousel {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  -webkit-transform: translateZ(-880px) rotateY(0);
-          transform: translateZ(-880px) rotateY(0);
-  -webkit-transform-style: preserve-3d;
-          transform-style: preserve-3d;
-  -webkit-transition: -webkit-transform 1s;
-  transition: -webkit-transform 1s;
-  transition: transform 1s;
-  transition: transform 1s, -webkit-transform 1s;
-}
-
-.carousel__cell {
-  position: absolute;
-  width: 25vw;
-  height: auto;
-  left: 10px;
-  bottom: 0px;
-}
-
-.carousel__cell:nth-child(1) {
-  -webkit-transform: rotateY(0deg) translateZ(1000px);
-          transform: rotateY(0deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(2) {
-  -webkit-transform: rotateY(20deg) translateZ(1000px);
-          transform: rotateY(20deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(3) {
-  -webkit-transform: rotateY(40deg) translateZ(1000px);
-          transform: rotateY(40deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(4) {
-  -webkit-transform: rotateY(60deg) translateZ(1000px);
-          transform: rotateY(60deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(5) {
-  -webkit-transform: rotateY(80deg) translateZ(1000px);
-          transform: rotateY(80deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(6) {
-  -webkit-transform: rotateY(100deg) translateZ(1000px);
-          transform: rotateY(100deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(7) {
-  -webkit-transform: rotateY(120deg) translateZ(1000px);
-          transform: rotateY(120deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(8) {
-  -webkit-transform: rotateY(140deg) translateZ(1000px);
-          transform: rotateY(140deg) translateZ(1000px);
-}
-
-.carousel__cell:nth-child(9) {
-  -webkit-transform: rotateY(160deg) translateZ(1000px);
-          transform: rotateY(160deg) translateZ(1000px);
-}
-/*# sourceMappingURL=carousel.css.map */

dist/css/carousel.css.map

@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "AAAA,AAAA,MAAM,CACN;EAEE,MAAM,EAAE,MAAM;EACd,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,SAAS;EACjB,WAAW,EAAE,MAAM;CACpB;;AAED,AAAA,SAAS,CACT;EACE,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,SAAS,EAAE,kBAAkB,CAAC,UAAU;EACxC,eAAe,EAAE,WAAW;EAC5B,UAAU,EAAE,YAAY;CACzB;;AAED,AAAA,eAAe,CACf;EACE,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,IAAI;EACV,MAAM,EAAE,GAAG;CASZ;;AAfD,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,aAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,cAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,cAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,cAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,cAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,eAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,eAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,eAAmB,CAAC,kBAAkB;CAClD;;AAbL,AAUI,eAVW,AAUV,UAAW,CAAA,CAAC,EACb;EACE,SAAS,EAAE,eAAmB,CAAC,kBAAkB;CAClD",
-    "sources": [
-        "../../src/scss/fragments/carousel.scss"
-    ],
-    "names": [],
-    "file": "carousel.css"
-}

dist/html/settings.html

@@ -1 +1,4 @@
-<p>Settings</p>
+<div class="container">
+    <p>Steam</p>
+    <button onClick="steamLogIn()">Steam sign in</button>
+</div>

dist/js/index.js

@@ -1,10 +1,16 @@
 "use strict";
-function openSettings() {
-    $("#content").load("dist/html/settings.html");
-}
 function home() {
     $("#content").load("dist/html/home.html", () => {
         setup();
         populateGrid();
     });
+    document.getElementById("title").innerHTML = "EAU";
+}
+function openSettings() {
+    $("#content").load("dist/html/settings.html");
+    document.getElementById("title").innerHTML = "<i class='icon fas fa-arrow-left'></i>  Settings";
+}
+function steamLogIn() {
+    console.log("Logging into steam");
+    new Oidc.UserManager("https://steamcommunity.com/openid", "7C218E8D1347C3CD6CB8117E5ED533BC", "localhost:5500");
 }

index.html

@@ -8,6 +8,7 @@
         
         <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
         <script src="node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="node_modules/oidc-client/dist/oidc-client.min.js"></script>
         <script>if (window.module) module = window.module;</script>
 
         <script src="dist/js/Carousel.js"></script>
@@ -17,7 +18,7 @@
     <body onLoad="home()">
         <header> 
             <nav class="navbar navbar-dark bg-primary align-items-end"> <!--fixed-top-->
-                <a class="navbar-brand" onClick="home()">EAU</a>
+                <a id="title" class="navbar-brand text-white" onClick="home()">EAU</a>
                 <div style="float: right;">
                     <div class="searchbar">
                         <button type="button" class="btn icon" onClick="openSearch()"><i class="fa fa-search"></i></button>

src/ts/index.ts

@@ -1,15 +1,24 @@
-function openSettings()
-{
-    $("#content").load("dist/html/settings.html");
-}
-
 function home()
 {
     $("#content").load("dist/html/home.html", () =>
     {
         setup()
         populateGrid();
-    });   
+    });
+    document.getElementById("title").innerHTML = "EAU";
 }
 
+function openSettings()
+{
+    $("#content").load("dist/html/settings.html");
+    document.getElementById("title").innerHTML = "<i class='icon fas fa-arrow-left'></i>  Settings";
+}
 
+//Log In
+declare var Oidc: UserManager;
+
+function steamLogIn()
+{
+    console.log("Logging into steam");
+    new Oidc.UserManager("https://steamcommunity.com/openid", "7C218E8D1347C3CD6CB8117E5ED533BC", "localhost:5500");
+}

tsconfig.json

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
+      "baseUrl": ".",
+      "paths": { "*": ["types/*"] },
     /* Basic Options */
     "target": "ES2018",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "ES2015",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "module": "commonjs",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": 
     // [
     //   "dom"

types/oidc-client.d.ts

@@ -0,0 +1 @@
+