summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/common/client.js208
1 files changed, 104 insertions, 104 deletions
diff --git a/public/common/client.js b/public/common/client.js
index cf00c33..33b9147 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -1,31 +1,24 @@
"use strict"
-/* global on_update, on_replay, on_log */
+/* global on_update, on_reply, on_log */
-// TODO: hide more functions and globals in anonymous function scope
+/* PUBLIC GLOBALS */
-let params = {
- mode: "play",
- title_id: window.location.pathname.split("/")[1],
- game_id: 0,
- role: "Observer",
-}
-
-function init_params() {
- let search = new URLSearchParams(window.location.search)
- params.game_id = search.get("game")
- params.role = search.get("role") || "Observer"
- params.mode = search.get("mode") || "play"
-}
+var roles = Array.from(document.querySelectorAll(".role")).map(x=>({id:x.id,role:x.id.replace(/^role_/,"").replace(/_/g," ")}))
+var player = "Observer"
+var view = null
-init_params()
+/* PRIVATE GLOBALS */
-let roles = Array.from(document.querySelectorAll(".role")).map(x=>({id:x.id,role:x.id.replace(/^role_/,"").replace(/_/g," ")}))
+var search_params = new URLSearchParams(window.location.search)
+var params = {
+ title_id: window.location.pathname.split("/")[1],
+ game_id: search_params.get("game") || 0,
+ role: search_params.get("role") || "Observer",
+ mode: search_params.get("mode") || "play",
+}
-let view = null
-let player = "Observer"
let socket = null
-let chat = null
let game_log = []
let game_cookie = 0
@@ -36,6 +29,10 @@ let snap_count = 0
let snap_this = 0
let snap_view = null
+var replay_panel = null
+
+/* PUBLIC UTILITY FUNCTIONS */
+
function scroll_into_view(e) {
if (window.innerWidth <= 800)
document.querySelector("aside").classList.add("hide")
@@ -149,6 +146,8 @@ window.addEventListener("focus", stop_blinker)
/* CHAT */
+let chat = null
+
function init_chat() {
// only fetch new messages when we reconnect!
if (chat !== null) {
@@ -358,65 +357,31 @@ function toggle_notepad() {
show_notepad()
}
-window.addEventListener("keydown", (evt) => {
- if (document.activeElement === document.getElementById("chat_input"))
- return
- if (document.activeElement === document.getElementById("notepad_input"))
- return
- if (evt.key === "Shift")
- document.querySelector("body").classList.add("shift")
-})
-
-window.addEventListener("keyup", (evt) => {
- if (evt.key === "Shift")
- document.querySelector("body").classList.remove("shift")
-})
+/* REMATCH & REPLAY BUTTONS WHEN GAME OVER */
-window.addEventListener("blur", function (evt) {
- document.querySelector("body").classList.remove("shift")
-})
+function on_game_over() {
+ remove_resign_menu()
-/* REMATCH BUTTON */
+ add_icon_button(1, "replay_button", "sherlock-holmes-mirror",
+ function goto_replay() {
+ search_params.delete("role")
+ search_params.set("mode", "replay")
+ window.location.search = search_params
+ }
+ )
-function add_icon_button(where, id, img, fn) {
- let button = document.getElementById(id)
- if (!button) {
- button = document.createElement("button")
- button.id = id
- button.innerHTML = '<img src="/images/' + img + '.svg">'
- button.addEventListener("click", fn)
- if (where)
- document.querySelector("#toolbar").appendChild(button)
- else
- document.querySelector("#toolbar details").after(button)
+ if (player !== "Observer") {
+ add_icon_button(1, "rematch_button", "cycle",
+ function goto_rematch() {
+ window.location = "/rematch/" + params.game_id
+ }
+ )
}
- return button
-}
-
-function remove_resign_menu() {
- document.querySelectorAll(".resign").forEach(x => x.remove())
-}
-
-function goto_rematch() {
- window.location = "/rematch/" + params.game_id
-}
-
-function goto_replay() {
- let search = new URLSearchParams(window.location.search)
- search.delete("role")
- search.set("mode", "replay")
- window.location.search = search
-}
-
-function on_game_over() {
- add_icon_button(1, "replay_button", "sherlock-holmes-mirror", goto_replay)
- if (player !== "Observer")
- add_icon_button(1, "rematch_button", "cycle", goto_rematch)
- remove_resign_menu()
}
/* CONNECT TO GAME SERVER */
+// XXX
function init_player_names(players) {
for (let i = 0; i < roles.length; ++i) {
let p = players.find(p => p.role === roles[i].role)
@@ -741,6 +706,25 @@ function init_replay() {
/* MAIN MENU */
+function add_icon_button(where, id, img, fn) {
+ let button = document.getElementById(id)
+ if (!button) {
+ button = document.createElement("button")
+ button.id = id
+ button.innerHTML = '<img src="/images/' + img + '.svg">'
+ button.addEventListener("click", fn)
+ if (where)
+ document.querySelector("#toolbar").appendChild(button)
+ else
+ document.querySelector("#toolbar details").after(button)
+ }
+ return button
+}
+
+function remove_resign_menu() {
+ document.querySelectorAll(".resign").forEach(x => x.remove())
+}
+
/* avoid margin collapse at bottom of main */
document.querySelector("main").insertAdjacentHTML("beforeend", "<div style='height:1px'></div>")
@@ -786,7 +770,7 @@ if (params.mode === "play" && params.role !== "Observer") {
add_main_menu_item_link("Go home", "/")
}
-function close_menus(self) {
+function close_toolbar_menus(self) {
for (let node of document.querySelectorAll("#toolbar > details"))
if (node !== self)
node.removeAttribute("open")
@@ -794,12 +778,12 @@ function close_menus(self) {
/* close menu if opening another */
for (let node of document.querySelectorAll("#toolbar > details")) {
- node.onclick = function () { close_menus(node) }
+ node.onclick = function () { close_toolbar_menus(node) }
}
/* close menu after selecting something */
for (let node of document.querySelectorAll("#toolbar > details > menu")) {
- node.onclick = function () { close_menus(null) }
+ node.onclick = function () { close_toolbar_menus(null) }
}
/* click anywhere else than menu to close it */
@@ -810,13 +794,16 @@ window.addEventListener("mousedown", function (evt) {
return
e = e.parentElement
}
- close_menus(null)
+ close_toolbar_menus(null)
})
+/* close menus if window loses focus */
window.addEventListener("blur", function (evt) {
- close_menus(null)
+ close_toolbar_menus(null)
})
+/* FULLSCREEN TOGGLE */
+
function toggle_fullscreen() {
// Safari on iPhone doesn't support Fullscreen
if (typeof document.documentElement.requestFullscreen !== "function")
@@ -836,31 +823,26 @@ if ("ontouchstart" in window) {
/* SNAPSHOT VIEW */
-var replay_panel = null
+replay_panel = document.createElement("div")
+replay_panel.id = "replay_panel"
-function add_replay_button(parent, id, callback) {
+function add_replay_button(id, callback) {
let button = document.createElement("div")
button.className = "replay_button"
button.id = id
button.onclick = callback
- parent.appendChild(button)
+ replay_panel.appendChild(button)
return button
}
-function init_snap() {
- replay_panel = document.createElement("div")
- replay_panel.id = "replay_panel"
- add_replay_button(replay_panel, "replay_first", on_snap_first)
- add_replay_button(replay_panel, "replay_prev", on_snap_prev)
- add_replay_button(replay_panel, "replay_step_prev", null).classList.add("hide")
- add_replay_button(replay_panel, "replay_step_next", null).classList.add("hide")
- add_replay_button(replay_panel, "replay_next", on_snap_next)
- add_replay_button(replay_panel, "replay_last", null).classList.add("hide")
- add_replay_button(replay_panel, "replay_play", on_snap_stop)
- add_replay_button(replay_panel, "replay_stop", null).classList.add("hide")
-}
-
-init_snap()
+add_replay_button("replay_first", on_snap_first)
+add_replay_button("replay_prev", on_snap_prev)
+add_replay_button("replay_step_prev", null).classList.add("hide")
+add_replay_button("replay_step_next", null).classList.add("hide")
+add_replay_button("replay_next", on_snap_next)
+add_replay_button("replay_last", null).classList.add("hide")
+add_replay_button("replay_play", on_snap_stop)
+add_replay_button("replay_stop", null).classList.add("hide")
function request_snap(snap_id) {
if (snap_id >= 1 && snap_id <= snap_count) {
@@ -912,19 +894,39 @@ function on_snap_stop() {
}
}
+/* SHIFT KEY CSS TOGGLE */
+
+window.addEventListener("keydown", (evt) => {
+ if (document.activeElement === document.getElementById("chat_input"))
+ return
+ if (document.activeElement === document.getElementById("notepad_input"))
+ return
+ if (evt.key === "Shift")
+ document.querySelector("body").classList.add("shift")
+})
+
+window.addEventListener("keyup", (evt) => {
+ if (evt.key === "Shift")
+ document.querySelector("body").classList.remove("shift")
+})
+
+window.addEventListener("blur", function (evt) {
+ document.querySelector("body").classList.remove("shift")
+})
+
/* TOGGLE ZOOM MAP TO FIT */
function toggle_log() {
document.querySelector("aside").classList.toggle("hide")
- update_layout()
+ update_zoom()
}
var toggle_zoom = function () {}
-var update_layout = function () {}
+var update_zoom = function () {}
/* PAN & ZOOM GAME BOARD */
-;(function panzoom_init() {
+;(function () {
var PAN_SPEED = Number(document.querySelector("main").dataset.panSpeed) || 1
var MIN_ZOOM = Number(document.querySelector("main").dataset.minZoom) || 0.5
var MAX_ZOOM = Number(document.querySelector("main").dataset.maxZoom) || 1.5
@@ -989,10 +991,6 @@ var update_layout = function () {}
var mom_vx = 0
var mom_vy = 0
- // set globals to our scoped functions
- toggle_zoom = toggle_zoom_imp
- update_layout = update_layout_imp
-
function clamp_scale(scale) {
let win_w = e_scroll.clientWidth
let win_h = e_scroll.clientHeight
@@ -1031,7 +1029,8 @@ var update_layout = function () {}
return (e_scroll.clientWidth / map_w < old) || (e_scroll.offsetHeight / map_h < old)
}
- function toggle_zoom_imp() {
+ // export function
+ toggle_zoom = function () {
if (transform1.scale === 1) {
if (mapwrap && window.innerWidth > 800) {
cycle_map_fit()
@@ -1049,7 +1048,8 @@ var update_layout = function () {}
zoom_to(1)
}
- function update_layout_imp() {
+ // export function
+ update_zoom = function () {
update_map_fit()
update_transform_on_resize()
scroll_log_to_end()
@@ -1374,6 +1374,8 @@ var update_layout = function () {}
}
}
})
+
+ window.addEventListener("resize", update_zoom)
})()
/* INITIALIZE */
@@ -1381,8 +1383,6 @@ var update_layout = function () {}
if (window.innerWidth <= 800)
document.querySelector("aside").classList.add("hide")
-window.addEventListener("resize", () => update_layout())
-
window.addEventListener("load", function () {
if (params.mode === "debug")
init_replay()