Update extras page; add profile page.

www/asset/icon.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   sodipodi:docname="icon.svg"
+   inkscape:export-filename="icon.png"
+   inkscape:export-xdpi="409.60001"
+   inkscape:export-ydpi="409.60001"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="true"
+     inkscape:zoom="4.9208333"
+     inkscape:cx="116.95174"
+     inkscape:cy="60.355631"
+     inkscape:window-width="2588"
+     inkscape:window-height="1368"
+     inkscape:window-x="1257"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1"
+     inkscape:export-bgcolor="#282828ff">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g1"
+       transform="translate(10.545,9.417598)">
+      <path
+         style="fill:#621313;fill-opacity:1;stroke-width:0.858648"
+         d="M 50.815749,2.7427281 V 13.04653 L 29.349496,28.502232 25.056245,88.607742 H 76.575253 L 72.282002,28.502232 50.815749,13.04653 V 2.7427281 L 85.161752,24.208981 89.455,84.314494 76.575253,92.900997 H 25.056245 l -12.879751,-8.586503 4.29325,-60.105513 z"
+         id="path2-3"
+         sodipodi:nodetypes="ccccccccccccccc" />
+      <path
+         style="fill:#ae5555;fill-opacity:1;stroke-width:0.858648"
+         d="M 48.094256,0.2638065 V 10.567609 L 26.628002,26.02331 22.334752,86.12882 H 73.853759 L 69.560509,26.02331 48.094256,10.567609 V 0.2638065 L 82.44026,21.73006 86.733508,81.835572 73.853759,90.422075 H 22.334752 L 9.455,81.835572 13.748251,21.73006 Z"
+         id="path2"
+         sodipodi:nodetypes="ccccccccccccccc" />
+    </g>
+  </g>
+</svg>

www/css/ui.css

@@ -149,4 +149,3 @@ input#turn-slider{
     height:1rem;
     accent-color:#702e2e;
 }
-

www/js/scene.js

@@ -586,13 +586,57 @@ const SCENES = {
         constructor() { }
         load() {
             UI.mainmenu("extras");
-            UI.mainnav([], []);
 
             history.pushState(null, "Dzura - About", "/extras/");
             return true;
         }
     },
 
+    Profile:class{
+        constructor() { }
+        load(data) {
+            let buttons_top = [ ];
+            let buttons_bottom = [ ];
+            let buttons_left = [ ];
+            let buttons_right = [ ];
+
+            // Top Buttons
+            buttons_top.push(UI.button("Profile", () => { }));
+            buttons_top.push(UI.button("History", () => { }));
+
+            // Bottom Buttons
+            if(data.handle === CONTEXT.Auth.handle) {
+                buttons_bottom.push(UI.button("Account", () => { }));
+                buttons_bottom.push(UI.button("Security", () => { }));
+                buttons_bottom.push(UI.button("Payments", () => { }));
+            }
+            buttons_bottom.push(UI.button(LANG("back"), () => { LOAD(SCENES.Browse); }));
+
+            // Left Buttons
+
+            // Right Buttons
+            if(data.handle === CONTEXT.Auth.handle) {
+                buttons_right.push(UI.button(LANG("logout"), () => {
+                    BADGE_UPDATE(false);
+                    MESSAGE_COMPOSE([
+                        PACK.u16(OpCode.Deauthenticate),
+                    ]);
+                    sessionStorage.clear();
+                    CONTEXT.Auth = null;
+                    LOAD(SCENES.Browse);
+                }));
+            }
+
+            UI.nav(buttons_top, buttons_bottom);
+            UI.mainnav(buttons_left, buttons_right);
+
+            // Main Content
+
+            history.pushState(null, "Dzura - About", "/u/" + data.handle);
+            return true;
+        }
+    },
+
     GameLoad:class{
         constructor() {
             this.mode = null;
@@ -1085,6 +1129,7 @@ function LOAD_URL() {
             case "guide": LOAD(SCENES.Guide); return;
             case "about": LOAD(SCENES.About); return;
             case "challenge": LOAD(SCENES.Challenge); return;
+            case "extras": LOAD(SCENES.Extras); return;
 
             case "game": {
                 if(parts[2]) {

www/js/ui.js

@@ -165,20 +165,17 @@ const UI = {
             top.push(UI.button(LANG("guide"), () => { LOAD(SCENES.Guide); }, page == "guide"));
             top.push(UI.button(LANG("about"), () => { LOAD(SCENES.About); }, page == "about"));
 
-            bottom.push(UI.button(LANG("extras"), () => { LOAD(SCENES.Extras) }, page == "extras"));
-
             if(CONTEXT.Auth !== null) {
-                bottom.push(UI.button(CONTEXT.Auth.handle, () => { }));
+                let callback_profile = function() {
-                bottom.push(UI.button(LANG("logout"), () => {
+                    LOAD(SCENES.Profile, { handle: this.handle });
-                    BADGE_UPDATE(false);
+                };
-                    MESSAGE_COMPOSE([
+                callback_profile = callback_profile.bind({
-                        PACK.u16(OpCode.Deauthenticate),
+                    handle: CONTEXT.Auth.handle,
-                    ]);
+                });
-                    sessionStorage.clear();
+
-                    CONTEXT.Auth = null;
+                bottom.push(UI.button(CONTEXT.Auth.handle, callback_profile));
-                    LOAD_URL();
-                }));
             }
+            bottom.push(UI.button(LANG("extras"), () => { LOAD(SCENES.Extras) }, page == "extras"));
 
             UI.nav(top, bottom);
         }