These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Dec 2017
Chi
@chiyc
Dec 07 2017 00:05
@krj1 You haven't asked us a question. What do you want us to help you with?
Amit Patel
@AmitP88
Dec 07 2017 00:16

hey guys, how do I use Modal.setAppElement(appElement); with react-modal? I'm getting an error in console that says:

browser.js?1af0:49 Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting ariaHideApp={false}.

I've looked at the github docs here: https://github.com/reactjs/react-modal

but I couldn't find where they implemented it in the example code.

krj1
@krj1
Dec 07 2017 00:16
i don't understand how to store and edit data with JavaScript when the data is provided by html. to that extent i don't know how to re show the data after i have ran my function
Amit Patel
@AmitP88
Dec 07 2017 00:17
modal.png
Chi
@chiyc
Dec 07 2017 00:47

@AmitP88 Here's some documentation that can help you. https://reactcommunity.org/react-modal/examples/set_app_element.html

You need to call Modal.setAppElement() outside of the class declaration. The argument you pass it can be HTML query selector

Chi
@chiyc
Dec 07 2017 00:53
@krj1 You start off by selecting the DOM node you want to get data from or push data to. You can use this using the standard browser API or jQuery. Then, there are additional methods to either retrieve or replace the HTML inside your selected nodes
AbrisM
@AbrisM
Dec 07 2017 01:27
@krj1 Your lucky you can link to google fonts. We aren't allowed to use any external links :(
google library*
Does anyone know how to successfully add a moving background in their html file? I have a .mov and I'm wondering how to incorporate it as a background image in html
AbrisM
@AbrisM
Dec 07 2017 01:56
got disconnected, thanks :D
Does anyone know how to make the blink effect in CSS compatible for chrome?
Amit Patel
@AmitP88
Dec 07 2017 02:05
@chiyc actually, I was able to resolve it by passing in ariaHideApp={false} in <Modal>, but thanks for your help. I really appreciate it :)
CamperBot
@camperbot
Dec 07 2017 02:05
amitp88 sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Dec 07 2017 02:10
@AmitP88 Awesome! Glad you figured it out
Amit Patel
@AmitP88
Dec 07 2017 02:11
@chiyc actually I found the solution on here: reactjs/react-modal#576 but thanks lol :)
CamperBot
@camperbot
Dec 07 2017 02:11
amitp88 sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
api offline
Amit Patel
@AmitP88
Dec 07 2017 02:12

@chiyc I am running into another issue though, this time with a react slider:

