diff options
| -rw-r--r-- | play2.css | 91 | ||||
| -rw-r--r-- | play2.js | 59 | ||||
| -rw-r--r-- | tools/colors.js | 60 |
3 files changed, 135 insertions, 75 deletions
@@ -23,17 +23,10 @@ main { position: absolute; } -.card { - background-size: 100% 100%; - width: 206px; - height: 281px; - border-radius: 10px; - box-shadow: 0 0 0 1px black, 1px 1px 4px #0006; -} +/* SPACES */ .track { position: absolute; - background-color: #fff4; border: 3px solid transparent; width: 52px; height: 54px; @@ -45,11 +38,14 @@ main { .front { position: absolute; - background-color: #fff4; border: 6px solid transparent; border-radius: 34px; +} +.front_container { + position: absolute; display: flex; + justify-content: center; flex-wrap: wrap; gap: 4px; } @@ -58,67 +54,34 @@ main { border-color: white; } -.front div { +.front_container div { margin-right: -30px; + margin-bottom: -30px; } +/* TOKENS */ + .token { - background-color: #fff4; border: 3px solid black; width: 45px; height: 45px; - box-shadow: 0 0 0 1px black, 1px 1px 4px #0006; } +.token.white { background-color: hsl(0,0%,80%); border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%); box-shadow: 0 0 0 1px hsl(0,0%,26%), 0px 1px 4px #0008; } +.token.red { background-color: hsl(1,100%,47%); border-color: hsl(1,100%,57%) hsl(1,100%,37%) hsl(1,100%,37%) hsl(1,100%,57%); box-shadow: 0 0 0 1px hsl(1,100%,15%), 0px 1px 4px #0008; } +.token.pink { background-color: hsl(19,56%,67%); border-color: hsl(19,56%,77%) hsl(19,56%,57%) hsl(19,56%,57%) hsl(19,56%,77%); box-shadow: 0 0 0 1px hsl(19,56%,22%), 0px 1px 4px #0008; } +.token.brown { background-color: hsl(50,33%,60%); border-color: hsl(50,33%,70%) hsl(50,33%,50%) hsl(50,33%,50%) hsl(50,33%,70%); box-shadow: 0 0 0 1px hsl(50,33%,20%), 0px 1px 4px #0008; } +.token.gray { background-color: hsl(240,1%,65%); border-color: hsl(240,1%,75%) hsl(240,1%,55%) hsl(240,1%,55%) hsl(240,1%,75%); box-shadow: 0 0 0 1px hsl(240,1%,22%), 0px 1px 4px #0008; } + +.token.blank { width: 45px; height: 45px; } .token.round { width: 58px; height: 58px; } .token.square { width: 45px; height: 45px; } .token.standee { width: 44px; height: 54px; } .token.medallion { width: 53px; height: 53px; } -.token.blank { - width: 45px; - height: 45px; - background-color: red; - border-radius: 50%; -} - -.token.round, .token.blank { - background-color: red; - border-radius: 50%; - border-color: pink darkred darkred pink; -} - -.token.round.off { - background-color: gray; - border-color: silver gray gray silver; -} - -.token.standee { - background-color: white; - border-radius: 10px; - border-color: #ddd #888 #888 #ddd; -} - -.player { - border-color: pink darkred darkred pink; -} - -.token.front_plus, -.token.front_minus { - background-color: tan; - border-color: tan brown brown tan; -} - -.front_minus + .front_minus, -.front_plus + .front_plus { - Xmargin-left: -30px; -} - -.token.medallion { - background-color: tan; - border-radius: 10px; - border-color: wheat brown brown wheat; -} +.token.round, .token.blank { border-radius: 50%; } +.token.standee { border-radius: 10px; } +.token.medallion { border-radius: 10px; } .medallion_container { position: absolute; @@ -152,11 +115,25 @@ main { box-shadow: 0 0 0 3px white; } +.card.selected { + box-shadow: 0 0 0 3px aqua; +} + +/* CARDS */ + +.card { + background-size: 100% 100%; + width: 206px; + height: 281px; + border-radius: 10px; + box-shadow: 0 0 0 1px black, 1px 1px 4px #0006; +} + .card.action { box-shadow: 0 0 0 3px white; } -.selected { +.card.selected { box-shadow: 0 0 0 3px aqua; } @@ -14,6 +14,8 @@ const ui = { tracks_x: [], tracks: [], fronts: [], + con_fronts: [], + str_fronts: [], // tokens standees: [], @@ -86,7 +88,7 @@ function build_track(t, action_name, track_name, a, b) { const bm = t * 11 + s e = (ui.blank_markers[bm] = document.createElement("div")) - e.className = "token blank hide" + e.className = "red token blank hide" e.style.top = Math.round(y+4) + "px" e.style.left = Math.round(x+3) + "px" register_action(e, "blank_marker", bm) @@ -104,7 +106,7 @@ function build_track(t, action_name, track_name, a, b) { } e = (ui.standees[t] = document.createElement("div")) - e.className = "token standee standee_" + t + e.className = "white token standee standee_" + t e.style.top = y - 10 + "px" e.style.left = boxes[track_name][0] + 4 + "px" register_action(e, "standee", t) @@ -114,7 +116,7 @@ function build_track(t, action_name, track_name, a, b) { function build_bonus(b, box_name, cname) { let e = ui.bonuses[b] = document.createElement("div") let [x, y, w, h] = boxes[box_name] - e.className = "token round " + cname + e.className = "red token round " + cname e.style.top = Math.round(y + w/2 - 32) + "px" e.style.left = Math.round(x + w/2 - 32) + "px" register_action(e, "bonus", b) @@ -131,6 +133,23 @@ function build_front(i, action_id, box_name) { e.style.height = Math.round(h - 6) + "px" register_action(e, "front", action_id) ui.map.appendChild(e) + + e = ui.con_fronts[i] = document.createElement("div") + e.className = "front_container" + e.style.top = y + 5 + "px" + e.style.left = x + "px" + e.style.width = w - 25 + "px" + e.style.height = 55 + "px" + ui.map.appendChild(e) + + e = ui.str_fronts[i] = document.createElement("div") + e.className = "front_container" + e.style.top = y + h - 55 - 5+ "px" + e.style.left = x + "px" + e.style.width = w - 25 + "px" + e.style.height = 55 + "px" + ui.map.appendChild(e) + } function on_init() { @@ -185,7 +204,7 @@ function on_init() { for (i = 0; i < 9; ++i) { e = (ui.medallions[i] = document.createElement("div")) - e.className = "token medallion medallion_" + i + e.className = "pink token medallion medallion_" + i register_action(e, "medallion", i) } @@ -216,28 +235,29 @@ const faction_class = { "m": "moderate", } -function update_front(container, front) { +function update_front(str_container, con_container, front) { var i, n, e, cn - container.replaceChildren() + str_container.replaceChildren() if (front.value < 0) { n = -front.value - cn = "token front_minus" + cn = "brown token front_minus" } else { - n = -front.value - cn = "token front_plus" + n = front.value + cn = "pink token front_plus" } for (i = 0; i < n; ++i) { let e = document.createElement("div") e.className = cn - container.appendChild(e) + str_container.appendChild(e) } + con_container.replaceChildren() for (i of ["a", "c", "m"]) { if (front.contributions.includes(i)) { let e = document.createElement("div") - e.className = "token player " + faction_class[i] - container.appendChild(e) + e.className = "red token player " + faction_class[i] + con_container.appendChild(e) } } } @@ -254,8 +274,11 @@ function on_update() { place_cards(ui.tableaus.m, [ 117, ...view.tableaus.m]) // TODO: current year deck - ui.bonuses[0].classList.toggle("off", !view.bonuses[0]) - ui.bonuses[1].classList.toggle("off", !view.bonuses[1]) + for (i = 0; i <= 1; ++i) { + ui.bonuses[i].classList.toggle("red", !!view.bonuses[i]) + ui.bonuses[i].classList.toggle("gray", !view.bonuses[i]) + ui.bonuses[i].classList.toggle("off", !view.bonuses[i]) + } for (i = 0; i < 4; ++i) { if (i < view.current_events.length) @@ -278,10 +301,10 @@ function on_update() { ui.medallion_container[i].appendChild(ui.medallions[i]) } - update_front(ui.fronts[0], view.fronts.a) - update_front(ui.fronts[1], view.fronts.m) - update_front(ui.fronts[2], view.fronts.n) - update_front(ui.fronts[3], view.fronts.s) + update_front(ui.str_fronts[0], ui.con_fronts[0], view.fronts.a) + update_front(ui.str_fronts[1], ui.con_fronts[1], view.fronts.m) + update_front(ui.str_fronts[2], ui.con_fronts[2], view.fronts.n) + update_front(ui.str_fronts[3], ui.con_fronts[3], view.fronts.s) action_button("add_to_front", "+1 to a Front") action_button("d_liberty", "Decrease Liberty") diff --git a/tools/colors.js b/tools/colors.js new file mode 100644 index 0000000..1f6e771 --- /dev/null +++ b/tools/colors.js @@ -0,0 +1,60 @@ +function rgb_to_hsl(rgb, add=0, scale=1) { + if (typeof rgb === "string") { + if (rgb[0] === "#") + rgb = rgb.substring(1) + rgb = parseInt(rgb, 16) + } + + let r = ((rgb >> 16) & 255) / 255 + let g = ((rgb >> 8) & 255) / 255 + let b = ((rgb) & 255) / 255 + let cmin = Math.min(r, g, b) + let cmax = Math.max(r, g, b) + let delta = cmax - cmin + let h = 0, s = 0, l = 0 + + if (delta == 0) + h = 0 + else if (cmax == r) + h = ((g - b) / delta) % 6 + else if (cmax == g) + h = (b - r) / delta + 2 + else + h = (r - g) / delta + 4 + + h = Math.round(h * 60) + + if (h < 0) + h += 360 + + l = (cmax + cmin) / 2 + + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) + + l = Math.max(0, Math.min(1, l * scale + add)) + + s = Math.round(s * 100) + l = Math.round(l * 100) + + return "hsl(" + h + "," + s + "%," + l + "%)" +} + +function foo(sel, rgb) { + let bg = rgb_to_hsl(rgb, 0.00, 1.00) + let hi = rgb_to_hsl(rgb, 0.10, 1.00) + let sh = rgb_to_hsl(rgb, -0.10, 1.00) + let bd = rgb_to_hsl(rgb, 0.00, 0.33) + console.log(sel + ` { background-color: ${bg}; border-color: ${hi} ${sh} ${sh} ${hi}; box-shadow: 0 0 0 1px ${bd}, 0px 1px 4px #0008; }`) +} + +function bar(sel, rgb) { + hsl = rgb_to_hsl(rgb) + console.log(sel + ` { background-color: ${hsl} }`) +} + +foo(".token.white", "cccccc") +foo(".token.red", "ef0500") +foo(".token.pink", "da997b") +foo(".token.brown", "bbb079") +foo(".token.gray", "a6a6a8") + |