0ct0pu5/magma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

server module worked!

Browse source
This commit is contained in:
Help-14 2022-03-25 23:49:20 +07:00
parent b212f115e8
commit fefaea2bbd
22 changed files with 1108 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/launch.json vendored
View file

@ -12,7 +12,8 @@
"run",
"--inspect",
"--allow-net",
"--allow-read"
"--allow-read",
"--allow-write",
],
"outputCapture": "std",
"attachSimplePort": 9229

4
src/modules/config.ts
View file

@ -12,7 +12,9 @@ class WebsiteConfig {
export async function loadConfig(): Promise<Config | null> {
try {
const json = JSON.parse(await Deno.readTextFile("./people.json"));
const json = JSON.parse(
await Deno.readTextFile(`${Deno.cwd()}/public/config.json`),
);
return json as Config;
} catch (err) {
console.error(err);

121
src/modules/server.ts
View file

@ -1,20 +1,48 @@
import { opine, serveStatic } from "https://deno.land/x/opine/mod.ts";
import { ensureDirSync, existsSync } from "https://deno.land/std/fs/mod.ts";
import { Language, minify } from "https://deno.land/x/minifier/mod.ts";
import {
ensureDirSync,
ensureFileSync,
existsSync,
walkSync,
} from "https://deno.land/std/fs/mod.ts";
const tempFolder = `${Deno.cwd()}/temp`;
export async function startServer(): Promise<void> {
// Create web server
const app = opine();
app.use(serveStatic("./public"));
app.get("/", function (req, res) {
// Add resource folder
app.use(serveStatic(tempFolder));
// Add route for index page
app.get("/", (req, res) => {
res.headers = new Headers({
"content-type": "text/html; charset=UTF-8",
});
res.send(window.index);
});
Compile();
// Add route for weather
app.get("/weather", async (req, res) => {
const lat = "21.0425886";
const lon = "105.8129389";
const apiKey = "7b093bee7461b669e34c363d887cfdec";
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&limit=1&appid=${apiKey}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
},
);
res.send(response);
});
await Compile();
app.listen(7000, () =>
console.log(
`server has started on http://localhost:7000 🚀`,
@ -23,51 +51,68 @@ export async function startServer(): Promise<void> {
export async function Compile(): Promise<void> {
ensureDirSync(tempFolder);
await CompileIndex();
["private", "public"].forEach((folder) => {
for (
const entry of walkSync(`${Deno.cwd()}/${folder}/`, {
includeDirs: false,
})
) {
console.log(entry.path);
let language = null;
if (!entry.path.includes(".min.")) {
if (entry.path.includes(".css")) {
language = Language.CSS;
} else if (entry.path.includes(".json")) {
language = Language.JSON;
}
// minifier module make error when minify js and html file 🥲
//else if (entry.path.includes(".js")) {
// language = Language.JS;
//}
//else if (entry.path.includes(".htm")) {
//language = Language.HTML;
//}
}
const moveToPath = changePath(entry.path, folder, "temp");
ensureFileSync(moveToPath);
if (language) {
let content = Deno.readTextFileSync(entry.path);
content = minify(Language.HTML, content);
Deno.writeTextFileSync(moveToPath, content);
} else {
Deno.copyFileSync(entry.path, moveToPath);
}
}
});
}
export async function CompileIndex(): Promise<void> {
//Read index.html content
let indexPath = `${Deno.cwd()}/public/index.html`;
if (!existsSync(indexPath)) {
indexPath = `${Deno.cwd()}/private/index.html`;
}
let indexContent = await Deno.readTextFile(indexPath);
let indexPath = `${tempFolder}/index.html`;
let indexContent = Deno.readTextFileSync(indexPath);
//Insert config into template
for (let property in window.config.website) {
indexContent = indexContent.replace(
`{{${property}}}`,
window.config.website[property],
);
}
// for (let property in window.config.website) {
// indexContent = indexContent.replace(
// `{{${property}}}`,
// window.config.website[property],
// );
// }
//Insert localization into template
for (let key in window.language) {
indexContent = indexContent.replace(`{%${key}%}`, window.language[key]);
}
//Minify HTML
if (window.config.server.minify) {
indexContent = minify(Language.HTML, indexContent);
}
// for (let key in window.language) {
// indexContent = indexContent.replace(`{%${key}%}`, window.language[key]);
// }
//Write index.html into temp folder
ensureDirSync(tempFolder);
//ensureDirSync(tempFolder);
window.index = indexContent;
await Deno.writeTextFile(`${tempFolder}/index.html`, indexContent);
//Deno.writeTextFileSync(`${tempFolder}/index.html`, indexContent);
}
export async function CompileCSS(path: string): Promise<void> {
if (!path) {
}
if (!path.includes(".min.")) {}
}
export async function CompileJS(path: string): Promise<void> {
if (!path) {
}
if (!path.includes(".min.")) {}
function changePath(path: string, from: string, to: string) {
return Deno.cwd() + path.replace(Deno.cwd(), "").replace(from, to);
}

11
src/private/config.json
View file

@ -1,11 +0,0 @@
{
"server": {
"port": 7000,
"minify": true
},
"website": {
"title": "",
"description": ""
},
"addons": []
}

5
src/private/css/magma.css
View file

@ -67,6 +67,7 @@ body {
.group-items a:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
cursor: pointer;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.group-items a:hover {
@ -75,3 +76,7 @@ body {
background-color: rgba(0, 0, 0, 0.3) !important;
}
}
.strong {
font-weight: bold;
}

27
src/private/index.html
View file

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html lang="{{language}}">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../public/css/custom.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/charts.min.css">
@ -22,13 +22,24 @@
<div id="header" class="row">
<div class="two-thirds column">
<h5 id="clock"></h5>
<h1>
<b id="welcome">Good afternoon!</b>
<h1 id="welcome" class="strong">
Good afternoon!
</h1>
</b>
</div>
<div id="header-right" class="one-third column">
<canvas id="weather-icon" width="50" height="50"></canvas>
<div id="header-right" style="padding-top: 2em;">
<div class="row">
<div class="one-half column">
<canvas id="weather-icon" width="50" height="50"></canvas>
</div>
<div id="weather-info" class="one-half column" style="padding-left: 5px; visibility: hidden;">
<div id="temp" class="row strong">
</div>
<hr style="margin: 0px;">
<div id="humidity" class="row strong">
</div>
</div>
</div>
</div>
</div>
<div id="content" class="row">

101
src/private/js/magma.js
View file

@ -1,21 +1,86 @@
// Get CSS
var declaration = document.styleSheets[1].cssRules[0];
var allVar = declaration.style.cssText.split(";");
var cssRootKeys = {}
for (var i = 0; i < allVar.length; i++) {
var a = allVar[i].split(':');
if (a[0] !== "")
cssRootKeys[a[0].trim()] = a[1].trim();
async function loadConfig() {
window.config = await (await fetch("./config.json")).json();
// Set website language
document.documentElement.setAttribute("lang", window.config.website.language);
// Set website title
document.title = window.config.website.title;
// Set website description
document.querySelector('meta[name="description"]').setAttribute("content", window.config.website.description);
}
// Set Clock
var clock = document.getElementById("clock");
const clockOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
(function clockTick() {
clock.innerText = new Date().toLocaleTimeString("vi-vn", clockOptions);
setTimeout(clockTick, 2000);
})();
async function loadWeather() {
// Get info from api
const weather = { "coord": { "lon": 105.8129, "lat": 21.0426 }, "weather": [{ "id": 701, "main": "Mist", "description": "mist", "icon": "50n" }], "base": "stations", "main": { "temp": 297.14, "feels_like": 297.89, "temp_min": 297.14, "temp_max": 297.14, "pressure": 1008, "humidity": 88 }, "visibility": 4300, "wind": { "speed": 1.54, "deg": 30 }, "clouds": { "all": 100 }, "dt": 1648219888, "sys": { "type": 1, "id": 9308, "country": "VN", "sunrise": 1648162598, "sunset": 1648206535 }, "timezone": 25200, "id": 1581130, "name": "Hanoi", "cod": 200 };
// Set weather icon
var skycons = new Skycons({ "color": cssRootKeys["--accentColor"] });
skycons.add("weather-icon", Skycons.PARTLY_CLOUDY_DAY);
// Parse weather id
let icon = null;
let isDay = Date.now().hour >= 6 && Date.now().hour < 18;
const weatherCode = weather.weather[0].id;
if ([200, 201, 202, 210, 211, 212, 221, 230, 231, 232].includes(weatherCode)) {
icon = Skycons.RAIN; //Thunderstorm
} else if ([300, 301, 302, 310, 311, 312, 313, 314, 321].includes(weatherCode)) {
icon = Skycons.RAIN; //Drizzle
} else if ([500, 501, 502, 503, 504, 511, 520, 521, 522, 531].includes(weatherCode)) {
icon = Skycons.RAIN;
} else if ([600, 601, 602, 611, 612, 613, 615, 616, 620, 621, 622].includes(weatherCode)) {
icon = Skycons.SNOW;
} else if (weatherCode === 800) {
icon = isDay ? Skycons.CLEAR_DAY : Skycons.CLEAR_NIGHT;
} else if ([801, 802, 803, 804].includes(weatherCode)) {
if (weatherCode >= 803) {
icon = Skycons.CLOUDY;
} else {
icon = isDay ? Skycons.PARTLY_CLOUDY_DAY : Skycons.PARTLY_CLOUDY_NIGHT;
}
} else if ([762, 761, 751, 731, 721].includes(weatherCode)) {
icon = Skycons.SLEET;
} else if ([771, 781].includes(weatherCode)) {
icon = Skycons.WIND;
} else if ([701, 711, 741].includes(weatherCode)) {
icon = Skycons.FOG;
} else {
return;
}
// Set weather icon to canvas
var skycons = new Skycons({ "color": window.cssRoot["--accentColor"] });
skycons.add("weather-icon", icon);
// Set weather info
if (window.config.website.useMetric) {
document.querySelector("#temp").innerText = Math.floor(weather.main.temp - 273.15) + "°C";
} else {
document.querySelector("#temp").innerText = Math.floor((weather.main.temp - 32) * 5 / 9) + "°F";
}
document.querySelector("#humidity").innerText = Math.floor(weather.main.humidity) + "%";
document.querySelector("#weather-info").style.visibility = "visible";
}
async function startWebsite() {
// Load config
await loadConfig();
// Get CSS varriables
var declaration = document.styleSheets[1].cssRules[0];
var allVar = declaration.style.cssText.split(";");
var cssRootKeys = {}
for (var i = 0; i < allVar.length; i++) {
var a = allVar[i].split(':');
if (a[0] !== "")
cssRootKeys[a[0].trim()] = a[1].trim();
}
window.cssRoot = cssRootKeys;
// Set Clock
var clock = document.getElementById("clock");
const clockOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
(function clockTick() {
clock.innerText = new Date().toLocaleTimeString(window.config.website.localization, clockOptions);
setTimeout(clockTick, 2000);
})();
// Set weather
loadWeather();
}
window.onload = startWebsite;

10
src/public/config.json Normal file
View file

@ -0,0 +1,10 @@
{
"website": {
"title": "Magma Dashboard",
"description": "",
"language": "vi",
"localization": "vi-vn",
"useMetric": true
},
"addons": []
}

0
src/public/js/custom.js Normal file
View file

1
src/temp/config.json Normal file
View file

@ -0,0 +1 @@
{ "website": { "title": "Magma Dashboard", "description": "", "language": "vi", "localization": "vi-vn", "useMetric": true }, "addons": [] }

1
src/temp/css/charts.css.map Normal file
View file

File diff suppressed because one or more lines are too long

1
src/temp/css/charts.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
src/temp/css/custom.css Normal file
View file

@ -0,0 +1 @@
:root { --bgColor: #2d3436; --bgImage: url("https://images.wallpaperscraft.com/image/single/leaf_plant_green_136967_2560x1440.jpg"); --accentColor: #ffc107; --foreground: #ffffff; }

1
src/temp/css/magma.css Normal file
View file

@ -0,0 +1 @@
body { background-color: var(--bgColor); color: var(--foreground); z-index: -999; } .bg { width: 100%; height: 100%; position: fixed; background-image: var(--bgImage); transform: scale(1.1); filter: blur(0.2rem); opacity: 0.6; z-index: -998; } #header { margin-top: 10%; } #footer { margin-bottom: 10%; } #header-right { align-content: center; float: right; } .group-title { margin-top: 5%; } .group-items a { padding: 15px !important; margin-bottom: 0 !important; border-radius: 0.7rem !important; align-items: end !important; line-height: 2; transition: all 0.25s; display: flex; width: 100%; color: var(--foreground); } .group-items h6 { align-items: center; margin-top: 5px !important; margin-bottom: 0 !important; margin-left: 0.5em !important; display: inline-block; vertical-align: bottom !important; font-weight: bold; } .group-items .icon { width: 32px !important; height: 32px !important; margin-top: 0px !important; margin-right: 0.5em !important; } .group-items .icon path { fill: var(--foreground); } .group-items a:hover { background-color: rgba(0, 0, 0, 0.3) !important; cursor: pointer; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .group-items a:hover { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.3) !important; } } .strong { font-weight: bold; }

1
src/temp/css/normalize.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
src/temp/css/skeleton.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

82
src/temp/index.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/charts.min.css">
<link rel="stylesheet" href="css/magma.css">
</head>
<body>
<div class="bg"></div>
<div class="container">
<div id="header" class="row">
<div class="two-thirds column">
<h5 id="clock"></h5>
<h1 id="welcome" class="strong">
Good afternoon!
</h1>
</b>
</div>
<div id="header-right" style="padding-top: 2em;">
<div class="row">
<div class="one-half column">
<canvas id="weather-icon" width="50" height="50"></canvas>
</div>
<div id="weather-info" class="one-half column" style="padding-left: 5px; visibility: hidden;">
<div id="temp" class="row strong">
</div>
<hr style="margin: 0px;">
<div id="humidity" class="row strong">
</div>
</div>
</div>
</div>
</div>
<div id="content" class="row">
<div class="column twelve">
<div class="row group-title">
<h4><b>Applications</b></h4>
</div>
<div class="row">
<div class="three columns group-items"><a>
<div class="icon"><svg viewBox="0 0 24 24" role="presentation" class="Icon_Icon__1Fl5u">
<path
d="M20.2,5.9L21,5.1C19.6,3.7 17.8,3 16,3C14.2,3 12.4,3.7 11,5.1L11.8,5.9C13,4.8 14.5,4.2 16,4.2C17.5,4.2 19,4.8 20.2,5.9M19.3,6.7C18.4,5.8 17.2,5.3 16,5.3C14.8,5.3 13.6,5.8 12.7,6.7L13.5,7.5C14.2,6.8 15.1,6.5 16,6.5C16.9,6.5 17.8,6.8 18.5,7.5L19.3,6.7M19,13H17V9H15V13H5A2,2 0 0,0 3,15V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V15A2,2 0 0,0 19,13M8,18H6V16H8V18M11.5,18H9.5V16H11.5V18M15,18H13V16H15V18Z">
</path>
</svg></div>
<h6>OpenWRT</h6>
</a><a>a</a><a>a</a><a>a</a></div>
<div class="three columns group-items">b</div>
<div class="three columns group-items">c</div>
<div class="three columns group-items">d</div>
</div>
<div class="row group-title">
<h4><b>Bookmarks</b></h4>
</div>
<div class="row">
<div class="three columns group-items">a</div>
<div class="three columns group-items">b</div>
<div class="three columns group-items">c</div>
<div class="three columns group-items">d</div>
</div>
</div>
</div>
<div id="footer" class="row"></div>
</div>
<script src="js/skycons.js"></script>
<script src="js/magma.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

0
src/temp/js/custom.js Normal file
View file

86
src/temp/js/magma.js Normal file
View file

@ -0,0 +1,86 @@
async function loadConfig() {
window.config = await (await fetch("./config.json")).json();
// Set website language
document.documentElement.setAttribute("lang", window.config.website.language);
// Set website title
document.title = window.config.website.title;
// Set website description
document.querySelector('meta[name="description"]').setAttribute("content", window.config.website.description);
}
async function loadWeather() {
// Get info from api
const weather = { "coord": { "lon": 105.8129, "lat": 21.0426 }, "weather": [{ "id": 701, "main": "Mist", "description": "mist", "icon": "50n" }], "base": "stations", "main": { "temp": 297.14, "feels_like": 297.89, "temp_min": 297.14, "temp_max": 297.14, "pressure": 1008, "humidity": 88 }, "visibility": 4300, "wind": { "speed": 1.54, "deg": 30 }, "clouds": { "all": 100 }, "dt": 1648219888, "sys": { "type": 1, "id": 9308, "country": "VN", "sunrise": 1648162598, "sunset": 1648206535 }, "timezone": 25200, "id": 1581130, "name": "Hanoi", "cod": 200 };
// Parse weather id
let icon = null;
let isDay = Date.now().hour >= 6 && Date.now().hour < 18;
const weatherCode = weather.weather[0].id;
if ([200, 201, 202, 210, 211, 212, 221, 230, 231, 232].includes(weatherCode)) {
icon = Skycons.RAIN; //Thunderstorm
} else if ([300, 301, 302, 310, 311, 312, 313, 314, 321].includes(weatherCode)) {
icon = Skycons.RAIN; //Drizzle
} else if ([500, 501, 502, 503, 504, 511, 520, 521, 522, 531].includes(weatherCode)) {
icon = Skycons.RAIN;
} else if ([600, 601, 602, 611, 612, 613, 615, 616, 620, 621, 622].includes(weatherCode)) {
icon = Skycons.SNOW;
} else if (weatherCode === 800) {
icon = isDay ? Skycons.CLEAR_DAY : Skycons.CLEAR_NIGHT;
} else if ([801, 802, 803, 804].includes(weatherCode)) {
if (weatherCode >= 803) {
icon = Skycons.CLOUDY;
} else {
icon = isDay ? Skycons.PARTLY_CLOUDY_DAY : Skycons.PARTLY_CLOUDY_NIGHT;
}
} else if ([762, 761, 751, 731, 721].includes(weatherCode)) {
icon = Skycons.SLEET;
} else if ([771, 781].includes(weatherCode)) {
icon = Skycons.WIND;
} else if ([701, 711, 741].includes(weatherCode)) {
icon = Skycons.FOG;
} else {
return;
}
// Set weather icon to canvas
var skycons = new Skycons({ "color": window.cssRoot["--accentColor"] });
skycons.add("weather-icon", icon);
// Set weather info
if (window.config.website.useMetric) {
document.querySelector("#temp").innerText = Math.floor(weather.main.temp - 273.15) + "°C";
} else {
document.querySelector("#temp").innerText = Math.floor((weather.main.temp - 32) * 5 / 9) + "°F";
}
document.querySelector("#humidity").innerText = Math.floor(weather.main.humidity) + "%";
document.querySelector("#weather-info").style.visibility = "visible";
}
async function startWebsite() {
// Load config
await loadConfig();
// Get CSS varriables
var declaration = document.styleSheets[1].cssRules[0];
var allVar = declaration.style.cssText.split(";");
var cssRootKeys = {}
for (var i = 0; i < allVar.length; i++) {
var a = allVar[i].split(':');
if (a[0] !== "")
cssRootKeys[a[0].trim()] = a[1].trim();
}
window.cssRoot = cssRootKeys;
// Set Clock
var clock = document.getElementById("clock");
const clockOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
(function clockTick() {
clock.innerText = new Date().toLocaleTimeString(window.config.website.localization, clockOptions);
setTimeout(clockTick, 2000);
})();
// Set weather
loadWeather();
}
window.onload = startWebsite;

726
src/temp/js/skycons.js Normal file
View file

@ -0,0 +1,726 @@
(function (global) {
"use strict";
/* Set up a RequestAnimationFrame shim so we can animate efficiently FOR
* GREAT JUSTICE. */
var requestInterval, cancelInterval;
(function () {
var raf = global.requestAnimationFrame ||
global.webkitRequestAnimationFrame ||
global.mozRequestAnimationFrame ||
global.oRequestAnimationFrame ||
global.msRequestAnimationFrame,
caf = global.cancelAnimationFrame ||
global.webkitCancelAnimationFrame ||
global.mozCancelAnimationFrame ||
global.oCancelAnimationFrame ||
global.msCancelAnimationFrame;
if (raf && caf) {
requestInterval = function (fn) {
var handle = { value: null };
function loop() {
handle.value = raf(loop);
fn();
}
loop();
return handle;
};
cancelInterval = function (handle) {
caf(handle.value);
};
}
else {
requestInterval = setInterval;
cancelInterval = clearInterval;
}
}());
/* Catmull-rom spline stuffs. */
/*
function upsample(n, spline) {
var polyline = [],
len = spline.length,
bx = spline[0],
by = spline[1],
cx = spline[2],
cy = spline[3],
dx = spline[4],
dy = spline[5],
i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t;
for(i = 6; i !== spline.length; i += 2) {
ax = bx;
bx = cx;
cx = dx;
dx = spline[i ];
px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx;
qx = ax - 2.5 * bx + 2.0 * cx - 0.5 * dx;
rx = -0.5 * ax + 0.5 * cx ;
sx = bx ;
ay = by;
by = cy;
cy = dy;
dy = spline[i + 1];
py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy;
qy = ay - 2.5 * by + 2.0 * cy - 0.5 * dy;
ry = -0.5 * ay + 0.5 * cy ;
sy = by ;
for(j = 0; j !== n; ++j) {
t = j / n;
polyline.push(
((px * t + qx) * t + rx) * t + sx,
((py * t + qy) * t + ry) * t + sy
);
}
}
polyline.push(
px + qx + rx + sx,
py + qy + ry + sy
);
return polyline;
}
function downsample(n, polyline) {
var len = 0,
i, dx, dy;
for(i = 2; i !== polyline.length; i += 2) {
dx = polyline[i ] - polyline[i - 2];
dy = polyline[i + 1] - polyline[i - 1];
len += Math.sqrt(dx * dx + dy * dy);
}
len /= n;
var small = [],
target = len,
min = 0,
max, t;
small.push(polyline[0], polyline[1]);
for(i = 2; i !== polyline.length; i += 2) {
dx = polyline[i ] - polyline[i - 2];
dy = polyline[i + 1] - polyline[i - 1];
max = min + Math.sqrt(dx * dx + dy * dy);
if(max > target) {
t = (target - min) / (max - min);
small.push(
polyline[i - 2] + dx * t,
polyline[i - 1] + dy * t
);
target += len;
}
min = max;
}
small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]);
return small;
}
*/
/* Define skycon things. */
/* FIXME: I'm *really really* sorry that this code is so gross. Really, I am.
* I'll try to clean it up eventually! Promise! */
var KEYFRAME = 500,
STROKE = 0.08,
TAU = 2.0 * Math.PI,
TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);
function circle(ctx, x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, TAU, false);
ctx.fill();
}
function line(ctx, ax, ay, bx, by) {
ctx.beginPath();
ctx.moveTo(ax, ay);
ctx.lineTo(bx, by);
ctx.stroke();
}
function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
var c = Math.cos(t * TAU),
s = Math.sin(t * TAU);
rmax -= rmin;
circle(
ctx,
cx - s * rx,
cy + c * ry + rmax * 0.5,
rmin + (1 - c * 0.5) * rmax
);
}
function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
var i;
for (i = 5; i--;)
puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
}
function cloud(ctx, t, cx, cy, cw, s, color) {
t /= 30000;
var a = cw * 0.21,
b = cw * 0.12,
c = cw * 0.24,
d = cw * 0.28;
ctx.fillStyle = color;
puffs(ctx, t, cx, cy, a, b, c, d);
ctx.globalCompositeOperation = 'destination-out';
puffs(ctx, t, cx, cy, a, b, c - s, d - s);
ctx.globalCompositeOperation = 'source-over';
}
function sun(ctx, t, cx, cy, cw, s, color) {
t /= 120000;
var a = cw * 0.25 - s * 0.5,
b = cw * 0.32 + s * 0.5,
c = cw * 0.50 - s * 0.5,
i, p, cos, sin;
ctx.strokeStyle = color;
ctx.lineWidth = s;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.arc(cx, cy, a, 0, TAU, false);
ctx.stroke();
for (i = 8; i--;) {
p = (t + i / 8) * TAU;
cos = Math.cos(p);
sin = Math.sin(p);
line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c);
}
}
function moon(ctx, t, cx, cy, cw, s, color) {
t /= 15000;
var a = cw * 0.29 - s * 0.5,
b = cw * 0.05,
c = Math.cos(t * TAU),
p = c * TAU / -16;
ctx.strokeStyle = color;
ctx.lineWidth = s;
ctx.lineCap = "round";
ctx.lineJoin = "round";
cx += c * b;
ctx.beginPath();
ctx.arc(cx, cy, a, p + TAU / 8, p + TAU * 7 / 8, false);
ctx.arc(cx + Math.cos(p) * a * TWO_OVER_SQRT_2, cy + Math.sin(p) * a * TWO_OVER_SQRT_2, a, p + TAU * 5 / 8, p + TAU * 3 / 8, true);
ctx.closePath();
ctx.stroke();
}
function rain(ctx, t, cx, cy, cw, s, color) {
t /= 1350;
var a = cw * 0.16,
b = TAU * 11 / 12,
c = TAU * 7 / 12,
i, p, x, y;
ctx.fillStyle = color;
for (i = 4; i--;) {
p = (t + i / 4) % 1;
x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a;
y = cy + p * p * cw;
ctx.beginPath();
ctx.moveTo(x, y - s * 1.5);
ctx.arc(x, y, s * 0.75, b, c, false);
ctx.fill();
}
}
function sleet(ctx, t, cx, cy, cw, s, color) {
t /= 750;
var a = cw * 0.1875,
i, p, x, y;
ctx.strokeStyle = color;
ctx.lineWidth = s * 0.5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
for (i = 4; i--;) {
p = (t + i / 4) % 1;
x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5;
y = cy + p * cw;
line(ctx, x, y - s * 1.5, x, y + s * 1.5);
}
}
function snow(ctx, t, cx, cy, cw, s, color) {
t /= 3000;
var a = cw * 0.16,
b = s * 0.75,
u = t * TAU * 0.7,
ux = Math.cos(u) * b,
uy = Math.sin(u) * b,
v = u + TAU / 3,
vx = Math.cos(v) * b,
vy = Math.sin(v) * b,
w = u + TAU * 2 / 3,
wx = Math.cos(w) * b,
wy = Math.sin(w) * b,
i, p, x, y;
ctx.strokeStyle = color;
ctx.lineWidth = s * 0.5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
for (i = 4; i--;) {
p = (t + i / 4) % 1;
x = cx + Math.sin((p + i / 4) * TAU) * a;
y = cy + p * cw;
line(ctx, x - ux, y - uy, x + ux, y + uy);
line(ctx, x - vx, y - vy, x + vx, y + vy);
line(ctx, x - wx, y - wy, x + wx, y + wy);
}
}
function fogbank(ctx, t, cx, cy, cw, s, color) {
t /= 30000;
var a = cw * 0.21,
b = cw * 0.06,
c = cw * 0.21,
d = cw * 0.28;
ctx.fillStyle = color;
puffs(ctx, t, cx, cy, a, b, c, d);
ctx.globalCompositeOperation = 'destination-out';
puffs(ctx, t, cx, cy, a, b, c - s, d - s);
ctx.globalCompositeOperation = 'source-over';
}
/*
var WIND_PATHS = [
downsample(63, upsample(8, [
-1.00, -0.28,
-0.75, -0.18,
-0.50, 0.12,
-0.20, 0.12,
-0.04, -0.04,
-0.07, -0.18,
-0.19, -0.18,
-0.23, -0.05,
-0.12, 0.11,
0.02, 0.16,
0.20, 0.15,
0.50, 0.07,
0.75, 0.18,
1.00, 0.28
])),
downsample(31, upsample(16, [
-1.00, -0.10,
-0.75, 0.00,
-0.50, 0.10,
-0.25, 0.14,
0.00, 0.10,
0.25, 0.00,
0.50, -0.10,
0.75, -0.14,
1.00, -0.10
]))
];
*/
var WIND_PATHS = [
[
-0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225,
-0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262,
-0.6083, 0.0065, -0.5868, 0.0396, -0.5643, 0.0731,
-0.5372, 0.1041, -0.5033, 0.1259, -0.4662, 0.1406,
-0.4275, 0.1493, -0.3881, 0.1530, -0.3487, 0.1526,
-0.3095, 0.1488, -0.2708, 0.1421, -0.2319, 0.1342,
-0.1943, 0.1217, -0.1600, 0.1025, -0.1290, 0.0785,
-0.1012, 0.0509, -0.0764, 0.0206, -0.0547, -0.0120,
-0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241,
-0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964,
-0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453,
-0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317,
-0.2064, 0.0033, -0.1853, 0.0362, -0.1613, 0.0672,
-0.1350, 0.0961, -0.1051, 0.1213, -0.0706, 0.1397,
-0.0332, 0.1512, 0.0053, 0.1580, 0.0442, 0.1624,
0.0833, 0.1636, 0.1224, 0.1615, 0.1613, 0.1565,
0.1999, 0.1500, 0.2378, 0.1402, 0.2749, 0.1279,
0.3118, 0.1147, 0.3487, 0.1015, 0.3858, 0.0892,
0.4236, 0.0787, 0.4621, 0.0715, 0.5012, 0.0702,
0.5398, 0.0766, 0.5768, 0.0890, 0.6123, 0.1055,
0.6466, 0.1244, 0.6805, 0.1440, 0.7147, 0.1630,
0.7500, 0.1800
],
[
-0.7500, 0.0000, -0.7033, 0.0195, -0.6569, 0.0399,
-0.6104, 0.0600, -0.5634, 0.0789, -0.5155, 0.0954,
-0.4667, 0.1089, -0.4174, 0.1206, -0.3676, 0.1299,
-0.3174, 0.1365, -0.2669, 0.1398, -0.2162, 0.1391,
-0.1658, 0.1347, -0.1157, 0.1271, -0.0661, 0.1169,
-0.0170, 0.1046, 0.0316, 0.0903, 0.0791, 0.0728,
0.1259, 0.0534, 0.1723, 0.0331, 0.2188, 0.0129,
0.2656, -0.0064, 0.3122, -0.0263, 0.3586, -0.0466,
0.4052, -0.0665, 0.4525, -0.0847, 0.5007, -0.1002,
0.5497, -0.1130, 0.5991, -0.1240, 0.6491, -0.1325,
0.6994, -0.1380, 0.7500, -0.1400
]
],
WIND_OFFSETS = [
{ start: 0.36, end: 0.11 },
{ start: 0.56, end: 0.16 }
];
function leaf(ctx, t, x, y, cw, s, color) {
var a = cw / 8,
b = a / 3,
c = 2 * b,
d = (t % 1) * TAU,
e = Math.cos(d),
f = Math.sin(d);
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.lineWidth = s;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.arc(x, y, a, d, d + Math.PI, false);
ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d, false);
ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d, true);
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.stroke();
}
function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
t /= 2500;
var path = WIND_PATHS[index],
a = (t + index - WIND_OFFSETS[index].start) % total,
c = (t + index - WIND_OFFSETS[index].end) % total,
e = (t + index) % total,
b, d, f, i;
ctx.strokeStyle = color;
ctx.lineWidth = s;
ctx.lineCap = "round";
ctx.lineJoin = "round";
if (a < 1) {
ctx.beginPath();
a *= path.length / 2 - 1;
b = Math.floor(a);
a -= b;
b *= 2;
b += 2;
ctx.moveTo(
cx + (path[b - 2] * (1 - a) + path[b] * a) * cw,
cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
);
if (c < 1) {
c *= path.length / 2 - 1;
d = Math.floor(c);
c -= d;
d *= 2;
d += 2;
for (i = b; i !== d; i += 2)
ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
ctx.lineTo(
cx + (path[d - 2] * (1 - c) + path[d] * c) * cw,
cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
);
}
else
for (i = b; i !== path.length; i += 2)
ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
ctx.stroke();
}
else if (c < 1) {
ctx.beginPath();
c *= path.length / 2 - 1;
d = Math.floor(c);
c -= d;
d *= 2;
d += 2;
ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);
for (i = 2; i !== d; i += 2)
ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
ctx.lineTo(
cx + (path[d - 2] * (1 - c) + path[d] * c) * cw,
cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
);
ctx.stroke();
}
if (e < 1) {
e *= path.length / 2 - 1;
f = Math.floor(e);
e -= f;
f *= 2;
f += 2;
leaf(
ctx,
t,
cx + (path[f - 2] * (1 - e) + path[f] * e) * cw,
cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
cw,
s,
color
);
}
}
var Skycons = function (opts) {
this.list = [];
this.interval = null;
this.color = opts && opts.color ? opts.color : "black";
this.resizeClear = !!(opts && opts.resizeClear);
};
Skycons.CLEAR_DAY = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
};
Skycons.CLEAR_NIGHT = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
};
Skycons.PARTLY_CLOUDY_DAY = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
};
Skycons.PARTLY_CLOUDY_NIGHT = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
};
Skycons.CLOUDY = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
};
Skycons.RAIN = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
};
Skycons.SLEET = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
};
Skycons.SNOW = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
};
Skycons.WIND = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
};
Skycons.FOG = function (ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h),
k = s * STROKE;
fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
t /= 5000;
var a = Math.cos((t) * TAU) * s * 0.02,
b = Math.cos((t + 0.25) * TAU) * s * 0.02,
c = Math.cos((t + 0.50) * TAU) * s * 0.02,
d = Math.cos((t + 0.75) * TAU) * s * 0.02,
n = h * 0.936,
e = Math.floor(n - k * 0.5) + 0.5,
f = Math.floor(n - k * 2.5) + 0.5;
ctx.strokeStyle = color;
ctx.lineWidth = k;
ctx.lineCap = "round";
ctx.lineJoin = "round";
line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
};
Skycons.prototype = {
_determineDrawingFunction: function (draw) {
if (typeof draw === "string")
draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null;
return draw;
},
add: function (el, draw) {
var obj;
if (typeof el === "string")
el = document.getElementById(el);
// Does nothing if canvas name doesn't exists
if (el === null || el === undefined)
return;
draw = this._determineDrawingFunction(draw);
// Does nothing if the draw function isn't actually a function
if (typeof draw !== "function")
return;
obj = {
element: el,
context: el.getContext("2d"),
drawing: draw
};
this.list.push(obj);
this.draw(obj, KEYFRAME);
},
set: function (el, draw) {
var i;
if (typeof el === "string")
el = document.getElementById(el);
for (i = this.list.length; i--;)
if (this.list[i].element === el) {
this.list[i].drawing = this._determineDrawingFunction(draw);
this.draw(this.list[i], KEYFRAME);
return;
}
this.add(el, draw);
},
remove: function (el) {
var i;
if (typeof el === "string")
el = document.getElementById(el);
for (i = this.list.length; i--;)
if (this.list[i].element === el) {
this.list.splice(i, 1);
return;
}
},
draw: function (obj, time) {
var canvas = obj.context.canvas;
if (this.resizeClear)
canvas.width = canvas.width;
else
obj.context.clearRect(0, 0, canvas.width, canvas.height);
obj.drawing(obj.context, time, this.color);
},
play: function () {
var self = this;
this.pause();
this.interval = requestInterval(function () {
var now = Date.now(),
i;
for (i = self.list.length; i--;)
self.draw(self.list[i], now);
}, 1000 / 60);
},
pause: function () {
if (this.interval) {
cancelInterval(this.interval);
this.interval = null;
}
}
};
global.Skycons = Skycons;
}(this));

1
src/temp/languages/en.json Normal file
View file

@ -0,0 +1 @@
{}

1
src/temp/languages/vn.json Normal file
View file

@ -0,0 +1 @@
{}