uo spellsim

by Anthony Weber

HTML

<div id="buttons"></div>
<hr>
<div id="output"></div>

CSS

.selected {
  background-color: #bc4;
}

#buttons {
  display: flex;
  text-align: center;
  width: 100%;
}
#buttons > div {
  padding-left: 6px;
}

JavaScript

//             0      1      2       3      4       5       6      7       8      9     10      11      12
//             13     14     15      16     17      18     19      20      21     22    23      24      25
let words = [ 'an', 'bal', 'corp', 'des',  'ex',  'flam', 'grav', 'hur',  'in', 'jux', 'kal',  'lor', 'mani',
             'nox', 'ort', 'por', 'quas', 'rel', 'sanct',  'tym', 'uus', 'vas', 'wis', 'xen', 'ylem', 'zu']
let spells = [
  // First Circle
  {spell: 'clumsy', words: [20, 9]},
  {spell: 'create food', words: [8, 12, 24]},
  {spell: 'feeblemind', words: [17, 22]},
  {spell: 'heal', words: [8, 12]},
  {spell: 'magic arrow', words: [8, 15, 24]},
  {spell: 'nightsight', words: [8, 11]},
  {spell: 'reactive armor', words: [5, 18]},
  {spell: 'weaken', words: [3, 12]},

  // Second Circle
  {spell: 'agility', words: [4, 20]},
  {spell: 'cunning', words: [20, 22]},
  {spell: 'cure', words: [0, 13]},
  {spell: 'harm', words: [0, 12]},
  {spell: 'magic trap', words: [8, 9]},
  {spell: 'remove trap', words: [0, 9]},
  {spell: 'protection', words: [20, 18]},
  {spell: 'strength', words: [20, 12]},
  
  // Third Circle
  {spell: 'bless', words: [17, 18]},
  {spell: 'fireball', words: [21, 5]},
  {spell: 'magic lock', words: [0, 15]},
  {spell: 'poison', words: [8, 13]},
  {spell: 'telekinesis', words: [14, 15, 24]},
  {spell: 'teleport', words: [17, 15]},
  {spell: 'unlock', words: [4, 15]},
  {spell: 'wall of stone', words: [8, 18, 24]},
  // Fourth Circle
  {spell: 'arch cure', words: [21, 0, 13]},
  {spell: 'arch protection', words: [21, 20, 18]},
  {spell: 'curse', words: [3, 18]},
  {spell: 'fire field', words: [8, 5, 6]},
  {spell: 'greater heal', words: [21, 8, 12]},
  {spell: 'lightning', words: [15, 14, 6]},
  {spell: 'mana drain', words: [14, 17]},
  {spell: 'recall', words: [10, 14, 15]},
  
  // Fifth Circle
  {spell: 'blade spirits', words: [8, 9, 7, 24]},
  {spell: 'dispel field', words: [0,...