For the past three days, I've been tackling this challenge and still haven't found a solution.
Essentially, my goal is to replace a clicked Ellipse with the only empty spot on a 3x3 checkerboard. At runtime, 8 out of the 9 squares are occupied by Ellipse elements.
I'm struggling to locate the one spot that isn't taken, mainly because Javascript doesn't seem to recognize it despite there being an empty space on the grid during runtime.
In my attempt, I used the line: var childrenCount = canvasArray[i].children.count; which accounts for all the canvases. If there's an empty slot at runtime, why can't my code detect it? Am I missing something in my code? How can I identify and utilize the empty spot during execution?
This is the pseudocode snippet:
if (squareOnGrid is empty) {
log.write(squareOnGrid + ' is empty');
emptySquare = squareOnGrid;
oldPositionBorder = sender;
oldPositionR = checkerPiece.row;
oldPositionC = checkerPiece.col;
checkerPiece.row = empty.row;
checkerPiece.column = squareOnGrid.column;
oldPositionBorder = null;
}
I'm specifically looking for a Javascript solution (and not C#).
A glimpse of my existing Javascript includes:
function switchPlaces(sender) {
for (var i = 0; i < canvasArray.length; i++) {
var oldLocationBorderParent = sender;
var oldLocationCanvasParent = oldLocationBorderParent.findName('canvas' + (i + 1));
var oldLocationChild = oldLocationCanvasParent.findName('ellipse' + (i + 1));
var childrenCount = canvasArray[i].children.count;
log.info(childrenCount); // consistently outputs '1'. It should contain a '0', but it doesn't.
if (childrenCount == 0) {
log.info(canvasArray[i] + ' has no children');
var emptySpot = canvasArray[i];
sender['Grid.Row'] = emptySpot['Grid.Row'];
sender['Grid.Column'] = emptySpot['Grid.Column'];
oldLocationCanvasParent.children.remove(oldLocationChild);
}
}
}
Take a look at my Silverlight code below:
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="onLoaded" ShowGridLines="True" Background="CornflowerBlue">
<!-- Grid Columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Grid Rows -->
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<!-- Borders with Canvases and Ellipses -->
<Border Grid.Row="0" Grid.Column="0" x:Name="b1" MouseLeftButtonUp="switchPlaces" >
<Canvas x:Name="canvas1">
<Ellipse Width="100" Height="100" x:Name="ellipse1" Fill="Red" Visibility="Visible"/>
</Canvas>
</Border>
<!-- Additional borders, canvases, and ellipses follow -->
</Grid>
If you have any insights on how to address this issue..
Thank you