<div id="card" class="front" onclick="next(this)">start</div>

<div id="options"></div>

<script type="text/javascript">

  const tp = {
    /* a: { def: `interjection: ah, ha, uh, oh, ooh, aw, well (emotion word)`, sign: `flat hand at side of chin, palm facing left` }, */
    /* e: { def: `seperator: (introduces a direct object)`, sign: `flat hand in front of chest, palm facing down` }, */
    /* li: { def: `seperator: "(between any subject except mi and sina and its verb; also used to introduce a new verb for the same subject)"`, sign: `flat hand in front of chest, palm facing left` }, */
    /* o: { def: `sep: O (vocative or imperative)<br/>interjection: hey! (calling somebody's attention)`, sign: `wiggling hand in front of chest, palm facing down` }, */
    akesi: { def: `noun: non-cute animal, reptile, amphibian`, sign: `2 hand at left elbow, palm facing back` },
    ala: { def: `mod: no, not, none, un-<br/>noun: nothing, negation, zero<br/>interjection: no!`, sign: `hat hand at left shoulder, palm facing down` },
    alasa: { def: `verb (t): gather, hunt, forage`, sign: `1 hand at left shoulder, palm facing back` },
    ale: { def: `noun: everything, anything, life, universe<br/>mod: all, every, complete, whole`, sign: `wiggling hand in front of chest, palm facing forward (both hands)` },
    ali: { def: `noun: everything, anything, life, universe<br/>mod: all, every, complete, whole`, sign: `wiggling hand in front of chest, palm facing forward (both hands)` },
    anpa: { def: `noun: bottom, lower part, under, below, floor, beneath<br/>mod: low, lower, bottom, down, lowly, humble, dependant`, sign: `bent hand in front of chest, palm facing down` },
    ante: { def: `noun: difference<br/>mod: different<br/>conjunction: otherwise, or else<br/>verb (t): change, alter, modify`, sign: `bent hand on top of left fist, palm facing left` },
    anu: { def: `conjunction: or`, sign: `L hand in front of chest, palm facing down` },
    awen: { def: `verb (i): stay, wait, remain<br/>verb (t): keep<br/>mod: remaining, stationary, permanent, sedentary`, sign: `L hand at left shoulder, palm facing back` },
    en: { def: `conjunction: and (used to coordinate head nouns)`, sign: `L hand on top of left fist, palm facing down` },
    esun: { def: `noun: market, shop, business, trading, selling, buying`, sign: `bent hand in front of chest, palm facing up (both hands)` },
    ijo: { def: `noun: thing, something, stuff, anything, object<br/>mod: of something<br/>verb (t): objectify`, sign: `thumb-fist in front of chest, palm facing down, thumb pointing left` },
    ike: { def: `mod: bad, negative, wrong, evil, overly complex, (figuratively) unhealthy<br/>interjection: oh dear! woe! alas!<br/>noun: negativity, badness, evil<br/>verb (t): to make bad, to worsen, to have a negative effect upon<br/>verb (i): to be bad, to suck`, sign: `thumb-fist in front of chest, palm facing forward` },
    ilo: { def: `noun: tool, device, machine, thing used for a specific purpose`, sign: `thumb-fist on top of left fist, palm facing up` },
    insa: { def: `noun: inside, inner world, centre, stomach<br/>mod: inner, internal`, sign: `L hand on stomach, palm facing back` },
    jaki: { def: `mod: dirty, gross, filthy<br/>noun: dirt, pollution, garbage, filth<br/>verb (t): pollute, dirty<br/>interjection: ew! yuck!`, sign: `thumb-fist at side of chin, palm facing forward` },
    jan: { def: `noun: person, people, human, being, somebody, anybody<br/>mod: human, somebody's, personal, of people<br/>verb (t): personify, humanize, personalize`, sign: `2 hand at left shoulder, palm facing back` },
    jelo: { def: `mod: yellow, light green`, sign: `F hand on stomach, palm facing down` },
    jo: { def: `verb (t): have, contain<br/>noun: having<br/>kama: receive, get, take, obtain`, sign: `bent hand on top of left fist, palm facing up` },
    kala: { def: `noun: fish, sea creature`, sign: `flat hand at left elbow, palm facing back` },
    kalama: { def: `noun: sound, noise, voice<br/>verb (i): make noise<br/>verb (t): sound, ring, play (an instrument)`, sign: `wiggling hand at side of chin, palm facing left` },
    kama: { def: `verb (i): come, become, arrive, happen, pursue actions to arrive to (a certain state), manage to, start to<br/>noun: event, happening, chance, arrival, beginning<br/>mod: coming, future<br/>verb (t): bring about, summon`, sign: `bent hand in front of chest, palm facing back` },
    kasi: { def: `noun: plant, leaf, herb, tree, wood`, sign: `F hand on top of left fist, palm facing down` },
    ken: { def: `verb (i): can, is able to, is allowed to, may, is possible<br/>noun: possibility, ability, power to do things, permission<br/>verb (t): make possible, enable, allow, permit<br/>context: it is possible that`, sign: `thumb-fist at left shoulder, palm facing back` },
    kepeken: { def: `verb (t): use<br/>preposition: with`, sign: `L hand on top of left fist, palm facing left` },
    kili: { def: `noun: fruit, vegetable, mushroom`, sign: `thumb-fist at side of chin, palm facing left` },
    kin: { def: `mod: also, too, even, indeed (emphasizes the word(s) before it)`, sign: `` },
    kipisi: { def: `noun: part, partition<br/>verb (t): split, cut, divide`, sign: `` },
    kiwen: { def: `mod: hard, solid, stone-like, made of stone or metal<br/>noun: hard thing, rock, stone, metal, mineral, clay`, sign: `thumb-fist on top of left fist, palm facing down` },
    ko: { def: `noun: semi-solid or squishy substance, e.g. paste, powder, gum`, sign: `bent hand on stomach, palm facing down` },
    kon: { def: `noun: air, wind, smell, soul<br/>mod: air-like, ethereal, gaseous`, sign: `wiggling hand in front of chest, palm facing left` },
    kule: { def: `noun: colour, paint<br/>mod: colourful<br/>verb (t): colour, paint`, sign: `F hand in front of chest, palm facing left` },
    kulupu: { def: `noun: group, community, society, company, people<br/>mod: communal, shared, public, of the society`, sign: `2 hand at left shoulder, palm facing down` },
    kute: { def: `verb (t): listen, hear<br/>mod: auditory, hearing`, sign: `thumb-fist at side of forehead, palm facing left` },
    la: { def: `seperator: (between adverb or phrase of context and sentence)`, sign: `bent hand in front of chest, palm facing left` },
    lape: { def: `noun: sleep<br/>verb (i): sleep, rest<br/>mod: sleeping, of sleep`, sign: `flat hand at side of forehead, palm facing left` },
    laso: { def: `mod: blue, blue-green`, sign: `F hand at left elbow, palm facing down` },
    lawa: { def: `noun: head, mind<br/>mod: main, leading, in charge<br/>verb (t): lead, control, rule, steer`, sign: `flat hand at side of forehead, palm facing forward` },
    len: { def: `noun: clothing, cloth, fabric`, sign: `bent hand at left shoulder, palm facing back` },
    lete: { def: `noun: cold<br/>mod: cold, uncooked<br/>verb (t): cool down, chill`, sign: `wiggling hand at left elbow, palm facing down` },
    lili: { def: `mod: small, little, young, a bit, short, few, less<br/>verb (t): reduce, shorten, shrink, lessen`, sign: `2 hand at side of chin, palm facing forward` },
    linja: { def: `noun: long, very thin, floppy thing, e.g. string, rope, hair, thread, cord, chain`, sign: `1 hand at side of forehead, palm facing left` },
    lipu: { def: `noun: flat and bendable thing, e.g. paper, card, ticket`, sign: `flat hand on top of left fist, palm facing up` },
    loje: { def: `mod: red`, sign: `F hand at side of chin, palm facing left` },
    lon: { def: `preposition: be (located) in/at/on<br/>verb (i): be there, be present, be real/true, exist, be awake`, sign: `1 hand on top of left fist, palm facing down` },
    luka: { def: `noun: hand, arm`, sign: `flat hand in front of chest, palm facing forward` },
    lukin: { def: `verb (t): see, look at, watch, read<br/>verb (i): look, watch out, pay attention<br/>mod: visual(ly)`, sign: `2 hand in front of chest, palm facing down` },
    lupa: { def: `noun: hole, orifice, window, door`, sign: `O hand in front of chest, palm facing left` },
    ma: { def: `noun: land, earth, country, (outdoor) area`, sign: `flat hand in front of chest, palm facing down (both hands)` },
    mama: { def: `noun: parent, mother, father<br/>mod: of the parent, parental, maternal, fatherly`, sign: `2 hand on stomach, palm facing down` },
    mani: { def: `noun: money, material wealth, currency, dollar, capital`, sign: `thumb-fist at left elbow, palm facing back` },
    meli: { def: `noun: woman, female, girl, wife, girlfriend<br/>mod: female, feminine, womanly`, sign: `2 hand on stomach, palm facing back` },
    mi: { def: `noun: I, we<br/>mod: my, our`, sign: `thumb-fist in front of chest, palm facing, down, thumb pointing back` },
    mije: { def: `noun: man, male, boy, husband, boyfriend<br/>mod: male, masculine, manly`, sign: `2 hand on top of left fist, palm facing left` },
    moku: { def: `noun: food, meal<br/>verb (t): eat, drink, swallow, ingest, consume`, sign: `O hand at side of chin, palm facing back` },
    moli: { def: `noun: death<br/>verb (i): die, be dead<br/>verb (t): kill<br/>mod: dead, deadly, fatal`, sign: `L hand at side of forehead, palm facing back` },
    monsi: { def: `noun: back, rear end, butt, behind<br/>mod: back, rear`, sign: `L hand in front of chest, palm facing forward` },
    mu: { def: `interjection: woof! meow! moo! etc. (animal noise)`, sign: `wiggling hand at side of chin, palm facing down` },
    mun: { def: `noun: moon<br/>mod: lunar`, sign: `O hand at side of forehead, palm facing left` },
    musi: { def: `noun: fun, playing, game, recreation, art, entertainment<br/>mod: artful, fun, recreational<br/>verb (i): play, have fun<br/>verb (t): amuse, entertain`, sign: `wiggling hand at side of forehead, palm facing left` },
    mute: { def: `mod: many, very, much, several, a lot, abundant, numerous, more<br/>noun: amount, quantity<br/>verb (t): make many or much`, sign: `flat hand in front of chest, palm facing forward (both hands)` },
    namako: { def: `noun: food additive, accessory, something extra<br/>verb (t): season, embellish, stimulate`, sign: `` },
    nanpa: { def: `noun: number<br/>other: -th (ordinal numbers)`, sign: `2 hand in front of chest, palm facing back` },
    nasa: { def: `mod: silly, crazy, foolish, drunk, strange, stupid, weird<br/>verb (t): drive crazy, make weird`, sign: `thumb-fist at side of forehead, palm facing forward` },
    nasin: { def: `noun: way, manner, custom, road, path, doctrine, system, method`, sign: `flat hand in front of chest, palm facing left (both hands)` },
    nena: { def: `noun: bump, nose, hill, mountain, button`, sign: `bent hand on top of left fist, palm facing down` },
    ni: { def: `mod: this, that`, sign: `L hand at side of chin, palm facing back` },
    nimi: { def: `noun: word, name`, sign: `nothing under left slanted forearm` },
    noka: { def: `noun: leg, foot`, sign: `flat hand in front of chest, palm facing back` },
    oko: { def: `noun: eye`, sign: `` },
    olin: { def: `noun: love<br/>mod: love<br/>verb (t): to love (a person)`, sign: `wiggling hand on stomach, palm facing back` },
    ona: { def: `noun: she, he, it, they<br/>mod: her, his, its, their`, sign: `1 hand in front of chest, index finger pointing left` },
    open: { def: `verb (t): open, turn on`, sign: `O hand at left shoulder, palm facing down` },
    pakala: { def: `noun: blunder, accident, mistake, destruction, damage, breaking<br/>verb (t): screw up, fuck up, botch, ruin, break, hurt, injure, damage, spoil, ruin<br/>verb (i): screw up, fall apart, break<br/>interjection: damn! fuck!`, sign: `thumb-fist on top of left fist, palm facing forward` },
    pali: { def: `noun: activity, work, deed, project<br/>mod: active, work-related, operating, working<br/>verb (t): do, make, build, create<br/>verb (i): act, work, function`, sign: `thumb-fist on top of left fist, palm facing left` },
    palisa: { def: `noun: long, mostly hard object, e.g. rod, stick, branch`, sign: `O hand on top of left fist, palm facing left` },
    pan: { def: `noun: grain, cereal`, sign: `F hand at side of chin, palm facing back` },
    pana: { def: `verb (t): give, put, send, place, release, emit, cause<br/>noun: giving, transfer, exchange`, sign: `wiggling hand in front of chest, palm facing up` },
    pi: { def: `sep: of, belonging to`, sign: `O hand in front of chest, palm facing forward` },
    pilin: { def: `noun: feelings, emotion, heart<br/>verb (i): feel<br/>verb (t): feel, think, sense, touch`, sign: `F hand on stomach, palm facing back` },
    pimeja: { def: `mod: black, dark<br/>noun: darkness, shadows<br/>verb (t): darken`, sign: `F hand at left shoulder, palm facing down` },
    pini: { def: `noun: end, tip<br/>mod: completed, finished, past, done, ago<br/>verb (t): finish, close, end, turn off`, sign: `o hand at left shoulder, palm facing up` },
    pipi: { def: `noun: bug, insect, spider`, sign: `1 hand at left elbow, palm facing back` },
    poka: { def: `noun: side, hip, next to<br/>preposition: in the accompaniment of, with<br/>mod: neighbouring`, sign: `L hand at left elbow, palm facing back` },
    poki: { def: `noun: container, box, bowl, cup, glass`, sign: `O hand in front of chest, palm facing down` },
    pona: { def: `noun: good, simplicity, positivity<br/>mod: good, simple, positive, nice, correct, right<br/>interjection: great! good! thanks! OK! cool! yay!<br/>verb (t): improve, fix, repair, make good`, sign: `thumb-fist in front of chest, palm facing left, thumb pointing up` },
    pu: { def: `verb (i): interact with the official toki pona book`, sign: `wiggling hand on top of left fist, palm facing up` },
    sama: { def: `mod: same, similar, equal, of equal status or position<br/>preposition: like, as, seem`, sign: `thumb-fist in front of chest, palm facing down (both hands)` },
    seli: { def: `noun: fire, warmth, heat<br/>mod: hot, warm, cooked<br/>verb (t): heat, warm up, cook`, sign: `wiggling hand at left shoulder, palm facing down` },
    selo: { def: `noun: outside, surface, skin, shell, bark, shape, peel`, sign: `F hand at left elbow, palm facing back` },
    seme: { def: `other: what, which, wh- (question word)`, sign: `flat hand in front of chest, palm facing up` },
    sewi: { def: `noun: high, up, above, top, over, on<br/>mod: superior, elevated, religious, formal`, sign: `1 hand in front of chest, palm facing left, index finger pointing up` },
    sijelo: { def: `noun: body, physical state`, sign: `flat hand on stomach, palm facing back` },
    sike: { def: `noun: circle, wheel, sphere, ball, cycle<br/>mod: round, cyclical`, sign: `O hand on top of left fist, palm facing down` },
    sin: { def: `mod: new, fresh, another, more<br/>verb (t): renew, renovate, freshen`, sign: `wiggling hand on top of left fist, palm facing left` },
    sina: { def: `noun: you<br/>mod: your`, sign: `1 hand in front of chest, index finger pointing forward` },
    sinpin: { def: `noun: front, chest, torso, face, wall`, sign: `L hand in front of chest, palm facing back (both hands)` },
    sitelen: { def: `noun: picture, image<br/>verb (t): draw, write`, sign: `F hand in front of chest, palm facing left (both hands)` },
    sona: { def: `noun: knowledge, wisdom, intelligence, understanding<br/>verb (t): know, understand, know how to<br/>verb (i): know, understand<br/>kama: learn, study`, sign: `bent hand at side of forehead, palm facing left` },
    soweli: { def: `noun: animal, especially land mammal, lovable animal`, sign: `flat hand at left elbow, palm facing down` },
    suli: { def: `mod: big, tall, long, adult, important<br/>verb (t): enlarge, lengthen<br/>noun: size`, sign: `2 hand at side of forehead, palm facing forward` },
    suno: { def: `noun: sun, light`, sign: `bent hand at side of forehead, palm facing forward` },
    supa: { def: `noun: horizontal surface, e.g furniture, table, chair, pillow, floor`, sign: `flat hand in front of chest, palm facing up (both hands)` },
    suwi: { def: `noun: candy, sweet food<br/>mod: sweet, cute<br/>verb (t): sweeten`, sign: `2 hand at side of chin, palm facing left` },
    tan: { def: `preposition: from, by, because of, since<br/>noun: origin, cause`, sign: `bent hand at left elbow, palm facing back` },
    taso: { def: `mod: only, sole<br/>conjunction: but`, sign: `L hand in front of chest, palm facing down (both hands)` },
    tawa: { def: `preposition: to, in order to, towards, for, until<br/>verb (i): go to, walk, travel, move, leave<br/>noun: movement, transportation<br/>mod: moving, mobile<br/>verb (t): move, displace`, sign: `bent hand in front of chest, palm facing forward` },
    telo: { def: `noun: water, liquid, juice, sauce<br/>verb (t): water, wash with water`, sign: `wiggling hand in front of chest, palm facing down (both hands)` },
    tenpo: { def: `noun: time, period of time, moment, duration, situation`, sign: `Fhand on top of left fist, palm facing left` },
    toki: { def: `noun: language, talking, speech, communication<br/>mod: talking, verbal<br/>verb (t): say<br/>verb (i): talk, chat, communicate<br/>interjection: hello! hi!`, sign: `bent hand at side of chin, palm facing left` },
    tomo: { def: `noun: indoor constructed space, e.g. house, home, room, building<br/>mod: urban, domestic, household`, sign: `bent hand in front of chest, palm facing left (both hands)` },
    tu: { def: `mod: two<br/>noun: duo, pair<br/>verb (t): double, separate/cut/divide in two`, sign: `2 hand in front of chest, palm facing forward` },
    unpa: { def: `noun: sex, sexuality<br/>mod: erotic, sexual<br/>verb (t): have sex with, sleep with, fuck<br/>verb (i): have sex`, sign: `2 hand on top of left fist, palm facing down` },
    uta: { def: `noun: mouth<br/>mod: oral`, sign: `1 hand at side of chin, palm facing back` },
    utala: { def: `noun: conflict, disharmony, competition, fight, war, battle, attack, blow, argument, physical or verbal violence<br/>verb (t): hit, strike, attack, compete against`, sign: `thumb-fist at left shoulder, palm facing forward` },
    walo: { def: `mod: white, light (colour)<br/>noun: white thing or part, whiteness, lightness`, sign: `F hand at side of forehead, palm facing down` },
    wan: { def: `mod: one, a<br/>noun: unit, element, particle, part, piece<br/>verb (t): unite, make one`, sign: `1 hand in front of chest, palm facing forward, index finger pointing up` },
    waso: { def: `noun: bird, winged animal`, sign: `O hand at side of chin, palm facing forward` },
    wawa: { def: `noun: energy, strength, power<br/>mod: energetic, strong, fierce, intense, sure, confident<br/>verb (t): strengthen, energize, empower`, sign: `thumb-fist on stomach, palm facing back` },
    weka: { def: `mod: away, absent, missing<br/>noun: absence<br/>verb (t): throw away, remove, get rid of`, sign: `O hand at left elbow, palm facing down` },
    wile: { def: `verb (t): to want, need, wish, have to, must, will, should<br/>noun: desire, need, will<br/>mod: necessary`, sign: `O hand on stomach, palm facing up` },
  };
