TicTacToe - I CAN DRAW STUFFZZZZZ

TicTacToe-drawing-board.elm

module TicTacToe where

import Graphics.Element exposing (Element, centered)
import Graphics.Collage exposing (Form, toForm, collage, moveY, move, outlined, filled, dashed, square, circle, solid)
import Color exposing (yellow, gray, blue, green, orange, red)
import Text exposing (fromString)
import Window
import Signal exposing ((<~))
import Array exposing (initialize, repeat, toList)

gutter = 10
rows = 3
cols = 3

type alias Viewport =
  { width : Int
  , height : Int
  , halfWidth : Int
  , halfHeight : Int
  , minX : Float
  , maxX : Float
  , minY : Float
  , maxY : Float
  , squareWidth : Float
  , halfSquareWidth : Float
  , boardWidth : Float
  , halfBoardWidth : Float
  }

main : Signal Element
main =
  drawBoard <~ Window.dimensions

makeViewport : (Int,Int) -> Viewport
makeViewport (width,height) =
  let
    halfWidth = width // 2
    halfHeight = height // 2
    minX = negate halfWidth |> toFloat
    maxX = halfWidth |> toFloat
    minY = negate halfHeight |> toFloat
    maxY = halfHeight |> toFloat
    squareWidth = (height // rows) - ((rows - 1) * gutter) |> toFloat
    halfSquareWidth = squareWidth / 2
    boardWidth = (squareWidth * rows) + (gutter * (rows - 1))
    halfBoardWidth = boardWidth / 2
  in
    Viewport width height halfWidth halfHeight minX maxX minY maxY squareWidth halfSquareWidth boardWidth halfBoardWidth

drawBoard : (Int,Int) -> Element
drawBoard dimensions =
  let
    viewport = makeViewport dimensions
    title = "Tic-Tac-Toe" |> fromString |> centered |> toForm |> moveY (negate (viewport.minY + 30))
    boardSquare = outlined (solid gray) (square viewport.boardWidth)
    centerCircle = filled yellow (circle 10)
    gameRows = makeRows rows cols viewport
  in
    collage viewport.width viewport.height <| title :: centerCircle :: boardSquare :: gameRows


makeRows : Int -> Int -> Viewport -> List Form
makeRows rows cols viewport =
  [ makeSquare 0 0 viewport green
  , makeSquare 0 1 viewport green
  , makeSquare 0 2 viewport green
  , makeSquare 1 0 viewport blue
  , makeSquare 1 1 viewport blue
  , makeSquare 1 2 viewport blue
  , makeSquare 2 0 viewport red
  , makeSquare 2 1 viewport red
  , makeSquare 2 2 viewport red
  ]

offset : Int -> Viewport -> Float
offset pos viewport =
  let
    leftRight = case pos of
                 0 -> 1
                 1 -> 0
                 2 -> -1
                 otherwise -> 0
  in
    [ (viewport.halfBoardWidth * -1)
    , ((toFloat pos) * viewport.halfBoardWidth)
    , (viewport.halfSquareWidth * leftRight)
    ] |> List.foldr (+) 0

squarePosition : Int -> Int -> Viewport -> (Float,Float)
squarePosition row col viewport =
  let
    x = offset col viewport
    y = offset row viewport
  in
    (,) x y

makeSquare : Int -> Int -> Viewport -> Color.Color -> Form
makeSquare row col viewport color =
  let
    coordinates = squarePosition row col viewport
  in
    outlined (dashed color) (square viewport.squareWidth)
    |> move coordinates