Commits

Jiyin Yiyong committed ce97511

init

Comments (0)

Files changed (9)

+{print} = require "util"
+{spawn, exec} = require "child_process"
+
+echo = (child, callback) ->
+  child.stderr.on "data", (data) -> print data.toString()
+  child.stdout.on "data", (data) -> print data.toString()
+  child.on "exit", (code) -> callback?() if code is 0
+
+make = (str) -> str.split " "
+d = __dirname
+
+queue = [
+  "jade -O #{d}/page/ -wP #{d}/src/index.jade"
+  "stylus -o #{d}/page/ -w #{d}/src/"
+  "livescript -o #{d}/page/ -wb src/"
+  "doodle #{d}/page/"
+]
+
+split = (str) -> str.split " "
+
+task "dev", "watch and convert files", (callback) ->
+  queue.map(split).forEach (array) ->
+    echo (spawn array[0], array[1..]), callback

Binary file added.

Binary file added.

+var query, log, run;
+query = function(it){
+  return document.querySelector(it);
+};
+log = function(){
+  return console.log.apply(console, arguments);
+};
+run = true;
+window.onload = function(){
+  var canvas, lottery, cx, cy, r, point, p, choice, cal, x$, setFont, draw, theta;
+  canvas = query('canvas');
+  lottery = query('#lottery');
+  window.ctx = canvas.getContext('2d');
+  cx = 400;
+  cy = 200;
+  r = 180;
+  point = 0;
+  p = [0.2, 0.24, 0.54, 0.6, 0.7, 0.8, 0.9, 1];
+  choice = [
+    {
+      delta: p[0],
+      color: "hsl(0,40%,60%)"
+    }, {
+      delta: p[1],
+      color: "hsl(120,40%,90%)"
+    }, {
+      delta: p[2],
+      color: "hsl(240,40%,60%)"
+    }, {
+      delta: p[3],
+      color: "hsl(240,90%,80%)"
+    }, {
+      delta: p[4],
+      color: "hsl(140,90%,90%)"
+    }, {
+      delta: p[5],
+      color: "hsl(240,90%,80%)"
+    }, {
+      delta: p[6],
+      color: "hsl(240,90%,70%)"
+    }, {
+      delta: p[7],
+      color: "hsl(40,90%,50%)"
+    }
+  ];
+  cal = function(it){
+    return Math.PI * 2 * it;
+  };
+  x$ = ctx;
+  x$.strokeStyle = "hsl(0,0%,50%)";
+  setFont = function(count){
+    var number, get;
+    number = 1 - count;
+    get = "";
+    if (number < p[0]) {
+      get = "1500 魔力值";
+    } else if (number < p[1]) {
+      get = "无限量拷片";
+    } else if (number < p[2]) {
+      get = "1000 魔力值";
+    } else if (number < p[3]) {
+      get = "“黄瓜”一根";
+    } else if (number < p[4]) {
+      get = "实物 UT 勋章";
+    } else if (number < p[5]) {
+      get = "15G 上传量";
+    } else if (number < p[6]) {
+      get = "2000 魔力值";
+    } else if (number < p[7]) {
+      get = "10G 上传量";
+    } else {
+      get = "无限量拷片";
+    }
+    return lottery.innerText = get;
+  };
+  draw = function(count){
+    var theta, x$, lastDelta;
+    theta = cal(count);
+    x$ = ctx;
+    x$.clearRect(0, 0, 600, 600);
+    x$.translate(cx, cy);
+    x$.rotate(theta + cal(0.5));
+    x$.translate(-cx, -cy);
+    lastDelta = 0;
+    choice.forEach(function(now){
+      var delta, color, x$;
+      delta = now.delta, color = now.color;
+      x$ = ctx;
+      x$.beginPath();
+      x$.moveTo(cx, cy);
+      x$.fillStyle = color;
+      x$.arc(cx, cy, r, cal(lastDelta), cal(delta), false);
+      x$.lineTo(cx, cy);
+      x$.closePath();
+      x$.fill();
+      return lastDelta = delta;
+    });
+    x$ = ctx;
+    x$.translate(cx, cy);
+    x$.rotate(-(theta + cal(0.5)));
+    x$.translate(-cx, -cy);
+    x$.beginPath();
+    x$.moveTo(cx - r / 2, cy);
+    x$.lineTo(cx - r * 3 / 2, cy);
+    x$.stroke();
+    return setFont(count);
+  };
+  theta = 0;
+  draw(0);
+  (window.refresh = function(){
+    if (run) {
+      theta = theta - 0.091;
+      if (theta < 0) {
+        theta = theta + 1;
+      }
+      draw(theta);
+    }
+    return setTimeout(refresh, 40);
+  })();
+  query('body').onkeydown = function(it){
+    if (it.keyCode === 32) {
+      return run = !run;
+    }
+  };
+  return window.style = document.body.style;
+};
+window.onfocus = function(){
+  style.webkitFilter = "";
+  style.background = "hsl(0,80%,96%)";
+  return run = true;
+};
+window.onblur = function(){
+  style.webkitFilter = "grayscale(0.5) blur(4px)";
+  run = false;
+  return style.background = "hsl(0,80%,95%)";
+};
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>精弘PT两周年,抽奖活动~</title>
+    <link rel="stylesheet" href="page.css">
+    <script src="handle.js"></script>
+  </head>
+  <body>
+    <canvas width="640px" height="400px"></canvas>
+    <div id="lottery"></div>
+    <div id="title">精弘PT两岁啦!</div>
+    <div id="intro">
+      <p>每位路人都有一次抽奖机会</p>
+      <p>如果你想多玩几次,你可以试试。</p>
+      <p>领奖时间和地点:立刻+现场!</p>
+      <h2>开始抽奖</h2>
+      <p><span>说明:按下一次</span><b>空格</b><span>,盘子开始转了;再按一下,它就停了;你也就知道自己会获得什么了!</span></p>
+    </div>
+  </body>
+</html>
+body {
+  margin: 0px;
+  background: #fdeded;
+}
+* {
+  box-sizing: border-box;
+}
+canvas {
+  position: absolute;
+  top: 160px;
+  left: 460px;
+}
+@font-face {
+  font-family: Clicker;
+  src: url("../fonts/Clicker.woff") format(woff);
+}
+#lottery {
+  position: absolute;
+  top: 330px;
+  left: 550px;
+  font-family: "Clicker";
+  font-size: 20px;
+  color: #4747eb;
+}
+#title {
+  font-size: 70px;
+  position: absolute;
+  top: 50px;
+  left: 70px;
+  -webkit-transform: rotate(5deg);
+  color: #f53d3d;
+}
+#intro {
+  position: absolute;
+  top: 220px;
+  left: 140px;
+  color: #262673;
+}
+
+query = -> document.querySelector it
+log = -> console.log.apply console, arguments
+
+run = yes
+
+window.onload = ->
+  canvas = query \canvas
+  lottery = query \#lottery
+  # log lottery
+
+  window.ctx = canvas.get-context \2d
+
+  cx = 400
+  cy = 200
+  r = 180
+  point = 0
+  p = [0.2 0.24 0.54 0.6 0.7 0.8 0.9 1]
+  choice = [
+    {delta: p.0, color: "hsl(0,40%,60%)"}
+    {delta: p.1, color: "hsl(120,40%,90%)"}
+    {delta: p.2, color: "hsl(240,40%,60%)"}
+    {delta: p.3, color: "hsl(240,90%,80%)"}
+    {delta: p.4, color: "hsl(140,90%,90%)"}
+    {delta: p.5, color: "hsl(240,90%,80%)"}
+    {delta: p.6, color: "hsl(240,90%,70%)"}
+    {delta: p.7, color: "hsl(40,90%,50%)"}
+  ]
+
+  cal = -> Math.PI * 2 * it
+  ctx
+    ..stroke-style = "hsl(0,0%,50%)"
+
+  set-font = (count) ->
+    number = 1 - count
+    # log number
+    get = ""
+    if number < p.0
+      get = "1500 魔力值"
+    else if number < p.1
+      get = "无限量拷片"
+    else if number < p.2
+      get = "1000 魔力值"
+    else if number < p.3
+      get = "“黄瓜”一根"
+    else if number < p.4
+      get = "实物 UT 勋章"
+    else if number < p.5
+      get = "15G 上传量"
+    else if number < p.6
+      get = "2000 魔力值"
+    else if number < p.7
+      get = "10G 上传量"
+    else
+      get = "无限量拷片"
+    lottery.inner-text = get
+
+  draw = (count) ->
+    theta = cal count
+    ctx
+      ..clear-rect 0 0 600 600
+      ..translate cx, cy
+      ..rotate (theta + (cal 0.5))
+      ..translate -cx, -cy
+    last-delta = 0
+    choice.forEach (now) ->
+      {delta, color} = now
+      ctx
+        ..begin-path!
+        ..move-to cx, cy
+        ..fill-style = color
+        ..arc cx, cy, r, (cal last-delta), (cal delta), no
+        ..line-to cx, cy
+        ..close-path!
+        ..fill!
+      last-delta := delta
+    ctx
+      ..translate cx, cy
+      ..rotate -(theta + (cal 0.5))
+      ..translate -cx, -cy
+      ..begin-path!
+      ..move-to (cx - r/2), cy
+      ..line-to (cx - r*3/2), cy
+      ..stroke!
+    set-font count
+
+  theta = 0
+
+  draw 0
+  do window.refresh = ->
+    if run
+      theta := theta - 0.091
+      if theta <0 then theta := theta + 1
+      draw theta
+    set-timeout refresh, 40
+
+  query \body .onkeydown = ->
+    if it.key-code is 32
+      run := not run
+
+  window.style = document.body.style
+
+window.onfocus = ->
+  style.webkit-filter = ""
+  style.background = "hsl(0,80%,96%)"
+  run := yes
+
+window.onblur = ->
+  style.webkit-filter = "grayscale(0.5) blur(4px)"
+  run := no
+  style.background = "hsl(0,80%,95%)"
+
+doctype 5
+html
+  head
+    title 精弘PT两周年,抽奖活动~
+    link(rel="stylesheet",href="page.css")
+    //- script(src="http://192.168.1.19:7777/doodle.js")
+    script(src="handle.js")
+  body
+    canvas(width="640px", height="400px")
+    #lottery
+    #title 精弘PT两岁啦!
+    #intro
+      p 每位路人都有一次抽奖机会
+      p 如果你想多玩几次,你可以试试。
+      p 领奖时间和地点:立刻+现场!
+      h2 开始抽奖
+      p
+        span 说明:按下一次
+        b 空格
+        span ,盘子开始转了;再按一下,它就停了;你也就知道自己会获得什么了!
+
+body
+  margin 0px
+  background hsl(0,80%,96%)
+
+*
+  box-sizing border-box
+  // box-shadow 0px 0px 5px hsl(0,40,70)
+
+canvas
+  position absolute
+  top 160px
+  left 460px
+
+@font-face
+  font-family Clicker
+  src url(../fonts/Clicker.woff) format(woff)
+
+#lottery
+  position absolute
+  top 330px
+  left 550px
+  font-family "Clicker"
+  font-size 20px
+  color hsl(240,80,60)
+
+#title
+  font-size 70px
+  position absolute
+  top 50px
+  left 70px
+  -webkit-transform rotate(5deg)
+  color hsl(0,90,60)
+
+#intro
+  position absolute
+  top 220px
+  left 140px
+  color hsl(240,50,30)
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.