This is my first time using NodeJS so I apologize in advance if this is a noob question.
I want to build a NodeJS chess app where the user can play the computer, but the computer's moves are calculated on the backend. I've been trying to get chessboardjs to work, but I can't get much further than displaying a completely static start position. I'm using EJS to render the view. Here's what I've got so far:
<%- include('_header') %>
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>
<center>
<h1>chess app</h1>
<div id="board" style="width: 400px"></div>
<script src='js/board.js'></script>
</center>
<%- include('_footer') %>
and board.js contains exactly the code from https://chessboardjs.com/examples#5001 (for now, random moves will suffice, I just want to figure out how to get this to work on the backend). Also, how exactly should I go about integrating chess.js? The tutorial completely skips it but I have no clue where to start on that.
Thank you in advance for your help! I really really appreciate it.
Generally, games have a certain number of things you need to manage like current state, game loops, etc. This state ideally live on the client side and persisted on the serverside periodically. So i feel since there is no backend code and there's isn't much info here, i suggest you start with a simpler game, react website had a tic-tac-toe tutorial if you are familiar with react that would be a good starting point to understand game development in general. Then i would recommend this book it has an excellent chapter on developing a browser game.
https://eloquentjavascript.net/
Now specifically for chess, we have something called a chess engine which processes the current state and suggests moves like stockfish which is a very complex and not something a newbie can implement
Related
Ok, I know this is probably impossible but I currently have a spreadsheet on google sheets that I would like to share with a large group of people, but unfortunately the last time I did this there were countless people that took the information and claimed it as their own and other such problems. No one had a problem downloading google drive to access the spreadsheet and did so without complaint. I've since removed that sheet and completely changed the layout and information. I was wondering if there was any way to make things more difficult for anyone that would like to screenshot the sheet. I know that anyone that looks into it can figure out how to screenshot anything, but I honestly don't think they will, and if they decide to go through more steps just to screenshot the info then o well. It's the internet and some things can't be prevented.
TL,DR; Can I add anything to my google spreadsheet to make taking a screenshot more difficult. I'm also willing to move the spreadsheet to another program if that is required, as long as I can still share the information. Everyone that the sheet is for will download the app to access it.(well, 98% of them) I know it sounds silly, but any help would be greatly appreciated.
I want to state that I have looked for awhile and haven't been able to find an answer for my particular question but if this has an answer somewhere and I missed it please direct me there and i will remove this question., and I would also like to say that "you can't stop someone from taking a screenshot, deal with it" isn't required.
Thanks you to anyone that read this. Hopefully someone has some insight and hopefully this helps others with any similar problems.
Below is an example of a client side script that gets the data feed from a spreadsheet (make sure the sheet is published and set to anyone with the link can view). With the data feed you could do anything, such as a table that disappears after a few seconds, or add a watermark as mentioned above. You could also render the data in hard to copy format such as light grey text on a white background.
//https://docs.google.com/spreadsheets/d/1OY18xmnT-O4AWzGDC63RvzzmNgyKHOnuvq-RX6M_6xw/edit#gid=0
var spreadsheetID = "1OY18xmnT-O4AWzGDC63RvzzmNgyKHOnuvq-RX6M_6xw";
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/1/public/values?alt=json";
$.getJSON(url, function(incomingData) {
data = incomingData;
var entry = data.feed.entry;
showData(entry)
});
function showData(entry){
for (var items in entry){
console.log(entry[items].gsx$fruit.$t +": "+ entry[items].gsx$number.$t )
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm planning to use Material-UI CSS framework (http://material-ui.com) in order to design front-end of a website, but I don't have any idea about how to use this framework.
I'm not familiar a lot with NPM, Browserify, etc. I just need to know how shall I start in order to learn the way to use this CSS framework.
Thanks for any help!
Don't be intimidated by the (apparent) complexity of webpack and other (great) build tools, and don't be discouraged by envious jerks who say things like "To be honest, I think you got a big problem to use this stuff."
The reason why the material-ui implementation (usage) is based on these tools is because is currently the best way to write software and understanding this and other frameworks is a great way to learn why this is the "right" way, and become proficient at writing quality modular code.
Webpack, and the other build tools, exist for one purpose: to create one "main" file from your app's source code that can be read and delivered to your users' browser in an efficient manner. Long gone are the days when we would write a bunch of include (script) tags for every resource (file) we need in our pages and thus have our users wait until all these were downloaded from our server (or multiple locations e.g.: cdns) and then the page would load. The efficiency is based on the fact that you can deliver one (often minified/compressed) file that contains all your code and any code it depends on (e.g. React or even jQuery).
Build tools accomplish this by asking you 3 things: what file to start with (entry main file), what tools (loaders) to use to process non-native JavaScript code within your code (scss, jsx, etc) and what file to create as the result (converted and minified output). This output file will be the one you use in your html import/script tag. It will contain your code plus all other dependencies, which would be a nightmare to include and resolve manually yourself. Here is a good beginners' guide.
Material-ui, like many other frameworks (reason why I took the time to explain all of the above) is built with modularity in mind: pieces of code can be "glued" or "pieced" together like Legos, in order to easily build bigger parts. You do this by simply including the components you need in any component you create. They are React components which are a simple way to define (write/create) the "building blocks" of your site/app. There are tons of great videos and tutorials to get you started with React (my favorite is reactjsprogram.com by Tyler McGinnis).
To get you started with material-ui, they have created a couple of examples to get started using webpack. Follow the simple steps to install npm and the dependencies (you can find them in package.json) and open the /src directory in your editor. You'll figure it out in no time.
You are in the right track with the right attitude by asking questions, learning to be a good developer, researching and trying to find the easiest way to accomplish your goal.
Had pretty much the same problem. Wanted a simple way to start using material-ui without the gibberish. Here's what I did:
npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js
This gave me a javascript file, material-ui.js, I could then include in my HTML. In my case I'm using electron, so this is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content"></div>
<script>
require('./material-ui.js')
</script>
<script type="text/babel">
import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';
const FlatButtonExampleSimple = () => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
ReactDOM.render(
<FlatButtonExampleSimple />,
document.getElementById('content')
);
</script>
</body>
</html>
Material-UI is a set of React components in addition to being a CSS framework. I don't know if you can get much use out of it without understanding React.
The easiest way to get started is to install the examples and start from there.
If you don't want to deal with a frontend framework like React, and just want CSS and JS files with a setup time as quick as Bootstrap, check out the Materialize library.
To be honest, I think you got a big problem to use this stuff.
Firstly, it depends on Facebook's View framework called React so you have to know well some basic things.
Secondly,React is totally a javascript stuff and if you use it by coding plain javascript, that would be an other big problem which may stop you.otherwise if you use it's syntax sugar called jsx, you still need to pay plenty of times to learn well it so that you could know how React work and then you could use it in your project.
Thirdly, before the above mentioned happen, there are still several things required that you dont need to know well NodeJs or webpack or NPM but at least you should know well how to use them as the simple tools.
So, is it a must that you have no other choice but have to use this stuff and only act it as a simple css framework?
If not! you can give up now except you are ready to learn tons of dependencies!!!
If yes! I advice you to install nodejs first and then install npm and then use npm to install react maybe you still need to install some tools like babel browserify or webpack(the best) and then dive into React and then you could begin learning how to use MUI~ sounds...mass
There isnt a quick pickup way for MUI just like they said!
If you use the react+redux, you can use the
https://github.com/takanabe/react-redux-material_ui-boilerplate
template.
I wrote a sample node project showing how to bundle a react component for consumption in non-react websites using webpack. It's a similar approach to dkantowitz's, except it removes the need to introduce react or reactDom to the consuming website.
The example as it is would need to be extended to allow use with multiple components (like material-ui is) but I think it provides a good starting point for seeing whats involved with webpack and babel etc
I have recently started a blog, in which I talk about programming, reading, science, and math. Now, for the programming part, I have installed SyntaxHighlighter, but I am rather confused with what I should use for math. I'm thinking about using MathJax, since I'm used to it and it's pretty good. The issue is, MathJax will interfere with other stuff. For example, it can interfere with any PHP code (which has lots of dollar signs) that I use on a programming post.
Now I want to keep the inline/block dollar signs, but I don't want it to blow up other stuff. I was thinking about associating MathJax with a certain CSS class, so that I can enclose all sections which use math extensively with those tags. By this, I mean that I can still type normally within those divs (without having it math-ified), but I can use the dollar signs and get math code. Outside the divs, any dollar signs will be left alone.
Does anyone know a configuration option that lets me do this? I know JS, but I can't find any options in the documentation. Thought I'd ask here before plowing through the code.
add class="tex2jax_ignore" to your document <body> tag, and then use class="tex2jax_process" on the containers for the parts of your page where you want to include mathematics. As others have pointed out, you can configure the class names to use for these features. E.g.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'],['\\(','\\)']],
processClass: "mathjax",
ignoreClass: "no-mathjax"
}
});
</script>
Then your page would be
<html>
<head>
...
</head>
<body class="no-mathjax">
...
<div class="mathjax">
... (math goes here) ...
</div>
...
</body>
</html>
Hope that helps.
Davide
Credit: #MarkS.Everitt
http://www.mathjax.org/docs/1.1/options/tex2jax.html
There is a configuration option, processClass: "tex2jax_process"
The final configuration becomes:
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],'
ignoreClass: "[a-zA-Z1-9]*",
processClass: "math"
}
});
The existing answers are IMO not real solutions because they involve modifying your HTML. Sometimes this isn't even possible, but even when it is, who wants to dirty their markup with meaningless CSS classes just to get MathJax working?
Insert the following tag before the <script> tag that imports MathJax:
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{
elements: mathElements
}
);
</script>
where mathElements contains a list of DOM elements to be processed, for example something like var mathElements = document.querySelectorAll("article").
If MathJax can export formula as image, I can use to insert it to a webpage easily. Unfortunately, current MathJax don't support to export image! :(
Is there a simple way to create a embeded code to show formula just like Twitter above? If you have, could you show me some sample codes? Thanks!
< href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="my">Tweet
< script type="text/javascript" src="//platform.twitter.com/widgets.js">
See my response to this question on the MathJax user's forum.
MathJax does not have image creation capabilities, and I don't know of a way to
make that possible from Javascript (a quick web search suggests it is not readily doable).
If you are looking to convert TeX to images, there are plenty of tools for doing that
already. You could, for example, use TeX with dvipng, or one of the tools designed for
that like the LaTeX Equation Editor or Laeqed applications. There are a number of
on-line tools for doing this as well.
This question is already kinda old. But was searching for something like this myself. Apparently there are some Tex Rendering Services Available.
Take a look at this Answer:
https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image
Try this
<html>
<head>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
$$e = mc^2$$
</body>
</html>
http://jsfiddle.net/16h1hjot
I have searched for two days on google trying to solve this problem. I have also searched this forum and read the FB Dev page till my eyes hurt. I asked this question two days ago and it got removed. I completely understand but if I am asking it incorrectly please, please, help me to ask correctly or point me in the right direction or tell me im an idiot, anything.
I am trying to use FB.UI to "Publish a story to the feed" from my site. That is working fine.
My problem is that I want to add a video instead of a photo. So based on the FB DEV docs, I am trying to use the "source" property to do this. But I have tried multiple video formats to no avail (avi, mp4, flv). The only thing that does seem to work is a SWF file but I do not have the video in that format. (tried to do that also but don't have the right tools)
Does anyone know if you have to use SWF or can you use another format and I am doing it wrong.
You can see my progress here http://www.thishope.org/facebook-tab.html (click on "get a free song" to get the dialog box.)
This is the code from my page
<html>
<head>
<title>This Hope</title>
<link href="http://www.thishope.org/this-hope-fb-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '244237565620746',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<div id="fb-link">
<script type="text/javascript">
function newInvite(){
FB.ui({ method: 'feed',
message: 'Get A Free Song!',
source:'http://www.thishope.org/FB-Only-One-Lord.mp4',
name:'Get A Free Song By This Hope!',
caption:'Only One Lord',
description:'Click share to post on your wall and download the song',
});
}
</script>
Get A Free Song!
</div>
</body>
</html>
Could you not host a flash video player like flowplayer?
I know it supports FLV, not sure about other formats, you may need to convert to FLV server side first
You can then attach the SWF URL to your post, which will have the advantage of the video being playable right inside Facebook's news feed
Check this sample page's source: http://sdoyle.fbdublin.com/tests/tasks/632942.html
The meta tags on this page, when detected by Facebook (via a share or Like), render the flowplayer video player right into the news feed post, and flowplayer knows which video to play via the configuration passed to it as a parameter.
I know it's not exactly what you're trying to do, but should give you the right idea for your video.
You should be able to embed in the same manner by using the source parameter for the Feed Dialog to specify a flash player for your content