Kirisame/dzura
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

Add interface configurations.

Browse Source
This commit is contained in:
yukirij 2024-12-27 20:02:08 -08:00
parent 3df4224448
commit b43c90f2a9
1 changed files with 256 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
www/js/interface.js
View File

@ -1,13 +1,8 @@
let INTERFACE_DATA = null; let INTERFACE_DATA = null;
const INTERFACE = { function INTERFACE_STYLE(id) {
Mode: { switch(id) {
Local: 0, case 0: return {
Player: 1,
Review: 2,
},
Color: {
Background: "#101010", Background: "#101010",
Text: "#c0c0c0", Text: "#c0c0c0",
@ -49,8 +44,71 @@ const INTERFACE = {
HintInvalidDark: "#4c0909", HintInvalidDark: "#4c0909",
HintPlay: "#307c7f", HintPlay: "#307c7f",
HintCheck: "#C62828", 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,
Player: 1,
Review: 2,
}, },
Config: {
DisablePool: false,
DisableHint: false,
DisableNumbers: false,
DisableText: false,
DisableInvalid: false,
},
Color: INTERFACE_STYLE(0),
TileStatus: { TileStatus: {
Valid: 1, Valid: 1,
Threat: 2, Threat: 2,
@ -177,7 +235,7 @@ const INTERFACE = {
} }
// Handle pool area // 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_x = INTERFACE_DATA.Render.pool_offset + halfradius;
let basis_y = INTERFACE_DATA.Render.offset.y + (3 * apothem); let basis_y = INTERFACE_DATA.Render.offset.y + (3 * apothem);
@ -348,7 +406,11 @@ const INTERFACE = {
default: { default: {
if(!event.ctrlKey) { if(!event.ctrlKey) {
if(!event.altKey) {
INTERFACE_DATA.select = null; INTERFACE_DATA.select = null;
} else {
INTERFACE_DATA.alt_mode = !INTERFACE_DATA.alt_mode;
}
} }
} break; } break;
} }
@ -374,7 +436,9 @@ const INTERFACE = {
contextmenu(event) { contextmenu(event) {
if(!event.ctrlKey) { if(!event.ctrlKey) {
if(!event.altKey) {
INTERFACE_DATA.select = null; INTERFACE_DATA.select = null;
}
event.preventDefault(); event.preventDefault();
return false; return false;
} else { } else {
@ -416,21 +480,37 @@ const INTERFACE = {
let height = INTERFACE_DATA.canvas.height = INTERFACE_DATA.canvas.clientHeight * (window.devicePixelRatio || 1); 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.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.r = 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; 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 margin = INTERFACE_DATA.Render.margin;
let gui_width = width - (margin.l + margin.r); let gui_width = width - (margin.l + margin.r);
let gui_height = height - (margin.t + margin.b); let gui_height = height - (margin.t + margin.b);
if(!INTERFACE.Config.DisablePool) {
if(gui_width < gui_height * INTERFACE.Ratio) { if(gui_width < gui_height * INTERFACE.Ratio) {
gui_height = Math.floor(gui_width / INTERFACE.Ratio); gui_height = Math.floor(gui_width / INTERFACE.Ratio);
} else { } else {
gui_width = Math.floor(gui_height * INTERFACE.Ratio); gui_width = Math.floor(gui_height * INTERFACE.Ratio);
} }
} else {
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; 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.x = gui_width;
INTERFACE_DATA.Render.area.y = gui_height; INTERFACE_DATA.Render.area.y = gui_height;
@ -580,9 +660,14 @@ const INTERFACE = {
let hover_state = INTERFACE_DATA.Game.board_state[i][0]; let hover_state = INTERFACE_DATA.Game.board_state[i][0];
let piece = null; 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) { if(INTERFACE_DATA.Animation.piece !== null) {
let play = INTERFACE_DATA.Animation.piece.play; let play = INTERFACE_DATA.Animation.piece.play;
draw_piece = draw_piece && !((play.source == 0 || play.source == 2) && (play.from == i || play.to == i)); 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) { switch(hover_state) {
case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValidDark; break; case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValidDark; break;
case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreatDark; 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; case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponentDark; break;
} }
switch(tile_state) { switch(tile_state) {
case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValid; break; case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValid; break;
case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreat; 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; case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponent; break;
} }
if(is_select) { if(is_select) {
@ -750,6 +835,7 @@ const INTERFACE = {
opponent_color = INTERFACE.Color.Dawn; opponent_color = INTERFACE.Color.Dawn;
} }
if(!INTERFACE.Config.DisablePool) {
// Player pool // Player pool
draw.pool( draw.pool(
basis_x + (14 * radius), basis_x + (14 * radius),
@ -766,9 +852,9 @@ const INTERFACE = {
player_identity ^ 1, player_identity ^ 1,
INTERFACE_DATA.mode == INTERFACE.Mode.Local && INTERFACE_DATA.mirror INTERFACE_DATA.mode == INTERFACE.Mode.Local && INTERFACE_DATA.mirror
); );
}
// Draw informational text // Draw informational text
let handle_pos = [ let handle_pos = [
new MATH.Vec2( new MATH.Vec2(
basis_x + (radius * 12), basis_x + (radius * 12),
@ -809,9 +895,11 @@ const INTERFACE = {
ctx.fillText(INTERFACE_DATA.Session.Client.Dusk.handle, pos.x, pos.y); ctx.fillText(INTERFACE_DATA.Session.Client.Dusk.handle, pos.x, pos.y);
} }
// Tile information // Tile information
ctx.font = Math.ceil(gui_scale / 2) + "px sans-serif"; ctx.font = Math.ceil(gui_scale / 2) + "px sans-serif";
if(!INTERFACE.Config.DisableText) {
if(INTERFACE_DATA.hover !== null) { if(INTERFACE_DATA.hover !== null) {
let text = ""; let text = "";
if(INTERFACE_DATA.hover.source == 0) { if(INTERFACE_DATA.hover.source == 0) {
@ -878,7 +966,9 @@ const INTERFACE = {
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.fillText(message, gui_margin.t, height - gui_margin.t); ctx.fillText(message, gui_margin.t, height - gui_margin.t);
} }
}
if(!INTERFACE.Config.DisableNumbers) {
// Draw tile numbers // Draw tile numbers
let letters = [ "A", "B", "C", "D", "E", "F", "G", "H", "I"]; let letters = [ "A", "B", "C", "D", "E", "F", "G", "H", "I"];
let numbers = [ "1", "2", "3", "4", "5", "6", "7", "8", "9"]; let numbers = [ "1", "2", "3", "4", "5", "6", "7", "8", "9"];
@ -925,6 +1015,7 @@ const INTERFACE = {
ctx.fillText(numbers[i + 5], 0, 0); ctx.fillText(numbers[i + 5], 0, 0);
ctx.restore(); ctx.restore();
} }
}
if(INTERFACE_DATA.Animation.piece !== null) { if(INTERFACE_DATA.Animation.piece !== null) {
@ -1028,6 +1119,8 @@ const INTERFACE = {
} }
hints(piece) { hints(piece) {
if(INTERFACE.Config.DisableHint) { return; }
let scale = 0.92 * this.scale; let scale = 0.92 * this.scale;
let half_scale = scale * 0.5; let half_scale = scale * 0.5;
@ -2044,6 +2137,7 @@ INTERFACE.TileScale = 0.9;
INTERFACE.Radius = 2.0 / Math.sqrt(3.0); INTERFACE.Radius = 2.0 / Math.sqrt(3.0);
INTERFACE.HalfRadius = 1.0 / Math.sqrt(3.0); INTERFACE.HalfRadius = 1.0 / Math.sqrt(3.0);
INTERFACE.Scale = 1 / 18; INTERFACE.Scale = 1 / 18;
INTERFACE.BoardRatio = (14 * INTERFACE.Radius) * INTERFACE.Scale;
INTERFACE.Ratio = (19 * INTERFACE.Radius) * INTERFACE.Scale; INTERFACE.Ratio = (19 * INTERFACE.Radius) * INTERFACE.Scale;
INTERFACE.HexVertex = [ INTERFACE.HexVertex = [
// top face // top face