MASTERMIND

kwietnia 06, 2019

Klasyka gier na weekend (jej premiera odbyła się w 1972). / Classic games for the weekend (its premiere took place in 1972).

<main></main>
  <script>
var possibleCodes = [];
var slotCount = 4;
var colourCount = 6;
var init = function init(slots, colours) {
  if (slots < 1) {
    throw new Error('Must have at least 1 slot');
  }
  if (colours < 2) {
    throw new Error('Must have at least 2 colours');
  }
  var possibilities = Math.pow(colours, slots);
  if (possibilities > 9000000) {
    throw new Error('Might have too many possibilities for this engine');
  }
  slotCount = slots;
  colourCount = colours;
  possibleCodes = [];
  var currentCode = [];
  for (var i = 0; i < slots; i++) {
    currentCode.push(0);
  }
  for (var left = possibilities; left > 0; left--) {
    possibleCodes.push(currentCode.slice(0));
    var slotsMaxed = 0;
    while (currentCode[slotsMaxed] === colours - 1) {
      slotsMaxed += 1;
    }
    if (slotsMaxed > 0) {
      for (var _i = 0; _i < slotsMaxed; _i++) {
        currentCode[_i] = 0;
      }
      currentCode[slotsMaxed] += 1;
    } else {
      currentCode[0] += 1;
    }
  }
};
var diff = function diff(guess, code) {
  if (guess.length !== slotCount) {
    throw new Error('Guess and code must be the same length, but weren\'t:\n      ' + guess.length + ' !== ' + slotCount);
  }
  var exactCount = 0;
  var inexactCount = 0;
  var extraColours = [];
  var extraPositions = [];
  for (var i = 0; i < colourCount; i++) {
    extraColours[i] = 0;
  }
  for (var _i2 = 0; _i2 < guess.length; _i2++) {
    var colour = code[_i2];
    if (guess[_i2] === colour) {
      exactCount += 1;
    } else {
      extraColours[colour] += 1;
      extraPositions.push(_i2);
    }
  }
  extraPositions.forEach(function (extraPosition) {
    var guessColour = guess[extraPosition];
    if (guessColour > colourCount - 1) {
      throw new Error('Guess contains colour beyond maximum: ' + guessColour + ' > ' + (colourCount - 1));
    }
    if (extraColours[guessColour] > 0) {
      inexactCount += 1;
      extraColours[guessColour] -= 1;
    }
  });
  return [exactCount, inexactCount, slotCount - exactCount - inexactCount];
};
var guess = function guess(newGuess) {
  var narrowDownPossibilities = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

for ( var i = 0; i < handlers.length; i += 1 ) {
  handlers[i].call( this, data );
 }
}
function observe ( key, callback, options ) {
 var group = ( options && options.defer ) ? this._observers.pre : this._observers.post;

( group[ key ] || ( group[ key ] = [] ) ).push( callback );
 if ( !options || options.init !== false ) {
  callback.__calling = true;
  callback.call( this, this._state[ key ] );
  callback.__calling = false;
 }
 return {
  cancel: function () {
   var index = group[ key ].indexOf( callback );
   if ( ~index ) group[ key ].splice( index, 1 );
  }
 };
}
function on ( eventName, handler ) {
 var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] );
 handlers.push( handler );
 return {
  cancel: function () {
   var index = handlers.indexOf( handler );
   if ( ~index ) handlers.splice( index, 1 );
  }
 };
}
function set ( newState ) {
 this._set( newState );
 ( this._root || this )._flush();
}
function _flush () {
 if ( !this._renderHooks ) return;

while ( this._renderHooks.length ) {
  var hook = this._renderHooks.pop();
  hook.fn.call( hook.context );
 }
}
function noop () {}
function dispatchObservers ( component, group, newState, oldState ) {
 for ( var key in group ) {
  if ( !( key in newState ) ) continue;

var newValue = newState[ key ];
  var oldValue = oldState[ key ];

if ( newValue === oldValue && typeof newValue !== 'object' ) continue;

var callbacks = group[ key ];
  if ( !callbacks ) continue;

for ( var i = 0; i < callbacks.length; i += 1 ) {
   var callback = callbacks[i];
   if ( callback.__calling ) continue;

callback.__calling = true;
   callback.call( component, newValue, oldValue );
   callback.__calling = false;
  }
 }
}
let addedCss$2 = false;
function addCss$2 () {
 var style = createElement( 'style' );
 style.textContent = "\n    [svelte-2003052116].circle, [svelte-2003052116] .circle {\n        width: 20px;\n        height: 20px;\n        margin-left: 2px;\n        border-radius: 10px;\n        display: inline-block;\n        box-shadow:1px 1px 2px #000;\n        vertical-align: middle;\n    }\n    \n    [svelte-2003052116].circle.colour0, [svelte-2003052116] .circle.colour0 { background-color:#000000; }\n    [svelte-2003052116].circle.colour1, [svelte-2003052116] .circle.colour1 { background-color:#9D9D9D; }\n    [svelte-2003052116].circle.colour2, [svelte-2003052116] .circle.colour2 { background-color:#FFFFFF; }\n    [svelte-2003052116].circle.colour3, [svelte-2003052116] .circle.colour3 { background-color:#BE2633; }\n    [svelte-2003052116].circle.colour4, [svelte-2003052116] .circle.colour4 { background-color:#E06F8B; }\n    [svelte-2003052116].circle.colour5, [svelte-2003052116] .circle.colour5 { background-color:#493C2B; }\n    [svelte-2003052116].circle.colour6, [svelte-2003052116] .circle.colour6 { background-color:#A46422; }\n    [svelte-2003052116].circle.colour7, [svelte-2003052116] .circle.colour7 { background-color:#EB8931; }\n    [svelte-2003052116].circle.colour8, [svelte-2003052116] .circle.colour8 { background-color:#F7E26B; }\n    [svelte-2003052116].circle.colour9, [svelte-2003052116] .circle.colour9 { background-color:#2F484E; }\n    [svelte-2003052116].circle.colour10, [svelte-2003052116] .circle.colour10 { background-color:#44891A; }\n    [svelte-2003052116].circle.colour11, [svelte-2003052116] .circle.colour11 { background-color:#A3CE27; }\n    [svelte-2003052116].circle.colour12, [svelte-2003052116] .circle.colour12 { background-color:#1B2632; }\n    [svelte-2003052116].circle.colour13, [svelte-2003052116] .circle.colour13 { background-color:#005784; }\n    [svelte-2003052116].circle.colour14, [svelte-2003052116] .circle.colour14 { background-color:#31A2F2; }\n    [svelte-2003052116].circle.colour15, [svelte-2003052116] .circle.colour15 { background-color:#B2DCEF; }\n";
 appendNode( style, document.head );
 addedCss$2 = true;
}
function renderMainFragment$2 ( root, component ) {
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-2003052116', '' );
 span.className = "circle colour" + ( root.colourNumber ) + " " + ( root.next );
 return {
  mount: function ( target, anchor ) {
   insertNode( span, target, anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
  
   span.className = "circle colour" + ( root.colourNumber ) + " " + ( root.next );
  },
  teardown: function ( detach ) {
   if ( detach ) {
    detachNode( span );
   }
  }
 };
}
function Slot ( options ) {
 options = options || {};
 this._state = options.data || {};
 
 this._observers = {
  pre: Object.create( null ),
  post: Object.create( null )
 };
 this._handlers = Object.create( null );
 this._root = options._root;
 this._yield = options._yield;
 this._torndown = false;
 if ( !addedCss$2 ) addCss$2();
 this._fragment = renderMainFragment$2( this._state, this );
 if ( options.target ) this._fragment.mount( options.target, null );
}
Slot.prototype.get = get;
Slot.prototype.fire = fire;
Slot.prototype.observe = observe;
Slot.prototype.on = on;
Slot.prototype.set = set;
Slot.prototype._flush = _flush;
Slot.prototype._set = function _set ( newState ) {
 var oldState = this._state;
 this._state = Object.assign( {}, oldState, newState );
 dispatchObservers( this, this._observers.pre, newState, oldState );
 if ( this._fragment ) this._fragment.update( newState, this._state );
 dispatchObservers( this, this._observers.post, newState, oldState );
};
Slot.prototype.teardown = Slot.prototype.destroy = function destroy ( detach ) {
 this.fire( 'teardown' );
 this._fragment.teardown( detach !== false );
 this._fragment = null;
 this._state = {};
 this._torndown = true;
};
var template$1 = (function () {
  return {
    oncreate () {
      this.colourObserver = this.observe( 'colourCount', count => {
        let colour = [];
        for (let i=0; i<count; i++) {
            colour.push(i);
        }
        this.set({colour});
      });
    },
    ondestroy () {
      this.colourObserver.cancel();
    },
    data () {
      return {
        colourCount: 6,
        colour: [],
      }
    },
    components: {
      Slot,
    }
  };
}());
let addedCss$1 = false;
function addCss$1 () {
 var style = createElement( 'style' );
 style.textContent = "\n    [svelte-598590954].arrow, [svelte-598590954] .arrow {\n      padding: 6px;\n    }\n    [svelte-598590954].circle, [svelte-598590954] .circle {\n      margin-left: 0px; \n    }\n    [svelte-598590954].picker, [svelte-598590954] .picker {\n        width: 22px;\n        margin: 0px auto;\n        display: inline-block;\n    }\n    [svelte-598590954].picker button, [svelte-598590954] .picker button {\n        border: 0;\n        padding: 0;\n        background: none;\n    }\n    [svelte-598590954].circle:hover, [svelte-598590954] .circle:hover {\n        box-shadow:0 0 4px #222 inset;\n    }\n    [svelte-598590954].selected, [svelte-598590954] .selected {\n        border: 1px solid black;\n    }\n    button[svelte-598590954], [svelte-598590954] button {\n      margin-left: 2px;\n    }\n";
 appendNode( style, document.head );

addedCss$1 = true;
}
function renderMainFragment$1 ( root, component ) {
 var div = createElement( 'div' );
 setAttribute( div, 'svelte-598590954', '' );
 div.className = "picker";
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-598590954', '' );
 span.className = "arrow";
 appendNode( span, div );
 appendNode( createText( "^" ), span );
 appendNode( createText( "\n    " ), div );
 var eachBlock_anchor = createComment();
 appendNode( eachBlock_anchor, div );
 var eachBlock_value = root.colour;
 var eachBlock_iterations = [];
 
 for ( var i = 0; i < eachBlock_value.length; i += 1 ) {
  eachBlock_iterations[i] = renderEachBlock$1( root, eachBlock_value, eachBlock_value[i], i, component );
  eachBlock_iterations[i].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
 }
 return {
  mount: function ( target, anchor ) {
   insertNode( div, target, anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
   var eachBlock_value = root.colour;
   for ( var i = 0; i < eachBlock_value.length; i += 1 ) {
    if ( !eachBlock_iterations[i] ) {
     eachBlock_iterations[i] = renderEachBlock$1( root, eachBlock_value, eachBlock_value[i], i, component );
     eachBlock_iterations[i].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
    } else {
     eachBlock_iterations[i].update( changed, root, eachBlock_value, eachBlock_value[i], i );
    }
   }
   teardownEach( eachBlock_iterations, true, eachBlock_value.length );
   eachBlock_iterations.length = eachBlock_value.length;
  },
  teardown: function ( detach ) {
   teardownEach( eachBlock_iterations, false );
   if ( detach ) {
    detachNode( div );
   }
  }
 };
}
function renderEachBlock$1 ( root, eachBlock_value, colourNumber, colourNumber__index, component ) {
 var button = createElement( 'button' );
 setAttribute( button, 'svelte-598590954', '' );
 function clickHandler ( event ) {
  var eachBlock_value = this.__svelte.eachBlock_value, colourNumber__index = this.__svelte.colourNumber__index, colourNumber = eachBlock_value[colourNumber__index];
  component.fire("select", {colourNumber});
 }
 addEventListener( button, 'click', clickHandler );
 button.__svelte = {
  eachBlock_value: eachBlock_value,
  colourNumber__index: colourNumber__index
 };
 var slot_initialData = {
  colourNumber: colourNumber
 };
 var slot = new template$1.components.Slot({
  target: button,
  _root: component._root || component,
  data: slot_initialData
 });
 return {
  mount: function ( target, anchor ) {
   insertNode( button, target, anchor );
  },
  update: function ( changed, root, eachBlock_value, colourNumber, colourNumber__index ) {
   var __tmp;
   button.__svelte.eachBlock_value = eachBlock_value;
   button.__svelte.colourNumber__index = colourNumber__index;
   var slot_changes = {};
   if ( 'colour' in changed ) slot_changes.colourNumber = colourNumber;
   if ( Object.keys( slot_changes ).length ) slot.set( slot_changes );
  },
  teardown: function ( detach ) {
   removeEventListener( button, 'click', clickHandler );
   slot.destroy( false );
   if ( detach ) {
    detachNode( button );
   }
  }
 };
}
function PickerSlot ( options ) {
 options = options || {};
 this._state = Object.assign( template$1.data(), options.data );
 this._observers = {
  pre: Object.create( null ),
  post: Object.create( null )
 };
 this._handlers = Object.create( null );
 this._root = options._root;
 this._yield = options._yield;
 this._torndown = false;
 if ( !addedCss$1 ) addCss$1();
 this._renderHooks = [];
 this._fragment = renderMainFragment$1( this._state, this );
 if ( options.target ) this._fragment.mount( options.target, null );
 this._flush();
 if ( options._root ) {
  options._root._renderHooks.push({ fn: template$1.oncreate, context: this });
 } else {
  template$1.oncreate.call( this );
 }
}
PickerSlot.prototype.get = get;
PickerSlot.prototype.fire = fire;
PickerSlot.prototype.observe = observe;
PickerSlot.prototype.on = on;
PickerSlot.prototype.set = set;
PickerSlot.prototype._flush = _flush;
PickerSlot.prototype._set = function _set ( newState ) {
 var oldState = this._state;
 this._state = Object.assign( {}, oldState, newState );
 dispatchObservers( this, this._observers.pre, newState, oldState );
 if ( this._fragment ) this._fragment.update( newState, this._state );
 dispatchObservers( this, this._observers.post, newState, oldState );
 this._flush();
};
PickerSlot.prototype.teardown = PickerSlot.prototype.destroy = function destroy ( detach ) {
 this.fire( 'teardown' );
template$1.ondestroy.call( this );
 this._fragment.teardown( detach !== false );
 this._fragment = null;
 this._state = {};
 this._torndown = true;
};
function renderMainFragment$3 ( root, component ) {
 var button = createElement( 'button' );
 function clickHandler ( event ) {
  var root = this.__svelte.root;
  component.fire("select", {name: root.name});
 }
 addEventListener( button, 'click', clickHandler );
 button.__svelte = {
  root: root
 };
 var last_text = root.name;
 var text = createText( last_text );
 appendNode( text, button );
 return {
  mount: function ( target, anchor ) {
   insertNode( button, target, anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
   button.__svelte.root = root;
   if ( ( __tmp = root.name ) !== last_text ) {
    text.data = last_text = __tmp;
   }
  },
  teardown: function ( detach ) {
   removeEventListener( button, 'click', clickHandler );
   if ( detach ) {
    detachNode( button );
   }
  }
 };
}
function Preset ( options ) {
 options = options || {};
 this._state = options.data || {};
 this._observers = {
  pre: Object.create( null ),
  post: Object.create( null )
 };
 this._handlers = Object.create( null );
 this._root = options._root;
 this._yield = options._yield;
 this._torndown = false;
 this._fragment = renderMainFragment$3( this._state, this );
 if ( options.target ) this._fragment.mount( options.target, null );
}
Preset.prototype.get = get;
Preset.prototype.fire = fire;
Preset.prototype.observe = observe;
Preset.prototype.on = on;
Preset.prototype.set = set;
Preset.prototype._flush = _flush;
Preset.prototype._set = function _set ( newState ) {
 var oldState = this._state;
 this._state = Object.assign( {}, oldState, newState );
 dispatchObservers( this, this._observers.pre, newState, oldState );
 if ( this._fragment ) this._fragment.update( newState, this._state );
 dispatchObservers( this, this._observers.post, newState, oldState );
};
Preset.prototype.teardown = Preset.prototype.destroy = function destroy ( detach ) {
 this.fire( 'teardown' );
 this._fragment.teardown( detach !== false );
 this._fragment = null;
 this._state = {};
 this._torndown = true;
};
var template = (function () {
  const illogical = (guessResult, slotCount) =>
    guessResult.endingPossibilityCount === guessResult.startingPossibilityCount
    && guessResult.grade[0] !== slotCount;
  return {
    oncreate () {
      this.colourObserver = this.observe( 'colourCount', this.init,
        { init:false }); // avoid double init on startup
      this.slotObserver = this.observe( 'slotCount', this.init);
    },
    ondestroy () {
      this.colourObserver.cancel();
      this.slotObserver.cancel();
    },
    data () {
      return {
        colourCount: 6,
        slotCount: 4,
        guesses: [],
        error: '',
        won: false,
        presets: {
          'Classic': [6, 4],
          'Simple': [3, 3],
          'Colourful': [16, 5],
        },
        options: {
          showRemaining: { text: 'Pokaż pozostałe możliwości / Show possibilities remaining', setting: false },
          disallowDupes: { text: 'Nie zezwalaj na duplikaty ruchów / Disallow duplicate moves', setting: true },
          disallowIllogicalMoves: { text: 'Nie zezwalaj na nielogiczne ruchy / Disallow illogical moves', setting: false },
          autoHint: { text: 'Logiczne przypuszczenie / Automatically enter a logical guess next', setting: false },
        },
      }
    },
    helpers: {
      renderGrade: guessResult =>
          new Array(guessResult.grade[0] + 1).join('+')
        + new Array(guessResult.grade[1] + 1).join('~')
        + new Array(guessResult.grade[2] + 1).join('-'),
      renderRemaining: guessResult =>
        `(${guessResult.startingPossibilityCount} <
          ${guessResult.endingPossibilityCount})`,
      illogical,
    },
    methods: {
      init() {
        let slotCount = this.get('slotCount') * 1;
        let colourCount = this.get('colourCount') * 1;
        if (slotCount < 1) { slotCount = 1; }
        if (colourCount < 2) { colourCount = 2; }
        try {
          AI.init(slotCount, colourCount);
        } catch (e) {
          this.set({error: e});
          return;
        }
        guesses = [];
        guesses.push([new Array(slotCount).fill(0)]);
        this.set({guesses, slotCount, colourCount, error: '', won: false});
      },
      usePreset(name) {
        const preset = this.get('presets')[name];
        this.set({
          colourCount: preset[0],
          slotCount: preset[1],
        });
      },
      updateNewGuess(slot, colourNumber) {
        let guesses = this.get('guesses');
        guesses[guesses.length - 1][0][slot] = colourNumber;
        this.set({guesses});
      },
      gradeNewGuess() {
        const options = this.get('options');
        let guesses = this.get('guesses');
        const newGuess = guesses[guesses.length - 1][0];
        if (options.disallowDupes.setting && guesses.length > 1) {
          const sameGuess = guesses.findIndex(
            guess => JSON.stringify(guess[0]) === JSON.stringify(newGuess) );
          if (sameGuess < guesses.length - 1) {
            this.set({error: `Zgadłeś już to / You already guessed this in guess #${sameGuess + 1}`});
            return;
          }
        }
        const guessResult = AI.guess(newGuess);
        if (options.disallowIllogicalMoves.setting
          && illogical(guessResult, this.get('slotCount'))) { 
          this.set({error: 'Illogical move not allowed'});
          return;
        }
        this.set({error: ''});
        guesses.splice(guesses.length - 1, 0, [newGuess.slice(0), guessResult]);
        this.set({guesses});
        if (guessResult.grade[0] === this.get('slotCount')) {
          this.set({won: true});
        } else if (options.autoHint.setting) {
          const hint = AI.hint();
          hint.forEach((colour, slot) => {
            this.updateNewGuess(slot, colour);
          });
        }
        window.scrollTo(0, document.body.scrollHeight);
      },
      toggle(dataKey) {
        const options = this.get('options');
        options[dataKey].setting = !options[dataKey].setting;
        this.set({options});
      },
    },
    components: {
      PickerSlot,
      Preset,
      Slot,
    }
  };
}());
let addedCss = false;
function addCss () {
 var style = createElement( 'style' );
 style.textContent = "\n  [svelte-2646675403].error, [svelte-2646675403] .error {\n    border: 2px dotted red;\n  }\n  [svelte-2646675403].won, [svelte-2646675403] .won {\n    border: 5px dotted lime;\n  }\n  [svelte-2646675403].gradebutton, [svelte-2646675403] .gradebutton {\n    width: 40px;\n    height: 40px;\n    font-size: 20px;\n  }\n  [svelte-2646675403].arrow, [svelte-2646675403] .arrow {\n    vertical-align: middle;\n  }\n  [svelte-2646675403].grade, [svelte-2646675403] .grade {\n    vertical-align: sub;\n  }\n  input[svelte-2646675403][type=checkbox], [svelte-2646675403] input[type=checkbox] {\n    width: 20px;\n    height: 20px;\n  }\n  input[svelte-2646675403][type=checkbox] + span:hover, [svelte-2646675403] input[type=checkbox] + span:hover {\n    color: blue;\n    cursor: pointer;\n    user-select: none;\n  }\n  [svelte-2646675403].illogical, [svelte-2646675403] .illogical {\n    color: red;\n  }\n";
 appendNode( style, document.head );
 addedCss = true;
}
function renderMainFragment ( root, component ) {
 var h3 = createElement( 'h3' );
 setAttribute( h3, 'svelte-2646675403', '' );
 appendNode( createText( "MasterMind " ), h3 );
 var ifBlock_anchor = createComment();
 function getBlock ( root ) {
  if ( root.guesses.length === 1 ) return renderIfBlock_0;
  return renderIfBlock_1;
 }
 var currentBlock = getBlock( root );
 var ifBlock = currentBlock && currentBlock( root, component );
 var text6 = createText( "\n" );
 var text7 = createText( "\n" );
 var input = createElement( 'input' );
 setAttribute( input, 'svelte-2646675403', '' );
 input.type = "checkbox";
 var input_updating = false;
 function inputChangeHandler () {
  input_updating = true;
  var options = component.get( 'options' );
  options.showRemaining.setting = input.checked;
  component._set({ options: options });
  input_updating = false;
 }
 addEventListener( input, 'change', inputChangeHandler );
 input.checked = root.options.showRemaining.setting;
 var text8 = createText( "\n" );
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-2646675403', '' );
 function clickHandler ( event ) {
  component.toggle("showRemaining");
 }
 addEventListener( span, 'click', clickHandler );
 var last_text9 = root.options['showRemaining'].text;
 var text9 = createText( last_text9 );
 appendNode( text9, span );
 var text10 = createText( "\n" );
 var br = createElement( 'br' );
 setAttribute( br, 'svelte-2646675403', '' );
 var text11 = createText( "\n" );
 var input1 = createElement( 'input' );
 setAttribute( input1, 'svelte-2646675403', '' );
 input1.type = "checkbox";
 var input1_updating = false;
 function input1ChangeHandler () {
  input1_updating = true;
  var options = component.get( 'options' );
  options.disallowDupes.setting = input1.checked;
  component._set({ options: options });
  input1_updating = false;
 }
 addEventListener( input1, 'change', input1ChangeHandler );
 input1.checked = root.options.disallowDupes.setting;
 var text12 = createText( "\n" );
 var span1 = createElement( 'span' );
 setAttribute( span1, 'svelte-2646675403', '' );
 function clickHandler1 ( event ) {
  component.toggle("disallowDupes");
 }
 addEventListener( span1, 'click', clickHandler1 );
 var last_text13 = root.options['disallowDupes'].text;
 var text13 = createText( last_text13 );
 appendNode( text13, span1 );
 var text14 = createText( "\n" );
 var br1 = createElement( 'br' );
 setAttribute( br1, 'svelte-2646675403', '' );
 var text15 = createText( "\n" );
 var input2 = createElement( 'input' );
 setAttribute( input2, 'svelte-2646675403', '' );
 input2.type = "checkbox";
 var input2_updating = false;
 function input2ChangeHandler () {
  input2_updating = true;
  var options = component.get( 'options' );
  options.disallowIllogicalMoves.setting = input2.checked;
  component._set({ options: options });
  input2_updating = false;
 }
 addEventListener( input2, 'change', input2ChangeHandler );
 input2.checked = root.options.disallowIllogicalMoves.setting;
 var text16 = createText( "\n" );
 var span2 = createElement( 'span' );
 setAttribute( span2, 'svelte-2646675403', '' );
 function clickHandler2 ( event ) {
  component.toggle("disallowIllogicalMoves");
 }
 addEventListener( span2, 'click', clickHandler2 );
 var last_text17 = root.options['disallowIllogicalMoves'].text;
 var text17 = createText( last_text17 );
 appendNode( text17, span2 );
 var text18 = createText( "\n" );
 var br2 = createElement( 'br' );
 setAttribute( br2, 'svelte-2646675403', '' );
 var text19 = createText( "\n" );
 var input3 = createElement( 'input' );
 setAttribute( input3, 'svelte-2646675403', '' );
 input3.type = "checkbox";
 var input3_updating = false;
 function input3ChangeHandler () {
  input3_updating = true;
  var options = component.get( 'options' );
  options.autoHint.setting = input3.checked;
  component._set({ options: options });
  input3_updating = false;
 }
 addEventListener( input3, 'change', input3ChangeHandler );
 input3.checked = root.options.autoHint.setting;
 var text20 = createText( "\n" );
 var span3 = createElement( 'span' );
 setAttribute( span3, 'svelte-2646675403', '' );
 function clickHandler3 ( event ) {
  component.toggle("autoHint");
 }
 addEventListener( span3, 'click', clickHandler3 );
 var last_text21 = root.options['autoHint'].text;
 var text21 = createText( last_text21 );
 appendNode( text21, span3 );
 var text22 = createText( "\n" );
 var br3 = createElement( 'br' );
 setAttribute( br3, 'svelte-2646675403', '' );
 var text23 = createText( "\n" );
 var ifBlock1_anchor = createComment();
 function getBlock1 ( root ) {
  if ( root.error !== '' ) return renderIfBlock1_0;
  return null;
 }
 var currentBlock1 = getBlock1( root );
 var ifBlock1 = currentBlock1 && currentBlock1( root, component );
 var text24 = createText( "\n\n" );
 var div = createElement( 'div' );
 setAttribute( div, 'svelte-2646675403', '' );
 div.className = "grid";
 var eachBlock1_anchor = createComment();
 appendNode( eachBlock1_anchor, div );
 var eachBlock1_value = root.guesses;
 var eachBlock1_iterations = [];
 for ( var i1 = 0; i1 < eachBlock1_value.length; i1 += 1 ) {
  eachBlock1_iterations[i1] = renderEachBlock1( root, eachBlock1_value, eachBlock1_value[i1], i1, component );
  eachBlock1_iterations[i1].mount( eachBlock1_anchor.parentNode, eachBlock1_anchor );
 }
 var text25 = createText( "\n" );
 var ifBlock4_anchor = createComment();
 function getBlock4 ( root ) {
  if ( root.won ) return renderIfBlock4_0;
  return null;
 }
 var currentBlock4 = getBlock4( root );
 var ifBlock4 = currentBlock4 && currentBlock4( root, component );
 return {
  mount: function ( target, anchor ) {
   insertNode( h3, target, anchor );
   insertNode( ifBlock_anchor, target, anchor );
   if ( ifBlock ) ifBlock.mount( ifBlock_anchor.parentNode, ifBlock_anchor );
   insertNode( text6, target, anchor );
   insertNode( text7, target, anchor );
   insertNode( input, target, anchor );
   insertNode( text8, target, anchor );
   insertNode( span, target, anchor );
   insertNode( text10, target, anchor );
   insertNode( br, target, anchor );
   insertNode( text11, target, anchor );
   insertNode( input1, target, anchor );
   insertNode( text12, target, anchor );
   insertNode( span1, target, anchor );
   insertNode( text14, target, anchor );
   insertNode( br1, target, anchor );
   insertNode( text15, target, anchor );
   insertNode( input2, target, anchor );
   insertNode( text16, target, anchor );
   insertNode( span2, target, anchor );
   insertNode( text18, target, anchor );
   insertNode( br2, target, anchor );
   insertNode( text19, target, anchor );
   insertNode( input3, target, anchor );
   insertNode( text20, target, anchor );
   insertNode( span3, target, anchor );
   insertNode( text22, target, anchor );
   insertNode( br3, target, anchor );
   insertNode( text23, target, anchor );
   insertNode( ifBlock1_anchor, target, anchor );
   if ( ifBlock1 ) ifBlock1.mount( ifBlock1_anchor.parentNode, ifBlock1_anchor );
   insertNode( text24, target, anchor );
   insertNode( div, target, anchor );
   insertNode( text25, target, anchor );
   insertNode( ifBlock4_anchor, target, anchor );
   if ( ifBlock4 ) ifBlock4.mount( ifBlock4_anchor.parentNode, ifBlock4_anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
   var _currentBlock = currentBlock;
   currentBlock = getBlock( root );
   if ( _currentBlock === currentBlock && ifBlock) {
    ifBlock.update( changed, root );
   } else {
    if ( ifBlock ) ifBlock.teardown( true );
    ifBlock = currentBlock && currentBlock( root, component );
    if ( ifBlock ) ifBlock.mount( ifBlock_anchor.parentNode, ifBlock_anchor );
   }
   if ( !input_updating ) input.checked = root.options.showRemaining.setting;
   
   if ( ( __tmp = root.options['showRemaining'].text ) !== last_text9 ) {
    text9.data = last_text9 = __tmp;
   }
   if ( !input1_updating ) input1.checked = root.options.disallowDupes.setting;
   if ( ( __tmp = root.options['disallowDupes'].text ) !== last_text13 ) {
    text13.data = last_text13 = __tmp;
   }
   if ( !input2_updating ) input2.checked = root.options.disallowIllogicalMoves.setting;
   if ( ( __tmp = root.options['disallowIllogicalMoves'].text ) !== last_text17 ) {
    text17.data = last_text17 = __tmp;
   }
   if ( !input3_updating ) input3.checked = root.options.autoHint.setting;
   if ( ( __tmp = root.options['autoHint'].text ) !== last_text21 ) {
    text21.data = last_text21 = __tmp;
   }
   var _currentBlock1 = currentBlock1;
   currentBlock1 = getBlock1( root );
   if ( _currentBlock1 === currentBlock1 && ifBlock1) {
    ifBlock1.update( changed, root );
   } else {
    if ( ifBlock1 ) ifBlock1.teardown( true );
    ifBlock1 = currentBlock1 && currentBlock1( root, component );
    if ( ifBlock1 ) ifBlock1.mount( ifBlock1_anchor.parentNode, ifBlock1_anchor );
   }
   var eachBlock1_value = root.guesses;
   for ( var i1 = 0; i1 < eachBlock1_value.length; i1 += 1 ) {
    if ( !eachBlock1_iterations[i1] ) {
     eachBlock1_iterations[i1] = renderEachBlock1( root, eachBlock1_value, eachBlock1_value[i1], i1, component );
     eachBlock1_iterations[i1].mount( eachBlock1_anchor.parentNode, eachBlock1_anchor );
    } else {
     eachBlock1_iterations[i1].update( changed, root, eachBlock1_value, eachBlock1_value[i1], i1 );
    }
   }
   teardownEach( eachBlock1_iterations, true, eachBlock1_value.length );
   eachBlock1_iterations.length = eachBlock1_value.length;
   var _currentBlock4 = currentBlock4;
   currentBlock4 = getBlock4( root );
   if ( _currentBlock4 === currentBlock4 && ifBlock4) {
    ifBlock4.update( changed, root );
   } else {
    if ( ifBlock4 ) ifBlock4.teardown( true );
    ifBlock4 = currentBlock4 && currentBlock4( root, component );
    if ( ifBlock4 ) ifBlock4.mount( ifBlock4_anchor.parentNode, ifBlock4_anchor );
   }
  },
  teardown: function ( detach ) {
   if ( ifBlock ) ifBlock.teardown( detach );
   removeEventListener( input, 'change', inputChangeHandler );
   removeEventListener( span, 'click', clickHandler );
   removeEventListener( input1, 'change', input1ChangeHandler );
   removeEventListener( span1, 'click', clickHandler1 );
   removeEventListener( input2, 'change', input2ChangeHandler );
   removeEventListener( span2, 'click', clickHandler2 );
   removeEventListener( input3, 'change', input3ChangeHandler );
   removeEventListener( span3, 'click', clickHandler3 );
   if ( ifBlock1 ) ifBlock1.teardown( detach );
   teardownEach( eachBlock1_iterations, false );
   if ( ifBlock4 ) ifBlock4.teardown( detach );
   if ( detach ) {
    detachNode( h2 );
    detachNode( text1 );
    detachNode( h3 );
    detachNode( text5 );
    detachNode( ifBlock_anchor );
    detachNode( text6 );
    detachNode( text7 );
    detachNode( input );
    detachNode( text8 );
    detachNode( span );
    detachNode( text10 );
    detachNode( br );
    detachNode( text11 );
    detachNode( input1 );
    detachNode( text12 );
    detachNode( span1 );
    detachNode( text14 );
    detachNode( br1 );
    detachNode( text15 );
    detachNode( input2 );
    detachNode( text16 );
    detachNode( span2 );
    detachNode( text18 );
    detachNode( br2 );
    detachNode( text19 );
    detachNode( input3 );
    detachNode( text20 );
    detachNode( span3 );
    detachNode( text22 );
    detachNode( br3 );
    detachNode( text23 );
    detachNode( ifBlock1_anchor );
    detachNode( text24 );
    detachNode( div );
    detachNode( text25 );
    detachNode( ifBlock4_anchor );
   }
  }
 };
}
function renderIfBlock4_0 ( root, component ) {
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-2646675403', '' );
 span.className = "won";
 appendNode( createText( "Congratulations, you " ), span );
 var i1 = createElement( 'i' );
 setAttribute( i1, 'svelte-2646675403', '' );
 appendNode( i1, span );
 appendNode( createText( "finally" ), i1 );
 appendNode( createText( " won!" ), span );
 return {
  mount: function ( target, anchor ) {
   insertNode( span, target, anchor );
  },
  update: noop,
  teardown: function ( detach ) {
   if ( detach ) {
    detachNode( span );
   }
  }
 };
}
function renderEachBlock1 ( root, eachBlock1_value, guess, guess__index, component ) {
 var div = createElement( 'div' );
 setAttribute( div, 'svelte-2646675403', '' );
 div.className = "row";
 var ifBlock2_anchor = createComment();
 appendNode( ifBlock2_anchor, div );
 function getBlock2 ( root, eachBlock1_value, guess, guess__index ) {
  if ( guess.length > 1 ) return renderIfBlock2_0;
  if ( !root.won ) return renderIfBlock2_1;
  return null;
 }
 var currentBlock2 = getBlock2( root, eachBlock1_value, guess, guess__index );
 var ifBlock2 = currentBlock2 && currentBlock2( root, eachBlock1_value, guess, guess__index, component );
 if ( ifBlock2 ) ifBlock2.mount( ifBlock2_anchor.parentNode, ifBlock2_anchor );
 return {
  mount: function ( target, anchor ) {
   insertNode( div, target, anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index ) {
   var __tmp;
   var _currentBlock2 = currentBlock2;
   currentBlock2 = getBlock2( root, eachBlock1_value, guess, guess__index );
   if ( _currentBlock2 === currentBlock2 && ifBlock2) {
    ifBlock2.update( changed, root, eachBlock1_value, guess, guess__index );
   } else {
    if ( ifBlock2 ) ifBlock2.teardown( true );
    ifBlock2 = currentBlock2 && currentBlock2( root, eachBlock1_value, guess, guess__index, component );
    if ( ifBlock2 ) ifBlock2.mount( ifBlock2_anchor.parentNode, ifBlock2_anchor );
   }
  },
  teardown: function ( detach ) {
   if ( ifBlock2 ) ifBlock2.teardown( false );
   if ( detach ) {
    detachNode( div );
   }
  }
 };
}
function renderIfBlock2_1 ( root, eachBlock1_value, guess, guess__index, component ) {
 var text = createText( "\n        " );
 var eachBlock3_anchor = createComment();
 var eachBlock3_value = guess[0];
 var eachBlock3_iterations = [];
 for ( var i1 = 0; i1 < eachBlock3_value.length; i1 += 1 ) {
  eachBlock3_iterations[i1] = renderEachBlock3( root,eachBlock1_value,guess,guess__index, eachBlock3_value, eachBlock3_value[i1], i1, component );
 }
 var text1 = createText( "\n        " );
 var button = createElement( 'button' );
 setAttribute( button, 'svelte-2646675403', '' );
 button.className = "gradebutton";
 function clickHandler ( event ) {
  component.gradeNewGuess();
 }
 addEventListener( button, 'click', clickHandler );
 appendNode( createText( "^" ), button );
 var br = createElement( 'br' );
 setAttribute( br, 'svelte-2646675403', '' );
 var text3 = createText( "\n        " );
 var eachBlock4_anchor = createComment();
 var eachBlock4_value = guess[0];
 var eachBlock4_iterations = [];
 for ( var i2 = 0; i2 < eachBlock4_value.length; i2 += 1 ) {
  eachBlock4_iterations[i2] = renderEachBlock4( root,eachBlock1_value,guess,guess__index, eachBlock4_value, eachBlock4_value[i2], i2, component );
 }
 return {
  mount: function ( target, anchor ) {
   insertNode( text, target, anchor );
   insertNode( eachBlock3_anchor, target, anchor );
   for ( var i1 = 0; i1 < eachBlock3_iterations.length; i1 += 1 ) {
    eachBlock3_iterations[i1].mount( eachBlock3_anchor.parentNode, eachBlock3_anchor );
   }
   insertNode( text1, target, anchor );
   insertNode( button, target, anchor );
   insertNode( br, target, anchor );
   insertNode( text3, target, anchor );
   insertNode( eachBlock4_anchor, target, anchor );
   for ( var i2 = 0; i2 < eachBlock4_iterations.length; i2 += 1 ) {
    eachBlock4_iterations[i2].mount( eachBlock4_anchor.parentNode, eachBlock4_anchor );
   }
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index ) {
   var __tmp;
   var eachBlock3_value = guess[0];
   for ( var i1 = 0; i1 < eachBlock3_value.length; i1 += 1 ) {
    if ( !eachBlock3_iterations[i1] ) {
     eachBlock3_iterations[i1] = renderEachBlock3( root,eachBlock1_value,guess,guess__index, eachBlock3_value, eachBlock3_value[i1], i1, component );
     eachBlock3_iterations[i1].mount( eachBlock3_anchor.parentNode, eachBlock3_anchor );
    } else {
     eachBlock3_iterations[i1].update( changed, root,eachBlock1_value,guess,guess__index, eachBlock3_value, eachBlock3_value[i1], i1 );
    }
   }
   teardownEach( eachBlock3_iterations, true, eachBlock3_value.length );
   eachBlock3_iterations.length = eachBlock3_value.length;
   var eachBlock4_value = guess[0];
   for ( var i2 = 0; i2 < eachBlock4_value.length; i2 += 1 ) {
    if ( !eachBlock4_iterations[i2] ) {
     eachBlock4_iterations[i2] = renderEachBlock4( root,eachBlock1_value,guess,guess__index, eachBlock4_value, eachBlock4_value[i2], i2, component );
     eachBlock4_iterations[i2].mount( eachBlock4_anchor.parentNode, eachBlock4_anchor );
    } else {
     eachBlock4_iterations[i2].update( changed, root,eachBlock1_value,guess,guess__index, eachBlock4_value, eachBlock4_value[i2], i2 );
    }
   }
   teardownEach( eachBlock4_iterations, true, eachBlock4_value.length );
   eachBlock4_iterations.length = eachBlock4_value.length;
  },
  teardown: function ( detach ) {
   teardownEach( eachBlock3_iterations, detach );
   removeEventListener( button, 'click', clickHandler );
   teardownEach( eachBlock4_iterations, detach );
   if ( detach ) {
//    detachNode( hr );
    detachNode( text );
    detachNode( eachBlock3_anchor );
    detachNode( text1 );
    detachNode( button );
    detachNode( br );
    detachNode( text3 );
    detachNode( eachBlock4_anchor );
   }
  }
 };
}
function renderEachBlock4 ( root, eachBlock1_value, guess, guess__index, eachBlock4_value, slot, i, component ) {
 var pickerSlot_initialData = {
  colourCount: root.colourCount
 };
 var pickerSlot = new template.components.PickerSlot({
  target: null,
  _root: component._root || component,
  data: pickerSlot_initialData
 });
 pickerSlot.on( 'select', function ( event ) {
  var eachBlock4_value = this._context.eachBlock4_value, i = this._context.i, slot = eachBlock4_value[i];
  component.updateNewGuess(i, event.colourNumber);
 });
 pickerSlot._context = {
  eachBlock4_value: eachBlock4_value,
  i: i
 };
 return {
  mount: function ( target, anchor ) {
   pickerSlot._fragment.mount( target, anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index, eachBlock4_value, slot, i ) {
   var __tmp;
   pickerSlot._context.eachBlock4_value = eachBlock4_value;
   pickerSlot._context.i = i;
   var pickerSlot_changes = {};
   if ( 'colourCount' in changed ) pickerSlot_changes.colourCount = root.colourCount;
   if ( Object.keys( pickerSlot_changes ).length ) pickerSlot.set( pickerSlot_changes );
  },
  teardown: function ( detach ) {
   pickerSlot.destroy( detach );
  }
 };
}
function renderEachBlock3 ( root, eachBlock1_value, guess, guess__index, eachBlock3_value, slot, slot__index, component ) {
 var slot1_initialData = {
  colourNumber: slot
 };
 var slot1 = new template.components.Slot({
  target: null,
  _root: component._root || component,
  data: slot1_initialData
 });
 return {
  mount: function ( target, anchor ) {
   slot1._fragment.mount( target, anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index, eachBlock3_value, slot, slot__index ) {
   var __tmp;
   var slot1_changes = {};
   if ( 'guesses' in changed ) slot1_changes.colourNumber = slot;
   if ( Object.keys( slot1_changes ).length ) slot1.set( slot1_changes );
  },
  teardown: function ( detach ) {
   slot1.destroy( detach );
  }
 };
}
function renderIfBlock2_0 ( root, eachBlock1_value, guess, guess__index, component ) {
 var eachBlock2_anchor = createComment();
 var eachBlock2_value = guess[0];
 var eachBlock2_iterations = [];
 for ( var i1 = 0; i1 < eachBlock2_value.length; i1 += 1 ) {
  eachBlock2_iterations[i1] = renderEachBlock2( root,eachBlock1_value,guess,guess__index, eachBlock2_value, eachBlock2_value[i1], i1, component );
 }
 var text = createText( "\n        " );
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-2646675403', '' );
 span.className = "arrow";
 appendNode( createText( ">>" ), span );
 var text2 = createText( "\n        " );
 var span1 = createElement( 'span' );
 setAttribute( span1, 'svelte-2646675403', '' );
 span1.className = "grade";
 var last_text3 = template.helpers.renderGrade(guess[1]);
 var text3 = createText( last_text3 );
 appendNode( text3, span1 );
 var text4 = createText( "\n        " );
 var ifBlock3_anchor = createComment();
 function getBlock3 ( root, eachBlock1_value, guess, guess__index ) {
  if ( root.options.showRemaining.setting ) return renderIfBlock3_0;
  return null;
 }
 var currentBlock3 = getBlock3( root, eachBlock1_value, guess, guess__index );
 var ifBlock3 = currentBlock3 && currentBlock3( root, eachBlock1_value, guess, guess__index, component );
 return {
  mount: function ( target, anchor ) {
   insertNode( eachBlock2_anchor, target, anchor );
   
   for ( var i1 = 0; i1 < eachBlock2_iterations.length; i1 += 1 ) {
    eachBlock2_iterations[i1].mount( eachBlock2_anchor.parentNode, eachBlock2_anchor );
   }
   insertNode( text, target, anchor );
   insertNode( span, target, anchor );
   insertNode( text2, target, anchor );
   insertNode( span1, target, anchor );
   insertNode( text4, target, anchor );
   insertNode( ifBlock3_anchor, target, anchor );
   if ( ifBlock3 ) ifBlock3.mount( ifBlock3_anchor.parentNode, ifBlock3_anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index ) {
   var __tmp;
   var eachBlock2_value = guess[0];
   for ( var i1 = 0; i1 < eachBlock2_value.length; i1 += 1 ) {
    if ( !eachBlock2_iterations[i1] ) {
     eachBlock2_iterations[i1] = renderEachBlock2( root,eachBlock1_value,guess,guess__index, eachBlock2_value, eachBlock2_value[i1], i1, component );
     eachBlock2_iterations[i1].mount( eachBlock2_anchor.parentNode, eachBlock2_anchor );
    } else {
     eachBlock2_iterations[i1].update( changed, root,eachBlock1_value,guess,guess__index, eachBlock2_value, eachBlock2_value[i1], i1 );
    }
   }
   teardownEach( eachBlock2_iterations, true, eachBlock2_value.length );
   
   eachBlock2_iterations.length = eachBlock2_value.length;
   if ( ( __tmp = template.helpers.renderGrade(guess[1]) ) !== last_text3 ) {
    text3.data = last_text3 = __tmp;
   }
   var _currentBlock3 = currentBlock3;
   currentBlock3 = getBlock3( root, eachBlock1_value, guess, guess__index );
   if ( _currentBlock3 === currentBlock3 && ifBlock3) {
    ifBlock3.update( changed, root, eachBlock1_value, guess, guess__index );
   } else {
    if ( ifBlock3 ) ifBlock3.teardown( true );
    ifBlock3 = currentBlock3 && currentBlock3( root, eachBlock1_value, guess, guess__index, component );
    if ( ifBlock3 ) ifBlock3.mount( ifBlock3_anchor.parentNode, ifBlock3_anchor );
   }
  },
  teardown: function ( detach ) {
   teardownEach( eachBlock2_iterations, detach );
   if ( ifBlock3 ) ifBlock3.teardown( detach );
   if ( detach ) {
    detachNode( eachBlock2_anchor );
    detachNode( text );
    detachNode( span );
    detachNode( text2 );
    detachNode( span1 );
    detachNode( text4 );
    detachNode( ifBlock3_anchor );
   }
  }
 };
}
function renderIfBlock3_0 ( root, eachBlock1_value, guess, guess__index, component ) {
 var span = createElement( 'span' );
 setAttribute( span, 'svelte-2646675403', '' );
 var last_span_class = template.helpers.illogical(guess[1], root.slotCount) ? "illogical" : "";
 span.className = last_span_class;
 var last_text = template.helpers.renderRemaining(guess[1]);
 var text = createText( last_text );
 appendNode( text, span );
 return {
  mount: function ( target, anchor ) {
   insertNode( span, target, anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index ) {
   var __tmp;
   if ( ( __tmp = template.helpers.illogical(guess[1], root.slotCount) ? "illogical" : "" ) !== last_span_class ) {
    last_span_class = __tmp;
    span.className = last_span_class;
   }
   if ( ( __tmp = template.helpers.renderRemaining(guess[1]) ) !== last_text ) {
    text.data = last_text = __tmp;
   }
  },
  teardown: function ( detach ) {
   if ( detach ) {
    detachNode( span );
   }
  }
 };
}
function renderEachBlock2 ( root, eachBlock1_value, guess, guess__index, eachBlock2_value, slot, slot__index, component ) {
 var slot1_initialData = {
  colourNumber: slot
 };
 var slot1 = new template.components.Slot({
  target: null,
  _root: component._root || component,
  data: slot1_initialData
 });
 return {
  mount: function ( target, anchor ) {
   slot1._fragment.mount( target, anchor );
  },
  update: function ( changed, root, eachBlock1_value, guess, guess__index, eachBlock2_value, slot, slot__index ) {
   var __tmp;
  
   var slot1_changes = {};
   
   if ( 'guesses' in changed ) slot1_changes.colourNumber = slot;
   
   if ( Object.keys( slot1_changes ).length ) slot1.set( slot1_changes );
  },
  teardown: function ( detach ) {
   slot1.destroy( detach );
  }
 };
}
function renderIfBlock1_0 ( root, component ) {
 var div = createElement( 'div' );
 setAttribute( div, 'svelte-2646675403', '' );
 div.className = "error";
 var last_text = root.error;
 var text = createText( last_text );
 appendNode( text, div );
 return {
  mount: function ( target, anchor ) {
   insertNode( div, target, anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
   if ( ( __tmp = root.error ) !== last_text ) {
    text.data = last_text = __tmp;
   }
  },
  teardown: function ( detach ) {
   if ( detach ) {
    detachNode( div );
   }
  }
 };
}
function renderIfBlock_1 ( root, component ) {
 var button = createElement( 'button' );
 setAttribute( button, 'svelte-2646675403', '' );
 function clickHandler ( event ) {
  component.init();
 }
 addEventListener( button, 'click', clickHandler );
 appendNode( createText( "Reset" ), button );
 var br = createElement( 'br' );
 setAttribute( br, 'svelte-2646675403', '' );
 setAttribute( br, 'clear', "all" );
 return {
  mount: function ( target, anchor ) {
   insertNode( button, target, anchor );
   insertNode( br, target, anchor );
  },
  update: noop,
  teardown: function ( detach ) {
   removeEventListener( button, 'click', clickHandler );
   if ( detach ) {
    detachNode( button );
    detachNode( br );
   }
  }
 };
}
function renderIfBlock_0 ( root, component ) {
 var div = createElement( 'div' );
 setAttribute( div, 'svelte-2646675403', '' );
 appendNode( createText( "Możliwe kolory / Possible colours: " ), div );
 var input = createElement( 'input' );
 setAttribute( input, 'svelte-2646675403', '' );
 input.type = "number";
 input.min = "2";
 input.max = "16";
 var input_updating = false;
 function inputChangeHandler () {
  input_updating = true;
  component._set({ colourCount: input.value });
  input_updating = false;
 }
 addEventListener( input, 'input', inputChangeHandler );
 appendNode( input, div );
 input.value = root.colourCount;
 var br = createElement( 'br' );
 setAttribute( br, 'svelte-2646675403', '' );
 appendNode( br, div );
 appendNode( createText( "\n    Ilość / Slots: " ), div );
 var input1 = createElement( 'input' );
 setAttribute( input1, 'svelte-2646675403', '' );
 input1.type = "number";
 input1.min = "1";
 input1.max = "23";
 var input1_updating = false;
 function input1ChangeHandler () {
  input1_updating = true;
  component._set({ slotCount: input1.value });
  input1_updating = false;
 }
 addEventListener( input1, 'input', input1ChangeHandler );
 appendNode( input1, div );
 input1.value = root.slotCount;
 var br1 = createElement( 'br' );
 setAttribute( br1, 'svelte-2646675403', '' );
 appendNode( br1, div );
 appendNode( createText( "\n    Ustawienia wstępne / Presets:\n    " ), div );
 var eachBlock_anchor = createComment();
 appendNode( eachBlock_anchor, div );
 var eachBlock_value = ( 'Object' in root ? root.Object : Object ).keys(root.presets);
 var eachBlock_iterations = [];
 for ( var i1 = 0; i1 < eachBlock_value.length; i1 += 1 ) {
  eachBlock_iterations[i1] = renderEachBlock( root, eachBlock_value, eachBlock_value[i1], i1, component );
  eachBlock_iterations[i1].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
 }
 var br2 = createElement( 'br' );
 setAttribute( br2, 'svelte-2646675403', '' );
 appendNode( br2, div );
 return {
  mount: function ( target, anchor ) {
   insertNode( div, target, anchor );
  },
  update: function ( changed, root ) {
   var __tmp;
   if ( !input_updating ) input.value = root.colourCount;
   if ( !input1_updating ) input1.value = root.slotCount;
   var eachBlock_value = ( 'Object' in root ? root.Object : Object ).keys(root.presets);
   for ( var i1 = 0; i1 < eachBlock_value.length; i1 += 1 ) {
    if ( !eachBlock_iterations[i1] ) {
     eachBlock_iterations[i1] = renderEachBlock( root, eachBlock_value, eachBlock_value[i1], i1, component );
     eachBlock_iterations[i1].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
    } else {
     eachBlock_iterations[i1].update( changed, root, eachBlock_value, eachBlock_value[i1], i1 );
    }
   }
   teardownEach( eachBlock_iterations, true, eachBlock_value.length );
   eachBlock_iterations.length = eachBlock_value.length;
  },
  teardown: function ( detach ) {
   removeEventListener( input, 'input', inputChangeHandler );
   removeEventListener( input1, 'input', input1ChangeHandler );
   teardownEach( eachBlock_iterations, false );
   if ( detach ) {
    detachNode( div );
   }
  }
 };
}
function renderEachBlock ( root, eachBlock_value, name, name__index, component ) {
 var preset_initialData = {
  name: name
 };
 var preset = new template.components.Preset({
  target: null,
  _root: component._root || component,
  data: preset_initialData
 });
 preset.on( 'select', function ( event ) {
  component.usePreset(event.name);
 });
 var text = createText( "\n    " );
 return {
  mount: function ( target, anchor ) {
   preset._fragment.mount( target, anchor );
   insertNode( text, target, anchor );
  },
  update: function ( changed, root, eachBlock_value, name, name__index ) {
   var __tmp;
   var preset_changes = {};
   if ( 'Object' in changed||'presets' in changed ) preset_changes.name = name;
   if ( Object.keys( preset_changes ).length ) preset.set( preset_changes );
  },
  teardown: function ( detach ) {
   preset.destroy( detach );
   if ( detach ) {
    detachNode( text );
   }
  }
 };
}
function Game ( options ) {
 options = options || {};
 this._state = Object.assign( template.data(), options.data );
 this._observers = {
  pre: Object.create( null ),
  post: Object.create( null )
 };
 this._handlers = Object.create( null );
 this._root = options._root;
 this._yield = options._yield;
 this._torndown = false;
 if ( !addedCss ) addCss();
 this._renderHooks = [];
 this._fragment = renderMainFragment( this._state, this );
 if ( options.target ) this._fragment.mount( options.target, null );
 this._flush();
 if ( options._root ) {
  options._root._renderHooks.push({ fn: template.oncreate, context: this });
 } else {
  template.oncreate.call( this );
 }
}
Game.prototype = template.methods;
Game.prototype.get = get;
Game.prototype.fire = fire;
Game.prototype.observe = observe;
Game.prototype.on = on;
Game.prototype.set = set;
Game.prototype._flush = _flush;
Game.prototype._set = function _set ( newState ) {
 var oldState = this._state;
 this._state = Object.assign( {}, oldState, newState );
 dispatchObservers( this, this._observers.pre, newState, oldState );
 if ( this._fragment ) this._fragment.update( newState, this._state );
 dispatchObservers( this, this._observers.post, newState, oldState );
 this._flush();
};
Game.prototype.teardown = Game.prototype.destroy = function destroy ( detach ) {
 this.fire( 'teardown' );
template.ondestroy.call( this );
 this._fragment.teardown( detach !== false );
 this._fragment = null;
 this._state = {};
 this._torndown = true;
};
var GameComponent = new Game({
  target: document.querySelector('main')
});
  </script>

MEM 365

Szukaj na tym blogu

MASTERMIND

Komentarze

Prześlij komentarz