From ce2b49de2c55f491aead98285cca43d077ebb62d Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 29 Dec 2021 17:01:28 +0100 Subject: Simplify styles and html for play.html --- play.css | 381 +++++++++++++++++++++++++++++ play.html | 486 +++---------------------------------- play.js | 801 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ui.js | 816 -------------------------------------------------------------- 4 files changed, 1216 insertions(+), 1268 deletions(-) create mode 100644 play.css create mode 100644 play.js delete mode 100644 ui.js diff --git a/play.css b/play.css new file mode 100644 index 0000000..175a87e --- /dev/null +++ b/play.css @@ -0,0 +1,381 @@ +main { background-color: slategray; } +aside { background-color: silver; } +header { background-color: gainsboro; } +body.Franks header.your_turn { background-color: #f7de46; /* 50% mix of khaki and gold */ } +body.Saracens header.your_turn { background-color: lightgreen; } +.one .role_name { background-color: khaki; } +.two .role_name { background-color: darkseagreen; } +#turn_info { background-color: gainsboro; } + +#log { background-color: whitesmoke; } +#log .st { background-color: #246; color: white; font-weight: bold; } +#log .F { background-color: khaki; } +#log .S { background-color: darkseagreen; } +#log .bs { background-color: lightgray; } +#log .br { font-style: italic; text-decoration: underline; } + +#map #timeline { + position: absolute; + width: 88px; height: 35px; top: 2410px; + background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8)); +} + +#map #timeline.year_1187 { left: 702px; } +#map #timeline.year_1188 { left: 793px; width: 89px; } +#map #timeline.year_1189 { left: 885px; } +#map #timeline.year_1190 { left: 976px; width: 89px; } +#map #timeline.year_1191 { left: 1068px; } +#map #timeline.year_1192 { left: 1160px; width: 85px; } + +#turn { + padding: 8px 0px 8px 8px; + border-bottom: 1px solid black; + white-space: pre-wrap; + font-style: italic; + font-size: 12px; + line-height: 18px; + font-family: "Source Serif SmText"; +} + +.card { + width: 225px; + height: 350px; + border-radius: 15px; +} + +.card.enabled:hover { + transform: scale(1.1); +} + +.small_card.prior { + filter: grayscale(100%) contrast(70%) brightness(120%); +} + +.role_info { padding: 15px; } +.small_card { width: 90px; height: 140px; border-radius: 5px; } +.small_card:hover { width: 180px; height: 280px; border-radius: 10px; } + +@media (max-height: 800px) { + .role_info { padding: 15px 0 0 0; } + .small_card { width: 180px; height: 80px; border-radius: 10px 10px 0 0; } + .small_card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; } +} + +@media (min-height: 1200px) { + .small_card { width: 180px; height: 280px; border-radius: 10px; } +} + +/* MAP */ + +#mapwrap { + background-color: #224467; + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); + width: 1275px; + height: 2475px; +} + +#map { + width: 1275px; + height: 2475px; + background-repeat: no-repeat; + background-color: #224467; +} + +#map > * { + position: absolute; +} + +#map.hide_blocks #blocks { + visibility: hidden; +} + +.town { + position: absolute; + opacity: 0.0; + z-index: 1; + border: 5px solid white; + width: 70px; + height: 70px; + border-radius: 50%; +} +.town.highlight { + cursor: pointer; + opacity: 0.6; + z-index: 9; +} +.town.muster { + opacity: 0.6; + border-color: brown; + z-index: 9; +} +.town.muster.highlight { + box-shadow: 0 0 0px 4px white; +} + +#sea { + fill: skyblue; + fill-opacity: 0.4; +} + +#sea { visibility: hidden; } +#sea.highlight { visibility: visible; cursor: pointer; } + +/* BLOCKS */ + +body.shift .block.known:hover { + filter: none; + transform: scale(2) !important; + transition: 100ms; + z-index: 100; +} + +#battle .block { position: relative; } +#map .block { position: absolute; z-index: 2; } +#map .block.highlight { z-index: 3; } +#map .block.selected { z-index: 4; } +#map .block.known { z-index: 5; } +#map .block.known:hover { z-index: 6; } + +.block { + background-size: cover; + background-repeat: no-repeat; + border-radius: 6px; + width: 60px; + height: 60px; + box-shadow: 0px 0px 4px 0px black; +} + +.block.Franks { border: 3px solid darkkhaki; background-color: khaki; } +.block.Saracens { border: 3px solid seagreen; background-color: darkseagreen; } +.block.Saracens.known { background-color: darkgreen; } +.block.Assassins { border: 3px solid rebeccapurple; background-color: rebeccapurple; } + +.block.Franks.highlight { border-color: white; } +.block.Saracens.highlight { border-color: white; } +.block.Assassins.highlight { border-color: white; } + +.block.Franks.selected { border-color: crimson; } +.block.Saracens.selected { border-color: yellow; } +.block.Assassins.selected { border-color: yellow; } + +.block.Franks.highlight:not(.selected) { box-shadow: 0 0 3px 0px white; } + +.hit .block.highlight { border-color: black; } +.hit .block.Franks.highlight { box-shadow: 0 0 4px 0px black; } + +.block.highlight { cursor: pointer; } +.block.moved { filter: brightness(80%) grayscale(40%); } +.block.highlight.moved { filter: brightness(95%) grayscale(40%); } + +#map .block.castle.known { filter: grayscale(50%); } +#map.stack_layout .block.castle { filter: grayscale(90%); } + +.block.castle:not(.known) { + background-image: url("badges/stone-tower.svg"); + background-size: 60%; + background-position: center; +} +.block.besieging:not(.known) { + background-image: url("badges/trebuchet.svg"); + background-size: 60%; + background-position: center; +} +.block.winter_campaign:not(.known) { + background-image: url("badges/camping-tent.svg"); + background-size: 60%; + background-position: center; +} +.block.Franks.jihad:not(.known) { + background-image: url("badges/Cross_of_the_Knights_Templar.svg"); + background-size: 60%; + background-position: center; +} +.block.Saracens.jihad:not(.known) { + background-image: url("badges/Star_and_Crescent.svg"); + background-size: 60%; + background-position: center; +} + +.block.besieging.Franks.jihad:not(.known) { + background-image: url("badges/trebuchet.svg"), url("badges/Cross_of_the_Knights_Templar.svg"); + background-size: 60%, 40%; + background-position: 30% 80%, 85% 15%; +} +.block.besieging.Saracens.jihad:not(.known) { + background-image: url("badges/trebuchet.svg"), url("badges/Star_and_Crescent.svg"); + background-size: 60%, 40%; + background-position: 30% 80%, 85% 15%; +} + +.block.r0 { transform: rotate(0deg); } +.block.r1 { transform: rotate(-90deg); } +.block.r2 { transform: rotate(-180deg); } +.block.r3 { transform: rotate(-270deg); } +.block.r0.halfhit { transform: rotate(-15deg); } +.block.r1.halfhit { transform: rotate(-105deg); } +.block.r2.halfhit { transform: rotate(-195deg); } +.block.r3.halfhit { transform: rotate(-285deg); } + +.block { + transition-property: top, left, transform; + transition-duration: 700ms, 700ms, 200ms; + transition-timing-function: ease; +} + +/* LANDSCAPE MAP */ + +@media (min-width: 2000px) { + #mapwrap:not(.fit) { + box-shadow: 1px 0px 10px rgba(0,0,0,0.5); + height: 1275px; + width: 2475px; + margin-bottom: 40px; + margin-top: 30px; + } + #mapwrap:not(.fit) #map { + transform: translateY(1275px) rotate(-90deg); + transform-origin: 0 0; + } + body.shift #mapwrap:not(.fit) #map .block.known:hover { + transform: rotate(90deg) scale(2) !important; + } + #mapwrap:not(.fit) #map .block { transform: rotate(90deg); } + #mapwrap:not(.fit) #map .block.r1 { transform: rotate(0deg); } + #mapwrap:not(.fit) #map .block.r2 { transform: rotate(-90deg); } + #mapwrap:not(.fit) #map .block.r3 { transform: rotate(-180deg); } +} + +/* BATTLE BOARD */ + +#battle { + background-color: tan; + min-width: 700px; +} +#battle_message { + background-color: gainsboro; + text-align: center; + border-top: 1px solid black; +} +#battle_header { + background-color: steelblue; + color: white; + text-align: center; + border-bottom: 1px solid black; +} +.battle_menu { + margin: 5px 5px; +} + +#FF, #FC, #FR, #EF, #EC, #ER { margin: 0px auto; padding: 5px; } +#EC { margin-bottom: 10px; } +#FC { margin-bottom: 5px; } +#EC .battle_menu_list { min-height: 0; } +#ER .battle_menu_list { min-height: 0; } +#FR .battle_menu_list { min-height: 0; } + +#FC, #EC { + background-size: cover; + background-repeat: no-repeat; + padding: 0; + height: 107px; + padding-top: 33px; + border-bottom: 5px solid dimgray; + filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5)); + justify-content: left; +} + +#FC.c1 .battle_menu:first-child { margin-left: 30px; } +#FC.c2 .battle_menu:first-child { margin-left: 25px; } +#FC.c3 .battle_menu:first-child { margin-left: 20px; } +#FC.c4 .battle_menu:first-child { margin-left: 15px; } +#EC.c1 .battle_menu:first-child { margin-left: 30px; } +#EC.c2 .battle_menu:first-child { margin-left: 25px; } +#EC.c3 .battle_menu:first-child { margin-left: 20px; } +#EC.c4 .battle_menu:first-child { margin-left: 15px; } + +#FC.c0, #EC.c0 { display: none; } +#FC.c1, #EC.c1 { background-image: url('castle_1.svg'); width: 140px; } +#FC.c2, #EC.c2 { background-image: url('castle_2.svg'); width: 220px; } +#FC.c3, #EC.c3 { background-image: url('castle_3.svg'); width: 300px; } +#FC.c4, #EC.c4 { background-image: url('castle_4.svg'); width: 380px; } + +#FC, #EC, #FF, #EF { min-height: 107px; } +#ER { min-height: 15px; } +#FR { min-height: 15px; } + +/* CARD AND BLOCK IMAGES */ + +.card_back{background-image:url('cards/card_back.jpg')} +.card_assassins{background-image:url('cards/card_assassins.jpg')} +.card_guide{background-image:url('cards/card_guide.jpg')} +.card_intrigue{background-image:url('cards/card_intrigue.jpg')} +.card_jihad{background-image:url('cards/card_jihad.jpg')} +.card_manna{background-image:url('cards/card_manna.jpg')} +.card_winter_campaign{background-image:url('cards/card_winter_campaign.jpg')} +.card_1{background-image:url('cards/card_1.jpg')} +.card_2{background-image:url('cards/card_2.jpg')} +.card_3{background-image:url('cards/card_3.jpg')} + +.known.block_11{background-image:url(blocks/block_11.png)} +.known.block_12{background-image:url(blocks/block_12.png)} +.known.block_13{background-image:url(blocks/block_13.png)} +.known.block_14{background-image:url(blocks/block_14.png)} +.known.block_15{background-image:url(blocks/block_15.png)} +.known.block_16{background-image:url(blocks/block_16.png)} +.known.block_17{background-image:url(blocks/block_17.png)} +.known.block_21{background-image:url(blocks/block_21.png)} +.known.block_22{background-image:url(blocks/block_22.png)} +.known.block_23{background-image:url(blocks/block_23.png)} +.known.block_24{background-image:url(blocks/block_24.png)} +.known.block_25{background-image:url(blocks/block_25.png)} +.known.block_26{background-image:url(blocks/block_26.png)} +.known.block_27{background-image:url(blocks/block_27.png)} +.known.block_31{background-image:url(blocks/block_31.png)} +.known.block_32{background-image:url(blocks/block_32.png)} +.known.block_33{background-image:url(blocks/block_33.png)} +.known.block_34{background-image:url(blocks/block_34.png)} +.known.block_35{background-image:url(blocks/block_35.png)} +.known.block_36{background-image:url(blocks/block_36.png)} +.known.block_37{background-image:url(blocks/block_37.png)} +.known.block_41{background-image:url(blocks/block_41.png)} +.known.block_42{background-image:url(blocks/block_42.png)} +.known.block_43{background-image:url(blocks/block_43.png)} +.known.block_44{background-image:url(blocks/block_44.png)} +.known.block_45{background-image:url(blocks/block_45.png)} +.known.block_46{background-image:url(blocks/block_46.png)} +.known.block_47{background-image:url(blocks/block_47.png)} +.known.block_51{background-image:url(blocks/block_51.png)} +.known.block_52{background-image:url(blocks/block_52.png)} +.known.block_53{background-image:url(blocks/block_53.png)} +.known.block_54{background-image:url(blocks/block_54.png)} +.known.block_55{background-image:url(blocks/block_55.png)} +.known.block_56{background-image:url(blocks/block_56.png)} +.known.block_57{background-image:url(blocks/block_57.png)} +.known.block_61{background-image:url(blocks/block_61.png)} +.known.block_62{background-image:url(blocks/block_62.png)} +.known.block_63{background-image:url(blocks/block_63.png)} +.known.block_64{background-image:url(blocks/block_64.png)} +.known.block_65{background-image:url(blocks/block_65.png)} +.known.block_66{background-image:url(blocks/block_66.png)} +.known.block_67{background-image:url(blocks/block_67.png)} +.known.block_71{background-image:url(blocks/block_71.png)} +.known.block_72{background-image:url(blocks/block_72.png)} +.known.block_73{background-image:url(blocks/block_73.png)} +.known.block_74{background-image:url(blocks/block_74.png)} +.known.block_75{background-image:url(blocks/block_75.png)} +.known.block_76{background-image:url(blocks/block_76.png)} +.known.block_77{background-image:url(blocks/block_77.png)} +.known.block_81{background-image:url(blocks/block_81.png)} +.known.block_82{background-image:url(blocks/block_82.png)} +.known.block_83{background-image:url(blocks/block_83.png)} +.known.block_84{background-image:url(blocks/block_84.png)} +.known.block_85{background-image:url(blocks/block_85.png)} +.known.block_86{background-image:url(blocks/block_86.png)} +.known.block_87{background-image:url(blocks/block_87.png)} +.known.block_91{background-image:url(blocks/block_91.png)} +.known.block_92{background-image:url(blocks/block_92.png)} +.known.block_93{background-image:url(blocks/block_93.png)} +.known.block_94{background-image:url(blocks/block_94.png)} +.known.block_95{background-image:url(blocks/block_95.png)} +.known.block_96{background-image:url(blocks/block_96.png)} +.known.block_97{background-image:url(blocks/block_97.png)} diff --git a/play.html b/play.html index 6d17c9c..56e7c31 100644 --- a/play.html +++ b/play.html @@ -8,408 +8,14 @@ + - - + -
- -
-
Chat
-
-
-
-
@@ -421,85 +27,60 @@ body.shift .block.known:hover {
-
- -
- -
-
-
-
Fullscreen
-
-
Spread blocks
-
Stack blocks
-
-
Notes
-
Rules
-
Cards
-
Blocks
-
-
Resign
-
+
+
+
+
+
+
Fullscreen
+
+
Spread blocks
+
Stack blocks
+
+
Notes
+
Rules
+
Cards
+
Blocks
+
+
Resign
- -
-
-
-
- -
Connecting...
- - - - - - - - - - - - - - - - -
-
+
+
+
+
+
+
+
-
- + -
+
-
@@ -545,7 +126,8 @@ body.shift .block.known:hover {
-
+
+ +
-
diff --git a/play.js b/play.js new file mode 100644 index 0000000..70a7f19 --- /dev/null +++ b/play.js @@ -0,0 +1,801 @@ +"use strict"; + +const FRANKS = "Franks"; +const SARACENS = "Saracens"; +const ASSASSINS = "Assassins"; +const ENEMY = { Saracens: "Franks", Franks: "Saracens" } +const DEAD = "Dead"; +const F_POOL = "FP"; +const S_POOL = "SP"; +const ENGLAND = "England"; +const FRANCE = "France"; +const GERMANIA = "Germania"; + +const KINGDOM = { + "Syria": "Syria", + "Jerusalem": "Kingdom of Jerusalem", + "Antioch": "Principality of Antioch", + "Tripoli": "County of Tripoli", +}; + +const VICTORY_TOWNS = [ + "Aleppo", "Damascus", "Egypt", + "Antioch", "Tripoli", "Acre", "Jerusalem" +]; + +let label_layout = window.localStorage['crusader-rex/label-layout'] || 'spread'; + +function set_spread_layout() { + label_layout = 'spread'; + window.localStorage['crusader-rex/label-layout'] = label_layout; + update_map(); +} + +function set_stack_layout() { + label_layout = 'stack'; + window.localStorage['crusader-rex/label-layout'] = label_layout; + update_map(); +} + +function toggle_blocks() { + document.getElementById("map").classList.toggle("hide_blocks"); +} + +let ui = { + cards: {}, + card_backs: {}, + towns: {}, + blocks: {}, + battle_menu: {}, + battle_block: {}, + present: new Set(), +} + +create_log_entry = function (text) { + let p = document.createElement("div"); + text = text.replace(/&/g, "&"); + text = text.replace(//g, ">"); + + text = text.replace(/\u2192 /g, "\u2192\xa0"); + + text = text.replace(/^([A-Z]):/, ' $1 '); + + if (text.match(/^~ .* ~$/)) + p.className = 'br', text = text.substring(2, text.length-2); + else if (text.match(/^Start Frank turn/)) + p.className = 'F'; + else if (text.match(/^Start Saracen turn/)) + p.className = 'S'; + else if (text.match(/^Start /)) + p.className = 'st', text = text.replace(/\.$/, ""); + else if (text.match(/^(Battle in)/)) + p.className = 'bs'; + + if (text.match(/^Start /)) + text = text.substring(6); + + p.innerHTML = text; + return p; +} + +function on_focus_town(evt) { + let where = evt.target.town; + let text = where; + if (where in SHIELDS) + text += " \u2014 " + SHIELDS[where].join(", "); + let kingdom = KINGDOM[TOWNS[where].region]; + if (kingdom) + text += " \u2014 " + kingdom; + if (VICTORY_TOWNS.includes(where)) + text += " \u2014 1 VP"; + document.getElementById("status").textContent = text; +} + +function on_blur_town(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_town(evt) { + let where = evt.target.town; + send_action('town', where); +} + +const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ]; +const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ]; + +function block_name(who) { return who; } +function block_home(who) { return BLOCKS[who].home; } +function block_owner(who) { return BLOCKS[who].owner; } + +function on_focus_map_block(evt) { + let info = BLOCKS[evt.target.block]; + let where = game.location[evt.target.block]; + if ((info.owner === player || info.owner === ASSASSINS) && where !== S_POOL && where !== F_POOL) { + let text = info.name + " "; + if (info.move) + text += info.move + "-"; + text += STEP_TEXT[info.steps] + "-" + info.combat; + document.getElementById("status").textContent = text; + } else { + document.getElementById("status").textContent = info.owner; + } +} + +function on_blur_map_block(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_map_block(evt) { + let b = evt.target.block; + if (!game.battle) + send_action('block', b); +} + +function on_focus_battle_block(evt) { + let b = evt.target.block; + let msg; + + if (!evt.target.classList.contains("known")) { + if (block_owner(b) === FRANKS) + msg = "Franks"; + else if (block_owner(b) === SARACENS) + msg = "Saracens"; + } else { + msg = block_name(b); + } + + if (game.actions && game.actions.fire && game.actions.fire.includes(b)) + msg = "Fire with " + msg; + else if (game.actions && game.actions.storm && game.actions.storm.includes(b)) + msg = "Storm with " + msg; + else if (game.actions && game.actions.sally && game.actions.sally.includes(b)) + msg = "Sally with " + msg; + else if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(b)) + msg = "Withdraw with " + msg; + else if (game.actions && game.actions.hit && game.actions.hit.includes(b)) + msg = "Take hit on " + msg; + + document.getElementById("status").textContent = msg; +} + +function on_blur_battle_block(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_battle_block(evt) { + let b = evt.target.block; + send_action('block', b); +} + +function on_focus_fire(evt) { + document.getElementById("status").textContent = + "Fire with " + block_name(evt.target.block); +} + +function on_focus_retreat(evt) { + if (game.battle.storming.includes(evt.target.block)) + document.getElementById("status").textContent = + "Withdraw with " + block_name(evt.target.block); + else + document.getElementById("status").textContent = + "Retreat with " + block_name(evt.target.block); +} + +function on_focus_harry(evt) { + document.getElementById("status").textContent = + "Harry with " + block_name(evt.target.block); +} + +function on_focus_charge(evt) { + document.getElementById("status").textContent = + "Charge with " + block_name(evt.target.block); +} + +function on_focus_withdraw(evt) { + document.getElementById("status").textContent = + "Withdraw with " + block_name(evt.target.block); +} + +function on_focus_storm(evt) { + document.getElementById("status").textContent = + "Storm with " + block_name(evt.target.block); +} + +function on_focus_sally(evt) { + document.getElementById("status").textContent = + "Sally with " + block_name(evt.target.block); +} + +function on_focus_hit(evt) { + document.getElementById("status").textContent = + "Take hit on " + block_name(evt.target.block); +} + +function on_blur_battle_button(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_hit(evt) { send_action('hit', evt.target.block); } +function on_click_fire(evt) { send_action('fire', evt.target.block); } +function on_click_retreat(evt) { send_action('retreat', evt.target.block); } +function on_click_charge(evt) { send_action('charge', evt.target.block); } +function on_click_harry(evt) { send_action('harry', evt.target.block); } +function on_click_withdraw(evt) { send_action('withdraw', evt.target.block); } +function on_click_storm(evt) { send_action('storm', evt.target.block); } +function on_click_sally(evt) { send_action('sally', evt.target.block); } + +function on_click_card(evt) { + let c = evt.target.id.split("+")[1] | 0; + send_action('play', c); +} + +function build_battle_button(menu, b, c, click, enter, img_src) { + let img = new Image(); + img.draggable = false; + img.classList.add("action"); + img.classList.add(c); + img.setAttribute("src", img_src); + img.addEventListener("click", click); + img.addEventListener("mouseenter", enter); + img.addEventListener("mouseleave", on_blur_battle_button); + img.block = b; + menu.appendChild(img); +} + +function battle_block_class_name(block) { + return `block block_${block.image} ${block.owner}`; +} + +function build_battle_block(b, block) { + let element = document.createElement("div"); + element.className = battle_block_class_name(block); + element.addEventListener("mouseenter", on_focus_battle_block); + element.addEventListener("mouseleave", on_blur_battle_block); + element.addEventListener("click", on_click_battle_block); + element.block = b; + ui.battle_block[b] = element; + + let menu_list = document.createElement("div"); + menu_list.className = "battle_menu_list"; + + build_battle_button(menu_list, b, "hit", + on_click_hit, on_focus_hit, + "/images/cross-mark.svg"); + build_battle_button(menu_list, b, "charge", + on_click_charge, on_focus_charge, + "/images/mounted-knight.svg"); + build_battle_button(menu_list, b, "fire", + on_click_fire, on_focus_fire, + "/images/pointy-sword.svg"); + build_battle_button(menu_list, b, "harry", + on_click_harry, on_focus_harry, + "/images/arrow-flights.svg"); + build_battle_button(menu_list, b, "retreat", + on_click_retreat, on_focus_retreat, + "/images/flying-flag.svg"); + build_battle_button(menu_list, b, "withdraw", + on_click_withdraw, on_focus_withdraw, + "/images/stone-tower.svg"); + build_battle_button(menu_list, b, "storm", + on_click_storm, on_focus_storm, + "/images/siege-tower.svg"); + build_battle_button(menu_list, b, "sally", + on_click_sally, on_focus_sally, + "/images/doorway.svg"); + + let menu = document.createElement("div"); + menu.className = "battle_menu"; + menu.appendChild(element); + menu.appendChild(menu_list); + menu.block = b; + ui.battle_menu[b] = menu; +} + +function build_map_block(b, block) { + let element = document.createElement("div"); + element.classList.add("block"); + element.classList.add("known"); + element.classList.add(BLOCKS[b].owner); + element.classList.add("block_" + block.image); + element.addEventListener("mouseenter", on_focus_map_block); + element.addEventListener("mouseleave", on_blur_map_block); + element.addEventListener("click", on_click_map_block); + element.block = b; + return element; +} + +function build_town(t, town) { + let element = document.createElement("div"); + element.town = t; + element.classList.add("town"); + element.addEventListener("mouseenter", on_focus_town); + element.addEventListener("mouseleave", on_blur_town); + element.addEventListener("click", on_click_town); + ui.towns_element.appendChild(element); + return element; +} + +function build_map() { + let element; + + ui.blocks_element = document.getElementById("blocks"); + ui.offmap_element = document.getElementById("offmap"); + ui.towns_element = document.getElementById("towns"); + + for (let c = 1; c <= 27; ++c) { + ui.cards[c] = document.getElementById("card+"+c); + ui.cards[c].addEventListener("click", on_click_card); + } + + for (let c = 1; c <= 6; ++c) + ui.card_backs[c] = document.getElementById("back+"+c); + + for (let name in TOWNS) { + let town = TOWNS[name]; + if (name === F_POOL || name === S_POOL || name === DEAD) + continue; + if (name === "Sea") { + element = document.getElementById("svgmap").getElementById("sea"); + element.town = "Sea"; + element.addEventListener("mouseenter", on_focus_town); + element.addEventListener("mouseleave", on_blur_town); + element.addEventListener("click", on_click_town); + ui.towns[name] = element; + } else { + element = ui.towns[name] = build_town(name, town); + let xo = Math.round(element.offsetWidth/2); + let yo = Math.round(element.offsetHeight/2); + element.style.left = (town.x - xo) + "px"; + element.style.top = (town.y - yo) + "px"; + } + } + + for (let b in BLOCKS) { + let block = BLOCKS[b]; + ui.blocks[b] = build_map_block(b, block); + build_battle_block(b, block); + } +} + +function update_steps(b, steps, element) { + element.classList.remove("r0"); + element.classList.remove("r1"); + element.classList.remove("r2"); + element.classList.remove("r3"); + element.classList.add("r"+(BLOCKS[b].steps - steps)); +} + +function layout_blocks(location, secret, known) { + if (label_layout === 'stack') + document.getElementById("map").classList.add("stack_layout"); + else + document.getElementById("map").classList.remove("stack_layout"); + if (label_layout === 'spread' || + (location === S_POOL || location === F_POOL || location === DEAD || + location === ENGLAND || location === FRANCE || location === GERMANIA)) + layout_blocks_spread(location, secret, known); + else + layout_blocks_stacked(location, secret, known); +} + +function layout_blocks_spread(town, north, south) { + let wrap = TOWNS[town].wrap; + let rows = []; + + if ((north.length > wrap || south.length > wrap) || (north.length + south.length <= 3)) { + north = north.concat(south); + south = []; + } + + function wrap_row(input) { + while (input.length > wrap) { + rows.push(input.slice(0, wrap)); + input = input.slice(wrap); + } + if (input.length > 0) + rows.push(input); + } + + wrap_row(north); + wrap_row(south); + + if (TOWNS[town].layout_minor > 0.5) + rows.reverse(); + + for (let r = 0; r < rows.length; ++r) { + let cols = rows[r]; + for (let c = 0; c < cols.length; ++c) + position_block(town, r, rows.length, c, cols.length, cols[c]); + } +} + +function position_block(town, row, n_rows, col, n_cols, element) { + let space = TOWNS[town]; + let block_size = 60+6; + let padding = 4; + if (town === ENGLAND || town === FRANCE || town === GERMANIA) + padding = 21; + let offset = block_size + padding; + let row_size = (n_rows-1) * offset; + let col_size = (n_cols-1) * offset; + let x = space.x; + let y = space.y; + + if (space.layout_axis === 'X') { + x -= col_size * space.layout_major; + y -= row_size * space.layout_minor; + x += col * offset; + y += row * offset; + } else { + y -= col_size * space.layout_major; + x -= row_size * space.layout_minor; + y += col * offset; + x += row * offset; + } + + element.style.left = ((x - block_size/2)|0)+"px"; + element.style.top = ((y - block_size/2)|0)+"px"; +} + +function layout_blocks_stacked(location, secret, known) { + let s = secret.length; + let k = known.length; + let both = secret.length > 0 && known.length > 0; + let i = 0; + while (secret.length > 0) + position_block_stacked(location, i++, (s-1)/2, both ? 1 : 0, secret.shift()); + i = 0; + while (known.length > 0) + position_block_stacked(location, i++, (k-1)/2, 0, known.shift()); +} + +function position_block_stacked(location, i, c, k, element) { + let space = TOWNS[location]; + let block_size = 60+6; + let x = space.x + (i - c) * 16 + k * 12; + let y = space.y + (i - c) * 16 - k * 12; + element.style.left = ((x - block_size/2)|0)+"px"; + element.style.top = ((y - block_size/2)|0)+"px"; +} + +function show_block(element) { + if (element.parentElement !== ui.blocks_element) + ui.blocks_element.appendChild(element); +} + +function hide_block(element) { + if (element.parentElement !== ui.offmap_element) + ui.offmap_element.appendChild(element); +} + +function show_block(element) { + if (element.parentElement !== ui.blocks_element) + ui.blocks_element.appendChild(element); +} + +function hide_block(element) { + if (element.parentElement !== ui.offmap_element) + ui.offmap_element.appendChild(element); +} + +function is_known_block(info, who) { + if (game_over) + return true; + if (info.owner === player || info.owner === ASSASSINS || who === game.assassinate) + return true; + let town = game.location[who]; + if (town === DEAD) + return true; + return false; +} + +function update_map() { + let layout = {}; + + document.getElementById("frank_vp").textContent = game.f_vp + " VP"; + document.getElementById("saracen_vp").textContent = game.s_vp + " VP"; + document.getElementById("timeline").className = "year_" + game.year; + if (game.turn < 1) + document.getElementById("turn_info").textContent = + "Year " + game.year; + else if (game.turn < 6) + document.getElementById("turn_info").textContent = + "Turn " + game.turn + " of Year " + game.year; + else + document.getElementById("turn_info").textContent = + "Winter Turn of Year " + game.year; + + for (let town in TOWNS) + layout[town] = { north: [], south: [] }; + + for (let b in game.location) { + let info = BLOCKS[b]; + let element = ui.blocks[b]; + let town = game.location[b]; + if (town in TOWNS) { + let moved = game.moved[b] ? " moved" : ""; + if (town === DEAD) + moved = " moved"; + if (is_known_block(info, b)) { + let image = " block_" + info.image; + let steps = " r" + (info.steps - game.steps[b]); + let known = " known"; + if ((town === S_POOL || town === F_POOL) && b !== game.who && !game_over) + known = ""; + element.classList = info.owner + known + " block" + image + steps + moved; + } else { + let besieging = ""; + if (game.sieges[town] === info.owner) { + if (game.winter_campaign === town) + besieging = " winter_campaign"; + else + besieging = " besieging"; + } + let jihad = ""; + if (game.jihad === town && info.owner === game.p1) + jihad = " jihad"; + element.classList = info.owner + " block" + moved + besieging + jihad; + } + if (town !== DEAD) { + if (info.owner === FRANKS) + layout[town].north.push(element); + else + layout[town].south.push(element); + } + show_block(element); + } else { + hide_block(element); + } + } + + for (let b in game.location) { + let info = BLOCKS[b]; + let element = ui.blocks[b]; + let town = game.location[b]; + if (town === DEAD) { + if (info.owner === FRANKS) + layout[F_POOL].north.unshift(element); + else + layout[S_POOL].south.unshift(element); + } + } + + for (let town in TOWNS) + layout_blocks(town, layout[town].north, layout[town].south); + + for (let where in TOWNS) { + if (ui.towns[where]) { + ui.towns[where].classList.remove('highlight'); + ui.towns[where].classList.remove('muster'); + } + } + if (game.actions && game.actions.town) + for (let where of game.actions.town) + ui.towns[where].classList.add('highlight'); + if (game.muster) + ui.towns[game.muster].classList.add('muster'); + + if (!game.battle) { + if (game.actions && game.actions.block) + for (let b of game.actions.block) + ui.blocks[b].classList.add('highlight'); + } + if (game.who && !game.battle) + ui.blocks[game.who].classList.add('selected'); + for (let b of game.castle) + ui.blocks[b].classList.add('castle'); +} + +function update_card_display(element, card, prior_card) { + if (!card && !prior_card) { + element.className = "small_card card_back"; + } else if (prior_card) { + element.className = "small_card prior " + CARDS[prior_card].image; + } else { + element.className = "small_card " + CARDS[card].image; + } +} + +function update_cards() { + update_card_display(document.getElementById("frank_card"), game.f_card, game.prior_f_card); + update_card_display(document.getElementById("saracen_card"), game.s_card, game.prior_s_card); + + for (let c = 1; c <= 27; ++c) { + let element = ui.cards[c]; + if (game.hand.includes(c)) { + element.classList.add("show"); + if (game.actions && game.actions.play) { + if (game.actions.play.includes(c)) { + element.classList.add("enabled"); + element.classList.remove("disabled"); + } else { + element.classList.remove("enabled"); + element.classList.add("disabled"); + } + } else { + element.classList.remove("enabled"); + element.classList.remove("disabled"); + } + } else { + element.classList.remove("show"); + } + } + + if (player === 'Observer') { + let n = game.hand.length; + for (let c = 1; c <= 6; ++c) + if (c <= n) + ui.card_backs[c].classList.add("show"); + else + ui.card_backs[c].classList.remove("show"); + } +} + +function compare_blocks(a, b) { + let aa = BLOCKS[a].combat; + let bb = BLOCKS[b].combat; + if (aa === bb) + return (a < b) ? -1 : (a > b) ? 1 : 0; + return (aa < bb) ? -1 : (aa > bb) ? 1 : 0; +} + +function insert_battle_block(root, node, block) { + for (let i = 0; i < root.children.length; ++i) { + let prev = root.children[i]; + if (compare_blocks(prev.block, block) > 0) { + root.insertBefore(node, prev); + return; + } + } + root.appendChild(node); +} + +function update_battle() { + function fill_cell(name, list, show) { + let cell = document.getElementById(name); + + ui.present.clear(); + + for (let block of list) { + ui.present.add(block); + + if (!cell.contains(ui.battle_menu[block])) + insert_battle_block(cell, ui.battle_menu[block], block); + + ui.battle_menu[block].className = "battle_menu"; + if (game.actions && game.actions.fire && game.actions.fire.includes(block)) + ui.battle_menu[block].classList.add('fire'); + if (game.actions && game.actions.retreat && game.actions.retreat.includes(block)) + ui.battle_menu[block].classList.add('retreat'); + if (game.actions && game.actions.harry && game.actions.harry.includes(block)) + ui.battle_menu[block].classList.add('harry'); + if (game.actions && game.actions.charge && game.actions.charge.includes(block)) + ui.battle_menu[block].classList.add('charge'); + if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(block)) + ui.battle_menu[block].classList.add('withdraw'); + if (game.actions && game.actions.storm && game.actions.storm.includes(block)) + ui.battle_menu[block].classList.add('storm'); + if (game.actions && game.actions.sally && game.actions.sally.includes(block)) + ui.battle_menu[block].classList.add('sally'); + if (game.actions && game.actions.charge && game.actions.charge.includes(block)) + ui.battle_menu[block].classList.add('charge'); + if (game.actions && game.actions.treachery && game.actions.treachery.includes(block)) + ui.battle_menu[block].classList.add('treachery'); + if (game.actions && game.actions.hit && game.actions.hit.includes(block)) + ui.battle_menu[block].classList.add('hit'); + + let class_name = battle_block_class_name(BLOCKS[block]); + if (game.actions && game.actions.block && game.actions.block.includes(block)) + class_name += " highlight"; + if (game.moved[block]) + class_name += " moved"; + if (block === game.who) + class_name += " selected"; + if (block === game.battle.halfhit) + class_name += " halfhit"; + if (game.jihad === game.battle.town && block_owner(block) === game.p1) + class_name += " jihad"; + + if (game.battle.sallying.includes(block)) + show = true; + if (game.battle.storming.includes(block)) + show = true; + if (show || block_owner(block) === player) { + class_name += " known"; + ui.battle_block[block].className = class_name; + update_steps(block, game.steps[block], ui.battle_block[block], false); + } else { + ui.battle_block[block].className = class_name; + } + + } + + for (let b in BLOCKS) { + if (!ui.present.has(b)) { + if (cell.contains(ui.battle_menu[b])) + cell.removeChild(ui.battle_menu[b]); + } + } + } + + if (player === FRANKS) { + fill_cell("ER", game.battle.SR, false); + fill_cell("EC", game.battle.SC, game.battle.show_castle); + fill_cell("EF", game.battle.SF, game.battle.show_field); + fill_cell("FF", game.battle.FF, game.battle.show_field); + fill_cell("FC", game.battle.FC, game.battle.show_castle); + fill_cell("FR", game.battle.FR, false); + document.getElementById("FC").className = "c" + game.battle.FCS; + document.getElementById("EC").className = "c" + game.battle.SCS; + } else { + fill_cell("ER", game.battle.FR, false); + fill_cell("EC", game.battle.FC, game.battle.show_castle); + fill_cell("EF", game.battle.FF, game.battle.show_field); + fill_cell("FF", game.battle.SF, game.battle.show_field); + fill_cell("FC", game.battle.SC, game.battle.show_castle); + fill_cell("FR", game.battle.SR, false); + document.getElementById("EC").className = "c" + game.battle.FCS; + document.getElementById("FC").className = "c" + game.battle.SCS; + } +} + +let flash_timer = 0; +function start_flash() { + let element = document.getElementById("battle_message"); + let tick = true; + if (flash_timer) + return; + flash_timer = setInterval(function () { + if (!game.flash_next) { + element.textContent = game.battle ? game.battle.flash : ""; + clearInterval(flash_timer); + flash_timer = 0; + } else { + element.textContent = tick ? game.battle.flash : game.flash_next; + tick = !tick; + } + }, 1000); +} + +function on_update() { + action_button("eliminate_button", "Eliminate"); + action_button("winter_campaign_button", "Winter campaign"); + action_button("sea_move_button", "Sea move"); + action_button("end_sea_move_button", "End sea move"); + action_button("group_move_button", "Group move"); + action_button("end_group_move_button", "End group move"); + action_button("muster_button", "Muster"); + action_button("end_muster_button", "End muster"); + action_button("end_retreat_button", "End retreat"); + action_button("end_regroup_button", "End regroup"); + action_button("end_move_phase_button", "End move phase"); + action_button("pass", "Pass"); + action_button("next", "Next"); + action_button("undo", "Undo"); + + document.getElementById("frank_vp").textContent = game.f_vp; + document.getElementById("saracen_vp").textContent = game.s_vp; + + update_cards(); + update_map(); + + if (game.battle) { + document.getElementById("battle_header").textContent = game.battle.title; + document.getElementById("battle_message").textContent = game.battle.flash; + if (game.flash_next) + start_flash(); + document.getElementById("battle").classList.add("show"); + update_battle(); + } else { + document.getElementById("battle").classList.remove("show"); + } +} + +build_map(); + +drag_element_with_mouse("#battle", "#battle_header"); +scroll_with_middle_mouse("main", 3); +init_map_zoom(); +init_shift_zoom(); +init_client(["Franks", "Saracens"]); diff --git a/ui.js b/ui.js deleted file mode 100644 index ea7b575..0000000 --- a/ui.js +++ /dev/null @@ -1,816 +0,0 @@ -"use strict"; - -const FRANKS = "Franks"; -const SARACENS = "Saracens"; -const ASSASSINS = "Assassins"; -const ENEMY = { Saracens: "Franks", Franks: "Saracens" } -const DEAD = "Dead"; -const F_POOL = "FP"; -const S_POOL = "SP"; -const ENGLAND = "England"; -const FRANCE = "France"; -const GERMANIA = "Germania"; - -const KINGDOM = { - "Syria": "Syria", - "Jerusalem": "Kingdom of Jerusalem", - "Antioch": "Principality of Antioch", - "Tripoli": "County of Tripoli", -}; - -const VICTORY_TOWNS = [ - "Aleppo", "Damascus", "Egypt", - "Antioch", "Tripoli", "Acre", "Jerusalem" -]; - -let label_layout = window.localStorage['crusader-rex/label-layout'] || 'spread'; - -function set_spread_layout() { - label_layout = 'spread'; - window.localStorage['crusader-rex/label-layout'] = label_layout; - update_map(); -} - -function set_stack_layout() { - label_layout = 'stack'; - window.localStorage['crusader-rex/label-layout'] = label_layout; - update_map(); -} - -function toggle_blocks() { - document.getElementById("map").classList.toggle("hide_blocks"); -} - -let ui = { - cards: {}, - card_backs: {}, - towns: {}, - blocks: {}, - battle_menu: {}, - battle_block: {}, - present: new Set(), -} - -create_log_entry = function (text) { - let p = document.createElement("div"); - text = text.replace(/&/g, "&"); - text = text.replace(//g, ">"); - - text = text.replace(/\u2192 /g, "\u2192\xa0"); - - text = text.replace(/^([A-Z]):/, ' $1 '); - - if (text.match(/^~ .* ~$/)) - p.className = 'br', text = text.substring(2, text.length-2); - else if (text.match(/^Start Frank turn/)) - p.className = 'F'; - else if (text.match(/^Start Saracen turn/)) - p.className = 'S'; - else if (text.match(/^Start /)) - p.className = 'st', text = text.replace(/\.$/, ""); - else if (text.match(/^(Battle in)/)) - p.className = 'bs'; - - if (text.match(/^Start /)) - text = text.substring(6); - - p.innerHTML = text; - return p; -} - -function on_focus_town(evt) { - let where = evt.target.town; - let text = where; - if (where in SHIELDS) - text += " \u2014 " + SHIELDS[where].join(", "); - let kingdom = KINGDOM[TOWNS[where].region]; - if (kingdom) - text += " \u2014 " + kingdom; - if (VICTORY_TOWNS.includes(where)) - text += " \u2014 1 VP"; - document.getElementById("status").textContent = text; -} - -function on_blur_town(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_town(evt) { - let where = evt.target.town; - send_action('town', where); -} - -const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ]; -const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ]; - -function block_name(who) { return who; } -function block_home(who) { return BLOCKS[who].home; } -function block_owner(who) { return BLOCKS[who].owner; } - -function on_focus_map_block(evt) { - let info = BLOCKS[evt.target.block]; - let where = game.location[evt.target.block]; - if ((info.owner === player || info.owner === ASSASSINS) && where !== S_POOL && where !== F_POOL) { - let text = info.name + " "; - if (info.move) - text += info.move + "-"; - text += STEP_TEXT[info.steps] + "-" + info.combat; - document.getElementById("status").textContent = text; - } else { - document.getElementById("status").textContent = info.owner; - } -} - -function on_blur_map_block(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_map_block(evt) { - let b = evt.target.block; - if (!game.battle) - send_action('block', b); -} - -function on_focus_battle_block(evt) { - let b = evt.target.block; - let msg; - - if (!evt.target.classList.contains("known")) { - if (block_owner(b) === FRANKS) - msg = "Franks"; - else if (block_owner(b) === SARACENS) - msg = "Saracens"; - } else { - msg = block_name(b); - } - - if (game.actions && game.actions.fire && game.actions.fire.includes(b)) - msg = "Fire with " + msg; - else if (game.actions && game.actions.storm && game.actions.storm.includes(b)) - msg = "Storm with " + msg; - else if (game.actions && game.actions.sally && game.actions.sally.includes(b)) - msg = "Sally with " + msg; - else if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(b)) - msg = "Withdraw with " + msg; - else if (game.actions && game.actions.hit && game.actions.hit.includes(b)) - msg = "Take hit on " + msg; - - document.getElementById("status").textContent = msg; -} - -function on_blur_battle_block(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_battle_block(evt) { - let b = evt.target.block; - send_action('block', b); -} - -function on_focus_fire(evt) { - document.getElementById("status").textContent = - "Fire with " + block_name(evt.target.block); -} - -function on_focus_retreat(evt) { - if (game.battle.storming.includes(evt.target.block)) - document.getElementById("status").textContent = - "Withdraw with " + block_name(evt.target.block); - else - document.getElementById("status").textContent = - "Retreat with " + block_name(evt.target.block); -} - -function on_focus_harry(evt) { - document.getElementById("status").textContent = - "Harry with " + block_name(evt.target.block); -} - -function on_focus_charge(evt) { - document.getElementById("status").textContent = - "Charge with " + block_name(evt.target.block); -} - -function on_focus_withdraw(evt) { - document.getElementById("status").textContent = - "Withdraw with " + block_name(evt.target.block); -} - -function on_focus_storm(evt) { - document.getElementById("status").textContent = - "Storm with " + block_name(evt.target.block); -} - -function on_focus_sally(evt) { - document.getElementById("status").textContent = - "Sally with " + block_name(evt.target.block); -} - -function on_focus_hit(evt) { - document.getElementById("status").textContent = - "Take hit on " + block_name(evt.target.block); -} - -function on_blur_battle_button(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_hit(evt) { send_action('hit', evt.target.block); } -function on_click_fire(evt) { send_action('fire', evt.target.block); } -function on_click_retreat(evt) { send_action('retreat', evt.target.block); } -function on_click_charge(evt) { send_action('charge', evt.target.block); } -function on_click_harry(evt) { send_action('harry', evt.target.block); } -function on_click_withdraw(evt) { send_action('withdraw', evt.target.block); } -function on_click_storm(evt) { send_action('storm', evt.target.block); } -function on_click_sally(evt) { send_action('sally', evt.target.block); } - -function on_click_card(evt) { - let c = evt.target.id.split("+")[1] | 0; - send_action('play', c); -} - -function on_button_next(evt) { send_action('next'); } -function on_button_pass(evt) { send_action('pass'); } -function on_button_undo(evt) { send_action('undo'); } -function on_button_winter_campaign(evt) { send_action('winter_campaign'); } -function on_button_group_move(evt) { send_action('group_move'); } -function on_button_end_group_move(evt) { send_action('end_group_move'); } -function on_button_sea_move(evt) { send_action('sea_move'); } -function on_button_end_sea_move(evt) { send_action('end_sea_move'); } -function on_button_muster(evt) { send_action('muster'); } -function on_button_end_muster(evt) { send_action('end_muster'); } -function on_button_end_move_phase(evt) { send_action('end_move_phase'); } -function on_button_end_regroup(evt) { send_action('end_regroup'); } -function on_button_end_retreat(evt) { send_action('end_retreat'); } -function on_button_eliminate(evt) { send_action('eliminate'); } - -function build_battle_button(menu, b, c, click, enter, img_src) { - let img = new Image(); - img.draggable = false; - img.classList.add("action"); - img.classList.add(c); - img.setAttribute("src", img_src); - img.addEventListener("click", click); - img.addEventListener("mouseenter", enter); - img.addEventListener("mouseleave", on_blur_battle_button); - img.block = b; - menu.appendChild(img); -} - -function battle_block_class_name(block) { - return `block block_${block.image} ${block.owner}`; -} - -function build_battle_block(b, block) { - let element = document.createElement("div"); - element.className = battle_block_class_name(block); - element.addEventListener("mouseenter", on_focus_battle_block); - element.addEventListener("mouseleave", on_blur_battle_block); - element.addEventListener("click", on_click_battle_block); - element.block = b; - ui.battle_block[b] = element; - - let menu_list = document.createElement("div"); - menu_list.className = "battle_menu_list"; - - build_battle_button(menu_list, b, "hit", - on_click_hit, on_focus_hit, - "/images/cross-mark.svg"); - build_battle_button(menu_list, b, "charge", - on_click_charge, on_focus_charge, - "/images/mounted-knight.svg"); - build_battle_button(menu_list, b, "fire", - on_click_fire, on_focus_fire, - "/images/pointy-sword.svg"); - build_battle_button(menu_list, b, "harry", - on_click_harry, on_focus_harry, - "/images/arrow-flights.svg"); - build_battle_button(menu_list, b, "retreat", - on_click_retreat, on_focus_retreat, - "/images/flying-flag.svg"); - build_battle_button(menu_list, b, "withdraw", - on_click_withdraw, on_focus_withdraw, - "/images/stone-tower.svg"); - build_battle_button(menu_list, b, "storm", - on_click_storm, on_focus_storm, - "/images/siege-tower.svg"); - build_battle_button(menu_list, b, "sally", - on_click_sally, on_focus_sally, - "/images/doorway.svg"); - - let menu = document.createElement("div"); - menu.className = "battle_menu"; - menu.appendChild(element); - menu.appendChild(menu_list); - menu.block = b; - ui.battle_menu[b] = menu; -} - -function build_map_block(b, block) { - let element = document.createElement("div"); - element.classList.add("block"); - element.classList.add("known"); - element.classList.add(BLOCKS[b].owner); - element.classList.add("block_" + block.image); - element.addEventListener("mouseenter", on_focus_map_block); - element.addEventListener("mouseleave", on_blur_map_block); - element.addEventListener("click", on_click_map_block); - element.block = b; - return element; -} - -function build_town(t, town) { - let element = document.createElement("div"); - element.town = t; - element.classList.add("town"); - element.addEventListener("mouseenter", on_focus_town); - element.addEventListener("mouseleave", on_blur_town); - element.addEventListener("click", on_click_town); - ui.towns_element.appendChild(element); - return element; -} - -function build_map() { - let element; - - ui.blocks_element = document.getElementById("blocks"); - ui.offmap_element = document.getElementById("offmap"); - ui.towns_element = document.getElementById("towns"); - - for (let c = 1; c <= 27; ++c) { - ui.cards[c] = document.getElementById("card+"+c); - ui.cards[c].addEventListener("click", on_click_card); - } - - for (let c = 1; c <= 6; ++c) - ui.card_backs[c] = document.getElementById("back+"+c); - - for (let name in TOWNS) { - let town = TOWNS[name]; - if (name === F_POOL || name === S_POOL || name === DEAD) - continue; - if (name === "Sea") { - element = document.getElementById("svgmap").getElementById("sea"); - element.town = "Sea"; - element.addEventListener("mouseenter", on_focus_town); - element.addEventListener("mouseleave", on_blur_town); - element.addEventListener("click", on_click_town); - ui.towns[name] = element; - } else { - element = ui.towns[name] = build_town(name, town); - let xo = Math.round(element.offsetWidth/2); - let yo = Math.round(element.offsetHeight/2); - element.style.left = (town.x - xo) + "px"; - element.style.top = (town.y - yo) + "px"; - } - } - - for (let b in BLOCKS) { - let block = BLOCKS[b]; - ui.blocks[b] = build_map_block(b, block); - build_battle_block(b, block); - } -} - -function update_steps(b, steps, element) { - element.classList.remove("r0"); - element.classList.remove("r1"); - element.classList.remove("r2"); - element.classList.remove("r3"); - element.classList.add("r"+(BLOCKS[b].steps - steps)); -} - -function layout_blocks(location, secret, known) { - if (label_layout === 'stack') - document.getElementById("map").classList.add("stack_layout"); - else - document.getElementById("map").classList.remove("stack_layout"); - if (label_layout === 'spread' || - (location === S_POOL || location === F_POOL || location === DEAD || - location === ENGLAND || location === FRANCE || location === GERMANIA)) - layout_blocks_spread(location, secret, known); - else - layout_blocks_stacked(location, secret, known); -} - -function layout_blocks_spread(town, north, south) { - let wrap = TOWNS[town].wrap; - let rows = []; - - if ((north.length > wrap || south.length > wrap) || (north.length + south.length <= 3)) { - north = north.concat(south); - south = []; - } - - function wrap_row(input) { - while (input.length > wrap) { - rows.push(input.slice(0, wrap)); - input = input.slice(wrap); - } - if (input.length > 0) - rows.push(input); - } - - wrap_row(north); - wrap_row(south); - - if (TOWNS[town].layout_minor > 0.5) - rows.reverse(); - - for (let r = 0; r < rows.length; ++r) { - let cols = rows[r]; - for (let c = 0; c < cols.length; ++c) - position_block(town, r, rows.length, c, cols.length, cols[c]); - } -} - -function position_block(town, row, n_rows, col, n_cols, element) { - let space = TOWNS[town]; - let block_size = 60+6; - let padding = 4; - if (town === ENGLAND || town === FRANCE || town === GERMANIA) - padding = 21; - let offset = block_size + padding; - let row_size = (n_rows-1) * offset; - let col_size = (n_cols-1) * offset; - let x = space.x; - let y = space.y; - - if (space.layout_axis === 'X') { - x -= col_size * space.layout_major; - y -= row_size * space.layout_minor; - x += col * offset; - y += row * offset; - } else { - y -= col_size * space.layout_major; - x -= row_size * space.layout_minor; - y += col * offset; - x += row * offset; - } - - element.style.left = ((x - block_size/2)|0)+"px"; - element.style.top = ((y - block_size/2)|0)+"px"; -} - -function layout_blocks_stacked(location, secret, known) { - let s = secret.length; - let k = known.length; - let both = secret.length > 0 && known.length > 0; - let i = 0; - while (secret.length > 0) - position_block_stacked(location, i++, (s-1)/2, both ? 1 : 0, secret.shift()); - i = 0; - while (known.length > 0) - position_block_stacked(location, i++, (k-1)/2, 0, known.shift()); -} - -function position_block_stacked(location, i, c, k, element) { - let space = TOWNS[location]; - let block_size = 60+6; - let x = space.x + (i - c) * 16 + k * 12; - let y = space.y + (i - c) * 16 - k * 12; - element.style.left = ((x - block_size/2)|0)+"px"; - element.style.top = ((y - block_size/2)|0)+"px"; -} - -function show_block(element) { - if (element.parentElement !== ui.blocks_element) - ui.blocks_element.appendChild(element); -} - -function hide_block(element) { - if (element.parentElement !== ui.offmap_element) - ui.offmap_element.appendChild(element); -} - -function show_block(element) { - if (element.parentElement !== ui.blocks_element) - ui.blocks_element.appendChild(element); -} - -function hide_block(element) { - if (element.parentElement !== ui.offmap_element) - ui.offmap_element.appendChild(element); -} - -function is_known_block(info, who) { - if (game_over) - return true; - if (info.owner === player || info.owner === ASSASSINS || who === game.assassinate) - return true; - let town = game.location[who]; - if (town === DEAD) - return true; - return false; -} - -function update_map() { - let layout = {}; - - document.getElementById("frank_vp").textContent = game.f_vp + " VP"; - document.getElementById("saracen_vp").textContent = game.s_vp + " VP"; - document.getElementById("timeline").className = "year_" + game.year; - if (game.turn < 1) - document.getElementById("turn_info").textContent = - "Year " + game.year; - else if (game.turn < 6) - document.getElementById("turn_info").textContent = - "Turn " + game.turn + " of Year " + game.year; - else - document.getElementById("turn_info").textContent = - "Winter Turn of Year " + game.year; - - for (let town in TOWNS) - layout[town] = { north: [], south: [] }; - - for (let b in game.location) { - let info = BLOCKS[b]; - let element = ui.blocks[b]; - let town = game.location[b]; - if (town in TOWNS) { - let moved = game.moved[b] ? " moved" : ""; - if (town === DEAD) - moved = " moved"; - if (is_known_block(info, b)) { - let image = " block_" + info.image; - let steps = " r" + (info.steps - game.steps[b]); - let known = " known"; - if ((town === S_POOL || town === F_POOL) && b !== game.who && !game_over) - known = ""; - element.classList = info.owner + known + " block" + image + steps + moved; - } else { - let besieging = ""; - if (game.sieges[town] === info.owner) { - if (game.winter_campaign === town) - besieging = " winter_campaign"; - else - besieging = " besieging"; - } - let jihad = ""; - if (game.jihad === town && info.owner === game.p1) - jihad = " jihad"; - element.classList = info.owner + " block" + moved + besieging + jihad; - } - if (town !== DEAD) { - if (info.owner === FRANKS) - layout[town].north.push(element); - else - layout[town].south.push(element); - } - show_block(element); - } else { - hide_block(element); - } - } - - for (let b in game.location) { - let info = BLOCKS[b]; - let element = ui.blocks[b]; - let town = game.location[b]; - if (town === DEAD) { - if (info.owner === FRANKS) - layout[F_POOL].north.unshift(element); - else - layout[S_POOL].south.unshift(element); - } - } - - for (let town in TOWNS) - layout_blocks(town, layout[town].north, layout[town].south); - - for (let where in TOWNS) { - if (ui.towns[where]) { - ui.towns[where].classList.remove('highlight'); - ui.towns[where].classList.remove('muster'); - } - } - if (game.actions && game.actions.town) - for (let where of game.actions.town) - ui.towns[where].classList.add('highlight'); - if (game.muster) - ui.towns[game.muster].classList.add('muster'); - - if (!game.battle) { - if (game.actions && game.actions.block) - for (let b of game.actions.block) - ui.blocks[b].classList.add('highlight'); - } - if (game.who && !game.battle) - ui.blocks[game.who].classList.add('selected'); - for (let b of game.castle) - ui.blocks[b].classList.add('castle'); -} - -function update_card_display(element, card, prior_card) { - if (!card && !prior_card) { - element.className = "small_card card_back"; - } else if (prior_card) { - element.className = "small_card prior " + CARDS[prior_card].image; - } else { - element.className = "small_card " + CARDS[card].image; - } -} - -function update_cards() { - update_card_display(document.getElementById("frank_card"), game.f_card, game.prior_f_card); - update_card_display(document.getElementById("saracen_card"), game.s_card, game.prior_s_card); - - for (let c = 1; c <= 27; ++c) { - let element = ui.cards[c]; - if (game.hand.includes(c)) { - element.classList.add("show"); - if (game.actions && game.actions.play) { - if (game.actions.play.includes(c)) { - element.classList.add("enabled"); - element.classList.remove("disabled"); - } else { - element.classList.remove("enabled"); - element.classList.add("disabled"); - } - } else { - element.classList.remove("enabled"); - element.classList.remove("disabled"); - } - } else { - element.classList.remove("show"); - } - } - - if (player === 'Observer') { - let n = game.hand.length; - for (let c = 1; c <= 6; ++c) - if (c <= n) - ui.card_backs[c].classList.add("show"); - else - ui.card_backs[c].classList.remove("show"); - } -} - -function compare_blocks(a, b) { - let aa = BLOCKS[a].combat; - let bb = BLOCKS[b].combat; - if (aa === bb) - return (a < b) ? -1 : (a > b) ? 1 : 0; - return (aa < bb) ? -1 : (aa > bb) ? 1 : 0; -} - -function insert_battle_block(root, node, block) { - for (let i = 0; i < root.children.length; ++i) { - let prev = root.children[i]; - if (compare_blocks(prev.block, block) > 0) { - root.insertBefore(node, prev); - return; - } - } - root.appendChild(node); -} - -function update_battle() { - function fill_cell(name, list, show) { - let cell = document.getElementById(name); - - ui.present.clear(); - - for (let block of list) { - ui.present.add(block); - - if (!cell.contains(ui.battle_menu[block])) - insert_battle_block(cell, ui.battle_menu[block], block); - - ui.battle_menu[block].className = "battle_menu"; - if (game.actions && game.actions.fire && game.actions.fire.includes(block)) - ui.battle_menu[block].classList.add('fire'); - if (game.actions && game.actions.retreat && game.actions.retreat.includes(block)) - ui.battle_menu[block].classList.add('retreat'); - if (game.actions && game.actions.harry && game.actions.harry.includes(block)) - ui.battle_menu[block].classList.add('harry'); - if (game.actions && game.actions.charge && game.actions.charge.includes(block)) - ui.battle_menu[block].classList.add('charge'); - if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(block)) - ui.battle_menu[block].classList.add('withdraw'); - if (game.actions && game.actions.storm && game.actions.storm.includes(block)) - ui.battle_menu[block].classList.add('storm'); - if (game.actions && game.actions.sally && game.actions.sally.includes(block)) - ui.battle_menu[block].classList.add('sally'); - if (game.actions && game.actions.charge && game.actions.charge.includes(block)) - ui.battle_menu[block].classList.add('charge'); - if (game.actions && game.actions.treachery && game.actions.treachery.includes(block)) - ui.battle_menu[block].classList.add('treachery'); - if (game.actions && game.actions.hit && game.actions.hit.includes(block)) - ui.battle_menu[block].classList.add('hit'); - - let class_name = battle_block_class_name(BLOCKS[block]); - if (game.actions && game.actions.block && game.actions.block.includes(block)) - class_name += " highlight"; - if (game.moved[block]) - class_name += " moved"; - if (block === game.who) - class_name += " selected"; - if (block === game.battle.halfhit) - class_name += " halfhit"; - if (game.jihad === game.battle.town && block_owner(block) === game.p1) - class_name += " jihad"; - - if (game.battle.sallying.includes(block)) - show = true; - if (game.battle.storming.includes(block)) - show = true; - if (show || block_owner(block) === player) { - class_name += " known"; - ui.battle_block[block].className = class_name; - update_steps(block, game.steps[block], ui.battle_block[block], false); - } else { - ui.battle_block[block].className = class_name; - } - - } - - for (let b in BLOCKS) { - if (!ui.present.has(b)) { - if (cell.contains(ui.battle_menu[b])) - cell.removeChild(ui.battle_menu[b]); - } - } - } - - if (player === FRANKS) { - fill_cell("ER", game.battle.SR, false); - fill_cell("EC", game.battle.SC, game.battle.show_castle); - fill_cell("EF", game.battle.SF, game.battle.show_field); - fill_cell("FF", game.battle.FF, game.battle.show_field); - fill_cell("FC", game.battle.FC, game.battle.show_castle); - fill_cell("FR", game.battle.FR, false); - document.getElementById("FC").className = "c" + game.battle.FCS; - document.getElementById("EC").className = "c" + game.battle.SCS; - } else { - fill_cell("ER", game.battle.FR, false); - fill_cell("EC", game.battle.FC, game.battle.show_castle); - fill_cell("EF", game.battle.FF, game.battle.show_field); - fill_cell("FF", game.battle.SF, game.battle.show_field); - fill_cell("FC", game.battle.SC, game.battle.show_castle); - fill_cell("FR", game.battle.SR, false); - document.getElementById("EC").className = "c" + game.battle.FCS; - document.getElementById("FC").className = "c" + game.battle.SCS; - } -} - -let flash_timer = 0; -function start_flash() { - let element = document.getElementById("battle_message"); - let tick = true; - if (flash_timer) - return; - flash_timer = setInterval(function () { - if (!game.flash_next) { - element.textContent = game.battle ? game.battle.flash : ""; - clearInterval(flash_timer); - flash_timer = 0; - } else { - element.textContent = tick ? game.battle.flash : game.flash_next; - tick = !tick; - } - }, 1000); -} - -function on_update() { - show_action_button("#next_button", "next"); - show_action_button("#pass_button", "pass"); - show_action_button("#undo_button", "undo"); - show_action_button("#winter_campaign_button", "winter_campaign"); - show_action_button("#group_move_button", "group_move"); - show_action_button("#end_group_move_button", "end_group_move"); - show_action_button("#sea_move_button", "sea_move"); - show_action_button("#end_sea_move_button", "end_sea_move"); - show_action_button("#muster_button", "muster"); - show_action_button("#end_muster_button", "end_muster"); - show_action_button("#end_move_phase_button", "end_move_phase"); - show_action_button("#end_regroup_button", "end_regroup"); - show_action_button("#end_retreat_button", "end_retreat"); - show_action_button("#eliminate_button", "eliminate"); - - document.getElementById("frank_vp").textContent = game.f_vp; - document.getElementById("saracen_vp").textContent = game.s_vp; - - update_cards(); - update_map(); - - if (game.battle) { - document.getElementById("battle_header").textContent = game.battle.title; - document.getElementById("battle_message").textContent = game.battle.flash; - if (game.flash_next) - start_flash(); - document.getElementById("battle").classList.add("show"); - update_battle(); - } else { - document.getElementById("battle").classList.remove("show"); - } -} - -build_map(); - -drag_element_with_mouse("#battle", "#battle_header"); -scroll_with_middle_mouse("#grid_center", 3); -init_map_zoom(); -init_shift_zoom(); -init_client(["Franks", "Saracens"]); -- cgit v1.2.3