add clock

plugin/local/chat/caculator.css

@@ -0,0 +1,24 @@
+fieldset.web.chat.caculator>div.output>div.display {
+	text-align:right;
+   	height:80px;
+	width:100%;
+	font-size:50px;
+}
+fieldset.web.chat.caculator>div.output>table {
+	width:100%;
+}
+fieldset.web.chat.caculator>div.output>table td {
+	text-align:center;
+   	height:80px;
+   	width:80px;
+}
+fieldset.web.chat.caculator>div.output>table tr:first-child td {
+	background-color:#46504d; color:white;
+}
+fieldset.web.chat.caculator>div.output>table td:last-child {
+	background-color:#fb9f0d !important; color:white;
+}
+fieldset.web.chat.caculator>div.output>table td:hover {
+	background-color:var(--hover-bg-color) !important;
+	cursor:pointer;
+}

plugin/local/chat/caculator.js

@@ -0,0 +1,57 @@
+Volcanos(chat.ONIMPORT, {
+	_init: function(can, msg) {
+		var list = [
+			["AC", "+/-", "%", "/"],
+			["7", "8", "9", "*"],
+			["4", "5", "6", "-"],
+			["1", "2", "3", "+"],
+			["0", "00", ".", "="],
+		]
+		can.ui.display = can.page.Append(can, can._output, [{view: "display", inner: "0"}])._target
+		var table = can.page.Append(can, can._output, [{type: html.TABLE}])._target
+		can.page.Append(can, table, can.core.List(list, function(list) {
+			return {type: html.TR, list: can.core.List(list, function(item) {
+				return {type: html.TD, inner: item, onclick: function(event) {
+					var cb = can.ondetail[item]; cb? cb(event, can, item): (
+						can.ui.display.innerHTML = can.base.trimPrefix(can.ui.display.innerHTML + item, "0")
+					)
+				}}
+			}) }
+		}))
+	},
+	_show: function(can) {
+	},
+}, [""])
+Volcanos(chat.ONACTION, {
+	onkeydown: function(event, can) {
+		switch (event.key) {
+			case "=":
+				can.ondetail[event.key](evnt, can, event.key)
+			case "Shift":
+			case "Backspace":
+				break
+			default:
+				can.ui.display.innerHTML += event.key
+		}
+	},
+})
+Volcanos(chat.ONDETAIL, {
+	"AC": function(event, can, button) {
+		can.ui.display.innerHTML = "0"
+	},
+	"=": function(event, can, button) {
+		var list = []
+		can.core.List(can.core.Split(can.ui.display.innerHTML, "", "+-*/%"), function(item) {
+			switch (item) {
+				case "+":
+				case "-":
+				case "*":
+				case "/":
+				case "%":
+				default: list.push(item)
+			}
+		})
+	},
+	"+/-": function(event, can, button) {
+	},
+})

plugin/local/chat/clock.css

@@ -0,0 +1,4 @@
+fieldset.web.chat.clock>div.output>svg g.number text { font-family:sans-serif; font-size:48px; }
+fieldset.web.chat.clock>div.output>svg g.hour line { stroke-width:8px; }
+fieldset.web.chat.clock>div.output>svg g.minute line { stroke-width:4px; }
+fieldset.web.chat.clock>div.output>svg g.second line { stroke-width:2px; stroke:red; }

plugin/local/chat/clock.js

@@ -0,0 +1,21 @@
+Volcanos(chat.ONIMPORT, {
+	_init: function(can, msg, cb) { can.page.requireDraw(can, function() {
+		can.onmotion.hidden(can, can._status), can.base.isFunc(cb) && cb(msg)
+		can.onmotion.hidden(can, can._action), can.onimport._show(can)
+	}) },
+	_show: function(can) { can.svg.Value("dominant-baseline", "middle")
+		can.onmotion.clear(can, can.svg), can.svg.Val(html.HEIGHT, can.ConfHeight()), can.svg.Val(html.WIDTH, can.ConfWidth())
+		var x = can.ConfWidth()/2, y = can.ConfHeight()/2, r = can.base.Max(can.ConfHeight(), can.ConfWidth())/2-80, c = {x: x, y: y}
+		function pos(r, angle) { angle -= 90; return {x: x + r * Math.cos(angle * Math.PI / 180), y: y + r * Math.sin(angle * Math.PI / 180)} }
+		function line(g, c, p) { return can.onimport.draw(can, {shape: svg.LINE, points: [c, p]}, g) }
+		function group(name) { return can.onimport.group(can, name) }
+		var number = group("number"), second = group("second"), minute = group("minute"), hour = group("hour")
+		for (var i = 1; i <= 12; i++) { var p = pos(r, 360/12*i); can.onimport.draw(can, {shape: svg.TEXT, points: [p], style: {inner: i+""}}, number) }
+		can.core.Timer({internal: 100}, function(){ var t = new Date()
+			can.onmotion.clear(can, second), can.onmotion.clear(can, minute), can.onmotion.clear(can, hour)
+			line(hour, c, pos(r*0.6, t.getHours()%12*360/12+t.getMinutes()*30/60))
+			line(minute, c, pos(r*0.8, t.getMinutes()*360/60))
+			line(second, c, pos(r, t.getSeconds()*360/60))
+		})
+	},
+}, [""])