Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
export default (winW: number, winH: number) => {
const replayAreaValues = {
x: 0.15,
y: 0.51,
w: 0.5,
};
if (!globals.lobby.settings.get('showKeldonUI')) {
replayAreaValues.x = 0.01;
replayAreaValues.y = 0.49;
replayAreaValues.w = 0.4;
}
globals.elements.replayArea = new Konva.Group({
x: replayAreaValues.x * winW,
y: replayAreaValues.y * winH,
width: replayAreaValues.w * winW,
height: 0.27 * winH,
});
// The thin black rectangle that the replay slider slides on
const replayBarValues = {
x: globals.lobby.settings.get('showKeldonUI') ? 0.01 : 0,
y: 0.0425,
w: globals.lobby.settings.get('showKeldonUI') ? 0.481 : replayAreaValues.w,
h: 0.01,
};
globals.elements.replayBar = new Konva.Rect({
x: replayBarValues.x * winW,
y: replayBarValues.y * winH,
drawJobBox(node, hovered = false) {
const group = new Konva.Group({
x: node.x_offset,
y: node.y_offset,
id: `jobBox${node.job.id}`
});
const statusIcon = new Konva.Path({
x: 10,
y: 10,
scaleX: 0.9,
scaleY: 0.9,
data: this.svgStatuses[node.job.status].data,
fill: this.svgStatuses[node.job.status].fill
});
// END STATUS ICON
const jobText = this.fittingString(this.layerJobBoxes.getContext(), node.job.name, this.pgraph.boxWidth - 120);
const drawClueArea = () => {
// Put the clue area directly below the play stacks, with a little bit of spacing
clueAreaValues = {
x: playAreaValues.x,
y: playAreaValues.y + playAreaValues.h! + 0.005,
w: playAreaValues.w,
h: 0.23,
};
if (globals.variant.showSuitNames) {
clueAreaValues.y += 0.03;
}
// In BGA mode, we can afford to put a bit more spacing to make it look less packed together
if (!globals.lobby.settings.get('showKeldonUI')) {
clueAreaValues.y += 0.02;
}
globals.elements.clueArea = new Konva.Group({
x: clueAreaValues.x * winW,
y: clueAreaValues.y * winH,
width: clueAreaValues.w! * winW,
});
// Player buttons
const playerButtonW = 0.08;
const playerButtonSpacing = 0.0075;
const numPlayers = globals.playerNames.length;
// This is the normal button group, which does not include us
globals.elements.clueTargetButtonGroup = new ButtonGroup({});
{
const totalPlayerButtons = numPlayers - 1;
let totalPlayerWidth = playerButtonW * totalPlayerButtons;
totalPlayerWidth += playerButtonSpacing * (totalPlayerButtons - 1);
const drawClueAreaDisabled = () => {
// We fade the clue area and draw a rectangle on top of it when there are no clues available
globals.elements.clueAreaDisabled = new Konva.Group({
x: clueAreaValues.x * winW,
y: clueAreaValues.y * winH,
width: clueAreaValues.w! * winW,
});
// A transparent rectangle to stop clicks
const rect = new Konva.Rect({
width: clueAreaValues.w! * winW,
height: clueAreaValues.h! * winH,
listening: true, // It must listen or it won't stop clicks
});
globals.elements.clueAreaDisabled.add(rect);
const spacing = {
x: 0.075,
y: 0.03,
const drawHypotheticalArea = () => {
// The "Hypothetical" circle that shows whether or not we are currently in a hypothetical
globals.elements.hypoCircle = new Konva.Group({
x: clueAreaValues.x * winW,
y: clueAreaValues.y * winH,
visible: false,
});
globals.layers.get('UI')!.add(globals.elements.hypoCircle);
const circle = new Konva.Ellipse({
x: (clueAreaValues.w! * 0.5) * winW,
y: 0.105 * winH,
radiusX: clueAreaValues.w! * 0.4 * winW,
radiusY: 0.05 * winH,
fill: 'black',
opacity: 0.5,
stroke: 'black',
strokeWidth: 4,
});
InCHlib.prototype._draw_vertical_path = function (path_id, x1, y1, x2, y2, left_distance, right_distance) {
const self = this;
const path_group = new Konva.Group({});
const path = self.objects_ref.node.clone({
points: [
x1,
left_distance,
x1,
y1,
x2,
y2,
x2,
right_distance,
],
id: `col${path_id}`,
});
const path_rect = self.objects_ref.node_rect.clone({
x: x2 - 1,
y: y1 - 1,
makeGroup(draggable: boolean): Konva.Group {
return new Konva.Group({
x: 120,
y: 40,
draggable: draggable
});
}
x: (currentPlayerAreaValues.w * 0.75) + currentPlayerAreaValues.spacing,
w: (currentPlayerAreaValues.w * 0.25) - currentPlayerAreaValues.spacing,
h: currentPlayerAreaValues.h,
spacing: 0.01,
};
const rect2 = new Konva.Rect({
x: arrowValues.x * winW,
width: arrowValues.w * winW,
height: currentPlayerAreaValues.h * winH,
cornerRadius: 0.01 * winW,
fill: 'black',
opacity: 0.2,
});
globals.elements.currentPlayerArea.add(rect2);
globals.elements.currentPlayerArrow = new Konva.Group({
x: (arrowValues.x + (arrowValues.w / 2)) * winW,
y: (currentPlayerAreaValues.h / 2) * winH,
offset: {
x: (arrowValues.w / 2) * winW,
y: (currentPlayerAreaValues.h / 2) * winH,
},
});
globals.elements.currentPlayerArea.add(globals.elements.currentPlayerArrow);
const arrowBorder = new Konva.Arrow({
points: [
arrowValues.spacing * winW,
(arrowValues.h / 2) * winH,
(arrowValues.w - arrowValues.spacing) * winW,
(arrowValues.h / 2) * winH,
],
const createBoundingBox = (
{
x,
y,
width = BOUNDING_BOX_DEFAULTS.width,
height = BOUNDING_BOX_DEFAULTS.height,
text,
id,
color = colors(id)
},
onDragMove,
onDragEnd,
onDragging
) => {
const group = new Konva.Group({ x, y, draggable: true, id, width, height })
const { stroke, strokeWidth, opacity } = BOUNDING_BOX_DEFAULTS
const rect = new Konva.Rect({
x: 0,
y: 0,
width,
height,
stroke,
strokeWidth,
fill: color,
opacity
})
group.add(rect)
const topLeft = createAnchor({ x: 0, y: 0, name: ANCHOR_NAMES.topLeft })