a13

by Ebony McCoy

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Play Three Men's Morris board game online for free. Play Three men's Morris Two player.">
    <title>Three Men's Morris Game - Play Online Free</title>
    <!-- bootstrap -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap theme -->
    <link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css" />
    <!-- font awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="game.css" />
</head>

<body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Three Men's Morris</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="modal" href="#about">How to play?</a>
                    </li>
                    <li>
                        <a href="http://github.com/raghavcreddy/ThreeMensMorris" target="_blank">
                            <i class="fa fa-github"></i>
                            GitHub
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container section">
        <div class="row">
            <br>
            <br>
           ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@font-face {
    font-family: 'Arcade';
    src: url('ArcadeClassic.woff') format('woff');
}
.navbar .navbar-brand {} .navbar-default .navbar-nav > li > a > i.fa-twitter {
    color: #55acef;
}
.navbar-default .navbar-nav > li > a > i.fa-github {
    color: #000;
}
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-top: 10px;
    color: #00b2b2;
}
.A {
    background: rgb(157, 213, 58);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(157, 213, 58, 1) 0%, rgba(161, 213, 79, 1) 50%, rgba(128, 194, 23, 1) 51%, rgba(124, 188, 10, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(157, 213, 58, 1)), color-stop(50%, rgba(161, 213, 79, 1)), color-stop(51%, rgba(128, 194, 23, 1)), color-stop(100%, rgba(124, 188, 10, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(157, 213, 58, 1) 0%, rgba(161, 213, 79, 1) 50%, rgba(128, 194, 23, 1) 51%, rgba(124, 188, 10, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(157, 213, 58, 1) 0%, rgba(161, 213, 79, 1) 50%, rgba(128, 194, 23, 1) 51%, rgba(124, 188, 10, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(157, 213, 58, 1) 0%, rgba(161, 213, 79, 1) 50%, rgba(128, 194, 23, 1) 51%, rgba(124, 188, 10, 1) 100%);
    /* IE10+ */
    background: linear-gradient(135deg, rgba(157, 213, 58, 1) 0%, rgba(161, 213, 79, 1) 50%, rgba(128, 194, 23, 1) 51%, rgba(124, 188, 10, 1) 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
.B {
    background: rgb(254, 204, 177);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg,...

JavaScript

function connect(div1, div2, color, thickness, from, to) {
    var off1 = getOffset(div1),
        off2 = getOffset(div2),

        // center of first div
        x1 = off1.left + off1.width / 2,
        y1 = off1.top + off1.height / 2,

        // center of second div
        x2 = off2.left + off2.width / 2,
        y2 = off2.top + off2.height / 2,

        // distance
        length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1))),

        // center
        cx = ((x1 + x2) / 2) - (length / 2),
        cy = ((y1 + y2) / 2) - (thickness / 2),

        // angle
        angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI),

        // make hr
        htmlLine = "<div class='connector' id='" + from + "" + to + "' style='z-index:-9999;padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";

    //append html to body
    document.body.innerHTML += htmlLine;
}

function getOffset(el) {
    var _x = 0,
        _y = 0,
        _w = el.offsetWidth | 0,
        _h = el.offsetHeight | 0;
    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return {
        top: _y + $(window).scrollTop(),
        left: _x + $(window).scrollLeft(),
        width: _w,
        height: _h
    };
}

var join = "1-2 2-3 1-4 4-7 3-6 6-9 7-8 8-9 1-5 2-5 3-5 4-5 5-6 5-7 5-8 5-9".split(" ");

$.each(join, function (index, item) {
    connect(document.getElementById('droppable' + item.split('-')[0]), document.getElementById('droppable' + item.split('-')[1]), "#00b2b2", 3, item.split('-')[0],...