How build a Spritesheet with pure CSS and JS in React js

See also questions close to this topic

• Why is my JavaScript object property inaccessible, when it IS, in fact, defined?

  Here is the object. It is a second-level object in the data tree:

  user: {
    userId: 3,
    username: 'aragorn',
  },
  

  My React component is destructuring its parent object and making it available to the entire component. When I render the full user object using this code:

  <p className="small">
    {`Submitted by ${JSON.stringify(user)}`}
  </p>
  

  I get a complete stringified object with all of user's properties:

  

  When I try to access only the 'username' property from the 'user' object:

  <p className="small">
    {`Submitted by ${JSON.stringify(user.username)}`}
  </p>
  

  I get this error:

  

  Have you ever faced this weird issue before?

  For further study, here is the full data object. This is coming from a mock data object being exported from a neighboring file in the same app. No network requests to a backend or anything, so there shouldn't be any async stuff going on here (I may be wrong):

  {
  title: "The Hefalump's Tale",
  page: '32',
  line: '1',
  author: 'Joni E. Driskill',
  genre: 'Sci-fi',
  type: 'Motivational',
  content: 'The grass is greener on the other side, unless, in actuality and reality, it is not. I guess in that case, you can just give up on anything nice in life.',
  claps: 23,
  id: 4,
  user: {
    userId: 3,
    username: 'aragorn',
  },
  comments: [
    {
      commentId: 0,
      quoteId: 0,
      content: 'Comment content',
      userId: 'userId',
      claps: 2,
      date: 2,
    },
    {
      commentId: 1,
      quoteId: 1,
      content: 'Comment content',
      userId: 'userId',
      claps: 4,
      date: 1,
    },
    {
      commentId: 2,
      quoteId: 2,
      content: 'Comment content',
      userId: 'userId',
      claps: 12,
      date: 0,
    },
  ],
  

  },

  And HERE is my React component, called 'Meta,' bringing in the 'quote' object as a prop. The primary line in question is toward the bottom, but feel free to look at my props destructuring, too, if you like:

  import React from 'react';
  import Clap from '../mechanics/Clap';
  import Report from '../mechanics/Report';
  
  const Meta = ({
    quote: {
      content,
      title,
      author,
      page,
      line,
      genre,
      type,
      claps,
      id,
      user,
    },
  }) => (
    <div className="discussion-meta mb2">
      <h1>&ldquo;{content}&rdquo;</h1>
      <hr />
      <div className="columns is-spaced-around pb3 text-align-left">
        <div className="column">
          <h3>{title}</h3>
          <p>
            <small>by {author}</small>
          </p>
          {page ?
            <p>
              <small>page {page}{line ? `, line ${line}` : ''}</small>
            </p>
            : null
          }
        </div>
        <div className="column text-align-right">
          <p>
            <span className="tag-purple small">{genre}</span>
          </p>
          <p>
            <span className="tag-green small">{type}</span>
          </p>
        </div>
      </div>
      <div className="columns">
        <div className="column">
          <p className="small">
            {`Submitted by ${JSON.stringify(user.username)}`}
          </p>
        </div>
      </div>
      <div className="columns">
        <div className="column">
          <Clap claps={claps} />
        </div>
        <div className="column">
          <Report id={id} />
        </div>
      </div>
    </div>
  );
  
  export default Meta;
  

  I've recreated in CodeSandbox, and it works! WTF! https://codesandbox.io/s/4q9nlywl1x
• Mongoose Save Nested Array of Objects - Node.js

  I've created my model and can save an array of objects by manually listing them out, however this won't work in production because my array will not always be the same size.

  Below is an example of my code. The issue I'm having when saving an array of objects under the stackRank field.

  If anyone has any suggestions that would be great and a life saver!

  Mongoose Model

  const MySchema = mongoose.Schema({
    userId: {type: mongoose.Schema.Types.ObjectId, ref: 'User', require: true},
    startDate: {type: Date, require: true},
    endDate: {type: Date, require: false}, 
    length: {type: Number, require: true},
    inProgress: {type: Boolean, require: true, default: true}, 
    stackRank:[{
      appUsers: {type: mongoose.Schema.Types.ObjectId, ref: 'Users', require: true}
    }]
  });
  

  Saving Code in Express

  const mySchema = new MySchema({  
        userId: req.body.userId,
        startDate: today,
        length: req.body.startLength,
        stackRank: [          //TODO this is the part I need to change
          {appUsers: Array[0]}, 
          {appUsers: Array[1]},
          {appUsers: Array[2]}
        ]
      });
  
      instantComp.save()
      .then((result) => {
        console.log('result from save', result)
      })
      .catch(err => console.log('error promise all', err))
  

  Desired Functionality

  Instead of saving each value of the array individually for the field appUsers nested in stackRank, I want to be able to save the entire array at once because it will not always have a length of three. It will almost always vary in length so while the code I've written works for an array of this size, it won't actually function properly for me.

  Picture of how I want the data to be saved in Mongo
