{"version":3,"sources":["webpack://boardgame-search/./app/javascript/bg_search/BgSearch.js","webpack://boardgame-search/./app/javascript/recommendation/BoardGame.js","webpack://boardgame-search/./app/javascript/shared/Filters.js","webpack://boardgame-search/./app/javascript/helpers/filterBoardGames.js","webpack://boardgame-search/./app/javascript/recommendation/Recommendation.js","webpack://boardgame-search/./app/javascript/recommendation/index.js"],"names":["recommendation","onSelect","inputElement","useRef","listElement","useState","search","setSearch","searchResults","setSearchResults","combobox","fetchDebounce","useCallback","debounce","query","length","axios","encodeURIComponent","then","response","data","apiSearch","allResults","window","location","href","useEffect","Combobox","current","start","destroy","id","type","pattern","required","autoComplete","className","placeholder","value","onChange","e","event","classList","remove","target","ref","onKeyDown","key","onClick","role","map","boardGame","selected","slug","src","image","alt","name","price","newRecommendations","resetRecommendations","canAddMoreBg","innerWidth","showDetails","setShowDetails","showTags","setShowTags","visibleTags","tags","slice","isMoreTags","players","min_players","max_players","playtime","min_playtime","max_playtime","isBanner","classnames","bg_rating","class","bg_rating_weight","lowest_price","replace","availability","thumb_url","noImage","expansion","min_age","complexity","Array","fill","item","i","parseInt","complexityGray","publisher_slug","publisher","tag","onFiltersChange","filters","setFilters","a","b","handleChange","newFilters","age","min","p","tf","tt","filterBoardGames","boardGames","filterParams","filter","ageResult","complexityResult","playersResult","playtimeResult","publisherResult","pu","filterOptions","versions","url","URL","q","filtersDefault","searchParams","get","split","Boolean","recommendations","setRecommendations","boardGamesQuery","setBoardGamesQuery","filteredBoardGames","setFilteredBoardGames","selectedVersion","showSelect","setShowSelect","showFilters","setShowFilters","handleSelectedBoardGame","fetchRecommendations","scrollTo","top","behavior","handleNewSelectedBoardGame","bgIds","version","ids","join","set","history","replaceState","document","title","board_games","redMeeple","bg","index","indexOf","BgSearch","filtersParams","forEach","o","element","getElementById","props","JSON","parse","getAttribute","addEventListener","ReactDOM"],"mappings":"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","file":"js/recommendation-b200aeb981d2d31d9354.js","sourcesContent":["import { useState, useRef, useEffect, useCallback } from 'react'\nimport Combobox from '@github/combobox-nav'\nimport axios from 'axios'\nimport debounce from 'lodash/debounce'\n\nfunction BgSearch({ recommendation = false, onSelect = null }) {\n  const inputElement = useRef()\n  const listElement = useRef()\n  const [search, setSearch] = useState('')\n  const [searchResults, setSearchResults] = useState([])\n  let combobox = null\n\n  const fetchDebounce = useCallback(\n    debounce((query) => {\n      apiSearch(query)\n    }, 400),\n    [],\n  )\n\n  useEffect(() => {\n    if (searchResults.length > 0) {\n      combobox = new Combobox(inputElement.current, listElement.current)\n      combobox.start()\n    }\n    return () => {\n      combobox?.destroy()\n    }\n  }, [searchResults])\n\n  function apiSearch(query) {\n    if (query.length > 1) {\n      axios.get(`/api/search_board_games?query=${encodeURIComponent(query)}`).then(function (response) {\n        setSearchResults(response.data)\n      })\n    } else {\n      setSearchResults([])\n    }\n  }\n\n  function openBoardGame(selected) {\n    if (selected.slug) {\n      if (onSelect) {\n        onSelect(selected)\n      } else {\n        if (recommendation) {\n          window.location.href = `/rekomendacje?q=${selected.slug}`\n        } else {\n          window.location.href = `/gry-planszowe/${selected.slug}/oferty`\n        }\n      }\n    }\n  }\n\n  function allResults() {\n    if (!!search) {\n      window.location.href = `/szukaj?q=${encodeURIComponent(search)}`\n    }\n  }\n\n  function handleChange(event) {\n    if (listElement.current) {\n      listElement.current.classList.remove('hidden')\n    }\n    setSearch(event.target.value)\n    fetchDebounce(event.target.value)\n  }\n\n  function onKeyDown(event) {\n    switch (event.key) {\n      case 'Escape':\n      case 'Esc':\n        setSearchResults([])\n        setSearch('')\n        break\n      case 'Enter':\n        allResults()\n        break\n      default:\n        return\n    }\n  }\n\n  return (\n    <>\n      <input\n        id=\"bg_search\"\n        type=\"search\"\n        pattern=\".*\\w+.*\"\n        required\n        autoComplete=\"off\"\n        className=\"form-input w-full lg:w-96\"\n        placeholder=\"Wpisz tytuł gry\"\n        value={search}\n        onChange={(e) => handleChange(e)}\n        ref={inputElement}\n        onKeyDown={onKeyDown}\n      ></input>\n\n      {searchResults.length > 0 && (\n        <div\n          className=\"dropdown-content absolute z-50 mt-1 h-[400px] w-auto overflow-x-auto rounded bg-purple-100 px-4 py-2 shadow-md lg:w-96\"\n          ref={listElement}\n        >\n          <a onClick={() => allResults()} key=\"allResults\">\n            <div\n              className=\"aria-selected:search_focus mb-2 cursor-pointer rounded-xl bg-white px-4 py-2 hover:bg-purple-900 hover:text-white\"\n              role=\"option\"\n            >\n              Szukaj frazy: {search}\n            </div>\n          </a>\n          {searchResults.map((boardGame) => (\n            <a onClick={() => openBoardGame(boardGame)} key={boardGame.slug}>\n              <div\n                className=\"aria-selected:search_focus mb-2 grid cursor-pointer grid-cols-4 gap-2 rounded-xl bg-white px-4 py-2 hover:bg-purple-900 hover:text-white\"\n                role=\"option\"\n              >\n                <div className=\"bg-white p-1\">\n                  <img src={boardGame.image} alt=\"-\" className=\"h-12 w-full object-scale-down\" />\n                </div>\n\n                <div className=\"col-span-3 lg:col-span-2\">\n                  {boardGame.name}\n                  <div className=\"font-extrabold text-purple-600 lg:hidden \">{boardGame.price}</div>\n                </div>\n                <div className=\"hidden font-extrabold text-purple-600 lg:block\">{boardGame.price}</div>\n              </div>\n            </a>\n          ))}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default BgSearch\n","import { useState } from 'react'\nimport classnames from 'classnames'\n\nimport complexity from '../images/complexity.svg'\nimport complexityGray from '../images/complexity-gray.svg'\nimport noImage from '../images/no-image.jpg'\n\nconst BoardGame = ({ boardGame, newRecommendations, resetRecommendations, canAddMoreBg }) => {\n  const [showDetails, setShowDetails] = useState(window.innerWidth >= 768)\n  const [showTags, setShowTags] = useState(false)\n  const visibleTags = showTags ? boardGame.tags : boardGame.tags.slice(0, 5)\n  const isMoreTags = boardGame.tags.length > 5\n\n  function bgRatingColor() {\n    if (boardGame.bg_rating >= 3.5) return 'bg-green-600'\n    if (boardGame.bg_rating >= 2) return 'bg-yellow-600'\n    return 'bg-red-600'\n  }\n\n  const players =\n    boardGame.min_players === boardGame.max_players\n      ? boardGame.min_players\n      : `${boardGame.min_players} - ${boardGame.max_players}`\n\n  const playtime =\n    boardGame.min_playtime === boardGame.max_playtime\n      ? boardGame.min_playtime\n      : `${boardGame.min_playtime} - ${boardGame.max_playtime}`\n\n  const isBanner = false //parseInt(boardGame.id) % 5 === 0\n\n  return (\n    <div\n      className={classnames(\n        'mt-8 flex flex-col lg:flex-row lg:justify-between py-2 container mx-auto rounded-xl',\n        { ['bg-purple-900 text-white']: isBanner },\n        { ['bg-white']: !isBanner },\n      )}\n    >\n      <div className=\"flex flex-row\">\n        <div className=\"ml-12 lg:mx-2\">\n          <div className=\"z-10\">\n            {boardGame.bg_rating && (\n              <div\n                className={` font-semibold shadow-lg rounded-xl  text-center text-white w-14 lg:w-20 py-2 px-2 lg:px-1 -mt-6 -ml-16 lg:-ml-10  ${bgRatingColor()}`}\n              >\n                <div className=\"font-extrabold text-2xl\">{boardGame.bg_rating}</div>\n                <div class=\"-mt-2 text-sm\">ocena</div>\n                <div class=\"-mt-2 text-sm\">graczy</div>\n                <div class=\"text-xs\">{boardGame.bg_rating_weight}</div>\n              </div>\n            )}\n          </div>\n          <div className=\"h-28 w-28 shadow-lg rounded-xl px-2 py-2 bg-white z-0 -ml-16 lg:-ml-10 mt-2\">\n            <div className=\"text-center px-1\">\n              <a href={`/gry-planszowe/${boardGame.slug}/oferty#tab`}>\n                <div className=\"text-gray-500 font-light text-xs mt-2\">Cena od:</div>\n                <div className=\"text-purple-600 font-extrabold text-xl mt-1\">\n                  {!!boardGame.lowest_price ? boardGame.lowest_price.replace('.', ',') + ' zł' : '-'}\n                </div>\n                <div\n                  className={classnames(' flex flex-row  mt-1 px-1', {\n                    ['text-green-600 text-xs']: boardGame.availability === 'available',\n                    ['text-yellow-600 text-xs']: boardGame.availability === 'pre_order',\n                    ['text-black-600 text-xs']: boardGame.availability === 'unknown',\n                    ['text-red-600 text-xs']: boardGame.availability === 'unavailable',\n                  })}\n                >\n                  {!!boardGame.lowest_price && <i className=\"fas fa-check mt-0.5\"></i>}\n                  {!boardGame.lowest_price && <i className=\"fas fa-times mt-0.5\"></i>}\n                  {boardGame.availability === 'available' && <span className=\"ml-1 font-bold\">Dostepna</span>}\n                  {boardGame.availability === 'pre_order' && <span className=\"ml-1 font-bold\">Przedsprzedaż</span>}\n                  {boardGame.availability === 'unknown' && <span className=\"ml-1 font-bold\">Sprawdź w sklepie</span>}\n                  {boardGame.availability === 'unavailable' && <span className=\"ml-1 font-bold\">Niedostępna</span>}\n                </div>\n              </a>\n            </div>\n          </div>\n        </div>\n        <div className=\"mx-4 lg:mx-0 lg:mr-4 \">\n          <a href={`/gry-planszowe/${boardGame.slug}/oferty`}>\n            <div className=\"w-36 lg:h-44 overflow-hidden pt-6 pb-2\">\n              <img src={boardGame.thumb_url || noImage} alt={boardGame.name} className=\"w-full h-full object-scale-down\" />\n            </div>\n          </a>\n        </div>\n      </div>\n      <div\n        className={classnames(\n          'flex flex-col  w-full lg:mr-4 px-8 lg:px-0 lg:ml-2',\n          { [' text-white']: isBanner },\n          { ['text-gray-700']: !isBanner },\n        )}\n      >\n        <div className=\"text-2xl w-full font-semibold lg:border-b-2 lg:border-gray-200 pb-2 mt-4 lg:mt-0\">\n          <div className=\"flex lg:flex-row flex-col justify-between text-center lg:text-left\">\n            <div className=\"flex flex-row\">\n              <a href={`/gry-planszowe/${boardGame.slug}/oferty`}>\n                <div className=\"lg:text-xl w-full font-extrabold \">{boardGame.name}</div>\n              </a>\n              <div className=\"ml-2\">\n                {boardGame.expansion && (\n                  <i className=\"group text-yellow-600 mt-1 fas fa-project-diagram fa-lg mr-4 lg:mr-0\">\n                    <div className=\"hidden group-hover:block absolute -mt-14 -ml-8 text-sm rounded uppercase font-sans font-bold p-2 bg-yellow-600 text-white\">\n                      Dodatek\n                    </div>\n                  </i>\n                )}\n                {!boardGame.expansion && (\n                  <i className=\"group text-green-600 mt-1 fas fa-box fa-lg mr-4 lg:mr-0\">\n                    <div className=\"hidden group-hover:block absolute -mt-20 -ml-14 lg:-mt-14 lg:-ml-14 text-sm rounded uppercase font-sans font-bold p-2 bg-green-600 text-white\">\n                      Gra podstawowa\n                    </div>\n                  </i>\n                )}\n              </div>\n            </div>\n\n            <a\n              className=\"hidden lg:block bg-purple-600 rounded-2xl hover:bg-purple-900 text-sm text-white px-4 py-2 font-bold uppercase text-center\"\n              href={`/gry-planszowe/${boardGame.slug}/oferty`}\n            >\n              Szczegóły\n            </a>\n            <a\n              onClick={() => setShowDetails(!showDetails)}\n              className=\"lg:hidden bg-purple-600 rounded-2xl hover:bg-purple-900 text-sm text-white px-4 py-2 font-bold uppercase text-center\"\n            >\n              {!showDetails && 'Pokaż więcej'}\n              {showDetails && 'Pokaż mniej'}\n              {/* {!showDetails && <i className=\"fas fa-sort-down\"></i>}\n              {showDetails && <i className=\"fas fa-sort-up\"></i>} */}\n            </a>\n          </div>\n        </div>\n        {showDetails && (\n          <div className=\"grid grid-cols-1 lg:grid-cols-3 mt-2\">\n            <div>\n              <div className=\"mt-1 text-sm\">\n                Liczba graczy: <span className=\"font-bold\">{players}</span>\n              </div>\n              <div className=\"mt-1 text-sm\">\n                Czas gry: <span className=\"font-bold\">{playtime} minut</span>\n              </div>\n              <div className=\"mt-1 text-sm\">\n                Wiek od: <span className=\"font-bold\">{boardGame.min_age} lat</span>\n              </div>\n              <div className=\"mt-1 text-sm flex flex-row\">\n                Trudność:\n                {boardGame.complexity &&\n                  Array(3)\n                    .fill()\n                    .map((item, i) => {\n                      if (parseInt(boardGame.complexity) >= i + 1) {\n                        return <img key={i} src={complexity} className=\"ml-1\" />\n                      } else {\n                        return <img key={i} src={complexityGray} className=\"ml-1\" />\n                      }\n                    })}\n              </div>\n              <div className=\"mt-1 text-sm\">\n                Wydawca:\n                {boardGame.publisher_slug && (\n                  <span className=\"font-bold ml-1\">\n                    <a href={`/wydawnictwo/${boardGame.publisher_slug}`} className=\"link\">\n                      {boardGame.publisher ? boardGame.publisher : '-'}\n                    </a>\n                  </span>\n                )}\n                {!boardGame.publisher_slug && (\n                  <span className=\"font-bold\">{boardGame.publisher ? boardGame.publisher : '-'}</span>\n                )}\n              </div>\n            </div>\n\n            <div className=\"mt-6 lg:mt-0\">\n              {visibleTags.map((tag) => {\n                return (\n                  <div key={tag}>\n                    <a\n                      href={`/szukaj?tgt=${tag}`}\n                      key={tag}\n                      className={classnames(\n                        'mt-1 text-sm font-bold  ',\n                        { ['text-purple-100']: isBanner },\n                        { ['text-purple-600']: !isBanner },\n                      )}\n                    >\n                      <i className=\"fas fa-tag\"></i> {tag}\n                    </a>\n                  </div>\n                )\n              })}\n              {visibleTags.length > 0 && isMoreTags && !showTags && (\n                <a onClick={() => setShowTags(true)} className=\"cursor-pointer text-purple-600\">\n                  <i className=\"fas fa-caret-down\"></i> więcej\n                </a>\n              )}\n              {visibleTags.length > 0 && isMoreTags && showTags && (\n                <a onClick={() => setShowTags(false)} className=\"cursor-pointer text-purple-600\">\n                  <i className=\"fas fa-caret-up\"></i> mniej\n                </a>\n              )}\n            </div>\n\n            <div>\n              <div className=\"flex flex-col items-end\">\n                {canAddMoreBg && (\n                  <button\n                    className=\"text-purple-600 hover:text-purple-900 text-sm px-4 py-2 font-bold uppercase text-center\"\n                    onClick={() => newRecommendations(boardGame)}\n                  >\n                    <i className=\"fas fa-plus\"></i> Dodaj kolejną grę\n                  </button>\n                )}\n                <button\n                  className=\"text-purple-600 hover:text-purple-900 text-sm px-4 py-2 font-bold uppercase text-center\"\n                  onClick={() => resetRecommendations(boardGame)}\n                >\n                  <i className=\"fas fa-search\"></i> szukaj podobnych gier\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default BoardGame\n","function Filters({ onFiltersChange, filters, setFilters, onChange = (a, b) => {} }) {\n  function handleChange(event) {\n    const newFilters = { ...filters, [event.target.name]: event.target.value }\n\n    setFilters(newFilters)\n    onFiltersChange(newFilters)\n    onChange(event.target.name, event.target.value)\n  }\n\n  return (\n    <div className=\"flex flex-col lg:flex-row justify-center items-center space-x-2 mb-2\">\n      <div>\n        <div className=\"py-1 text-purple-900  font-bold text-sm text-center\">Wiek od:</div>\n        <input\n          className=\"w-24 h-7 bg-white border border-gray-300 rounded shadow-sm  p-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600 text-purple-600 lg:text-sm\"\n          type=\"number\"\n          name=\"age\"\n          value={filters.age}\n          placeholder=\"wiek\"\n          onChange={handleChange}\n          min=\"1\"\n        />\n      </div>\n      <div>\n        <div className=\"py-1 text-purple-900  font-bold text-sm text-center\">Liczba graczy:</div>\n        <input\n          className=\"w-24  h-7 bg-white border border-gray-300 rounded shadow-sm  p-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600 text-purple-600 lg:text-sm\"\n          type=\"number\"\n          name=\"p\"\n          value={filters.p}\n          placeholder=\"graczy\"\n          onChange={handleChange}\n          min=\"1\"\n        />\n      </div>\n      <div>\n        <div className=\"text-purple-900 font-bold text-sm text-center px-4 py-1  \">Czas gry:</div>\n        <div className=\"flex space-x-1\">\n          <input\n            className=\"w-24  h-7 bg-white border border-gray-300 rounded shadow-sm  p-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600 text-purple-600 lg:text-sm\"\n            type=\"number\"\n            name=\"tf\"\n            value={filters.tf}\n            placeholder=\"od\"\n            onChange={handleChange}\n          />\n          <input\n            className=\"w-24  h-7 bg-white border border-gray-300 rounded shadow-sm  p-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600 text-purple-600 lg:text-sm\"\n            type=\"number\"\n            name=\"tt\"\n            value={filters.tt}\n            placeholder=\"do\"\n            onChange={handleChange}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Filters\n","export function filterBoardGames(boardGames, filterParams) {\n  return boardGames.filter((boardGame) => {\n    let ageResult = true\n    if (!!filterParams.age) {\n      ageResult = boardGame.min_age <= filterParams.age\n    }\n\n    let complexityResult = true\n    if (!!filterParams.complexity) {\n      complexityResult = boardGame.complexity == filterParams.complexity\n    }\n\n    let playersResult = true\n    if (!!filterParams.p) {\n      playersResult = boardGame.min_players <= filterParams.p && boardGame.max_players >= filterParams.p\n    }\n\n    let playtimeResult = true\n    if (!!filterParams.tf && !!filterParams.tt) {\n      playtimeResult = boardGame.min_playtime >= filterParams.tf && boardGame.max_playtime <= filterParams.tt\n    } else if (!!filterParams.tf) {\n      playtimeResult = boardGame.min_playtime >= filterParams.tf\n    } else if (!!filterParams.tt) {\n      playtimeResult = boardGame.max_playtime <= filterParams.tt\n    }\n\n    let publisherResult = true\n    if (!!filterParams.pu) {\n      publisherResult = boardGame.publisher === filterParams.pu\n    }\n\n    let tabResult = true\n    // if (!!filterParams.tab) {\n    //   switch (filterParams.tab) {\n    //     case 'expansion':\n    //       tabResult = boardGame.own && boardGame.expansion\n\n    //       break\n    //     case 'base':\n    //       tabResult = boardGame.own && !boardGame.expansion\n\n    //       break\n\n    //     default:\n    //       break\n    //   }\n    // }\n\n    let priceResult = true\n    // if (!!filterParams.price.from && !!filterParams.price.to) {\n    //   priceResult = boardGame.min_price >= filterParams.price.from && boardGame.min_price <= filterParams.price.to\n    // } else if (!!filterParams.price.from) {\n    //   priceResult = boardGame.min_price >= filterParams.price.from\n    // } else if (!!filterParams.price.to) {\n    //   priceResult = boardGame.min_price <= filterParams.price.to\n    // }\n\n    return (\n      ageResult && complexityResult && playersResult && playtimeResult && priceResult && tabResult && publisherResult\n    )\n  })\n}\n\nexport function filtersDefault() {\n  const url = new URL(window.location.href)\n\n  return {\n    age: url.searchParams.get('age'),\n    p: url.searchParams.get('p'),\n    tf: url.searchParams.get('tf'),\n    tt: url.searchParams.get('tt'),\n    tab: url.searchParams.get('tab'),\n    pu: url.searchParams.get('pu'),\n  }\n}\n\nconst filterOptions = ['age', 'p', 'tf', 'tt', 'tab']\n\nexport function onFiltersChange(filtersParams) {\n  const url = new URL(window.location.href)\n\n  filterOptions.forEach((o) => {\n    if (filtersParams[o]) {\n      url.searchParams.set(o, filtersParams[o])\n    } else {\n      url.searchParams.delete(o)\n    }\n  })\n\n  window.history.replaceState({}, document.title, url.href)\n}\n\nexport function onSortChange(sort, direction) {\n  const url = new URL(window.location.href)\n\n  url.searchParams.set('s', sort)\n  url.searchParams.set('d', direction)\n\n  window.history.replaceState({}, document.title, url.href)\n}\n\nexport function getSortValue() {\n  const url = new URL(window.location.href)\n  return url.searchParams.get('s')\n}\n\nexport function getSortDir() {\n  const url = new URL(window.location.href)\n  return url.searchParams.get('d')\n}\n\nexport function onTabChange(tab) {\n  const url = new URL(window.location.href)\n\n  url.searchParams.set('tab', tab)\n\n  window.history.replaceState({}, document.title, url.href)\n}\n\nexport function getTab() {\n  const url = new URL(window.location.href)\n  return url.searchParams.get('tab')\n}\n\nexport function setParamToUrl(key, value) {\n  const url = new URL(window.location.href)\n\n  url.searchParams.set(key, value)\n\n  window.history.replaceState({}, document.title, url.href)\n}\n","import { useState, useEffect } from 'react'\nimport axios from 'axios'\n\nimport BoardGame from './BoardGame'\nimport SimpleSelect from '../shared/SimpleSelect'\nimport Filters from '../shared/Filters'\nimport { filterBoardGames } from '../helpers/filterBoardGames'\nconst filterOptions = ['age', 'p', 'tf', 'tt']\nimport yellowM from '../images/myellow-1.svg'\nimport redMeeple from '../images/mred-1.svg'\nimport noImage from '../images/no-image.jpg'\nimport BgSearch from '../bg_search/BgSearch'\nimport Ad from '../shared/Ad'\n\nfunction Recommendation({ versions }) {\n  const url = new URL(window.location.href)\n  let q = []\n  if (url.searchParams.get('q')) {\n    q = url.searchParams.get('q').split(',').filter(Boolean)\n  }\n  function filtersDefault() {\n    return {\n      age: url.searchParams.get('age'),\n      p: url.searchParams.get('p'),\n      tf: url.searchParams.get('tf'),\n      tt: url.searchParams.get('tt'),\n    }\n  }\n\n  const [recommendations, setRecommendations] = useState([])\n  const [boardGamesQuery, setBoardGamesQuery] = useState([])\n  const [filters, setFilters] = useState(filtersDefault)\n\n  const [filteredBoardGames, setFilteredBoardGames] = useState([])\n  const [selectedVersion, setSelectedVersion] = useState(versions[versions.length - 1].id)\n\n  const [showSelect, setShowSelect] = useState(q.length === 0)\n  const [showFilters, setShowFilters] = useState(false)\n\n  const canAddMoreBg = q.length < 3\n\n  useEffect(() => {\n    fetchRecommendations(q)\n  }, [])\n\n  function removeSelectedBoardGameId(id) {\n    const index = q.indexOf(id)\n    q[index] = null\n    fetchRecommendations(q.filter(Boolean))\n  }\n\n  function handleSelectedBoardGame(selected) {\n    if (q.length >= 3) {\n      q[2] = selected.slug\n    } else {\n      q[q.length] = selected.slug\n    }\n\n    fetchRecommendations(q)\n    window.scrollTo({ top: 0, behavior: 'smooth' })\n  }\n\n  function handleNewSelectedBoardGame(selected) {\n    q = [selected.slug]\n\n    fetchRecommendations(q)\n    window.scrollTo({ top: 0, behavior: 'smooth' })\n  }\n\n  function fetchRecommendations(bgIds, version = selectedVersion) {\n    const ids = bgIds.join(',')\n    // .filter(Boolean)\n    url.searchParams.set('q', `${ids}`)\n    window.history.replaceState({}, document.title, url.href)\n\n    if (bgIds.length === 0) {\n      setRecommendations([])\n      setFilteredBoardGames([])\n      setBoardGamesQuery([])\n      setShowSelect(true)\n    } else {\n      axios.get(`/api/recommendations?q=${ids}&version=${version}`).then(function (response) {\n        // handle success\n        setRecommendations(response.data.recommendations)\n        setBoardGamesQuery(response.data.board_games)\n        setFilteredBoardGames(filterBoardGames(response.data.recommendations, filtersDefault()))\n        setShowSelect(false)\n      })\n    }\n  }\n\n  function clear() {\n    setRecommendations([])\n    setFilteredBoardGames([])\n    setFilters({ age: '', p: '', tf: '', tt: '' })\n    url.searchParams.delete('q')\n    filterOptions.forEach((o) => {\n      url.searchParams.delete(o)\n    })\n    window.history.replaceState({}, document.title, url.href)\n  }\n\n  function handleVersionChange(event) {\n    setSelectedVersion(event.target.value)\n    fetchRecommendations(q, event.target.value)\n  }\n\n  function onFiltersChange(filtersParams) {\n    filterOptions.forEach((o) => {\n      if (filtersParams[o]) {\n        url.searchParams.set(o, filtersParams[o])\n      } else {\n        url.searchParams.delete(o)\n      }\n    })\n\n    window.history.replaceState({}, document.title, url.href)\n\n    setFilteredBoardGames(filterBoardGames(recommendations, filtersDefault()))\n  }\n\n  return (\n    <div className=\"container mx-auto\">\n      {/* <div className=\"mt-2 container mx-auto flex flex-row\">\n        <div className=\"text-2xl font-bold\">Rekomendacje</div>\n      </div> */}\n      {/* <div className=\"mt-4\">\n        Wersja rekomendera:{' '}\n        {versions.map((version) => {\n          return (\n            <label key={version.id}>\n              <input\n                type=\"radio\"\n                value={version.id}\n                checked={selectedVersion == version.id}\n                onChange={(e) => handleVersionChange(e)}\n              />\n              {version.name}\n            </label>\n          )\n        })}\n\n      </div> */}\n      <div className=\"flex flex-col justify-center lg:space-x-6 bg-purple-100 rounded-3xl mx-auto mt-8 \">\n        <div className=\"flex-grow text-xl text-center py-3 bg-purple-600 text-white font-extrabold rounded-t-3xl\">\n          Rekomendacje\n        </div>\n\n        {/* <div className=\"flex flex-col items-center lg:flex-row\">\n          <div className=\"mx-4 w-32 lg:w-48\">\n            <img src={yellowM} alt=\"\" className=\"w-full\" />\n          </div>\n          <div className=\"flex flex-col text-sm mx-4 text-justify text-gray-700\">\n            <div>\n              Planszeo rekomendacje polecą Ci gry, które powinny Ci się spodobać na podstawie Twoich upodobań. Wpisz\n              tytuły gier, które lubisz, a pokażemy Ci listę polecanych dla Ciebie gier.\n            </div>\n          </div>\n\n          <div className=\"flex flex-col text-sm mx-4 text-justify text-gray-700\">\n            <div>\n              Możesz też zaznaczyć w ile osób chciałbyś grać i jak długo chcesz aby trwała rozgrywka. Jeżeli szukasz gry\n              do grania z dziećmi, wpisz dla jakiego wieku ma być przeznaczona gra.\n            </div>\n          </div>\n          <div className=\"mx-4 w-32 lg:w-48\">\n            <img src={greenM} alt=\"\" className=\"w-full\" />\n          </div>\n        </div> */}\n        <div className=\"flex flex-col lg:flex-row justify-center items-center px-2 lg:px-12 mt-2\">\n          <div className=\"text-center max-w-md\">\n            Na podstawie wybranych tytułów i filtrów polecamy gry, które Ci się spodobają.\n          </div>\n          <div className=\" w-1/3 lg:w-1/6 my-auto mt-2 lg:mt-0\">\n            <img src={redMeeple} alt=\"Planszeo Meeple\" className=\"w-full\" />\n          </div>\n        </div>\n\n        <div className=\"flex flex-col lg:flex-row justify-center items-center content-center  space-x-1 space-y-1 mt-2\">\n          {boardGamesQuery.length > 0 && <div className=\"py-2 text-purple-900 uppercase font-bold \">Wybrane gry:</div>}\n          {boardGamesQuery.map((bg) => {\n            if (bg) {\n              return (\n                <div\n                  key={bg.slug}\n                  className=\"flex flex-row content-center items-center bg-white rounded-xl py-2 px-4 shadow-lg text-gray-700 lg:w-1/4\"\n                >\n                  <div className=\"w-12 h-12 overflow-hidden\">\n                    <img src={bg.thumb_url || noImage} alt={bg.name} className=\"w-full h-12 object-scale-down\" />\n                  </div>\n                  <div className=\"max-w-sm font-semibold text-sm overflow-ellipsis p-1\">{bg.name}</div>\n                  <i className=\"fas fa-times p-1 cursor-pointer\" onClick={() => removeSelectedBoardGameId(bg.slug)}></i>\n                </div>\n              )\n            }\n            return null\n          })}\n        </div>\n\n        <div className=\"flex flex-col lg:flex-row justify-center my-2 p-4 lg:p-0\">\n          {showSelect && (\n            <BgSearch\n              onSelect={(selected) => handleSelectedBoardGame(selected)}\n              placeholder=\"Wpisz tytuł gry, którą lubisz\"\n            />\n          )}\n          {!showSelect && canAddMoreBg && (\n            <button\n              onClick={() => setShowSelect(true)}\n              className=\"bg-purple-600 rounded-2xl hover:bg-purple-900 text-sm text-white px-4 py-2 font-bold uppercase text-center\"\n            >\n              <i className=\"fas fa-plus\"></i> dodaj kolejną grę\n            </button>\n          )}\n          <button\n            onClick={() => setShowFilters(!showFilters)}\n            className=\"text-purple-600 hover:text-purple-900 text-sm px-4 py-2 font-bold uppercase text-center\"\n          >\n            <i className=\"fas fa-filter\"></i> Filtry\n          </button>\n        </div>\n\n        {showFilters && (\n          <div className=\"mt-2 p-2 lg:p-0\">\n            {/* <SearchBy tags={boardGamesTags} /> */}\n            <Filters\n              onFiltersChange={onFiltersChange}\n              filters={filters}\n              setFilters={setFilters}\n              filtersDefault={filtersDefault()}\n            />\n            {/* <button\n              onClick={() => clear()}\n              className=\"-mt-2 text-purple-600 hover:text-purple-900 text-sm px-4 py-2 font-bold uppercase text-center\"\n            >\n              Wyczyść wszystko <i className=\"fas fa-times\"></i>\n            </button> */}\n          </div>\n        )}\n      </div>\n\n      {filteredBoardGames.map((boardGame, index) => {\n        if (index === 0) {\n          return (\n            <div className=\"mt-4\" key={boardGame.slug}>\n              <h2 className=\"text-2xl font-bold\">Nasze rekomendacje:</h2>\n              <BoardGame\n                key={boardGame.slug}\n                boardGame={boardGame}\n                newRecommendations={(bg) => handleSelectedBoardGame(bg)}\n                resetRecommendations={(bg) => handleNewSelectedBoardGame(bg)}\n                canAddMoreBg={canAddMoreBg}\n              />\n            </div>\n          )\n        }\n\n        return (\n          <>\n            <BoardGame\n              key={boardGame.slug}\n              boardGame={boardGame}\n              newRecommendations={(bg) => handleSelectedBoardGame(bg)}\n              resetRecommendations={(bg) => handleNewSelectedBoardGame(bg)}\n              canAddMoreBg={canAddMoreBg}\n            />\n          </>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default Recommendation\n","import ReactDOM from 'react-dom'\nimport Recommendation from './Recommendation'\n\nconst element = document.getElementById('recommendation_component')\nconst props = JSON.parse(element.getAttribute('data-props'))\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  ReactDOM.render(<Recommendation versions={props.versions} />, element)\n})\n"],"sourceRoot":""}