I have a quite clear idea in mind for the underlying flow / features for a webpage (module) I'd love to build!
Example here!:
I really like this way of navigating, using left / right arrow keys between columns. And the branching structure of the "cards".
I've been learning more Web development as of late, but I thought to seek some guidance before I step full on into it. I'm mostly familiar with Angular and have briefly touched React... But I'm open to learning pretty much anything. How should I go about approaching making, i.e., a blog with this form of navigation and topical-branching? Any pointers, to tools, similar solutions, could be anything, would be greatly appreciated:)
I’ve tried picking the website above apart, but it didn’t take me far. I am having a real hard time finding out what the correct search terms are, so now I'm mostly just broadly scanning the field of different web applications trying to find if there are better ways to describe what I’m thinking about.
Just use rxjs operator fromEvent
export const LEFT_ARROW = 37;
export const UP_ARROW = 38;
export const RIGHT_ARROW = 39;
export const DOWN_ARROW = 40;
finished: Subject<any> = new Subject<any>();
ngOnInit()
{
fromEvent(document,'keydown').pipe(
takeUntil(this.finished)
filter((key:any)=>key.keyCode>=LEFT_ARROW && key.keyCode<=DOWN_ARROW)
).subscribe((key:any)=>{
switch(key.keyCode)
{
case LEFT_ARROW:
...
break;
case RIGHT_ARROW :
...
break;
...
}
})
}
ngOnDestroy() {
this.finished.next();
this.finished.complete();
}
Related
I'm learning React and am trying to make a component that displays an image dependent on props (game) passed through it. So far I'm using a switch statement that changes the source of the image, but I'm expecting to have a lot more cases than just 2 in the future. In all the switch examples I've seen online they only use like maybe 7 different cases. Is 50+ switch cases too much and will lower performance? I'm pretty new to coding and am wondering if this method is inefficient for lots of cases...
<Pictures game=""/>
Pictures Component
import A from './images/game1.jpg'
import B from './images/game2.jpg'
function Pictures(props) {
let source;
switch(props.game){
case 'game_1':
source = A;
break;
case 'game_2':
source = B;
break;
}
return (
<div>
<img src={source} alt="First slide"/>
</div>
);
}
export default Pictures;
What I tried is technically working, but I'm not sure if it will make load times too long with 50+ cases.
Looking for some direction and help. I am new to JavaScript and NodeJS and have not been able to find anything online on how to do this. I've written a minesweeper game in JavaScript and would like to be able to inject user written code into the game loop instead of taking inputs.
The main problem I am running into is getting access to the methods I've built into the game class. Here's the code.
class Game {
constructor() {
this.GameBoard = new MineSweeperBoard(true);
autoBind(this);
}
pop(x ,y){
this.GameBoard.pop(x, y);
}
flag(x, y){
this.GameBoard.flag(x,y);
}
removeFlag(x,y){
this.GameBoard.RemoveFlag(x,y);
}
checkWin(){
this.GameBoard.CheckForWin();
}
getGameBoard(){
return this.GameBoard.GetRevealedGameBoard()
}
}
function StartGame() {
let CurrentGame = new Game();
let win = false;
while(CurrentGame.GameBoard.RunGame) {
//User Code here
*User written code should run right about here.*
// Check win condition
if(CurrentGame.checkWin()){
win = true;
}
}
Any help or direction would be appreciated.
*** Edit ***
To answer some question that have been asked.
1: This isn't secure: Yes I understand there are potential security implications to running user generated code. As of right now that is not a concern as this is mostly a proof of concept.
2: Why do I want to do this: Because I want to see if it's possible and I know others have found ways to securely run user code (i.e. Screeps). Right now I would like to see what is possible.
I have this coding:
*(uint32_t*) 0xFFFFFFFF8269C07Cull=0;
*(uint32_t*) 0xFFFFFFFF8269B56Full=0;
And I want to convert this to something similar to:
function doWrite(write) {
setBase(write);
u32[0] = 0x0006b3e9;
u32[1] = 0x0f2e6600;
u32[2] = 0x0000841f;
u32[3] = 0x90000000;
u32[4] = 0xbf495741;
u32[5] = 0x263ffff8;
u32[6] = 0x00000009;
u32[7] = 0x413f8b4d;
u32[8] = 0x5f41d7ff;
u32[9] = 0xc0c748c3;
u32[10] = 0x0000001a;
u32[11] = 0xffffdfe8;
u32[12] = 0x0f66c3ff;
u32[13] = 0x0000441f;
u32[14] = 0x148b4865;
}
But the problem is, I don't know what the first coding example is called, which is a problem for looking it up on Google.
Questions:
What is the first coding example called?
What is the second coding example called?
What tool can I use to convert the first coding to something similar to the second example?
Any answer would help a lot. I am 100% new to this kind of stuff.
From what I can understand, you are trying to mimic the PS4 payload injection to enable the Developers Debug Menu/Settings. Since most customization and modding on PS4 is in C#, perhaps you should use the C# tag or, probably the more effective option, post your question on a more appropriate forum, which specifically deals with the modification of the PS4 software.
https://www.psxhax.com/
Here is an additional link I found for a script which is used to sending payloads
Hope this helps!
I am programming a multi-player game with JavaScript and html. For this objective I need communication between the players. How can I manage this?
My code:
enchant();
window.onload = function() {
var game = new Game(320, 320);
Here my first question: It should be counted how many player is that now, who entered the room last. Then a number should be assigned to this player. I´d like to solve this with a function.
var my_bear = get_player_number();
game.preload('chara1.gif');
game.fps=15;
var bears = [];
game.onload = function() {
var ix;
var bear;
for (ix = 0; ix < 5; ix++) {
bear=new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
bear.frame = 4;
bear.x=Math.random()*300;
bear.y=Math.random()*300;
game.rootScene.addChild(bear);
bears.push(bear);
}
};
game.start();
var addit=6;
document.addEventListener('keyup',function (evt) {
if(evt.keyCode == 38){bears[my_bear-1].y-=addit;}
if(evt.keyCode == 39){bears[my_bear-1].x+=addit;}
if(evt.keyCode == 40){bears[my_bear-1].y+=addit;}
if(evt.keyCode == 37){bears[my_bear-1].x-=addit;}
});
}
Due to this simplification of my programme you have 5 bears. One of them you can control with the arrow-keys (the bear with the value of the variable “my_bear”).
But it´s still a single-player game yet...
init_other_players(my_bear);
A function would be perfect, which detects and indicates any movement of a player on an other computer.
Webspace an two domains are available for my programme.
I´m very looking forward to your helpful answer, thank you !!!
First, if you want multiplayer, you need something to manage the rooms and such, so you need a server. For games, I'd suggest NodeJS. Node is a server app built in JS, so a language you are familiar with. You don't need to know too much about node for now, simply running it will be enough while you progress on your code, after that I'd say you should look a bit more into it.
After, I'd look into Socket.io which lets you manage your websockets and therefore communication between the users and the server. There are tutorials about a chat in the Get Started section of the website which will you let you know the basics of communication between users.
From there you can create the logic for your rooms and the rest of your game! It may look like a lot to learn but, honstly, it's well explained and quite easy to get a grasp of.
This is probably a difficult question to answer as I'm not sure what the root problem is here, would appreciate if someone would take a look though.
http://threadfinder.net/search%3FnameTags=jacket/0
If you continually scroll down, more items are loaded in using ngInfiniteScroll and this function:
$scope.moreProducts = function() {
if ($scope.busy || $scope.noMore){return;}
else
if (!($scope.busy)) {
$scope.busy = true;
$scope.itemsLoaded += 27;
var theQuery = $routeParams.query.replace(/\?|%3f/gi, '');
$scope.itemSearch.get({
query: theQuery,
page: $scope.itemsLoaded
}, function(data) {
if (data.posts.length <= 0) {
$scope.noMore = true;
} else {
$scope.noMore = false;
for (var i = 0; i < data.posts.length; i++) {
if ($scope.user) {
if (!($scope.user.likes.indexOf(data.posts[i]._id) === -1)) {
data.posts[i].liked = 'http://i.imgur.com/CcqoATE.png';
} else {
data.posts[i].liked = 'http://i.imgur.com/tEf77In.png';
}
$scope.posts.push(data.posts[i]);
}
}
$scope.busy = false;
}
});
}
}
(I'm using AngularJS Deckgrid for the tile layout, but I've tried disabling it and there is no big change in performance.)
If you keep scrolling, after you get to ~300 items loaded on the page performance starts to take a hit and the app freezes while new items are being loaded into scope.
I understand that perhaps it's just a fact that loading in all this data takes a big load on the page - with every 27 items loaded in (one infiniteScroll GET call) the total weight of the data being loaded in is about 30kb a pop, so at around 300 items there's ~900kb of data in scope. This data is as little as I can make it (~500 lines of JSON).
The question is:
Are there any recommendations, plugins, directives or best-use practices for AngularJS for when loading a lot of data in the page $scope?
For clarification, the app is built on Node/ExpressJS/MongoDB
EDIT: I've checked out this issue on two computers (both on OSX) and this issue is MUCH more prevalent in Chrome than in Safari. Chrome totally staggers when loading in the data, Safari is really smooth and only has any noticable lag when you get to 600+ items and even then it's nowhere near as bad as Chrome.
I took a look at the page with AngularJS Batarang, and it doesn't appear that your app is spending a lot of time in the digest cycle. If you take a look at Chrome's "Timeline" panel during the periods of UI lag, you can see the following:
(full size)
Most of the time is spent in lots of "Parse HTML." A quick Google searched turned up this Stack Overflow question, which has some answers that may be useful; in particular, the Groups post about manual string concatenation by be worth trying here. You may also consider trying to break up the big block of HTML parses into smaller chunks by adding new items to the scope in small batches (perhaps using $evalAsync or a few timers) to see if that helps.