LILiK
/
icfp2015
5
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

honeycomb working with marked cells

visualizer
edoardoo 9 years ago
committed by Slash
parent
7664f3a5c3
commit
41a2511a1d
7 changed files with 276 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +17
    -0
      index.html
  2. +58
    -0
      scripts/functions.js
  3. +17
    -0
      scripts/less.min.js
  4. +39
    -0
      style/style.css
  5. +7
    -0
      style/style.css.map
  6. +66
    -0
      style/style.less
  7. +72
    -0
      style/style.scss

+ 17
- 0
index.html View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>icfp 2015 visualizer</title>
<!-- <link rel="stylesheet" type="text/css" href="style/style.css"> -->
<link rel="stylesheet/less" type="text/css" href="style/style.less" />
<script type="text/javascript" src="scripts/less.min.js"></script>
<script type="text/javascript" src="scripts/functions.js"></script>
</head>
<body>
<div id="control"><button onclick="updateDimensions()">R</button></div>
<section id="honeyComb">
</section>
</body>
</html>

+ 58
- 0
scripts/functions.js View File

@ -0,0 +1,58 @@
function updateDimensions( dimension ){
less.modifyVars({"@sizeWidth":dimension+"px"});
}
function populateHoneycomb( ){
honeyCells = jsonExample;
var height = "innerHeight" in window
? window.innerHeight
: document.documentElement.offsetHeight;
var width = "innerWidth" in window
? window.innerWidth
: document.documentElement.offsetWidth;
var cellWidth = width/(honeyCells.width+0.7);
updateDimensions( cellWidth );
var honeyComb = document.getElementById("honeyComb");
for (var i = honeyCells.height - 1; i >= 0; i--) {
var even = (i%2 == 0) ? "even" : "";
var container = document.createElement('div');
container.className = "hex-row " + even;
honeyComb.appendChild(container);
for (var j = honeyCells.width - 1; j >= 0; j--) {
var hexCell = document.createElement("div");
hexCell.className = "hex";
container.appendChild(hexCell);
var topPart = document.createElement('div');
topPart.className = "top";
var middlePart = document.createElement('div');
middlePart.className = "middle";
var bottomPart = document.createElement('div');
bottomPart.className = "bottom";
hexCell.appendChild(topPart);
hexCell.appendChild(middlePart);
hexCell.appendChild(bottomPart);
};
};
}
function setFilled(){
honeyCells = jsonExample;
var hexCells = document.getElementsByClassName("hex");
for (var i = honeyCells.filled.length - 1; i >= 0; i--) {
honeyCell = hexCells[ (honeyCells.filled[i].x * honeyCells.width)+honeyCells.filled[i].y];
honeyCell.className += " disabled";
};
}
jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};

+ 17
- 0
scripts/less.min.js
File diff suppressed because it is too large
View File


+ 39
- 0
style/style.css View File

@ -0,0 +1,39 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%; }
body {
background-color: #333; }
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px; }
.hex .top, .hex.disabled .top {
width: 0;
border-bottom: 30.02221px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent; }
.hex .middle {
width: 104px;
height: 60.04443px;
background: #6C6; }
.hex .bottom {
width: 0;
border-top: 30.02221px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent; }
.hex.disabled .top {
border-bottom-color: #efefef; }
.hex.disabled .middle {
background: #efefef; }
.hex.disabled .bottom {
border-top-color: #efefef; }
.hex-row {
clear: left; }
.hex-row.even {
margin-left: 53px; }
/*# sourceMappingURL=style.css.map */

+ 7
- 0
style/style.css.map View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAiBA,UAAU;EACT,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;AAEZ,IAAI;EACH,gBAAgB,EAAE,IAAI;;AAEvB,IAAK;EACJ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,KAAK;EAEpB,6BAAK;IACJ,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,qBAAyB;IACxC,WAAW,EAAE,sBAA+B;IAC5C,YAAY,EAAE,sBAA+B;EAE9C,YAAQ;IACP,KAAK,EAzBK,KAAK;IA0Bf,MAAM,EAxBK,UAAkB;IAyB7B,UAAU,EAAE,IAAI;EAEjB,YAAQ;IACP,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,qBAAwB;IACpC,WAAW,EAAE,sBAA8B;IAC3C,YAAY,EAAE,sBAA8B;EAI5C,kBAAI;IAEH,mBAAmB,EAxCN,OAAO;EA2CrB,qBAAO;IACN,UAAU,EA5CG,OAAO;EA8CrB,qBAAO;IACN,gBAAgB,EA/CH,OAAO;EAkDtB,QAAK;IACJ,KAAK,EAAE,IAAI;IACX,aAAO;MACN,WAAW,EAAE,IAAgB",
"sources": ["style.scss"],
"names": [],
"file": "style.css"
}

+ 66
- 0
style/style.less View File

@ -0,0 +1,66 @@
@disabledColor: #efefef;
@sizeWidth: 100px;
@border: 1px;
@sizeHeight: @sizeWidth/sqrt(3);
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #333;
}
#control{
position: fixed;
top: 0px;
right: 0;
width: 100px;
height: 100px;
}
.hex {
float: left;
margin-left: @border;
margin-bottom: -@sizeWidth/4;
.top {
width: 0;
border-bottom: @sizeHeight/2 solid #6C6;
border-left: @sizeWidth/2 solid transparent;
border-right: @sizeWidth/2 solid transparent;
}
.middle {
width: @sizeWidth;
height: @sizeHeight;
background: #6C6;
}
.bottom {
width: 0;
border-top: @sizeHeight/2 solid #6C6;
border-left: @sizeWidth/2 solid transparent;
border-right: @sizeWidth/2 solid transparent;
}
&.disabled{
.top:extend(.top){
border-bottom-color: @disabledColor;
}
.middle:extend(.middle){
background: @disabledColor;
}
.bottom:extend(.bottom){
border-top-color: @disabledColor;
}
}
&-row{
clear: left;
&.even {
margin-left: (@sizeWidth/2);
}
}
}

+ 72
- 0
style/style.scss View File

@ -0,0 +1,72 @@
@function sqrt($r) {
$x0: 1;
$x1: $x0;
@for $i from 1 through 10 {
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
$x0: $x1;
}
@return $x1;
}
$disabledColor: #efefef;
$sizeWidth: 104px;
$border: 1px;
$sizeHeight: $sizeWidth/sqrt(3);
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #333;
}
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
.top {
width: 0;
border-bottom: $sizeHeight/2 solid #6C6;
border-left: $sizeWidth/2 solid transparent;
border-right: $sizeWidth/2 solid transparent;
}
.middle {
width: $sizeWidth;
height: $sizeHeight;
background: #6C6;
}
.bottom {
width: 0;
border-top: $sizeHeight/2 solid #6C6;
border-left: $sizeWidth/2 solid transparent;
border-right: $sizeWidth/2 solid transparent;
}
&.disabled{
.top{
@extend .top;
border-bottom-color: $disabledColor;
}
.middle{
background: $disabledColor;
}
.bottom{
border-top-color: $disabledColor;
}
}
&-row{
clear: left;
&.even {
margin-left: ($sizeWidth/2)+1;
}
}
}

Write Preview
Loading…
Cancel
Save