Trying to retrieve a class in a class using Canopy and F#

Question

I'm trying to use canopy to use F# to play a game of Tic Tac Toe here. The "board" looks like the follow

<div class="game">
<div class="board">
<div class="square top left"><div class="x"></div></div>    <--- take note here
<div class="square top"><div></div></div>
<div class="square top right"><div></div></div>
<div class="square left"><div></div></div>
<div class="square"><div></div></div>
<div class="square right"><div class="o"></div></div>       <--- take note here
<div class="square bottom left"><div></div></div>
<div class="square bottom"><div></div></div>
<div class="square bottom right"><div></div></div>
</div>

When you click to either place an X or an O it'll change <div> to <div class="o"> I'm trying to retrieve the state of the board but it doesn't work because say I do the simplest thing for example

let state = elements |> ".square" 

This will return 9 elements... but it doesn't return that the sub div is an x or not since "x" is an attribute not a value.

So essentially my question is. How do I retrieve that a certain position contains an X or O.

Answer 1

Sorry I have not looked at SO in a long time!

This one is kind of tricky, if you own the code you can make your life a little easier by changing it from

<div class="square top left">
to  
<div class="square top-left">

If not, you will need to probably create 9 selectors, one for each position on the board.

Something like this, not tested:

let topLeft = ".square.top.left"
let topCenter = ".square.top:not(.left,.right)"
let topRight = ".square.top.right"
let middleLeft =".square.left:not(.top,.bottom)"
etc

Then you to check if those square has an X or an O

let hasX square = 
  let result = someElement <| sprintf "%s .x" square
  match result with
  | None    -> false
  | Some(_) -> true

and one for hasO

then you can do

if hasX topLeft then
  //whatever