server module worked!

.vscode/launch.json

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

src/modules/config.ts

@@ -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);

src/modules/server.ts

@@ -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);
 }

src/private/config.json

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

src/private/css/magma.css

@@ -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;
+}

src/private/index.html

@@ -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">

src/private/js/magma.js

@@ -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);
-})();
-
-// Set weather icon
-var skycons = new Skycons({ "color": cssRootKeys["--accentColor"] });
-skycons.add("weather-icon", Skycons.PARTLY_CLOUDY_DAY);
+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;

src/public/config.json

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

src/temp/config.json

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

src/temp/css/custom.css

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

src/temp/css/magma.css

@@ -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; }

src/temp/index.html

@@ -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>

src/temp/js/magma.js

@@ -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;

src/temp/js/skycons.js

@@ -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));

src/temp/languages/en.json

@@ -0,0 +1 @@
+{}

src/temp/languages/vn.json

@@ -0,0 +1 @@
+{}