Frontend Development 7 min read

Make Coding Fun with the Chuncai Desktop Companion Plugin

During the holiday the author introduces Chuncai, an open‑source desktop companion plugin that greets developers, displays messages, and can be customized, then provides the full JavaScript implementation, configuration details, Tuling API integration, and step‑by‑step instructions for embedding it into a web page.

Programmer DD

Oct 6, 2021

Make Coding Fun with the Chuncai Desktop Companion Plugin

During the National Day holiday the author suggests using a desktop companion to make solo coding less lonely.

The companion, named Chuncai, is an open‑source “pet” plugin that greets the user, displays messages, and can be customized with different images.

Chuncai is implemented as a jQuery plugin. The main script ( app.js) loads the style sheet, jQuery, and the Chuncai module, then defines default options such as Tuling API credentials, menu items (show notice, uptime, feeding, chat, portals, hide), system words and custom words.

require('./../less/chuncai.less'); // load style
var $ = require('jquery');
var Chuncai = require('./Chuncai');
$.chuncai = function(option) {
    var defaults = {
        tuling: {key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", userid: "xxxxxx"},
        menu: {
            "key": "你想要做什么呢？",
            "显示公告": function(){ this.dynamicSay(this.opt.words[1]); },
            "存活时间": function(){ this.dynamicSay("咱已经和主人共同度过了 " + Math.floor((+new Date - 1456998485780)/(1000*60*60*24)) + "天 的人生了哦~ 我是不是很棒呢~"); },
            "拍打喂食": {
                "key": "要来点什么呢？",
                "小饼干": "嗷呜~ 多谢款待 >ω<",
                "胡萝卜": "人家又不是小兔子 QwQ",
                "秋刀鱼": "大哥哥这是什么？呀！好长！诶？！好滑哦(๑• . •๑)！阿呜～",
                "胖次": "哇~ 好可爱的胖次~~~",
                "淡定红茶": "喝完了，ˊ_>ˋ和我签订契约成为淡定少女吧！"
            },
            "和春菜聊天": 1,
            "传送门": {
                "博客": function(){ window.open(""); },
                "码云": function(){ window.open(""); },
                "Git": function(){ window.open(""); }
            },
            "隐藏春菜": function(){ this.hide(); }
        },
        syswords: ["主人好~~ 欢迎回来!!! ╰(￣▽￣)╭", "我们一起聊天吧 ヽ(✿ﾟ▽ﾟ)ノ", "咦你想说什么 oAo ?"],
        words: ["博客日常，如有误望指出(灬ºωº灬)", "「不要啊」你以为我会这么说么噗噗~", "一起组团烧烤秋刀鱼", "白日依山尽，黄河入海流，欲穷千里目，更上 .. .. 一层楼?", "啊啦今天想吃点什么呢~", "据说点赞的都找到女朋友了~"]
    };
    option && $.extend(defaults.menu, option.more);
    return new Chuncai($.extend({}, defaults, option));
};

The chuncai.js file handles events such as random jokes, stories and chat by calling the Tuling API. Example:

if (type === TULING_ALL) {
    $.post("http://www.tuling123.com/openapi/api", {
        key: self.opt.tuling.key,
        info: "讲个笑话吧",
        userid: self.opt.tuling.userid
    }, function(data, status){
        if (status == 'success') {
            self.opt.words.push(data.text);
            self.opt.jokepos = self.opt.words.length - 1;
        }
    });
    // similar request for a story
}

Because the Tuling API has a daily request limit, users should replace the placeholder key and userid with their own credentials.

To activate the plugin, include jQuery and dist/chuncai.js in an HTML page and call $.chuncai(); as shown in the sample index.html snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="dist/chuncai.js"></script>
    <script type="text/javascript">
        $.chuncai();
    </script>
</body>
</html>

If the name “Chuncai” is uncomfortable, the function name can be renamed.