(https://github.com/akiran/react-slick) I'm having some trouble figuring out how to get slide content to show up properly. It shows up where the dots are at the bottom instead of on the actual slides (slides appear blank). I get no errors in console either.
questionaire-component.png

the code I used is from the example code in the docs (will modify later)
Liang-Shih Lin
@ll931217
Dec 07 2017 02:30
@AbrisM Use animation and opacity
Chi
@chiyc
Dec 07 2017 02:35
@AmitP88 Do you possibly still need slick-carousel css and fonts?
Amit Patel
@AmitP88
Dec 07 2017 02:39
@chiyc I do, but I was hoping I can save that for later. For now I'm more focused on just getting my components (and content) to render properly in the right places
Chi
@chiyc
Dec 07 2017 02:40
@AmitP88 It's possible that you need them for it to display properly. You can either @import the packages you need or add the CDN link to your HTML, which would be a quick change
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Amit Patel
@AmitP88
Dec 07 2017 02:41
@chiyc hmm, I'll give it a shot real quick using the CDN. if it works, I'll import the packages
@chiyc it sorta worked, except now my previous button disappeared lol. I'll see if I can figure that part out though
slideshow-adjusted.png
Chi
@chiyc
Dec 07 2017 02:44
Hahah, did you get both CDN links in there?
Amit Patel
@AmitP88
Dec 07 2017 02:45
yeah lol
hmmm, my close button won't work either when I click it
Chi
@chiyc
Dec 07 2017 02:46
Interesting. Also, are you using React DevTools to help debug your app?
Amit Patel
@AmitP88
Dec 07 2017 02:47
yeah, I'm using that too, but no errors showed up on that either
reactdevtools.png
Chi
@chiyc
Dec 07 2017 02:48
Even if there are no actual errors, it can help you locate where the different components of your app are
Your <Slider /> component should have a nested <InnerSlider /> component and a div with your <PrevArrow /> and <NextArrow /> inside that div
Amit Patel
@AmitP88
Dec 07 2017 02:52
slideshow-adjusted.png
Chi
@chiyc
Dec 07 2017 02:52
Exactly, and when you hover over the different lines of React code, it highlights the corresponding element on the page
Amit Patel
@AmitP88
Dec 07 2017 02:54
yeah, the <InnerSlider> is in there. I don't know why the modal close button isn't working though. I'm not sure if I should move it to the slideshow component, since the slideshow is nested within it
logically the modal component funcationality and slideshow funcationality should be separate right?
Chi
@chiyc
Dec 07 2017 02:56
I don't know if you've changed the Modal code from earlier, but you had set isOpen={true}, meaning it will never close
Amit Patel
@AmitP88
Dec 07 2017 02:57
oh yeah, I changed it from before
modal(new).png
Chi
@chiyc
Dec 07 2017 03:02
And yeah, your carousel shouldn't be interfering with the modal functionality
Amit Patel
@AmitP88
Dec 07 2017 03:03
omg
I did inspect elements and my dots are overlayed on the close button lol
XP
Chi
@chiyc
Dec 07 2017 03:03
Ohhh, hahahah. They're blocking your click?
Amit Patel
@AmitP88
Dec 07 2017 03:04
overlay.png
from the looks of it yeah
Chi
@chiyc
Dec 07 2017 03:05
By the way, there's this awesome Chrome extension called Pesticide that's really good at showing you the actual boxes of elements on your page. It helped me track down a bug where I couldn't get onHover to work correctly once
Amit Patel
@AmitP88
Dec 07 2017 03:06
ah ok, I'll check it out right now :)
wow, that is super helpful
@chiyc thanks bro :) looks like I'll have to create a stylesheet and adjust the margin for the close button, but at least it wasn't an error with my components, which I was worried about
Chi
@chiyc
Dec 07 2017 03:07
Sure thing! :smile:
Amit Patel
@AmitP88
Dec 07 2017 03:08
damn, it won't let me give you cookies lol
@chiyc thank you :)
CamperBot
@camperbot
Dec 07 2017 03:12
amitp88 sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @chiyc |http://www.freecodecamp.org/chiyc
Amit Patel
@AmitP88
Dec 07 2017 03:12
there we go lol
Chi
@chiyc
Dec 07 2017 03:12
Hahah, thanks! :yum:
Amit Patel
@AmitP88
Dec 07 2017 03:14
lol np X)
Pendramon
@Pendramon
Dec 07 2017 04:18
Why doesn't this work? document.getElementById("result").innerText = Number(itemAmount * itemCost) - Number(discountAmount / 100); returns to me NaN all values are correct and are numbers for sure. I am trying to calculate price after sale percentage;
Chi
@chiyc
Dec 07 2017 04:25
@Pendramon Do you have the rest of the code?
Pendramon
@Pendramon
Dec 07 2017 04:26
Everything else is correct i am 100% sure 1 sec i'll get it for you
Pendramon
@Pendramon
Dec 07 2017 04:31
@chiyc nvm i got it. Had it as itemAmount = document.getElementById("itemInput").value; and so on... just changed it to document.getElementById("itemInput") and did (itemAmount.value itemCost.value) - ((itemAmount.value itemCost.value) - discountAmount / 100)
@chiyc Thanks for responding tho really appreciate it
CamperBot
@camperbot
Dec 07 2017 04:32
pendramon sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Dec 07 2017 04:33
Oh, cool. You’re welcome! It’s awesome you figured it out!
Marc
@MWBauer
Dec 07 2017 05:33
Hey everyone
er.....anyone
chadcuomo
@chadcuomo
Dec 07 2017 05:47
Hello
Liang-Shih Lin
@ll931217
Dec 07 2017 05:49
Lol hello @MWBauer
Bogdan
@oblanao
Dec 07 2017 09:53
Hello, just finished my first D3 project - Simple Bar Chart. Check it out here: https://codepen.io/oblanao/full/aVrooX/ Any feedback welcome! Thank you very much
alpox
@alpox
Dec 07 2017 10:10
@oblanao Looks good :-)
Only one little thing: If you move your cursor too fast from the left to right, the tooltip won't show up because the pointer event gets captured by the previous tooltip.
Add .style('pointer-events', 'none') to the tooltip to make it work :-)
Bogdan
@oblanao
Dec 07 2017 12:03
@alpox thanks for the tip!
CamperBot
@camperbot
Dec 07 2017 12:03
oblanao sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1489 | @alpox |http://www.freecodecamp.org/alpox
dinesh
@1532j0004kg
Dec 07 2017 13:33

