Wordpress Shortcode Function is displaying before content - wordpress

Question

I have been working on trying to get this shortcode to show correctly but everything I have tried does not work. Below is my function:
function monster_shortcode( $atts ) {
$monster = $atts['name'];
$query = new WP_Query( array(
'post_type' => 'monsters',
'name' => $monster,
));
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post();
$monster_title = the_title();
$monster_size = the_field('size');
$monster_type = 'type';
$monster_alignment = the_field( 'alignment' );
$monster_ac = the_field( 'armor_class' );
$monster_ac_type = the_field( 'ac_type' );
$monster_hp = the_field( 'hit_points' );
$monster_hd = the_field( 'hit_die' );
$monster_speed = the_field( 'speed' );
$monster_str = the_field( 'str' );
$monster_strb = monster_stats( get_field( 'str' ) );
$monster_dex = the_field( 'dex' );
$monster_dexb = monster_stats( get_field( 'dex' ) );
$monster_con = the_field( 'con' );
$monster_conb = monster_stats( get_field( 'con' ) );
$monster_int = the_field( 'int' );
$monster_intb = monster_stats( get_field( 'int' ) );
$monster_wis = the_field( 'wis' );
$monster_wisb = monster_stats( get_field( 'wis' ) );
$monster_cha = the_field( 'cha' );
$monster_chab = monster_stats( get_field( 'cha' ) );
$monster_saves = the_field( 'saving_throws' );
$monster_skills = the_field( 'skills' );
$monster_dmg = the_field( 'damage_adjustments' );
$monster_senses = the_field( 'senses' );
$monster_lang = the_field( 'languages' );
$monster_cr = the_field( 'cr' );
$monster_actions = the_field( 'actions' );
$monster_reactions = the_field( 'reactions' );
$monster_char = the_field( 'characteristics' );
$monster_content = the_content();
$monster_enviro = the_field( 'enviroments' );
$return = '<h1 class="entry-title">' . $monster_title . '</h1>';
$return .= '<div class="monster-meta">' . $monster_size . ' ' . $monster_type . ', ' . $monster_alignment . '</div>';
$return .= '<ul class="monster-stat">';
$return .= '<li><label>Armor Class</label> ' . $monster_ac . ' (' . $monster_ac_type . ')</li>';
$return .= '<li><label>Hit Points</label> ' . $monster_hp . ' (' . $monster_hd . ')</li>';
$return .= '<li><label>Speed</label> ' . $monster_speed . '</li>';
$return .= '</ul>';
$return .= '<ul class="monster-stat abilities">';
$return .= '<li><label>STR</label>' . $monster_str . ' (' . $monster_strb . ')</li>';
$return .= '<li><label>DEX</label>' . $monster_dex . ' (' . $monster_dexb . ')</li>';
$return .= '<li><label>CON</label>' . $monster_con . ' (' . $monster_conb . ')</li>';
$return .= '<li><label>INT</label>' . $monster_int . ' (' . $monster_intb . ')</li>';
$return .= '<li><label>WIS</label>' . $monster_wis . ' (' . $monster_wisb . ')</li>';
$return .= '<li><label>CHA</label>' . $monster_cha . ' (' . $monster_chab . ')</li>';
$return .= ' </ul>';
$return .= '<ul class="monster-stat">';
$return .= '<li><label>Saving Throws</label> ' . $monster_saves . '</li>';
$return .= '<li><label>Skills</label> ' . $monster_skills . '</li>';
$return .= '<li><label>Damage Adjustments</label> ' . $monster_dmg . '</li>';
$return .= '<li><label>Senses</label> ' . $monster_senses . '</li>';
$return .= '<li><label>Langauage</label> ' . $monster_lang . '</li>';
$return .= '<li><label>Challenge Rating</label> ' . $monster_cr . '</li>';
$return .= '</ul>';
$return .= '<p>' . $monster_traits . '</p>';
$return .= '<h4 class="monster-label">Actions</h2><p>' . $monster_actions . '</p>';
$return .= '<h4 class="monster-label">Reactions</h2><p>' . $monster_reactions . '</p>';
$return .= '<h4 class="monster-label">Characteristics</h2><p>' . $monster_char . '</p>';
$return .= '<h4 class="monster-label">Details</h2><p>' . $monster_content . '</p>';
$return .= '<p><label>Enviroments:</label> ' . $monster_enviro . '</p>';
endwhile;
}
return $return;
wp_reset_postdata();
}
add_shortcode( 'monster', 'monster_shortcode' );
I then put the shortcode [monster name="men-at-arms"] on a page. All the function $variables show up before the post content and all the function html shows where it should be. You can see the output here https://www.dropbox.com/s/xvuqofya1jylsfl/Screenshot%20%283%29.png?dl=0

Answer 1

You're using the display functions instead of the return functions.
the_title() will literally echo the title. If you want it as a variable, you need to use get_the_title() (or you can set the third argument to false in the_title() - but that's generally not desirable)
This applies to all the functions you're using that are outputting a value.
the_title() => get_the_title()
the_field() => get_field()
the_content() => get_the_content()
Since it's now pulling in the hosting post's content, you need to pass the ID from the shortcode to the functions. Either like so:
$monster = $atts['name'];
$monster_id = $atts['id'];
...
$monster_title = get_the_title( $monster_id );
$monster_size = get_field( 'size', $monster_id );
Or like so:
$monster = $atts['name'];
...
$monster_title = get_the_title( $post->ID );
$monster_size = get_field( 'size', $post->ID );
Alternatively, you can remove ALL the variable definitions and just modify the HTML returning portion.
while ( $query->have_posts() ) : $query->the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="monster-meta"><?php the_field('size'); ?> <?php the_field('type'); ?> <?php the_field('alignment'); ?>
<ul class="monster-stat">
...
</div>
<?php endwhile; ?>