• Android WebView: how to scroll to an <a name=here> position

  I'm loading a self-created HTML page into a WebView in an Android app.

  The HTML page contains a tag like <a name="here"></a> somewhere in the middle.

  After loading that page, I'd like to be able to programmatically scroll to that position, as if I had clicked on a <a href="#here">here</a> link.

  I tried with loadURL and with loadDataWithBaseURL, with every possible parameter combinations that I could think of, without success.

  Note 1: I want to be able to scroll to that position after the page has been already displayed.

  Note 2: I cannot use scrollTo(x,y) because I don't know the y position of that <a name="here"> anchor within the page. If I could figure out the y position in the page of that <a name> tag, that would also solve the problem, but I don't know how to find that y value either.

  (P.S. I'm loading the self-created HTML page by calling loadDataWithBaseURL(null, _html, null, null, null); where _html is the string with my HTML page)
• Why is my background image animation not running?

  I'm making a website to tell you the weather as a personal project to understand jquery and working with APIs. I'm trying to map the speed of the clouds moving along the screen to the wind speed. the problem is i can't get the clouds animation to work.

  #clouds{
      background-size: 300px 217px;
      height:300px;
      width:300px;
      margin: auto;
      background-repeat: repeat-x;
      animation:mymove infinite 10s;  
  }
  
  @keyframes mymove {
      from {
              background-position: left bottom;
      }
      to {
          background-position: right bottom;
      }
  }
  

  I expect the clouds to be moving from left to right but they're stationary

  the html just in case

   <!DOCTYPE html>
   <html lang="en">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Weather</title>
          <link rel="stylesheet" href="../static/css/style.css">
          <script src="../app/jquery-3.3.1.min.js"></script>
          <script src="../static/js/getWeather.js"></script>
          <script src="../static/js/pageChange.js"></script>
  </head>
  <body>
      <div id="sun">
          <div id="clouds">
  
          </div>
      </div>
  </body>
  
• Vh units not perfect on absolute position elements

  I'm trying to build a webpage that has multiple different boxes that are positioned absolute. I'm having an issue when I use this css:

  height: 20vh;
  text-align: center;
  font-size: 20vh;
  width:100vw;
  margin-top: 0px;
  margin-left 0px;
  position: absolute;
  

  It will overlap with this element:

  text-align: center;
  display: table;
  margin: 0 auto;
  flex-direction: row;
  width: 94vw;
  height: 5vh;
  font-size: 5vh;
  position: absolute;
  top: 20vh;
  

  I would assume that putting an element 20vh away from the top would prevent the elements from overlapping. It is only a little bit but I'm positioning all elements this way so that the site stays practically the same in any container while fitting within the screen. Is there anyway to fix this overlap?

  Also all of my other css is experiencing the same issue.
• <select> tag doesn't keep background color on iphone

  So, basically, I can change the background color of a tag on my computer but when I open the website through and iPhone (doesn't matter if I'm using Safari or Chrome) the background color is that default gradient gray.

  I also tried to do it through the javascript, didn't work.

  NOTE: i am NOT talking about the menu, only about the box we see without the options below, the one that if we click it shows the menu.
