I am trying to build an application for android tv and I wanted to use the remote movements. I first checked if there was a package which could help me with this but I could not find one.
Then I moved on to the official documentation listed here
I am trying to use this code:
var TVEventHandler = require('TVEventHandler');
class Game2048 extends React.Component {
_tvEventHandler: any;
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
cmp.setState({board: cmp.state.board.move(1)});
} else if(evt && evt.eventType === 'left') {
cmp.setState({board: cmp.state.board.move(0)});
} else if(evt && evt.eventType === 'down') {
cmp.setState({board: cmp.state.board.move(3)});
} else if(evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
But the var TVEventHandler = require('TVEventHandler'); says no module was found called TVEventHandler. And I tried to import it manually from react-native/Libraries/Components/AppleTV and that gives me an error stating that the component may not have been exported error.
I am not sure what I am doing wrong here. I did everything the Doc asks
Resolved the issue. Use this in your class Instead. And make sure to import the TVEventHandler from react-native:
_tvEventHandler: any;
_enableTVEventHandler() {
var self = this;
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
console.log("kcubsj"+evt.eventType)
if (evt && evt.eventType === 'right') {
console.log('right');
} else if (evt && evt.eventType === 'up') {
console.log('up');
} else if (evt && evt.eventType === 'left') {
console.log('left');
} else if (evt && evt.eventType === 'down') {
console.log('down');
} else if (evt && evt.eventType === 'select') {
//self.press();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
Original Answer
Related
I'm creating a .Net Core application.
I wanted to know if there is a solution for my issue.
At the moment, I'm created a function which is load like that :
if (window.addEventListener) {
window.addEventListener('load', browser);
} else {
window.attachEvent('onload', browser);
}
function browser() {
if (navigator.userAgent.indexOf("Chrome") !== -1) {
if (navigator.userAgent.indexOf("Edge") !== -1)
console.log("Microsoft Edge");
else
console.log("Chrome");
}
else if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
console.log("Opera")
}
else if (navigator.userAgent.indexOf("Safari") != -1) {
console.log('Safari');
}
else if (navigator.userAgent.indexOf("Firefox") != -1) {
console.log('Firefox');
}
else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10
{
console.log('IE');
}
else {
console.log('unknown');
}
}
And I wanted to know if I change the console.log by return, if it will be possible to get the different return value in a controller ?
Thank you for your help.
Stuck setting tic tac toe up. I have the board set, turns for players 1 and 2, all box# win possibilities, and some reason it's alerting that player has won even though they didn't. Example player1=x player2=o sq1 && sq2 &&sq3 returns true so x-o-x alerts as winner for player one
$(document).ready(function() {
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('You cant do that! Nice try');
} else {
if (player == 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2') && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5') && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4') && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5') && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5') && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5') && $('.sq7').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
You are missing the hasClass(symbol) on some of the boxes.
Change all:
if ($('.sq1').hasClass(symbol) && $('.sq2') && $('.sq3').hasClass(symbol)) {
return true;
To:
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
How would I determine if there's a draw? ( begginer coder problems)
I can identify who's the winner but can't seem to figure out how to implement the draw part! please help
heres my code not the prettiest, let me know how I can improve
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
$("#goAgain").click(function(event) {
location.reload();
});
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('Sorry, that has already been taken!');
} else {
if (player === 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4').hasClass(symbol) && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
If you have a class .square which all the squares have, then you can run a forEach loop over that class like $(.square).forEach(function(){..., which checks if the square is empty. If none of the squares are empty then a boolean game_still_on would be false and from that, after your syncronous loop has completed you would initiate the draw-game routine.
I have got a problem with my script making browser 's window to fullscreen. It's working for a single document ("document.body") but after click link to another site, browser closes fullscreen mode. Is it possible to change:
document.body
to something like this:
window.[...]
to make fullscreen mode pernamently like it is after press F11.
My script looking like that:
function toggleFullScreen() {
// ## The below if statement seems to work better ##
if((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (document.body.requestFullScreen) {
document.body.requestFullScreen();
} else if (document.body.mozRequestFullScreen) {
document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullScreen) {
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
Here is my code:
$(function() {
$('#fadeinright').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinright");
}
});
$('#fadeinleft').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinleft");
}
});
$('#fadeintop').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeintop");
}
});
$('#fadeinbottom').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinbottom");
}
});
$('#simplefadein').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("simplefadein");
}
});
Does some one knows how to make it shorter?
i am about to add more classes, and im not sure its the right way of doing the code.
here is an example how it works: https://jsfiddle.net/nbgdzspy/35/
My variant
$('#fadeinright, #fadeinleft, #fadeintop, #fadeinbottom, #fadeinbig, #fadeinsmall').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass($(this).attr('id'));
}
});
Here is one way:
['fadeinright', 'fadeinleft', 'fadeintop', 'fadeinbottom', 'fadeinbig', 'fadeinsmall'].forEach(function (name) {
$('#' + name).waypoint(function (direction) {
if (direction === 'down') {
$(this).removeClass(name);
}
}, {
offset: '100%'
});
});