$(document).ready(function(){
  $("button").click(function(){
  if(navigator.geolocaion)
    {
      navigator.geolocation.getCurrentPosition(function(position){
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        $.ajax({
          url : 'https://fcc-weather-api.glitch.me/api/current?lat='+lat+"&lon="+lon,

          success : function(result){
          var ourData = result.name;
          $("#select").html(ourData);
        }
        });   
      });
    }
  });
});
guys,can u please tell y this is not working?
Markus Kiili
@Masd925
Dec 07 2017 13:43
@1532j0004kg What is geolocaion ;)
dinesh
@1532j0004kg
Dec 07 2017 13:45
ohh yes!!!
hehe!
@Masd925 But still its not showing the right answer.
$(document).ready(function(){
  $("button").click(function(){
  if(navigator.geolocation)
    {
      navigator.geolocation.getCurrentPosition(function(position){
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;  

        $.ajax({
          url : 'https://fcc-weather-api.glitch.me/api/current?lat='+lat+"&lon="+lon,

        success : function(response)
        {
          var ourData = JSON.parse(response.cod);
          $("#select").html(ourData);
             }
          });   
       });
     }
  });
});
Markus Kiili
@Masd925
Dec 07 2017 13:46
@1532j0004kg Try to console.log those callback parameters and variable values.
dinesh
@1532j0004kg
Dec 07 2017 13:47
@Masd925 ok marks i will try and tell u.
it actually display nothing.!!!
Markus Kiili
@Masd925
Dec 07 2017 13:54
@1532j0004kg There is an error on the browser developer tools console (F12 on most browsers).
dinesh
@1532j0004kg
Dec 07 2017 13:55
Is this shows the right answer?
dinesh
@1532j0004kg
Dec 07 2017 14:01
what i want to do? @Masd925
Stephen James
@sjames1958gm
Dec 07 2017 14:08
@1532j0004kg If you do something like this you can start to see the data - then you can decide what data you want from result and how you want to show it
document.querySelector("#weather").textContent = JSON.stringify(result);
dinesh
@1532j0004kg
Dec 07 2017 14:09
@sjames1958gm @Masd925 thanks
CamperBot
@camperbot
Dec 07 2017 14:09
1532j0004kg sends brownie points to @sjames1958gm and @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 8757 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:star2: 4596 | @masd925 |http://www.freecodecamp.org/masd925
dinesh
@1532j0004kg
Dec 07 2017 14:10
Now its working good!
Markus Kiili
@Masd925
Dec 07 2017 14:15
@1532j0004kg :+1:
Stephen James
@sjames1958gm
Dec 07 2017 14:15
@1532j0004kg :checkered_flag:
tundeiness
@tundeiness
Dec 07 2017 15:11

hi campers. So i'm apparently doing something wrong with this code: the searchValue can't seem to store the value retrieved from the input box. Any help?

<input type="text" size="20" maxlength="30"name="search" placeholder="Search Wikipedia" Id="searchstring" class="sTerm">

that is the html code. The below is the Javascript code:

var searchValue = $('#searchstring').attr('searchstring');

any heads up on this? Thanks.

Sulaiman
@suli-g
Dec 07 2017 15:16
@tundeiness The javascript looks like you're trying to get an attribute of "searchstring" from $("#searchstring") and the attribute "searchstring" doesn't exist.
What you want is val(), since you want the value of the input box, and not attr('searchstring') (which would work if your input box had a searchstring="blah" on it)
Chuck Pierce
@ChuckPierce
Dec 07 2017 15:17
also id is capitalized it looks like
tundeiness
@tundeiness
Dec 07 2017 15:18
@suli-g did .val() once...didn't work that time, but i will try again
@ChuckPierce yes it is sigh
tundeiness
@tundeiness
Dec 07 2017 15:24

@suli-g so I did this:

var searchvalue = $('#searchstring').val()

and i'm getting empty string?

