import { useContext } from "react";
import { StyledPlacementCell } from "./styles/components.js";
import { GameDispatch } from "./Game";
export const PlacementCell = ({
cell,
setPointer,
getSelectionInformation,
board,
playerID,
currentShip,
horizontalPlacement,
}) => {
const { x, y, ship } = cell;
const dispatch = useContext(GameDispatch);
const handleHover = () => {
setPointer(y, x);
};
// return how the cell should appear when rendered
const checkIfValid = () => {
let currentSelection = getSelectionInformation();
if (!currentSelection.valid) return false;
//check if there is a ship in current selection
if (
currentSelection.cells.some((coords) => {
// return false if any cell has a ship
return board[coords[0]][coords[1]].ship !== false;
})
) {
return false;
}
return true;
};
const testRenderStyle = () => {
if (ship) return "ship";
let currentSelection = getSelectionInformation();
// check if cell is in range. render appropriately
if (
currentSelection.cells.some(
(coords) => coords[0] === y && coords[1] === x
)
) {
// check if selection has any out of bounds
//check if there is a ship in current selection
if (currentShip.placed) return;
return checkIfValid() ? "valid" : "invalid";
}
// if cell doesn't have ship and isnt in selection
return "empty";
};
const handlePlacement = () => {
if (!checkIfValid()) return;
if (currentShip.placed) return;
dispatch({
type: "PLACE-SHIP",
playerID: playerID,
payload: {
x: x,
y: y,
ship: currentShip,
horizontal: horizontalPlacement,
},
});
};
return (
<>
<StyledPlacementCell
bg_color={testRenderStyle()}
onMouseEnter={handleHover}
onClick={handlePlacement}
/>
</>
);
};
/*
input: speciffic scene
output: text information in the message log describing elements of the scene
*/
function write(message){
MessageLog.trace(message)
System.println(message)
}
function getSelectionInformation(){
//MessageLog.trace("getSelectionInformation() has been clicked")
var nodeTypesToShow = ["WRITE", "MultiLayerWrite"]
var env_path = scene.currentEnvironmentPath()
var proj_path = scene.currentProjectPath()
var proj_temp_path = scene.tempProjectPathRemapped()
var scene_name = scene.currentScene()
var scene_start_f = scene.getStartFrame()
var scene_stop_f = scene.getStopFrame()
var scene_length = scene_stop_f - scene_start_f
var outputMessage = "Scene Information:"
// give me information on the current scene
//outputMessage += ("\nEnvironment = " + env_path)
//outputMessage += ("\nProject = " + proj_path)
//outputMessage += ("\nProject TEMP = " + proj_temp_path)
outputMessage += scene.currentScene()
outputMessage += ("\t" + scene_length +"f ["+ scene_start_f + " -> " + scene_stop_f + "]")
write(outputMessage)
// give me a list of all nodes selected
var myNodeSelection_total = selection.numberOfNodesSelected()
if (myNodeSelection_total <= 0){
// if none are selected then list all nodes in the scene
selection.selectAll()
}
var myNodeSelection = selection.selectedNodes()
var writeCounter = 0
for( n in myNodeSelection ){
var thisNode = myNodeSelection[n]
var thisNode_type = node.type(thisNode)
for ( t in nodeTypesToShow){
var thisType = nodeTypesToShow[t]
if( thisNode_type == thisType ){
writeCounter += 1
write( "Write Node ["+ writeCounter + "] " + myNodeSelection[n] + " [" + node.type(thisNode) +"]" )
// we will now get the render path for this write node
var thisNode_drawingPath = node.getTextAttr("Top/Write", frame.current(),"drawingName")
var thisNode_moviePath = node.getTextAttr("Top/Write", frame.current(),"moviePath")
write( "Drawing Path = " + thisNode_drawingPath )
write( "Movie Path = " + thisNode_moviePath )
}
}
}
write("\n\n")
}
//getSelectionInformation()
// TODO output the Movie & image sequence export path for each write node.
/**
* @fileoverview Implements table align column WysiwygCommand
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
import $ from 'jquery';
import CommandManager from '../commandManager';
import domUtil from '../domUtils';
/**
* AlignCol
* Align selected column's text content to given direction
* @extends Command
* @module wysiwygCommands/TableAlignCol
* @ignore
*/
const TableAlignCol = CommandManager.command('wysiwyg', /** @lends AlignCol */{
name: 'AlignCol',
/**
* command handler
* @param {WysiwygEditor} wwe wysiwygEditor instance
* @param {string} alignDirection Align direction
*/
exec(wwe, alignDirection) {
const sq = wwe.getEditor();
const range = sq.getSelection().cloneRange();
const selectionMgr = wwe.componentManager.getManager('tableSelection');
const rangeInformation = getRangeInformation(range, selectionMgr);
wwe.focus();
if (sq.hasFormat('TR')) {
sq.saveUndoState(range);
const $table = $(range.startContainer).parents('table');
const selectionInformation = getSelectionInformation($table, rangeInformation);
setAlignAttributeToTableCells($table, alignDirection, selectionInformation);
}
selectionMgr.removeClassAttrbuteFromAllCellsIfNeed();
}
});
/**
* Set Column align
* @param {jQuery} $table jQuery wrapped TABLE
* @param {string} alignDirection 'left' or 'center' or 'right'
* @param {{
* startColumnIndex: number,
* endColumnIndex: number,
* isDivided: boolean
* }} selectionInformation start, end column index and boolean value for whether range divided or not
*/
function setAlignAttributeToTableCells($table, alignDirection, selectionInformation) {
const isDivided = selectionInformation.isDivided || false;
const start = selectionInformation.startColumnIndex;
const end = selectionInformation.endColumnIndex;
const columnLength = $table.find('tr').eq(0).find('td,th').length;
$table.find('tr').each((n, tr) => {
$(tr).children('td,th').each((index, cell) => {
if (isDivided &&
((start <= index && index <= columnLength) || (index <= end))
) {
$(cell).attr('align', alignDirection);
} else if ((start <= index && index <= end)) {
$(cell).attr('align', alignDirection);
}
});
});
}
/**
* Return start, end column index and boolean value for whether range divided or not
* @param {jQuery} $table jQuery wrapped TABLE
* @param {{startColumnIndex: number, endColumnIndex: number}} rangeInformation Range information
* @returns {{startColumnIndex: number, endColumnIndex: number, isDivided: boolean}}
*/
function getSelectionInformation($table, rangeInformation) {
const columnLength = $table.find('tr').eq(0).find('td,th').length;
const {
from,
to
} = rangeInformation;
let startColumnIndex, endColumnIndex, isDivided;
if (from.row === to.row) {
startColumnIndex = from.cell;
endColumnIndex = to.cell;
} else if (from.row < to.row) {
if (from.cell <= to.cell) {
startColumnIndex = 0;
endColumnIndex = columnLength - 1;
} else {
startColumnIndex = from.cell;
endColumnIndex = to.cell;
isDivided = true;
}
}
return {
startColumnIndex,
endColumnIndex,
isDivided
};
}
/**
* Get range information
* @param {Range} range Range object
* @param {object} selectionMgr Table selection manager
* @returns {object}
*/
function getRangeInformation(range, selectionMgr) {
const $selectedCells = selectionMgr.getSelectedCells();
let rangeInformation, startCell;
if ($selectedCells.length) {
rangeInformation = selectionMgr.getSelectionRangeFromTable($selectedCells.first().get(0),
$selectedCells.last().get(0));
} else {
const {startContainer} = range;
startCell = domUtil.isTextNode(startContainer) ? $(startContainer).parent('td,th')[0] : startContainer;
rangeInformation = selectionMgr.getSelectionRangeFromTable(startCell, startCell);
}
return rangeInformation;
}
export default TableAlignCol;