• Several troubles making simple object inspector in React

  I am javascript and React newbie, so I am still a little bit confused by thinking in React concept.

  I am trying to make simple object inspector in React.

  Here is property row element:

  class PropertyRow extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
         propertyName: this.props.propertyName,
         propertyValue: this.props.propertyValue
      };
      alert(this.props.propertyName + " evoked in constructor");
    }
  
    render() {
      return (
        <div>{this.props.propertyName} = {this.props.propertyValue}</div>
       // <div>{this.state.propertyName} = {this.state.propertyValue}</div>
      );
    }
  }
  

  here in the component PropertyRows I am trying to read all properties of an object dynamically.

  class PropertyRows extends React.Component {
    constructor(props) {
      super(props);
      this.createProRows = this.createProRows.bind(this);
    }
  
    createProRows(obj) {
      const propArr = [];
        for (const key of Object.keys(obj)) {
          const val = obj[key];
          propArr.push(<PropertyRow propertyName={key} propertyValue={val} />); 
        }
      return propArr;
    }
  
    render() {
      return <div>{this.createProRows(this.props.obj)}</div>;
    }
  }
  

  And here I test this marvelous code

  class Express extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        soldiers: 0,
        captain:'John Maverick'
      };
      this.doClick = this.doClick.bind(this);
    }
  
    doClick() {
      const obj = {
        soldiers: this.state.soldiers + 1,
        country:'Australia' //add new property
      };
      this.setState(obj);
    }
  
    render() {
      return (
        <div onClick={this.doClick}>
          <PropertyRows obj={this.state} />
        </div>
      );
    }
  }
  
  ReactDOM.render(<Express />, document.getElementById("root"));
  

  When you click on the text, you will see incrementing "soldiers" property by one. The code is buggy and I do not understand why, or perhaps I do, but I have not absolutely no idea, what how to solve it in React metalanguage.

  1. I would expect, that dynamically created array of <PropertyRow propertyName={key} propertyValue={val}/> would be nice way to browse object properties. But it seems, that the rendered HTML DOM objects are not destroyed and recreated. They are mysteriously reattached, when the new object in the doClick function is to be expressed.

  Furthermore

  2. When create another object in doClick, the property obj.captain is still there (in the browser window), probably because the underlying HTML DOM elements are not destroyed. Adding new property country: 'Australia' seems to work OK.

  3. When I call <PropertyRow propertyName={key} propertyValue={val}/> the second time I would expect, that constructor would be fired, because it is created and pushed in the new array. But it is not. It is fired only for the new property country: 'Australia'

  It seems, that I have to somehow destroy rendered HTML DOM elements in order to force react to recreate them. But how? Or is there another way?

  I deeply apologize for this long text. I hope it's not so complicated to read.

  Thanx
• React - How can I make one time only rendering value in state

  What I need to do is to setState with a value, then send data to a children by props, but I would like "state" to forget about that after doing this once.

  this.setState({ 
      animateId: 15 //or any number of id
  });
  

  then later

  if(this.state.animateId){
     let idToSent = this.state.animateId;
  }
  <Items <...different props> animate={idToSent}/> //once after settingState - 15, 
                                          // then undefined or whatever with every next time
  

  and I would want to take this value once, send it via props, and forget about it, either way.

  Is there any way to do that, beside just altering that one value in state again, because that would cause unnecesary rendering ??
• How to create a gutter net overlay as GUI?

  I want to have a fullscreen GUI with a gutter net by 96x96 and a small gutter border (maybe a pixel). The GUI should be trancparent as a overlay GUI. Just the gutter net should be displayed.

  Why? I often work with sprite-sheet images, create them, resize them or rearrange them. I do not have Photoshop. Just free software which do not support gutter lines as help view. When I rearrange each sprite image it would be great to have such a overlay for a quick adjustment at which corner I have to move the images.

  I hope my code will explain my needs a bit better. Currently i use a fullscreen GUI as $WS_POPUP (borderless) window. The gutter is a label with a specific background color. Sadly i have to manual create these for the whole width and height, that is not great and i hope you will have a better idea to do that.

  My code so far:

  #include <GuiConstantsEx.au3>
  #include <WindowsConstants.au3>
  
  $iGuiW = @DesktopWidth
  $iGuiH = @DesktopHeight
  $iGuiGutterSize = 96
  $hColor = 0x00FF00
  
  $hGui = GUICreate("", @DesktopWidth, @DesktopHeight, 0, 0, $WS_POPUP, $WS_EX_TOOLWINDOW + $WS_EX_TOPMOST)
  ; From left to right.
  GUICtrlCreateLabel("", 0, 0, $iGuiW, 1)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", 0, $iGuiGutterSize, $iGuiW, 1)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", 0, $iGuiGutterSize * 2, $iGuiW, 1)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", 0, $iGuiGutterSize * 3, $iGuiW, 1)
  GUICtrlSetBkColor(-1, $hColor)
  
  ; From top to bottom.
  GUICtrlCreateLabel("", 0, 0, 1, $iGuiH)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", $iGuiGutterSize, 0, 1, $iGuiH)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", $iGuiGutterSize * 2, 0, 1, $iGuiH)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUICtrlCreateLabel("", $iGuiGutterSize * 3, 0, 1, $iGuiH)
  GUICtrlSetBkColor(-1, $hColor)
  
  GUISetState( @SW_SHOW, $hGui )
  
  While 1
      Switch GUIGetMsg()
          Case $GUI_EVENT_CLOSE
              GUIDelete($hGui)
              Exit
      EndSwitch
  WEnd
  

  Two things what i need.

  1. How to get the GUI be transparent except the gutter lines?
  2. How can i do it without manual set label by label for each line (row and column)?

  Yes it's like a grid design but just the borders as lines.
