Technical Details

ES5 compatibility, e-ink optimizations, localStorage, and Kindle integration

KWordle is designed to run on Kindle e-readers, which have unique technical requirements. This page covers the key technical implementation details.

ES5 JavaScript Compatibility

KWordle uses ES5 JavaScript for maximum compatibility with older Kindle models running WebKit-based browsers from 2011-2015.

Why ES5?

Older Kindle models (5.6.1.1 and earlier) run WebKit browsers that don’t support:

• Arrow functions (() => {})
• let and const declarations
• Template literals
• Destructuring
• Classes
• Promises and async/await

ES5 Patterns Used

Variable declarations use var instead of let/const:

var gameState = {
  targetWord: "",
  currentAttempt: 0,
  // ...
};

Object constants instead of enums:

const states = {
  empty: 0,
  filled: 1,
  correct: 2,
  present: 3,
  absent: 4,
  unused: 5
};

Traditional function syntax:

function initGame() {
  log("Initializing KWordle game...");
  // ...
}

Traditional for loops instead of array methods:

for (var i = 0; i < gameState.maxAttempts; i++) {
  var row = [];
  for (var j = 0; j < gameState.wordLength; j++) {
    row.push({
      letter: "",
      state: states.empty
    });
  }
  gameState.letterGrid.push(row);
}

Polyfills

The application includes js/polyfill.min.js to provide modern JavaScript features:

<script src="js/polyfill.min.js"></script>

This polyfill adds support for:

• Array.prototype.indexOf
• Array.prototype.forEach
• String.prototype.trim
• Object.keys
• JSON.parse and JSON.stringify

E-ink Display Optimizations

Kindle’s e-ink displays are black and white with limited refresh rates. KWordle is optimized for this:

Grayscale Color Scheme

.grid-cell.correct {
  border: 2px solid #888;
  background-color: #777777; /* Dark gray for correct */
}

.grid-cell.present {
  border: 2px solid #888;
  background-color: #dddddd; /* Light gray for present */
}

.grid-cell.absent {
  border: 2px solid #888;
  background-color: #ffffff; /* White for absent */
}

Visual Indicators

Symbols provide additional clarity beyond color:

if (cell.state === states.correct) {
  // Right place - filled square
  cellDiv.innerHTML = cell.letter + "<span class='indicator correct-indicator'>■</span>";
} else if (cell.state === states.present) {
  // Wrong place - empty square
  cellDiv.innerHTML = cell.letter + "<span class='indicator present-indicator'>□</span>";
}

The indicator key is always visible:

keyDiv.innerHTML = '<span>■ = Correct spot</span> <span>□ = Wrong spot</span> <span>× = Not in word</span>';

Contrast and Readability

body {
  background-color: #f5f5f5;
  -webkit-user-select: none; /* Prevent text selection */
  user-select: none;
  max-width: 700px;
}

.grid-cell {
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #d3d6da; /* High contrast borders */
}

Minimal Animations

No animations or transitions are used to avoid e-ink ghosting and slow refresh artifacts.

localStorage Usage

KWordle uses localStorage to persist game statistics across sessions.

Storage Structure

{
  "kwordle-stats": {
    "gamesPlayed": 0,
    "gamesWon": 0,
    "currentStreak": 0,
    "maxStreak": 0,
    "guessDistribution": [0, 0, 0, 0, 0, 0]
  }
}

Storage Quota

The app requests 25MB of localStorage in config.xml:73:

<kindle:asset key="LocalStorageQuota" value="26214400" />

Reading and Writing Statistics

function loadStatistics() {
  var stats = localStorage.getItem("kwordle-stats");
  if (stats) {
    return JSON.parse(stats);
  } else {
    return {
      gamesPlayed: 0,
      gamesWon: 0,
      currentStreak: 0,
      maxStreak: 0,
      guessDistribution: [0, 0, 0, 0, 0, 0]
    };
  }
}

function saveStatistics(stats) {
  localStorage.setItem("kwordle-stats", JSON.stringify(stats));
}

Statistics Update Logic

function updateStatistics(won) {
  var stats = loadStatistics();
  stats.gamesPlayed++;
  
  if (won) {
    stats.gamesWon++;
    stats.currentStreak++;
    stats.guessDistribution[gameState.currentAttempt - 1]++;
    
    if (stats.currentStreak > stats.maxStreak) {
      stats.maxStreak = stats.currentStreak;
    }
  } else {
    stats.currentStreak = 0;
  }
  
  saveStatistics(stats);
}

Chromebar Integration

KWordle integrates with Kindle’s Chromebar UI system to provide native navigation.

Configuration

The Chromebar is configured in index.html:14-52:

var chromebar = {
  "appId": "xyz.kurizu.kwordle",
  "topNavBar": {
    "template": "title",
    "title": "KWordle",
    "buttons": [
      {
        "id": "KPP_MORE",
        "state": "enabled",
        "handling": "system"
      },
      {
        "id": "KPP_CLOSE",
        "state": "enabled",
        "handling": "system"
      }
    ],
  },
  "systemMenu": {
    "clientParams": {
      "profile": {
        "name": "default",
        "items": [
          {
            "id": "KWORDLE_RELOAD",
            "state": "enabled",
            "handling": "notifyApp",
            "label": "Reload",
            "position": 0
          }
        ],
        "selectionMode": "none",
        "closeOnUse": true
      }
    }
  }
};
window.kindle.messaging.sendMessage("com.lab126.chromebar", "configureChrome", chromebar);

Menu Event Handling

window.kindle.appmgr.ongo = function (ctx) {
  update();
  window.kindle.messaging.receiveMessage("systemMenuItemSelected", function (type, id) {
    switch (id) {
      case "KWORDLE_RELOAD":
        window.location.reload();
    };
  });
};

This adds a “Reload” option to the system menu that refreshes the app.

Kindle Widget Configuration

The config.xml file defines the app as a Kindle widget:

App Identity

<widget id="xyz.kurizu.kwordle" version="1.0" viewmodes="application" 
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:kindle="http://kindle.amazon.com/ns/widget-extensions">
  <name xml:lang="en">KWordle</name>
  <description xml:lang="en">KWordle</description>
  <content src="index.html" />
</widget>

Permissions

<kindle:permissions>
  <kindle:permission name="local-port-access" />
</kindle:permissions>

Gesture Support

<kindle:gestures>
  <kindle:param name="tap" value="yes" properties="fire_on_tap:1 max_updown_delta:0" />
  <kindle:param name="swipe" value="yes" />
</kindle:gestures>

Messaging Integration

<kindle:messaging>
  <kindle:app name="com.lab126.pillow" value="yes" />
  <kindle:app name="com.lab126.chromebar" value="yes" />
  <kindle:app name="com.lab126.readnow" value="yes" />
</kindle:messaging>

This allows the app to communicate with Kindle’s system components.

Browser Compatibility

KWordle targets:

• Kindle firmware 5.6.1.1 and older (legacy builds)
• Kindle firmware 5.7.0 and newer (modern builds)
• WebKit-based browsers from 2011-2024

The app is tested on:

• Kindle Paperwhite (all generations)
• Kindle Basic
• Kindle Oasis
• Desktop browsers (for development)