Add sorted tiles option.

2 files changed, 44 insertions, 16 deletions

diff --git a/play.html b/play.html
index f98c8b2..1b0d91e 100644
--- a/play.html
+++ b/play.html
@@ -12,10 +12,7 @@
 <script defer src="play.js"></script>
 <style>
 
-@font-face{
-	font-family: "Albert Text";
-	src: url('fonts/AlbertText-Bold.woff2') format('woff2');
-}
+@font-face { font-family: "Albert Text"; src: url('fonts/AlbertText-Bold.woff2') format('woff2') }
 
 main {
 	user-select: none;
@@ -30,9 +27,9 @@ main {
 body.Observer #hand { display: none }
 .role_hand_size { float: right }
 
-.action {
-	cursor: pointer;
-}
+.checked::before { content: "\2714  " }
+.unchecked::before { content: "\2714  "; color: transparent; }
+.action { cursor: pointer; }
 
 /* BOARD */
 
@@ -244,6 +241,8 @@ body.Observer #hand { display: none }
 			<div class="menu_title"><img src="/images/cog.svg"></div>
 			<div class="menu_popup">
 				<a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
+				<div class="menu_separator"></div>
+				<div id="sort_tiles_menu" class="menu_item unchecked" onclick="toggle_sort()">Sort tiles</div>
 				<div class="resign menu_separator"></div>
 				<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
 			</div>
diff --git a/play.js b/play.js
index fcde5d8..cfd9fa1 100644
--- a/play.js
+++ b/play.js
@@ -2,6 +2,20 @@
 
 /* global view, player, send_action, action_button, scroll_with_middle_mouse */
 
+let opt_sort_tiles = window.localStorage['field-cloth-gold/sort'] | 0
+check_menu("sort_tiles_menu", opt_sort_tiles === 1)
+
+function check_menu(id, x) {
+        document.getElementById(id).className = x ? "menu_item checked" : "menu_item unchecked"
+}
+
+function toggle_sort() {
+	opt_sort_tiles = 1 - opt_sort_tiles
+	check_menu("sort_tiles_menu", opt_sort_tiles === 1)
+	window.localStorage['field-cloth-gold/sort'] = opt_sort_tiles
+	on_update()
+}
+
 const TILE_NONE = -1
 const TILE_GOLD = 0
 const TILE_BLUE = 12
@@ -171,6 +185,12 @@ function on_init() {
 		ui.tiles[i] = create_item({ className: "tile green", my_action: "tile", my_id: i })
 }
 
+function cmp_tile(a, b) {
+	a = ((a / 12 | 0) + 1) % 5
+	b = ((b / 12 | 0) + 1) % 5
+	return a - b
+}
+
 function on_update() {
 	on_init()
 
@@ -180,8 +200,17 @@ function on_update() {
 
 	ui.darkness_button.classList.toggle("action", is_action("darkness"))
 
+	let hand = view.hand
+	let red_court = view.red_court
+	let blue_court = view.blue_court
+	if (opt_sort_tiles) {
+		hand = hand.slice().sort(cmp_tile)
+		red_court = red_court.slice().sort(cmp_tile)
+		blue_court = blue_court.slice().sort(cmp_tile)
+	}
+
 	for (let i = 0; i < 54; ++i) {
-		if ((view.hand && view.hand.includes(i)) || view.red_court.includes(i) || view.blue_court.includes(i) || view.squares.includes(i)) {
+		if ((hand && hand.includes(i)) || red_court.includes(i) || blue_court.includes(i) || view.squares.includes(i)) {
 			ui.tiles[i].style.opacity = 1
 			ui.tile_was_visible[i] = 1
 		} else {
@@ -221,13 +250,13 @@ function on_update() {
 	if (player !== "Blue") {
 		ui.court1.className = "blue court"
 		ui.court2.className = "red court"
-		court1 = view.blue_court
-		court2 = view.red_court
+		court1 = blue_court
+		court2 = red_court
 	} else {
 		ui.court1.className = "red court"
 		ui.court2.className = "blue court"
-		court1 = view.red_court
-		court2 = view.blue_court
+		court1 = red_court
+		court2 = blue_court
 	}
 
 	let tile_space = calc_tile_spacing(court1.length)
@@ -250,10 +279,10 @@ function on_update() {
 		ui.tiles[k].style.zIndex = i
 	}
 
-	if (view.hand) {
-		tile_space = calc_tile_spacing(view.hand.length)
-		for (let i = 0; i < view.hand.length; ++i) {
-			let k = view.hand[i]
+	if (hand) {
+		tile_space = calc_tile_spacing(hand.length)
+		for (let i = 0; i < hand.length; ++i) {
+			let k = hand[i]
 			let x = HAND_X + tile_space * i
 			let y = HAND_Y
 			ui.tiles[k].style.left = x + "px"