<commit_before><!doctype html>
<html>
<head>
    <title>Spacerace</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        path.mapBorder {
            stroke: steelblue;
            stroke-width: 10px;
            fill: none;
        }
        path.startLine {
            stroke: black;
            stroke-width: 2px;
            stroke-dasharray: 5px;
            fill: none;
        }
        path.finishLine {
            stroke: red;
            stroke-width: 2px;
            stroke-dasharray: 5px;
            fill: none;
        }

        polygon.startZone {
            opacity: 0.2;
            stroke: black;
            stroke-width: 5px;
            fill: none;
        }

    </style>

</head>
<body>

<svg id="game"></svg>
<div id="leaderboard"></div>

<script src="socket.io/socket.io.js"></script>
<script src="d3/d3.min.js"></script>

<script>
    var socket = io();

    var updates = 0;

    socket.on('GameState', function (msg) {
        var data = JSON.parse(msg).data;
        updates += 1;
        if(updates % 100 == 0){
            console.log("Tick")
        }

        if(updates == 1){
            setupGame(data)
        }

        updateState(data);
    });

    //socket.on('GameMap', function (msg) {
    //    var data = JSON.parse(msg).data;
    //    setupGame(data)
    //}


</script>
<script>
    var width = 720,
        height = 500;

    var svgContainer = d3.select('#game')
            .attr("width", width)
            .attr("height", height);

    // Assume positions are between 0 and 100 for now
    var x = d3.scale.linear().domain([0, 100]).range([0, width]);
    var y = d3.scale.linear().domain([0, 100]).range([0, height]);

    var circleGroup = svgContainer.append("g");
    var map = svgContainer.append("g");
    var ships;

    var splineFunction = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); })
        .interpolate("basis");

    var lineFunction = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); })
        .interpolate("linear");


    /**
     * Still have to work out how we will do maps...
     * But for now lets draw two splines
     */
    var startZone = [
        {"x": 0,   "y": 0},
        {"x": 0,   "y": 25},
        {"x": 25.0,"y": 25},
        {"x": 25.0,"y": 0}];

    var startLineData = [
        { "x": 25,   "y": 5},
        { "x": 25,   "y": 25}
    ];
    var finishLineData = [
        { "x": 90,   "y": 80},
        { "x": 80,   "y": 80}
    ];

    var lineDataTop = [
        { "x": 25,   "y": 5},
        { "x": 27,   "y": 5},
        { "x": 28,  "y": 20},
        { "x": 40,  "y": 10},
        { "x": 60,  "y": 40},
        { "x": 80,  "y": 5},
        { "x": 90, "y": 60},
        { "x": 90, "y": 80}
    ];
    var lineDataBottom = [
        { "x": 25,   "y": 20 + 5},
        { "x": 25,   "y": 20 + 5},
        { "x": Math.random(10) + 25,  "y": 20 + 20},
        { "x": Math.random(10) + 40,  "y": 20 + 10},
        { "x": Math.random(10) + 60,  "y": 20 + 40},
        { "x": Math.random(10) + 80,  "y": 20 + 5},
        { "x": 80, "y": 20 + 60}
    ];

    var setupGame = function(initState) {
        ships = circleGroup
            .selectAll('.ship')
            .data(initState)
            .enter()
            .append('circle')   // TODO use SVG define for a ship
            .attr("class", "ship")
            .attr('fill', function () {
                return "hsl(" + Math.random() * 360 + ",100%, 50%)"
            });

        svgContainer.append("path")
            .attr("class", "mapBorder")
            .attr("d", splineFunction(lineDataTop));

        svgContainer.append("path")
            .attr("class", "mapBorder")
            .attr("d", splineFunction(lineDataBottom));

        svgContainer.append("path")
            .attr("class", "startLine")
            .attr("d", lineFunction(startLineData));

        svgContainer.append("path")
            .attr("class", "finishLine")
            .attr("d", lineFunction(finishLineData));

        svgContainer.selectAll("polygon")
                .data([startZone])
                .enter().append("polygon")
                .attr("class", "startZone")
                .attr("points",function(d) {
                    return d.map(function(d){return [x(d.x),y(d.y)].join(","); }).join(" ");})
                .attr("stroke","black")
                .attr("stroke-width",2);


    };

    var updateState = function (newState){
        ships
            .attr('cx', function (d, i) { return x(newState[i].position[0]); })
            .attr('cy', function (d, i) { return y(newState[i].position[1]); })
            .attr('r', function (d, i) { return 4 })

    }