• How can i make my spritesheet-animation charachters to stop hide the other elements on the camvas behide them?

  I am trying to build a mini game ,on the canvas element in html.Even though i made the animation for the charachers using spritesheets,with transparent background,when they move they hide everything behide them,as if they had a background in a rectangular shape.

  At first I thought it was something to do with the clearRect function,but even when we removed just to check,it continued to happen.

  //Here we do the animations 
  function drawImage(){
    updateFrame();
    document.getElementById( 'progress2').value+=1;
    if (Store == 68){
    left = 0;
    ctx.clearRect(x,y,width,height);
    ctx.drawImage(HaraldRight,srcX,srcY,width,height,x,y,width,height);
  
     //not trespassing the vertical bars system
     if (x + width < canWidth )
     {
     x=x+15;
     }
  
  
    }
    else if (Store == 65){
    left = 1;
    ctx.clearRect(x,y,width,height);
    ctx.drawImage(HaraldLeft,srcX,srcY,width,height,x,y,width,height);
     //not trespassing the vertical bars system
  
       if (x+width<=1){
        x=0;
      }
     else
     {
       x=x-15;
     }
  
    }
  
    else if (Store == 87){
     left = 0;
  
  ctx.drawImage(HaraldRightJump,srcX,srcY,width,height,x,y,width,height);
     document.getElementById( 'progress2').value-=2;
    }
  
    else if (Store == 74){
     left = 0;
  
  ctx.drawImage(HaraldRightAttack,srcX,srcY,width,height,x,y,width,height);
     document.getElementById( 'progress2').value-=2;
     if (document.getElementById( 'progress').value>0){
     if (document.getElementById( 'progress2').value==0)
     {
       alert('You have no stamina, you lose 10 HP as penalty')
       document.getElementById( 'progress').value-=10;
     }
     }
  
  
  
  
    }
    else if (Store == 83){
     left = 0;
     ctx.drawImage(HaraldShield,srcX,srcY,width,height,x,y,width,height);
     document.getElementById( 'progress2').value-=3;
     document.getElementById( 'progress2').value+=2;
  
    }
  
    else
    { 
      if (left!=1){
      ctx.clearRect(x,y,width,height);
  
   ctx.drawImage(HaraldStandRight,srcX,srcY,width,height,x,y,width,height);
      }
      else
      {
  
  ctx.drawImage(HaraldLeftStand,srcX,srcY,width,height,x,y,width,height);
      }       
    }
    Store = 0;
  
   }
  
  
    //looping the sprite
    setInterval(function(){
   var Harald = drawImage(); 
  
    },100); 
  

  enter image description here
• How do I fix my html/javascript code to animate a sprite sheet?

  I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet

  

  Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?

  This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.

  <html>
      <head>
          <title>Tree Animation</title>
      </head>
  
      <body>
  
          <canvas id='canvas'></canvas>
  
          <script>
  
              var canWidth = 400;
              var canHeight = 100;
  
              //position where the frame will be drawn
              var x = 0;
              var y = 0;
  
              var srcX;
              var srcY;
  
              var sheetWidth = 230;
              var sheetHeight = 79;
  
              var frameCount = 5;
  
              var width = sheetWidth/frameCount;
              var height;
  
              var currentFrame = 0;
  
              var tree = new Image();
              tree.src = "tree sprite.jpg"
  
              var canvas = document.getElementById('canvas');
              canvas.width = canWidth;
              canvas.height = canHeight;
  
              var ctx = canvas.getContext('2d');
  
              function updateFrame(){
                  currentFrame = ++currentFrame%frameCount
  
                  srcX = currentFrame*width;
                  srcY = 0;
  
                  ctx.clearRect(x, y, width, height);
              }
  
              function draw(){
                  updateFrame();
  
              }
  
              setInterval(function(){
                  draw();
              }, 100);
  
          </script>
  
      </body>
  </html>
  

  I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.