</script>

<script type="text/javascript">

  const categories = {
    'Basics': [`jaki`,`ko`,`lape`,`len`,`moku`,`pona`,`telo`,`tomo`],
    'Descriptions': [`kalama`,`lete`,`lili`,`musi`,`seli`,`suli`,`supa`],
    'The World': [`jan`,`ma`,`kasi`,`suwi`,`pan`,`kili`,`akesi`,`soweli`,`kala`,`waso`,`pipi`],
    'Names, Shapes, and Colors': [`sike`,`lipu`,`linja`,`palisa`,`kiwen`,`jelo`,`loje`,`laso`,`walo`,`pimeja`,`suno`],
    'Body Parts': [`insa`,`kute`,`lawa`,`luka`,`monsi`,`nena`,`noka`,`oko`,`poka`,`selo`,`sewi`,`sinpin`,`uta`],
    'Commands and Desires': [`seme`,`wile`,`tawa`,`weka`,`awen`,`pini`,`ala`,`ike`],
    'More': [`esun`,`mute`,`nasa`,`pakala`,`poki`,`sitelen`],
    'Beyond': [`alasa`,`ale`,`ali`,`anpa`,`ante`,`anu`,`en`,`ijo`,`ilo`,`jo`,`kama`,`ken`,`kepeken`,`kin`,`kipisi`,`kiwen`,`kon`,`kule`,`kulupu`,`la`,`laso`,`lon`,`lukin`,`lupa`,`mama`,`mani`,`meli`,`mi`,`mije`,`moli`,`mu`,`mun`,`namako`,`nanpa`,`nasin`,`ni`,`nimi`,`olin`,`ona`,`open`,`pali`,`pan`,`pana`,`pi`,`pilin`,`pini`,`pu`,`sama`,`sewi`,`sin`,`sina`,`sona`,`suno`,`tan`,`taso`,`tenpo`,`toki`,`tu`,`unpa`,`utala`,`wan`,`wawa`],
  };

  let isFront = true;
  let cardIndex = 0;
  let cards = categories['Basics'].flatMap(word => [`sign`,`def`].map(type => ({ type, word })));
  cards.sort(() => Math.random() - 0.5);

  function next(element) {
    if (!cards.length) return;
    const card = cards?.[cardIndex % cards.length];
    if (!card) return;
    const tp_ = tp?.[card.word];
    if (!tp_) return;
    if (isFront) {
      element.innerHTML = `
        <h2 class="word">${card.word}</h2>
        <p  class="sign">${tp_.sign }</p >
        <p  class="def" >${tp_.def  }</p >
      `;
      cardIndex = (cardIndex + 1) % cards.length;
    } else {
      element.innerHTML = ``;
      if (card.type === `sign`) element.innerHTML += `<p class="sign">${tp_.sign }</p>`;
      if (card.type === `def` ) element.innerHTML += `<p class="def" >${tp_.def  }</p>`;
    }
    isFront = !isFront;
  }

  next(document.getElementById('card'));

  const options = document.getElementById(`options`);
  for (const kv of Object.entries(categories)) {
    const id = kv[0].toLowerCase().replace(/[^a-z]/g,'').trim().replace(/ /g,`-`);
    options.innerHTML += `
      <section>
        <h2><input type="checkbox" id="${id}" class="category" ${kv[0] === 'Basics' ? `checked` : ``}><label for="${id}"> ${kv[0]}</label></h2>
        <p>${kv[1].map(word => `<label><input type="checkbox" id="${word}" class="word" ${kv[0] === 'Basics' ? `checked` : ``}> ${word}</label>`).join(` `)}</p>
      </section>
    `;
  }

  for (const category of document.getElementsByClassName(`category`)) {
    const words = [...category.parentNode.parentNode.getElementsByClassName(`word`)];
    category.onchange = function() {
      for (const word of words)
        word.checked = this.checked;
      isFront = false;
      cardIndex = 0;
      cards = words.filter(w => w.checked).flatMap(w => [`sign`,`def`].map(type => ({ type, word: w.id })));
      cards.sort(() => Math.random() - 0.5);
      next(document.getElementById('card'));
    };
    for (const word of words)
      word.onchange = function() {
        category.checked = words.some(w => w.checked);
        category.indeterminate = words.some(w => w.checked) && !words.every(w => w.checked);
        isFront = false;
        cardIndex = 0;
        cards = words.filter(w => w.checked).flatMap(w => [`sign`,`def`].map(type => ({ type, word: w.id })));
        cards.sort(() => Math.random() - 0.5);
        next(document.getElementById('card'));
      };
  }

</script>