</script>
</body>
</html><commit_msg> Use SVG define for the ship graphic (still just a circle for now).<commit_after><!doctype html>
<html>
<head>
    <title>Spacerace</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        path.mapBorder {
            stroke: steelblue;
            stroke-width: 10px;
            fill: none;
        }
        path.startLine {
            stroke: black;
            stroke-width: 2px;
            stroke-dasharray: 5px;
            fill: none;
        }
        path.finishLine {
            stroke: red;
            stroke-width: 2px;
            stroke-dasharray: 5px;
            fill: none;
        }

        polygon.startZone {
            opacity: 0.2;
            stroke: black;
            stroke-width: 5px;
            fill: none;
        }

    </style>

</head>
<body>

<svg id="game"></svg>
<div id="leaderboard"></div>

<script src="socket.io/socket.io.js"></script>
<script src="d3/d3.min.js"></script>

<script>
    var socket = io();

    var updates = 0;

    socket.on('GameState', function (msg) {
        var data = JSON.parse(msg).data;
        updates += 1;
        if(updates % 100 == 0){
            console.log("Tick")
        }

        if(updates == 1){
            setupGame(data)
        }

        updateState(data);
    });

    //socket.on('GameMap', function (msg) {
    //    var data = JSON.parse(msg).data;
    //    setupGame(data)
    //}


</script>
<script>
    var width = 720,
        height = 500;

    var svgContainer = d3.select('#game')
            .attr("width", width)
            .attr("height", height);



    // Assume positions are between 0 and 100 for now
    var x = d3.scale.linear().domain([0, 100]).range([0, width]);
    var y = d3.scale.linear().domain([0, 100]).range([0, height]);

    var shipG = svgContainer.append("defs").append("g");
    shipG.append("circle")
        .attr('r', function (d, i) { return 4; })
        .attr("id", "ship")
        .attr("class", "ship");

    var shipGroup = svgContainer.append("g");
    var map = svgContainer.append("g");
    var ships;

    var splineFunction = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); })
        .interpolate("basis");

    var lineFunction = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); })
        .interpolate("linear");


    /**
     * Still have to work out how we will do maps...
     * But for now lets draw two splines
     */
    var startZone = [
        {"x": 0,   "y": 0},
        {"x": 0,   "y": 25},
        {"x": 25.0,"y": 25},
        {"x": 25.0,"y": 0}];

    var startLineData = [
        { "x": 25,   "y": 5},
        { "x": 25,   "y": 25}
    ];
    var finishLineData = [
        { "x": 90,   "y": 80},
        { "x": 80,   "y": 80}
    ];

    var lineDataTop = [
        { "x": 25,   "y": 5},
        { "x": 27,   "y": 5},
        { "x": 28,  "y": 20},
        { "x": 40,  "y": 10},
        { "x": 60,  "y": 40},
        { "x": 80,  "y": 5},
        { "x": 90, "y": 60},
        { "x": 90, "y": 80}
    ];
    var lineDataBottom = [
        { "x": 25,   "y": 20 + 5},
        { "x": 25,   "y": 20 + 5},
        { "x": Math.random(10) + 25,  "y": 20 + 20},
        { "x": Math.random(10) + 40,  "y": 20 + 10},
        { "x": Math.random(10) + 60,  "y": 20 + 40},
        { "x": Math.random(10) + 80,  "y": 20 + 5},
        { "x": 80, "y": 20 + 60}
    ];

    var setupGame = function(initState) {
        ships = shipGroup
            .selectAll('.ship')
            .data(initState)
            .enter()
            .append('use')
            .attr("xlink:href", "#ship")
            .attr('fill', function () {
                return "hsl(" + Math.random() * 360 + ",100%, 50%)"
            });

        map.append("path")
            .attr("class", "mapBorder")
            .attr("d", splineFunction(lineDataTop));

        map.append("path")
            .attr("class", "mapBorder")
            .attr("d", splineFunction(lineDataBottom));

        map.append("path")
            .attr("class", "startLine")
            .attr("d", lineFunction(startLineData));

        map.append("path")
            .attr("class", "finishLine")
            .attr("d", lineFunction(finishLineData));

        map.selectAll("polygon")
            .data([startZone])
            .enter().append("polygon")
            .attr("class", "startZone")
            .attr("points",function(d) {
                return d.map(function(d){return [x(d.x),y(d.y)].join(","); }).join(" ");})
            .attr("stroke","black")
            .attr("stroke-width",2);


    };

    var updateState = function (newState){
        ships
            .attr('x', function (d, i) { return x(newState[i].position[0]); })
            .attr('y', function (d, i) { return y(newState[i].position[1]); })


    }

</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.19081272084805653, 'fraction_numerical': 0.03311458859162039, 'mean_word_length': 1.5911587758304997, 'pattern_counts': {'":': 92, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1026648', 'n_tokens_mistral': 3634, 'n_tokens_neox': 3267, 'n_words': 743}