Chuck Pierce
@ChuckPierce
Dec 07 2017 15:44
is there anything in the input?
Stephen James
@sjames1958gm
Dec 07 2017 15:45
@tundeiness Are you running that code in an on change event handle, so it runs after input is in the element?
Onome Sotu
@onomesotu
Dec 07 2017 17:52
Good evening all
Can anyone confirm why this code gives me syntax error on the console?
A_A
@Otto-AA
Dec 07 2017 17:52
@onomesotu Good evening :)
Onome Sotu
@onomesotu
Dec 07 2017 17:53
let(a = 2){ console.log(a); //-> 2 }
@Otto-AA hello :smile:
according to YDKJS scope and closure book, it should print 2
Kaz Baig
@kbaig
Dec 07 2017 17:55
what are you trying to do
A_A
@Otto-AA
Dec 07 2017 17:55
@onomesotu The declaration is wrong (SyntaxError: missing variable name)
Onome Sotu
@onomesotu
Dec 07 2017 17:55
but i get a syntax error when i test it out on the console, so it's wrong syntax from the author?
Kaz Baig
@kbaig
Dec 07 2017 17:55
that's not the syntax for the let keyword
A_A
@Otto-AA
Dec 07 2017 17:55
Try let a = 2 instead of let (a = 2)
Onome Sotu
@onomesotu
Dec 07 2017 17:55
I know the let should go like this
{
    let a = 2;
    console.log(a);
}
A_A
@Otto-AA
Dec 07 2017 17:57
so in complete:
let a = 2;
if (true) {
   console.log(a);
};
// or
let a = 2;
{
   let b = 3;
   console.log(a, b);
}
console.log(b);  // this will throw an error because b is not declared in this scope
A_A
@Otto-AA
Dec 07 2017 17:59
didn't know that the second one without if actually works ^^
Onome Sotu
@onomesotu
Dec 07 2017 18:00
@Otto-AA I understand all that :smile: I was just wondering if this was correct becuase it didn't work on the console
@Otto-AA Yes, it works without an If
A_A
@Otto-AA
Dec 07 2017 18:01

But, there's a problem. The let-statement form is not included in ES6. Neither does the official Traceur compiler accept that form of code.

I guess that's the reason it doesn't work

(also from your tutorial)
Onome Sotu
@onomesotu
Dec 07 2017 18:06
@kbaig @Otto-AA thanks.. I checked but just wanted to make sure
CamperBot
@camperbot
Dec 07 2017 18:06
onomesotu sends brownie points to @kbaig and @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 404 | @otto-aa |http://www.freecodecamp.org/otto-aa
Onome Sotu
@onomesotu
Dec 07 2017 18:07
@Otto-AA I wonder why he commented print 2 instead of saying it would throw a syntax error
A-J Roos
@Asjas
Dec 07 2017 18:14

@onomesotu Again, the guy continues to explain why it doesn't work and how to get it to work.
`
We have two options. We can format using ES6-valid syntax and a little sprinkle of code discipline:

But, tools are meant to solve our problems. So the other option is to write explicit let statement blocks, and let a tool convert them to valid, working code.

So, I built a tool called "let-er" [^note-let_er] to address just this issue. let-er is a build-step code transpiler, but its only task is to find let-statement forms and transpile them. It will leave alone any of the rest of your code, including any let-declarations. You can safely use let-er as the first ES6 transpiler step, and then pass your code through something like Traceur if necessary.
`

If you read what is actually in the book you'll get the answers in there
Onome Sotu
@onomesotu
Dec 07 2017 18:16
@Asjas I got it in the end, but here I just think it's weird that he commented output of 2 in the code..instead of just saying syntax error..
let (a = 2) {
    console.log( a ); // 2
}
A-J Roos
@Asjas
Dec 07 2017 18:17
Yeah I have it opened.
Onome Sotu
@onomesotu
Dec 07 2017 18:17
ok good
@Asjas but thanks, I will read up on performance now :)
CamperBot
@camperbot
Dec 07 2017 18:18
onomesotu sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @asjas |http://www.freecodecamp.org/asjas
A-J Roos
@Asjas
Dec 07 2017 18:18
No i didn't mean performance. I meant read the entire part of Implicit vs Explicit Blocks. Top to bottom. The book gives the answers
Onome Sotu
@onomesotu
Dec 07 2017 18:21
yeah.. found that out. thanks Use original ES6 syntax or trans-pile using let-er
Alan Price
@alanpaulprice
Dec 07 2017 18:30
Hey guys, I was wondering if anyone could help me figure out why there is an extra, unwanted delay before my fade in animation is happening. It's on the keybinds info at the bottom of the page: https://alanpaulprice.github.io/metronome/
I have it set to a 1.5 second delay, but it should be fading in at the same time as the other info on the left
Tom
@moT01
Dec 07 2017 18:46
@alanpaulprice 190-193 in the css
i think
Alan Price
@alanpaulprice
Dec 07 2017 18:49
@moT01 i have both #keybinds-legend-keys and #keybinds-legend set to do the same animation, how come they're not acting identically? can you spot what i'm doing wrong?
Tom
@moT01
Dec 07 2017 18:49
three `
Alan Price
@alanpaulprice
Dec 07 2017 18:50
oops!
// ===== ANIMATIONS =====

#bpm-readout {
  animation: animateFade 1.5s ease-in both;
}

#keybinds-legend-keys, #keybinds-legend {
  animation: animateFade 1.5s 1.5s ease-in both;
}

@keyframes animateFade {
  0%{ opacity: 0 }
  100%{ opacity: 100% }
}

//=====

#wrapper {
  animation: descend 1.5s ease-out both;
}

@keyframes descend {
  0%{ margin-top: -1750px }
  75%{ margin-top: 25px }
  100%{ margin-top: 0 }
}
Tom
@moT01
Dec 07 2017 18:51
you can edit or delete messages with the options at the right of the message - 3 little dots appear on hover
so i think what is happening after a short look - is that you have an animation on both the container and one of the items in the container
Alan Price
@alanpaulprice
Dec 07 2017 18:51
thanks, it's deleted
Tom
@moT01
Dec 07 2017 18:52
so the container comes in - then the item with the animation comes in 1.5 seconds after
Alan Price
@alanpaulprice
Dec 07 2017 18:53
haha damn it, it's always something really dumb ..
@moT01 thank you!
CamperBot
@camperbot
Dec 07 2017 18:53
alanpaulprice sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 926 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Dec 07 2017 18:53
well, try it
im not sure
Alan Price
@alanpaulprice
Dec 07 2017 18:53
i have, it works the way i expected now :)
Tom
@moT01
Dec 07 2017 18:54
cool
Alan Price
@alanpaulprice
Dec 07 2017 18:54
thanks again mate
Onome Sotu
@onomesotu
Dec 07 2017 19:17
Can anyone explain how to use 'normalize.scss' if installed via npm?
Do I have to require it in the gulpfile?
Onome Sotu
@onomesotu
Dec 07 2017 19:48
I solved it
sharkantropo
@sharkantropo
Dec 07 2017 19:49

Hey community. I'm trying to fill up gaps on my attempt to code an unbeatable AI for my TicTacToe challenge.
Here's the codepen, don't mind the rough css: tictactoe challenge.
What I want to point out can be appreciated here: on this doodle. This shows grosso modo how the AI predicts next play and try to win the game or sabotage player's victory for a draw if winning is not possible. Some observations:

1) Recursion stops right after finding an end stage condition(draw/win/lost), not after filling up the board and then evaluate it.
2) It doesn't discriminate boards with same minmax value. It just returns the first board with the lowest minmax found.

Thus I think the issue should be lingering within these two.

Kelsey
@iverunamok
Dec 07 2017 20:00
Hi there everybody! Would love to get any feedback on my Tribute Page challenge(<a href=https://codepen.io/iverunamok/pen/LxrqZJ target="_blank">Click here !</a>)... I am specifically having trouble working with bootstrap and getting the text and some pictures to be mobile responsive and would really appreciate anyone that might be able to check over my code to see if there is something that jumps out at them! watching bootstrap tutorials now!
haha well... that link didn't work...
alpox
@alpox
Dec 07 2017 20:03
@sharkantropo Its very hard to read through your code. It seems that you don't follow the minmax principles (or only align to it a little) and blew your code up quite much and it gets hard to track what is where. I'm sorry that i cannot give much feedback on this without analyzing it for an hour or more
sharkantropo
@sharkantropo
Dec 07 2017 20:11
@alpox thanks,I know It's hard to track, even when I tried to put everything together as attributes of an object. That's why I've uploaded that image as support material. Why It seems I don't follow minmax principles?.
CamperBot
@camperbot
Dec 07 2017 20:11
sharkantropo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1492 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Dec 07 2017 20:14
@sharkantropo I don't exactly understand your way of calculating the loss/gain for a certain player. Also, your datastructures seem overcomplicated to handle
I'm not sure if the overall dataflow works the right way because i cannot track it right :D
Tom
@moT01
Dec 07 2017 20:15
@iverunamok i've never seen the <body> inside a div like that - probly not a good idea
instead of 12 <br> tags you could add some margin for spacing
i dont think the <center> tag is still used
not sure on the <font> one either
Kelsey
@iverunamok
Dec 07 2017 20:17
@moT01 cool... thanks for the feedback!
CamperBot
@camperbot
Dec 07 2017 20:17
iverunamok sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 927 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Dec 07 2017 20:19
i see some indenting in the code that probly shouldn't be like that...
<div>
  <img>
</div>
kinda supposed to be like that ^^
Kelsey
@iverunamok
Dec 07 2017 20:21
@moT01 cool, I will change that... I am super new at this, and would love any and all feedback to make the project better!
Tom
@moT01
Dec 07 2017 20:21
i understand
we've all been there
theres a drop down arrow/menu in each section of codepen with an analyze option - shows some errors
sharkantropo
@sharkantropo
Dec 07 2017 20:22
@alpox When in a board AI wins, which plays with 'O',minmax is calculated by a base of -10 plus the amount of the AI moves made only during the predictions. It resets to 1 everytime user makes a play. When player wins, is calculated with a base of 10 minus the amount of AI moves. It's all over the place because I coded in such a way that calculates minmax and evaluates victory condition everytime a new board is generated.
@alpox wish i could sort this out in a more efficient and reader friendly way too.
alpox
@alpox
Dec 07 2017 20:27
@sharkantropo Okay... i don't exactly know what you mean with base of -10 plus something :D May work too, idk. But for my understanding, minmax only needs 2 states (good/bad, -1/1 or whatever) for describing a win/loose depending on the board state. (For tic-tac-toe specifically)
Also, you don't need multiple boards. There is no need to save any in between, this only takes up memory and makes things very hard to track
You can operate on just one board actually
keymaster777
@keymaster777
Dec 07 2017 20:31
Hey guys I came across something that I'd like to use an image map for and I found this resource http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG I think i'll try and do it the way listed in the article but the problem is I have no idea how to work with svg and my knowledge of SVG's is very basic. Does anyone have a link or resource that put me in the right direction?
alpox
@alpox
Dec 07 2017 20:33
To elaborate: you only need 2 state because you bubble down recursively until you set all stones on the board until its full or a win took place. Depending on which player won, you yield -1 or 1.
Each recursion level always evaluates the values of the next recursion level (Deeper down) and takes the min/max of those values (Always max if going with negamax variant) and scores that branch with that min/max value.
the uppermost recursion level therefore gets the final evaluation and gets to evaluate which stone actually should be set.
@sharkantropo
sharkantropo
@sharkantropo
Dec 07 2017 20:45
@alpox I see. My code stores the uppermost set of boards instead and performs recursion to set the proper min/max value for each board. I picked 10 to tell how deep it went before reaching a victory/loss state.
alpox
@alpox
Dec 07 2017 20:46
@sharkantropo Hmm i see. While this could work, it makes it a bit complicated as you maybe see :D But I guess its a good try :+1:
I used an additional recursion parameter deep which i just increased in each recursive call so i always know on what level i am.
Also, i used only 1 copy of the board to produce the min/max. The min/max value is the return value of the recursion call. So there is no need to store it, because you just pass it
Now you can try to make it work your way if you want, but as you see, help is rare that way :D
If you're positive about managing on your own with your way, go with it
alpox
@alpox
Dec 07 2017 20:54
@sharkantropo Quite obvious, but i want to point it out, is that this algorithm is not really on the level of FCC newcomers which just reach the tic-tac-toe project, even though its a really good / hard challenge :) so you're sure doing great!
Lots of people don't go so far to even try
sharkantropo
@sharkantropo
Dec 07 2017 20:59
@alpox Na, I made it this way because since I felt FCC encourages to figure things out by your own. This is what I came up with after reading some minmax theory, but I would gladly switch if that means to make something more simple and effective, unless that implies I have to start from scratch D: . May I see an example of an implementation of that simpler solution?
alpox
@alpox
Dec 07 2017 21:02
@sharkantropo I can show you mine if it helps your vision
The core algorithm may be quite understandable, just don't read the stuff all around, because there is a bit more complicated react/redux going on
sharkantropo
@sharkantropo
Dec 07 2017 21:05
@alpox Alright then thanx for pointin' that out. I'll take a look.
CamperBot
@camperbot
Dec 07 2017 21:05
sharkantropo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline