Versuchen, eine Klasse in einer Klasse mit Canopy und F #

Question

abrufen Ich versuche canopy zu verwenden, um F # zu spielen ein Spiel von Tic Tac Toe here. Das „Board“ sieht aus wie die Folge

<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> 

Wenn Sie ein X oder ein O klicken entweder platzieren werde es <div> zu <div class="o"> ändern Ich versuche, den Zustand der Platte abzurufen, aber es funktioniert nicht da sage ich die einfachste Sache

let state = elements |> ".square" 

Dies zum Beispiel tun 9 Elemente zurückkehren ... aber es gibt nicht, dass die Unter div ein x oder nicht, da „x“ ist kein Wert ein Attribut ist.

Also im Wesentlichen meine Frage ist. Wie stelle ich fest, dass eine bestimmte Position ein X oder O enthält.

Answer 1

Sorry ich habe SO schon lange nicht mehr angeschaut!

Dieser ist etwas schwierig, wenn Sie den Code besitzen Sie es Ihr Leben ein wenig leichter durch den Wechsel von

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

Wenn nicht machen können, werden Sie wahrscheinlich 9 Selektoren erstellen müssen, eine für jede Position auf dem Brett.

Etwas Ähnliches, nicht getestet:

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 

Sie dann zu prüfen, ob diejenigen Platz ein X oder ein O hat

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

and one for hasO 

dann können Sie tun

if hasX topLeft then 
    //whatever