From b43c90f2a95d8a2b240f9c6980c91aae29b33122 Mon Sep 17 00:00:00 2001 From: yukirij Date: Fri, 27 Dec 2024 20:02:08 -0800 Subject: [PATCH] Add interface configurations. --- www/js/interface.js | 418 +++++++++++++++++++++++++++----------------- 1 file changed, 256 insertions(+), 162 deletions(-) diff --git a/www/js/interface.js b/www/js/interface.js index eef9a00..ade79de 100644 --- a/www/js/interface.js +++ b/www/js/interface.js @@ -1,5 +1,97 @@ let INTERFACE_DATA = null; +function INTERFACE_STYLE(id) { + switch(id) { + case 0: return { + Background: "#101010", + + Text: "#c0c0c0", + TextDark: "#848484", + + TileBorder: "#606060", + TileLight: "#383838", + TileMedium: "#242424", + TileDark: "#101010", + + Promote: "#a52121", + + Dawn: "#ffe082", + DawnShade: "#a59154", + DawnMedium: "#fca03f", + DawnDark: "#ff6d00", + DawnDarkest: "#4c3422", + + Dusk: "#f6a1bd", + DuskShade: "#a56b7f", + DuskMedium: "#e84a79", + DuskDark: "#c51162", + DuskDarkest: "#4c2235", + + HintHover: "#b8f1fc", + HintSelect: "#4a148c", + HintSelectLight: "#cda6fc", + HintValid: "#1d268c", + HintValidLight: "#6e9de5", + HintValidTint: "#3786fc", + HintValidDark: "#151c66", + HintThreat: "#054719", + HintThreatDark: "#023311", + HintOpponent: "#49136b", + HintOpponentDark: "#2a0b3f", + HintInvalid: "#660d0d", + HintInvalidLight: "#fc5050", + HintInvalidTint: "#fc3737", + HintInvalidDark: "#4c0909", + HintPlay: "#307c7f", + HintCheck: "#C62828", + }; + + case 1: return { + Background: "rgba(0,0,0,0)", + + Text: "#222222", + TextDark: "#444444", + + TileBorder: "#444444", + TileLight: "#ffffff", + TileMedium: "#ffffff", + TileDark: "#ffffff", + + Promote: "#888888", + + Dawn: "#ff6d00", + DawnShade: "#ffffff", + DawnMedium: "#ffffff", + DawnDark: "#444444", + DawnDarkest: "#ffffff", + + Dusk: "#c51162", + DuskShade: "#ffffff", + DuskMedium: "#ffffff", + DuskDark: "#444444", + DuskDarkest: "#ffffff", + + HintHover: "#222222", + HintSelect: "#ffffff", + HintSelectLight: "#444444", + HintValid: "#AAAAAA", + HintValidLight: "#444444", + HintValidTint: "#444444", + HintValidDark: "#DDDDDD", + HintThreat: "#ffffff", + HintThreatDark: "#000000", + HintOpponent: "#ffffff", + HintOpponentDark: "#000000", + HintInvalid: "#ffffff", + HintInvalidLight: "#444444", + HintInvalidTint: "#444444", + HintInvalidDark: "#DDDDDD", + HintPlay: "#ffffff", + HintCheck: "#ffffff", + }; + } +} + const INTERFACE = { Mode: { Local: 0, @@ -7,49 +99,15 @@ const INTERFACE = { Review: 2, }, - Color: { - Background: "#101010", - - Text: "#c0c0c0", - TextDark: "#848484", - - TileBorder: "#606060", - TileLight: "#383838", - TileMedium: "#242424", - TileDark: "#101010", - - Promote: "#a52121", - - Dawn: "#ffe082", - DawnShade: "#a59154", - DawnMedium: "#fca03f", - DawnDark: "#ff6d00", - DawnDarkest: "#4c3422", - - Dusk: "#f6a1bd", - DuskShade: "#a56b7f", - DuskMedium: "#e84a79", - DuskDark: "#c51162", - DuskDarkest: "#4c2235", - - HintHover: "#b8f1fc", - HintSelect: "#4a148c", - HintSelectLight: "#cda6fc", - HintValid: "#1d268c", - HintValidLight: "#6e9de5", - HintValidTint: "#3786fc", - HintValidDark: "#151c66", - HintThreat: "#054719", - HintThreatDark: "#023311", - HintOpponent: "#49136b", - HintOpponentDark: "#2a0b3f", - HintInvalid: "#660d0d", - HintInvalidLight: "#fc5050", - HintInvalidTint: "#fc3737", - HintInvalidDark: "#4c0909", - HintPlay: "#307c7f", - HintCheck: "#C62828", + Config: { + DisablePool: false, + DisableHint: false, + DisableNumbers: false, + DisableText: false, + DisableInvalid: false, }, + + Color: INTERFACE_STYLE(0), TileStatus: { Valid: 1, @@ -177,7 +235,7 @@ const INTERFACE = { } // Handle pool area - else if(mouse_x >= INTERFACE_DATA.Render.pool_offset && mouse_x < INTERFACE_DATA.Render.offset.x + INTERFACE_DATA.Render.area.x) { + else if(!INTERFACE.Config.DisablePool && mouse_x >= INTERFACE_DATA.Render.pool_offset && mouse_x < INTERFACE_DATA.Render.offset.x + INTERFACE_DATA.Render.area.x) { let basis_x = INTERFACE_DATA.Render.pool_offset + halfradius; let basis_y = INTERFACE_DATA.Render.offset.y + (3 * apothem); @@ -348,7 +406,11 @@ const INTERFACE = { default: { if(!event.ctrlKey) { - INTERFACE_DATA.select = null; + if(!event.altKey) { + INTERFACE_DATA.select = null; + } else { + INTERFACE_DATA.alt_mode = !INTERFACE_DATA.alt_mode; + } } } break; } @@ -374,7 +436,9 @@ const INTERFACE = { contextmenu(event) { if(!event.ctrlKey) { - INTERFACE_DATA.select = null; + if(!event.altKey) { + INTERFACE_DATA.select = null; + } event.preventDefault(); return false; } else { @@ -416,21 +480,37 @@ const INTERFACE = { let height = INTERFACE_DATA.canvas.height = INTERFACE_DATA.canvas.clientHeight * (window.devicePixelRatio || 1); INTERFACE_DATA.Render.margin.t = Math.floor(Math.min(width, height) / 96); - INTERFACE_DATA.Render.margin.l = 1.75 * INTERFACE_DATA.Render.margin.t; INTERFACE_DATA.Render.margin.r = INTERFACE_DATA.Render.margin.t; - INTERFACE_DATA.Render.margin.b = 3 * INTERFACE_DATA.Render.margin.t; + if(!INTERFACE.Config.DisableNumbers) { + INTERFACE_DATA.Render.margin.l = 1.75 * INTERFACE_DATA.Render.margin.t; + INTERFACE_DATA.Render.margin.b = 3 * INTERFACE_DATA.Render.margin.t; + } else { + INTERFACE_DATA.Render.margin.l = INTERFACE_DATA.Render.margin.t; + INTERFACE_DATA.Render.margin.b = INTERFACE_DATA.Render.margin.t; + } let margin = INTERFACE_DATA.Render.margin; let gui_width = width - (margin.l + margin.r); let gui_height = height - (margin.t + margin.b); - if(gui_width < gui_height * INTERFACE.Ratio) { - gui_height = Math.floor(gui_width / INTERFACE.Ratio); + if(!INTERFACE.Config.DisablePool) { + if(gui_width < gui_height * INTERFACE.Ratio) { + gui_height = Math.floor(gui_width / INTERFACE.Ratio); + } else { + gui_width = Math.floor(gui_height * INTERFACE.Ratio); + } } else { - gui_width = Math.floor(gui_height * INTERFACE.Ratio); + if(gui_width < gui_height * INTERFACE.BoardRatio) { + gui_height = Math.floor(gui_width / INTERFACE.BoardRatio); + } else { + gui_width = Math.floor(gui_height * INTERFACE.BoardRatio); + } } let gui_scale = gui_height * INTERFACE.Scale; + if(INTERFACE.Config.DisablePool) { + gui_scale = gui_height / 18; + } INTERFACE_DATA.Render.area.x = gui_width; INTERFACE_DATA.Render.area.y = gui_height; @@ -580,9 +660,14 @@ const INTERFACE = { let hover_state = INTERFACE_DATA.Game.board_state[i][0]; let piece = null; - if(tile.piece !== null) { piece = GAME_DATA.board.pieces[tile.piece]; } + let draw_piece = false; + if(tile.piece !== null) { + piece = GAME_DATA.board.pieces[tile.piece]; + if(piece.piece < 8) { + draw_piece = true; + } + } - let draw_piece = true; if(INTERFACE_DATA.Animation.piece !== null) { let play = INTERFACE_DATA.Animation.piece.play; draw_piece = draw_piece && !((play.source == 0 || play.source == 2) && (play.from == i || play.to == i)); @@ -624,13 +709,13 @@ const INTERFACE = { switch(hover_state) { case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValidDark; break; case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreatDark; break; - case INTERFACE.TileStatus.Invalid: background_color = INTERFACE.Color.HintInvalidDark; break; + case INTERFACE.TileStatus.Invalid: if(!INTERFACE.Config.DisableInvalid) { background_color = INTERFACE.Color.HintInvalidDark; } break; case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponentDark; break; } switch(tile_state) { case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValid; break; case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreat; break; - case INTERFACE.TileStatus.Invalid: background_color = INTERFACE.Color.HintInvalid; break; + case INTERFACE.TileStatus.Invalid: if(!INTERFACE.Config.DisableInvalid) { background_color = INTERFACE.Color.HintInvalid; } break; case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponent; break; } if(is_select) { @@ -750,25 +835,26 @@ const INTERFACE = { opponent_color = INTERFACE.Color.Dawn; } - // Player pool - draw.pool( - basis_x + (14 * radius), - basis_y - gui_scale, - 0, - player_identity, - ); + if(!INTERFACE.Config.DisablePool) { + // Player pool + draw.pool( + basis_x + (14 * radius), + basis_y - gui_scale, + 0, + player_identity, + ); - // Opponent pool - draw.pool( - basis_x + (14 * radius), - basis_y - (9 * gui_scale), - 7, - player_identity ^ 1, - INTERFACE_DATA.mode == INTERFACE.Mode.Local && INTERFACE_DATA.mirror - ); + // Opponent pool + draw.pool( + basis_x + (14 * radius), + basis_y - (9 * gui_scale), + 7, + player_identity ^ 1, + INTERFACE_DATA.mode == INTERFACE.Mode.Local && INTERFACE_DATA.mirror + ); + } // Draw informational text - let handle_pos = [ new MATH.Vec2( basis_x + (radius * 12), @@ -809,121 +895,126 @@ const INTERFACE = { ctx.fillText(INTERFACE_DATA.Session.Client.Dusk.handle, pos.x, pos.y); } + // Tile information ctx.font = Math.ceil(gui_scale / 2) + "px sans-serif"; - if(INTERFACE_DATA.hover !== null) { - let text = ""; - if(INTERFACE_DATA.hover.source == 0) { - text = INTERFACE.Ui.hex_to_alnum(INTERFACE_DATA.hover.hex); - let piece_id = GAME_DATA.board.tiles[INTERFACE_DATA.hover.tile].piece; - if(piece_id !== null) { - let piece = GAME_DATA.board.pieces[piece_id]; - text += " " + LANG(GAME.Const.Piece[piece.piece].name); - if(piece.promoted) { text += "+"; } + if(!INTERFACE.Config.DisableText) { + if(INTERFACE_DATA.hover !== null) { + let text = ""; + if(INTERFACE_DATA.hover.source == 0) { + text = INTERFACE.Ui.hex_to_alnum(INTERFACE_DATA.hover.hex); + let piece_id = GAME_DATA.board.tiles[INTERFACE_DATA.hover.tile].piece; + if(piece_id !== null) { + let piece = GAME_DATA.board.pieces[piece_id]; + text += " " + LANG(GAME.Const.Piece[piece.piece].name); + if(piece.promoted) { text += "+"; } + } + } else { + text = " " + GAME.Const.Piece[INTERFACE_DATA.hover.tile % 7].name; } - } else { - text = " " + GAME.Const.Piece[INTERFACE_DATA.hover.tile % 7].name; + + ctx.fillStyle = INTERFACE.Color.Text; + ctx.textBaseline = "top"; + ctx.textAlign = "left"; + ctx.fillText(text, gui_margin.t, gui_margin.t); } + // Number of moves ctx.fillStyle = INTERFACE.Color.Text; ctx.textBaseline = "top"; - ctx.textAlign = "left"; - ctx.fillText(text, gui_margin.t, gui_margin.t); - } - - // Number of moves - ctx.fillStyle = INTERFACE.Color.Text; - ctx.textBaseline = "top"; - ctx.textAlign = "right"; - ctx.fillText(GAME_DATA.turn, width - gui_margin.t, gui_margin.t); - - // Number of spectators - if(INTERFACE_DATA.mode == INTERFACE.Mode.Player || INTERFACE_DATA.mode == INTERFACE.Mode.Review) { - ctx.fillStyle = INTERFACE.Color.Text; - ctx.textBaseline = "bottom"; ctx.textAlign = "right"; - ctx.fillText("⚇" + INTERFACE_DATA.Session.Client.Spectators.count, width - gui_margin.t, height - gui_margin.t); - } + ctx.fillText(GAME_DATA.turn, width - gui_margin.t, gui_margin.t); - // Game state message - let message = null; - ctx.fillStyle = INTERFACE.Color.Text; + // Number of spectators + if(INTERFACE_DATA.mode == INTERFACE.Mode.Player || INTERFACE_DATA.mode == INTERFACE.Mode.Review) { + ctx.fillStyle = INTERFACE.Color.Text; + ctx.textBaseline = "bottom"; + ctx.textAlign = "right"; + ctx.fillText("⚇" + INTERFACE_DATA.Session.Client.Spectators.count, width - gui_margin.t, height - gui_margin.t); + } - switch(INTERFACE_DATA.Game.auto) { - case 1: message = LANG("cpu") + " " + LANG("dawn"); break; - case 2: message = LANG("cpu") + " " + LANG("dusk"); break; - case 3: message = LANG("cpu"); break; - } + // Game state message + let message = null; + ctx.fillStyle = INTERFACE.Color.Text; - switch(GAME_DATA.state.code) { - case GAME.Const.State.Resign: { - ctx.fillStyle = INTERFACE.Color.HintCheck; - message = LANG("resign"); - } break; - case GAME.Const.State.Checkmate: { - ctx.fillStyle = INTERFACE.Color.HintCheck; - message = LANG("checkmate"); - } break; - default: { - if(GAME_DATA.state.check != 0) { + switch(INTERFACE_DATA.Game.auto) { + case 1: message = LANG("cpu") + " " + LANG("dawn"); break; + case 2: message = LANG("cpu") + " " + LANG("dusk"); break; + case 3: message = LANG("cpu"); break; + } + + switch(GAME_DATA.state.code) { + case GAME.Const.State.Resign: { ctx.fillStyle = INTERFACE.Color.HintCheck; - message = LANG("check"); + message = LANG("resign"); + } break; + case GAME.Const.State.Checkmate: { + ctx.fillStyle = INTERFACE.Color.HintCheck; + message = LANG("checkmate"); + } break; + default: { + if(GAME_DATA.state.check != 0) { + ctx.fillStyle = INTERFACE.Color.HintCheck; + message = LANG("check"); + } } } + + if(message !== null) { + ctx.textBaseline = "bottom"; + ctx.textAlign = "left"; + ctx.fillText(message, gui_margin.t, height - gui_margin.t); + } } - if(message !== null) { - ctx.textBaseline = "bottom"; - ctx.textAlign = "left"; - ctx.fillText(message, gui_margin.t, height - gui_margin.t); - } + if(!INTERFACE.Config.DisableNumbers) { + // Draw tile numbers + let letters = [ "A", "B", "C", "D", "E", "F", "G", "H", "I"]; + let numbers = [ "1", "2", "3", "4", "5", "6", "7", "8", "9"]; - // Draw tile numbers - let letters = [ "A", "B", "C", "D", "E", "F", "G", "H", "I"]; - let numbers = [ "1", "2", "3", "4", "5", "6", "7", "8", "9"]; + if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate != 0) { + letters.reverse(); + numbers.reverse(); + } - if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate != 0) { - letters.reverse(); - numbers.reverse(); - } + ctx.fillStyle = INTERFACE.Color.TextDark; + ctx.textBaseline = "top"; + ctx.textAlign = "center"; + for(let i = 0; i < 5; ++i) { + let x = basis_x + (1.5 * radius * i); + let y = basis_y + (gui_scale * (1.1 + i)); + ctx.fillText(letters[i], x, y); + } + for(let i = 0; i < 4; ++i) { + let x = basis_x + (1.5 * radius * (5 + i)); + let y = basis_y + (gui_scale * (4.15 - i)); + ctx.fillText(letters[i + 5], x, y); + } - ctx.fillStyle = INTERFACE.Color.TextDark; - ctx.textBaseline = "top"; - ctx.textAlign = "center"; - for(let i = 0; i < 5; ++i) { - let x = basis_x + (1.5 * radius * i); - let y = basis_y + (gui_scale * (1.1 + i)); - ctx.fillText(letters[i], x, y); - } - for(let i = 0; i < 4; ++i) { - let x = basis_x + (1.5 * radius * (5 + i)); - let y = basis_y + (gui_scale * (4.15 - i)); - ctx.fillText(letters[i + 5], x, y); - } + let number_offset_x = -1.15 * radius; + let number_offset_y = -0.75 * gui_scale; - let number_offset_x = -1.15 * radius; - let number_offset_y = -0.75 * gui_scale; + ctx.textAlign = "center"; + for(let i = 0; i < 5; ++i) { + let y = basis_y - (gui_scale * 2 * i); - ctx.textAlign = "center"; - for(let i = 0; i < 5; ++i) { - let y = basis_y - (gui_scale * 2 * i); + ctx.save(); + ctx.translate(basis_x + number_offset_x, y + number_offset_y); + ctx.rotate(-Math.PI / 3); + ctx.fillText(numbers[i], 0, 0); + ctx.restore(); + } + for(let i = 0; i < 4; ++i) { + let x = basis_x + (1.5 * radius * (1 + i)); + let y = basis_y - (gui_scale * (9 + i)); - ctx.save(); - ctx.translate(basis_x + number_offset_x, y + number_offset_y); - ctx.rotate(-Math.PI / 3); - ctx.fillText(numbers[i], 0, 0); - ctx.restore(); - } - for(let i = 0; i < 4; ++i) { - let x = basis_x + (1.5 * radius * (1 + i)); - let y = basis_y - (gui_scale * (9 + i)); - - ctx.save(); - ctx.translate(x + number_offset_x, y + number_offset_y); - ctx.rotate(-Math.PI / 3); - ctx.fillText(numbers[i + 5], 0, 0); - ctx.restore(); + ctx.save(); + ctx.translate(x + number_offset_x, y + number_offset_y); + ctx.rotate(-Math.PI / 3); + ctx.fillText(numbers[i + 5], 0, 0); + ctx.restore(); + } } @@ -1028,6 +1119,8 @@ const INTERFACE = { } hints(piece) { + if(INTERFACE.Config.DisableHint) { return; } + let scale = 0.92 * this.scale; let half_scale = scale * 0.5; @@ -2044,6 +2137,7 @@ INTERFACE.TileScale = 0.9; INTERFACE.Radius = 2.0 / Math.sqrt(3.0); INTERFACE.HalfRadius = 1.0 / Math.sqrt(3.0); INTERFACE.Scale = 1 / 18; +INTERFACE.BoardRatio = (14 * INTERFACE.Radius) * INTERFACE.Scale; INTERFACE.Ratio = (19 * INTERFACE.Radius) * INTERFACE.Scale; INTERFACE.HexVertex = [ // top face