Poi Plugin Battle Replay

How it started

My friend John was deep into Poi — an Electron-based browser built specifically for playing KanColle, the Japanese naval browser game. Poi has a plugin system, and I got interested in building something for it. The result was a battle replay plugin that captures battle API responses as they happen, stores them, and lets you replay them later through KC3Kai's replay viewer.

I still update this one occasionally. The i18n support covers English, Chinese (zh-CN), and Japanese (ja-JP), which reflects where the user base actually is. I can't get a precise read on the demographics from the Discord, but the plugin sees real use across all three language groups.

Electron is a genuinely interesting piece of technology — the idea that you can build a full desktop application with web technologies is one of those things that still feels a little strange in practice. The tradeoff is that the web ecosystem moves fast enough that maintaining an Electron app over years means chasing dependency updates that had nothing to do with your actual feature work. This plugin is a good example of that.

Architecture

Component	Purpose	Key Features
`converter.js`	Data format conversion	Poi to KC3Kai format translation, fleet data processing
`steganography.js`	Data encoding	Image-based data storage, encode/decode battle records
`generateImage.js`	Visual data generation	Battle replay image creation
`index.html`	User interface	Battle replay viewer, data management
`preload.js`	Electron integration	Browser window management, API communication

Battle data is captured from KanColle's API responses, GZIP compressed, and stored. The steganography module encodes battle records into image files, which is an unusual storage choice but works well for sharing replays — you can pass around an image that contains all the data needed to reconstruct the battle. The converter handles translating Poi's battle data format into the KC3Kai format that the replay viewer understands.

Usage

Installation NPM

# Install through Poi's plugin manager
npm install poi-plugin-sunny-replay

# Or clone directly
git clone https://github.com/Aravind-Sundararajan/poi-plugin-battle-replay.git

# Enable in Poi: Settings > Plugin > Sunny's Battle Replay

Battle data conversion JavaScript

var converter = require("./converter");

var battleJSON = JSON.parse(content);
var outputData = converter.convert(battleJSON);

var replayData = {
    "sortie_id": 1,
    "battles": [outputData],
    "fleet": fleetData
};

Steganographic encoding JavaScript

var steganography = require("./steganography");

var encodedImage = steganography.encode(
    battleData,
    baseImage,
    { "t": 3, "threshold": 1, "codeUnitSize": 16 }
);

var extractedData = steganography.decode(encodedImage);

Technical details

Plugin config JSON

{
  "poiPlugin": {
    "title": "Sunny's Battle Replay",
    "description": "Show battle replay",
    "icon": "fa/video-camera",
    "priority": 12
  },
  "windowOptions": {
    "width": 1600,
    "height": 900
  }
}

Stack: Electron, Node.js, React (v16.12.0), jQuery, Lodash, i18n-2, zlib for compression. The i18n setup covers en-US, zh-CN, and ja-JP.