summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.html13
-rw-r--r--play.js47
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"