Merge pull request #105 from nuclear-unicorn/master

Master -> beta merge
nuclear-unicorn · Jan 9, 2025 · 5568f16 · 5568f16
2 parents 8b29db9 + 3fb8427
commit 5568f16
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 46 deletions.
diff --git a/core.js b/core.js
@@ -918,6 +918,7 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 				position: "relative",
 				display: this.model.visible ? "block" : "none"
 			},
+			"aria-description": this.model.description,
 			tabIndex: 0
 		}, btnContainer);
 
@@ -944,11 +945,10 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 		}
 
 		this.updateVisible();
+		this.afterRender();
 
 		dojo.connect(this.domNode, "onclick", this, "onClick");
 		dojo.connect(this.domNode, "onkeypress", this, "onKeyPress");
-
-		this.afterRender();
 	},
 
 	animate: function(){
@@ -978,14 +978,13 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 
 	},
 
-	onKeyPress: function(event){
-		if (event.key == "Enter"){
-			this.onClick(event);
+	onKeyPress: function(e){
+		if (e.key == "Enter"){
+			this.onClick(e);
 		}
 	},
 
 	afterRender: function(){
-
 		var prices = this.model.prices;
 		if (prices.length && !this.tooltip){
 
@@ -1031,8 +1030,11 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 			dojo.connect(this.domNode, "onmouseover", this, dojo.partial(function(tooltip){ dojo.style(tooltip, "display", ""); }, tooltip));
 			dojo.connect(this.domNode, "onmouseout", this,  dojo.partial(function(tooltip){ dojo.style(tooltip, "display", "none"); }, tooltip));
 
+
 			this.tooltip = tooltip;
 			this.tooltipPricesNodes = tooltipPricesNodes;
+
+			console.log("this after render", this);
 		}
 	},
 
@@ -2518,7 +2520,7 @@ UIUtils = {
 		var gameNode = dojo.byId("game");
 		var tooltip = dojo.byId("tooltip");
 
-		dojo.connect(container, "onmouseover", this, function() {
+		var showTooltip = function () {
 			game.tooltipUpdateFunc = function(){
 				tooltip.innerHTML = dojo.hitch(game, htmlProvider)();
 			};
@@ -2549,12 +2551,24 @@ UIUtils = {
 			if (tooltip.innerHTML) {
 				dojo.style(tooltip, "display", "");
 			}
-		});
+		};
+
+		dojo.connect(container, "onmouseover", this, showTooltip);
 
 		dojo.connect(container, "onmouseout", this, function(){
 			game.tooltipUpdateFunc = null;
 			dojo.style(tooltip, "display", "none");
 		});
+
+		dojo.connect(container, "onkeydown", this, function(e){
+			if (e.code == "Space"){
+				e.stopPropagation();
+				e.preventDefault();
+
+				showTooltip();
+				tooltip.focus();
+			}
+		});
 
 		return htmlProvider;
 	}

diff --git a/game.js b/game.js
@@ -1847,7 +1847,7 @@ dojo.declare("com.nuclearunicorn.game.ui.GamePage", null, {
 	//		option settings
 	//=============================
 	forceShowLimits: false,
-	useWorkers: false,
+	useWorkers: true,
 	colorScheme: "",
 	unlockedSchemes: null,
 
@@ -2235,7 +2235,7 @@ dojo.declare("com.nuclearunicorn.game.ui.GamePage", null, {
 
 	resetState: function(){
 		this.forceShowLimits = false;
-		this.useWorkers = false;
+		this.useWorkers = true;
 		this.colorScheme = "";
 		this.unlockedSchemes = this.ui.defaultSchemes;
 		this.karmaKittens = 0;
@@ -2517,7 +2517,7 @@ dojo.declare("com.nuclearunicorn.game.ui.GamePage", null, {
 			this.karmaZebras = (data.karmaZebras !== undefined) ? data.karmaZebras : 0;
 			this.deadKittens = (data.deadKittens !== undefined) ? data.deadKittens : 0;
 			this.ironWill = (data.ironWill !== undefined) ? data.ironWill : true;
-			this.useWorkers = (data.useWorkers !== undefined) ? data.useWorkers : false;
+			this.useWorkers = (data.useWorkers !== undefined) ? data.useWorkers : true;
 
 			this.cheatMode = (data.cheatMode !== undefined) ? data.cheatMode : false;
 			this.startedWithoutChronospheres = (data.startedWithoutChronospheres !== undefined) ? data.startedWithoutChronospheres : false; //false for existing games
@@ -3997,7 +3997,6 @@ dojo.declare("com.nuclearunicorn.game.ui.GamePage", null, {
 		dojo.connect(container, "onmouseout", this, function(){
 			dojo.style(container, "fontWeight", "normal");
 		});
-
 	},
 
 	/**

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 
 	<head>
 		<meta charset="utf-8">
@@ -306,7 +306,7 @@
 	<body>
 		<div id="gamePageContainer">
 
-			<div id="topBar">
+			<div id="topBar" aria-label="Header panel">
 				<div style="padding-left: 10px; min-width: 0px; max-width: 400px; overflow: hidden; text-overflow: ellipsis;">
 					<span class="gameTitle">Kittens Game </span>
 					<span style="font-size: small;">
@@ -363,7 +363,7 @@
 				</div>
 			</div>
 
-			<div id="loadingContainer">
+			<div id="loadingContainer" aria-label="Loading screen">
 				<div class="content">
 					<span style="font-size:18px;"><img class="loader" width="16" height="16" src="res/ajax-loader.gif">&nbsp;Loading...<br></span>
 					<br>
@@ -373,17 +373,17 @@
 			</div>
 
 			<div id="game" style="display:none;">
-				<div id="tooltip" class="button_tooltip"></div>
+				<div id="tooltip" class="button_tooltip" role="tooltip" tabindex="0"></div>
 
 				<!-- LEFT -->
-				<div id="leftColumn" class="column" style="vertical-align: top;">
+				<div id="leftColumn" class="column" style="vertical-align: top;" aria-label="Resource panel">
 					<div id="leftColumnViewport">
 						Loading...
 					</div>
 				</div>
 
 				<!-- MID -->
-				<div id="midColumn" style="vertical-align: top;" class="column">
+				<div id="midColumn" style="vertical-align: top;" class="column" aria-label="Main panel">
 					<div id="midColumnViewport" style="float:right; padding: 5px;">
 						Loading...
 					</div>
@@ -409,7 +409,7 @@
 				</div>
 
 				<!-- RIGHT -->
-				<div id="rightColumn" class="column">
+				<div id="rightColumn" class="column" aria-label="Game log">
 					<div>
 						<span id="calendarSign" style="cursor:pointer;"></span><span id="calendarDiv" style="cursor:pointer;">Calendar :V</span>
 						<a id="dev_boostCalendar" href="#" onclick="dev_boostCalendar();" style="display: none; text-decoration: none; position: relative; left: 5px;">&gt;&gt;&gt;</a>

diff --git a/js/jsx/left.jsx.js b/js/jsx/left.jsx.js
@@ -25,8 +25,11 @@ WCollapsiblePanel = React.createClass({
                     className:  "left"
                     }, 
                     $r("a", {
+                            href: "#!",
                             className:"link collapse", 
-                            onClick: this.toggleCollapsed
+                            onClick: this.toggleCollapsed,
+                            tabindex: 1,
+                            title: this.props.title
                         },
                         this.state.isCollapsed ? ">(" +  this.props.title + ")" : "v"
                     )
@@ -204,13 +207,15 @@ WResourceRow = React.createClass({
             (!res.visible ? " hidden" : "")
         ;
 
-        return $r("div", {className: resRowClass}, [
+        var resPercent = ((res.value / res.maxValue) * 100).toFixed();
+
+        return $r("div", {role: "row", className: resRowClass}, [
             this.props.isEditMode ? 
                 $r("div", {className:"res-cell"},
                     $r("input", {
                         type:"checkbox", 
                         checked: this.getIsVisible(),
-
+                        title: "Toggle " + $I("resources." + res.name + ".title"),
                         onClick: this.toggleView,
                         style:{display:"inline-block"},
                     })
@@ -220,17 +225,20 @@ WResourceRow = React.createClass({
                 className:"res-cell resource-name", 
                 style:resNameCss,
                 onClick: this.onClickName,
-                title: res.title || res.name
+                title: (res.title || res.name) + " " + resPercent + "%/" + game.getDisplayValueExt(res.maxValue) + " " + perTickVal,
+                role: "gridcell",
+                userFocus:"normal",
+                tabIndex: 0,
             }, 
                 res.title || res.name
             ),
-            $r("div", {className:"res-cell " + resAmtClassName + specialClass}, game.getDisplayValueExt(res.value)),
-            $r("div", {className:"res-cell maxRes"}, 
+            $r("div", {className:"res-cell " + resAmtClassName + specialClass, role: "gridcell"}, game.getDisplayValueExt(res.value)),
+            $r("div", {className:"res-cell maxRes", role: "gridcell"}, 
                 res.maxValue ? "/" + game.getDisplayValueExt(res.maxValue) : ""
             ),
-            $r("div", {className:"res-cell resPerTick", ref:"perTickNode"}, 
+            $r("div", {className:"res-cell resPerTick", role: "gridcell", ref:"perTickNode"}, 
                 isTimeParadox ? "???" : perTickVal),
-            $r("div", {className:"res-cell" + (weatherModCss ? " " + weatherModCss : "")}, weatherModValue)
+            $r("div", {className:"res-cell" + (weatherModCss ? " " + weatherModCss : ""), role: "gridcell"}, weatherModValue)
         ]);
     },
     onClickName: function(e){
@@ -556,14 +564,17 @@ WResourceTable = React.createClass({
         }
         //TODO: mixing special stuff like fatih and such here
 
-        return $r("div", null, [
+        return $r("div", {ariaLabel:"Regular resources"}, [
             $r("div", null,[
                 $r("div", {
                     className:"res-toolbar left"
                 }, 
                     $r("a", {
+                            href: "#!", 
                             className:"link collapse", 
-                            onClick: this.toggleCollapsed
+                            onClick: this.toggleCollapsed,
+                            tabindex: 1,
+                            title: "Toggle resources",
                         },
                         this.state.isCollapsed ? ">(" + $I("left.resources") + ")" : "v"
                     )
@@ -573,9 +584,10 @@ WResourceTable = React.createClass({
                         className: "link" + (this.state.isEditMode ? " toggled" : ""), 
                         onClick: this.toggleEdit,
                         onKeyDown: this.onKeyDown,
-                        tabIndex: 0
+                        title:  "Resource settings",
+                        tabIndex: 1
                     }, "⚙"),
-                    $r(WTooltip, {body:"?"}, 
+                    $r(WTooltip, {body:"?", tabindex: 1}, 
                         $I("left.resources.tip"))
 
                 )
@@ -586,7 +598,7 @@ WResourceTable = React.createClass({
                         $r("a", {className:"link", onClick: game.ui.zoomUp.bind(game.ui)}, $I("left.font.inc")),
                         $r("a", {className:"link", onClick: game.ui.zoomDown.bind(game.ui)}, $I("left.font.dec")),
                     ]),
-                    $r("div", {className:"res-table"}, resRows)
+                    $r("div", {className:"res-table", role: "grid"}, resRows)
                 ]),
 
             //TODO: this stuff should not be exposed to beginner player to not overwhelm them
@@ -654,14 +666,16 @@ WCraftTable = React.createClass({
             return null;
         }
 
-        return $r("div", null, [
+        return $r("div", {ariaLabel:"Craftable resources"}, [
             $r("div", null,[
                 $r("div", {
                     className:"res-toolbar left",
                 }, 
                     $r("a", {
                             className:"link collapse", 
-                            onClick: this.toggleCollapsed
+                            onClick: this.toggleCollapsed,
+                            tabindex: 1,
+                            title: "Toggle craft",
                         },
                         this.state.isCollapsed ? ">(" + $I("left.craft") + ")" : "v"
                     )
@@ -671,7 +685,7 @@ WCraftTable = React.createClass({
                         className: "link" + (this.state.isEditMode ? " toggled" : ""), 
                         onClick: this.toggleEdit,
                         onKeyDown: this.onKeyDown,
-                        tabIndex: 0
+                        tabindex: 1
                     }, "⚙")
                 )
             ]),
@@ -857,7 +871,7 @@ WTooltip = React.createClass({
 
     render: function(){
         return $r("div", {
-            tabIndex: 0,
+            tabIndex: this.props.tabindex ?? 0,
             className: "tooltip-block", 
             onMouseOver: this.onMouseOver, 
             onMouseOut: this.onMouseOut,

diff --git a/js/jsx/toolbar.jsx.js b/js/jsx/toolbar.jsx.js
@@ -341,14 +341,16 @@ WLoginForm = React.createClass({
             {onClick: function (e){ e.stopPropagation(); }},
             [
                 $r("div", {className: "row"}, [
-                    "Email:",
+                    $r("label", {for:"kgnet-email"}, "Email:"),
                         $r("input", {
+                            id:"kgnet-email",
                             type: "email",
                             onChange: this.setLogin,
                             value: this.state.login
                         } ),
-                    "Password:",
+                    $r("label", {for:"kgnet-password"}, "Password:"),
                         $r("input", {
+                            id:"kgnet-password",
                             type: "password",
                             onChange: this.setPassword,
                             value: this.state.password
@@ -646,15 +648,21 @@ WLogin = React.createClass({
         },
             $r("div",
                 {
-                    onClick: this.toggleExpanded
+                    onClick: this.toggleExpanded,
+                    onKeyDown: this.onKeyDown
                 },
                 [
-                    $r("span", {
-                        className: "kgnet-login-link status-indicator-" + (game.server.userProfile ? "online" : "offline")
-                        + (lastBackup >= 7 ? " freshMessage" : "")
-                    }, "* " + (game.server.userProfile ?
-                        $I("ui.kgnet.online") : $I("ui.kgnet.login")
-                    )),
+                    $r("a", {
+                        href:"#!",
+                        onClick: this.toggleExpanded,
+                    }, 
+                        $r("span", {
+                            className: "kgnet-login-link status-indicator-" + (game.server.userProfile ? "online" : "offline")
+                            + (lastBackup >= 7 ? " freshMessage" : "")
+                        }, "* " + (game.server.userProfile ?
+                            $I("ui.kgnet.online") : $I("ui.kgnet.login")
+                        )),
+                    ),
                     this.state.isExpanded && $r("div", {
                         className: "login-popup button_tooltip tooltip-block"
                     },
@@ -677,6 +685,12 @@ WLogin = React.createClass({
         this.setState({
             isExpanded: !this.state.isExpanded
         })
+    },
+
+    onKeyDown: function(e){
+        if(e.key === "Escape") {
+            this.toggleExpanded()
+        }
     }
 });