fp: Add camera shake

.gitignore

@@ -1,3 +1,4 @@
 Build/
 Nocheckin/
 feely_pona_build.exe
+feely_pona_version.txt

build.bat

@@ -6,6 +6,11 @@ set script_dir=%script_dir_backslash:~0,-1%
 set build_dir=%script_dir%\Build
 set code_dir=%script_dir%
 
+REM Bootstrap a version
+git show -s --date=format:%%Y-%%m-%%d --format=%%cd HEAD> feely_pona_version.txt
+git rev-parse --short=8 HEAD>> feely_pona_version.txt
+git rev-list --count HEAD>> feely_pona_version.txt
+
 REM Bootstrap the build program
 mkdir %build_dir% 2>nul
 pushd %build_dir%

feely_pona.cpp

@@ -309,7 +309,7 @@ static void FP_PlayReset(FP_Game *game, TELY_Platform *platform)
 
     play->root_entity      = Dqn_VArray_Make(&play->entities, Dqn_ZeroMem_No);
     Dqn_FArray_Add(&play->parent_entity_stack, play->root_entity->handle);
-    Dqn_PCG32_Seed(&play->rng, 0xABCDEF);
+    Dqn_PCG32_Seed(&play->rng, platform->core.epoch_time);
 
     // NOTE: Map ===================================================================================
     {
@@ -473,14 +473,14 @@ static void FP_PlayReset(FP_Game *game, TELY_Platform *platform)
     play->tile_size        = 37;
 
     // NOTE: Create billboads ======================================================================
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(1311, -951), FP_EntityBillboardState_Dash,        "Dash Billboard");
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(1954,  855),  FP_EntityBillboardState_Attack,      "Attack Billboard");
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(2047, -984),  FP_EntityBillboardState_RangeAttack, "Range Attack Billboard");
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(2036, -700),  FP_EntityBillboardState_Monkey,      "Monkey Billboard");
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(2098,  1171), FP_EntityBillboardState_Strafe,      "Strafe Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2( 511,  451),  FP_EntityBillboardState_Dash,        "Dash Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2( 511, -451),  FP_EntityBillboardState_Attack,      "Attack Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(2047, -720),  FP_EntityBillboardState_RangeAttack, "Range Attack Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(-936, -500),  FP_EntityBillboardState_Monkey,      "Monkey Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(1898,  771),  FP_EntityBillboardState_Strafe,      "Strafe Billboard");
 
     // NOTE: Camera ================================================================================
-    play->camera.world_pos = base_mid_p - Dqn_V2_InitV2I(platform->core.window_size * .5f);
+    play->camera.world_pos = {};
     play->camera.scale     = Dqn_V2_InitNx1(1);
     play->camera.size      = Dqn_V2_InitNx2(1826, 1046);
 }
@@ -1996,7 +1996,25 @@ void FP_Update(TELY_Platform *platform, FP_Game *game, TELY_PlatformInput *input
 
                 if (entity->flags & FP_GameEntityFlag_CameraTracking) {
                     FP_GameCamera *camera    = &game->play.camera;
-                    camera->world_pos     = FP_Game_CalcEntityWorldPos(game, entity->handle) * camera->scale;
+
+                    // NOTE: calculate camera position based on camera shake
+                    Dqn_V2 camera_position = camera->world_pos;
+                    if (camera->shake_duration > 0) {
+                        Dqn_f32 offset_x = (Dqn_PCG32_NextF32(&game->play.rng) * 1000 - 500) * camera->shake_intensity;
+                        Dqn_f32 offset_y = (Dqn_PCG32_NextF32(&game->play.rng) * 1000 - 500) * camera->shake_intensity;
+
+                        camera_position.x += offset_x;
+                        camera_position.y += offset_y;
+
+                        camera->shake_duration -= input->delta_s;
+                    }
+
+                    Dqn_f64 camera_smoothing = 5.0f;
+
+                    camera->world_pos.x += (camera_position.x - camera->world_pos.x) * (camera_smoothing * input->delta_s);
+                    camera->world_pos.y += (camera_position.y - camera->world_pos.y) * (camera_smoothing * input->delta_s);
+
+                    camera->world_pos_target = FP_Game_CalcEntityWorldPos(game, entity->handle) * camera->scale;
                 }
 
                 FP_GamePlaceableBuilding placeable_building = PLACEABLE_BUILDINGS[game->play.build_mode_building_index];
@@ -2245,12 +2263,19 @@ void FP_Update(TELY_Platform *platform, FP_Game *game, TELY_PlatformInput *input
                 }
 
                 defender->hp           = defender->hp >= attacker->base_attack ? defender->hp - attacker->base_attack : 0;
+                defender->hit_on_frame = game->play.update_counter;
+
+                if (game->play.player == defender->handle) {
+                    game->play.camera.shake_intensity = 0.1f;
+                    game->play.camera.shake_duration  = 0.25f;
+                }
+
                 if (defender->hp <= 0) {
                     if (!defender->is_dying) {
                         FP_GameEntity *coin_receiver = FP_Game_GetEntity(game, attacker->projectile_owner);
                         if (FP_Game_IsNilEntity(coin_receiver))
                             coin_receiver = attacker;
-                        coin_receiver->coins += 1;
+                        coin_receiver->coins += 2;
                     }
                     defender->is_dying = true;
                 }
@@ -2290,11 +2315,12 @@ void FP_Update(TELY_Platform *platform, FP_Game *game, TELY_PlatformInput *input
         }
     }
 
+    // NOTE: Camera ================================================================================
+    FP_GamePlay *play     = &game->play;
+    FP_GameCamera *camera = &play->camera;
     if (!FP_Game_IsNilEntityHandle(game, game->play.clicked_entity)) {
         Dqn_V2       window_size  = Dqn_V2_InitV2I(platform->core.window_size);
-        FP_GamePlay *play         = &game->play;
 
-        FP_GameCamera *camera     = &play->camera;
         camera->scale             = window_size / camera->size;
         Dqn_V2 camera_size_screen = camera->size * camera->scale;
 
@@ -2302,12 +2328,13 @@ void FP_Update(TELY_Platform *platform, FP_Game *game, TELY_PlatformInput *input
         Dqn_V2 map_screen_size      = map_world_size * camera->scale;
         Dqn_V2 half_map_screen_size = map_screen_size * .5f;
 
-        camera->world_pos.x = DQN_MIN(camera->world_pos.x,  half_map_screen_size.w - (camera_size_screen.w * .5f));
-        camera->world_pos.x = DQN_MAX(camera->world_pos.x, -half_map_screen_size.w + (camera_size_screen.w * .5f));
-        camera->world_pos.y = DQN_MAX(camera->world_pos.y, -half_map_screen_size.h + (camera_size_screen.h * .5f));
-        camera->world_pos.y = DQN_MIN(camera->world_pos.y,  half_map_screen_size.h - (camera_size_screen.h * .5f));
+        camera->world_pos_target.x = DQN_MIN(camera->world_pos_target.x,  half_map_screen_size.w - (camera_size_screen.w * .5f));
+        camera->world_pos_target.x = DQN_MAX(camera->world_pos_target.x, -half_map_screen_size.w + (camera_size_screen.w * .5f));
+        camera->world_pos_target.y = DQN_MAX(camera->world_pos_target.y, -half_map_screen_size.h + (camera_size_screen.h * .5f));
+        camera->world_pos_target.y = DQN_MIN(camera->world_pos_target.y,  half_map_screen_size.h - (camera_size_screen.h * .5f));
     }
 
+    camera->world_pos += (camera->world_pos_target - camera->world_pos) * (5.f * DQN_CAST(Dqn_f32)input->delta_s);
     Dqn_Profiler_EndZone(update_zone);
 }
 
@@ -2431,13 +2458,26 @@ void FP_Render(FP_Game *game, TELY_Platform *platform, TELY_Renderer *renderer,
             if (sprite.flip & TELY_AssetFlip_Y)
                 dest_rect.size.h *= -1.f; // NOTE: Flip the texture vertically
 
+            Dqn_V4 sprite_colour = TELY_COLOUR_WHITE_V4;
+            if (entity->hit_on_frame) {
+                DQN_ASSERT(game->play.update_counter >= entity->hit_on_frame);
+                Dqn_usize       frames_elapsed_since_hit = game->play.update_counter - entity->hit_on_frame;
+                Dqn_usize const HIT_CONFIRM_DURATION     = 8;
+                if (frames_elapsed_since_hit < HIT_CONFIRM_DURATION) {
+                    sprite_colour   = TELY_COLOUR_RED_V4;
+                    sprite_colour.g = ((1.f / HIT_CONFIRM_DURATION) * frames_elapsed_since_hit);
+                    sprite_colour.b = ((1.f / HIT_CONFIRM_DURATION) * frames_elapsed_since_hit);
+                }
+            }
+
+            sprite_colour.a *= entity->action.sprite_alpha;
             TELY_Render_TextureColourV4(renderer,
                                         sprite.sheet->tex_handle,
                                         src_rect,
                                         dest_rect,
                                         Dqn_V2_Zero /*rotate origin*/,
                                         0.f /*rotate radians*/,
-                                        TELY_Colour_V4Alpha(TELY_COLOUR_WHITE_V4, entity->action.sprite_alpha));
+                                        sprite_colour);
 
             if (entity->converted_faction) {
                 Dqn_V2 label_p = Dqn_Rect_InterpolatedPoint(dest_rect, Dqn_V2_InitNx2(0, -0.25f));
@@ -3600,8 +3640,8 @@ void FP_Render(FP_Game *game, TELY_Platform *platform, TELY_Renderer *renderer,
         TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  F9  %s god mode", game->play.god_mode ? "Disable" : "Enable"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
         TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  F10 %s noclip", player->flags & FP_GameEntityFlag_NoClip ? "Disable" : "Enable"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
         TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  F11 Building inventory +1"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
-        TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  F12 %s by enemies", player->faction == FP_GameEntityFaction_Nil ? "Attacked" : "Ignored"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
         TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  1   %s HUD", game->play.debug_hide_hud ? "Show" : "Hide"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
+        TELY_Render_TextF(renderer, draw_p, Dqn_V2_Zero, "  2   %s by enemies", player->faction == FP_GameEntityFaction_Nil ? "Attacked" : "Ignored"); draw_p.y += TELY_Render_FontHeight(renderer, assets);
         TELY_Render_PopFont(renderer);
         TELY_Render_PopColourV4(renderer);
 
@@ -3656,14 +3696,15 @@ void FP_Render(FP_Game *game, TELY_Platform *platform, TELY_Renderer *renderer,
             player->inventory.kennels  += 1;
         }
 
-        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_F12)) {
+        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_1))
+            game->play.debug_hide_hud = !game->play.debug_hide_hud;
+
+        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_2)) {
             player->faction = player->faction == FP_GameEntityFaction_Nil
                                   ? FP_GameEntityFaction_Friendly
                                   : FP_GameEntityFaction_Nil;
         }
 
-        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_1))
-            game->play.debug_hide_hud = !game->play.debug_hide_hud;
     }
 }
 

feely_pona_build.cpp

@@ -465,11 +465,53 @@ int main(int argc, char const **argv)
             }
         }
 
-        // NOTE: feely pona emscripten =================================================================
+        // NOTE: feely pona emscripten =============================================================
         {
             feely_pona_emscripten_timings[0]             = Dqn_OS_PerfCounterNow();
             DQN_DEFER { feely_pona_emscripten_timings[1] = Dqn_OS_PerfCounterNow(); };
 
+            // NOTE: feely pona emscripten shell =======================================================
+            Dqn_String8 html_shell_path = Dqn_FsPath_ConvertF(scratch.arena, "%.*s/feely_pona_emscripten_shell.html", DQN_STRING_FMT(build_dir));
+            {
+                Dqn_String8 html_path   = Dqn_FsPath_ConvertF(scratch.arena, "%.*s/feely_pona_emscripten_shell.html", DQN_STRING_FMT(code_dir));
+                Dqn_String8 html_buffer = Dqn_Fs_Read(html_path, scratch.allocator);
+                if (!DQN_CHECKF(html_buffer.size,
+                                "Failed to read Emscripten HTML shell file. The file at\n\n  '%.*s'\n\ndoes not exist or is not readable",
+                                DQN_STRING_FMT(html_path)))
+                    return -1;
+
+                Dqn_String8                 version_path   = Dqn_FsPath_ConvertF(scratch.arena, "%.*s/feely_pona_version.txt", DQN_STRING_FMT(code_dir));
+                Dqn_String8                 version_buffer = Dqn_Fs_Read(version_path, scratch.allocator);
+                Dqn_String8SplitAllocResult version_parts  = Dqn_String8_SplitAlloc(scratch.allocator, version_buffer, DQN_STRING8("\n"));
+
+                if (!DQN_CHECKF(version_parts.size == 3,
+                                "Version file '%.*s' must have 3 lines containing, date, commit hash and number of commits. The buffer we tried extracting information from was\n\n%.*s\n\n",
+                                DQN_STRING_FMT(version_path),
+                                DQN_STRING_FMT(version_buffer))) {
+                    return -1;
+                }
+
+                Dqn_String8 date         = Dqn_String8_TrimWhitespaceAround(version_parts.data[0]);
+                Dqn_String8 commit_hash  = Dqn_String8_TrimWhitespaceAround(version_parts.data[1]);
+                Dqn_String8 commit_count = Dqn_String8_TrimWhitespaceAround(version_parts.data[2]);
+                Dqn_String8 version_text = Dqn_String8_InitF(scratch.allocator,
+                                                             "%.*s edition rev. %.*s-%.*s",
+                                                             DQN_STRING_FMT(date),
+                                                             DQN_STRING_FMT(commit_count),
+                                                             DQN_STRING_FMT(commit_hash));
+
+                Dqn_String8 html_buffer_processed = Dqn_String8_Replace(html_buffer,
+                                                                        DQN_STRING8("@version@"),
+                                                                        version_text,
+                                                                        0 /*start_index*/,
+                                                                        scratch.allocator);
+                if (!DQN_CHECKF(Dqn_Fs_Write(html_shell_path,
+                                            html_buffer_processed),
+                                "Failed to write Emscripten HTML shell with the project version inserted into it. We were unable to write to the target location\n\n  '%.*s'\n",
+                                DQN_STRING_FMT(html_shell_path)))
+                    return -1;
+            }
+
             // NOTE: Compile with emcc =============================================================
             Dqn_CPPBuildContext build_context     = {};
             build_context.compile_file_obj_suffix = DQN_CPP_BUILD_OBJ_SUFFIX_O;
@@ -482,7 +524,7 @@ int main(int argc, char const **argv)
                 DQN_STRING8("cmd"), DQN_STRING8("/C"), DQN_STRING8("emcc.bat"),
                 DQN_STRING8("-o"), Dqn_String8_InitF(scratch.allocator, "%.*s.html", DQN_STRING_FMT(output_name)),
                 DQN_STRING8("-Wall"),
-                DQN_STRING8("--shell-file"), Dqn_FsPath_ConvertF(scratch.arena, "%.*s/feely_pona_emscripten_shell.html", DQN_STRING_FMT(code_dir)),
+                DQN_STRING8("--shell-file"), html_shell_path,
                 Dqn_FsPath_ConvertF(scratch.arena, "%.*s/%.*s", DQN_STRING_FMT(build_dir), DQN_STRING_FMT(raylib_emscripten_lib_name)),
                 DQN_STRING8("-s"), DQN_STRING8("USE_GLFW=3"),
                 DQN_STRING8("-s"), DQN_STRING8("TOTAL_MEMORY=512MB"),

feely_pona_emscripten_shell.html

@@ -19,10 +19,14 @@
       }
 
       #header {
+        font-weight: bold;
+        color: white;
         height: 30px;
+        text-align: center;
         padding-left: 5px;
         padding-right: 5px;
         padding-top: 5px;
+        padding-bottom: 10px;
       }
 
       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
@@ -37,47 +41,12 @@
         width: 75vw;
       }
 
-      .spinner {
-        height: 15px;
-        width: 15px;
-        margin: 0;
-        display: inline-block;
-        vertical-align: top;
-        -webkit-animation: rotation .8s linear infinite;
-        -moz-animation: rotation .8s linear infinite;
-        -o-animation: rotation .8s linear infinite;
-        animation: rotation 0.8s linear infinite;
-        border-left: 5px solid black;
-        border-right: 5px solid black;
-        border-bottom: 5px solid black;
-        border-top: 5px solid red;
-        border-radius: 100%;
-        background-color: rgb(245, 245, 245);
-      }
-      @-webkit-keyframes rotation {
-        from {-webkit-transform: rotate(0deg);}
-        to {-webkit-transform: rotate(360deg);}
-      }
-      @-moz-keyframes rotation {
-        from {-moz-transform: rotate(0deg);}
-        to {-moz-transform: rotate(360deg);}
-      }
-      @-o-keyframes rotation {
-        from {-o-transform: rotate(0deg);}
-        to {-o-transform: rotate(360deg);}
-      }
-      @keyframes rotation {
-        from {transform: rotate(0deg);}
-        to {transform: rotate(360deg);}
-      }
-
       #status {
         display: inline-block;
         vertical-align: top;
-        margin-top: 5px;
-        margin-left: 5px;
-        font-weight: bold;
-        color: white;
+        font-weight: normal;
+        font-size: 0.8em;
+        color: darkgray;
       }
 
       #progress {
@@ -119,13 +88,8 @@
   </head>
   <body>
     <div id="header">
-        <div class="spinner" id='spinner'></div>
+        <h1 style="font-size: 1em; text-align: center; margin-top: 0; margin-bottom: 0; padding-bottom: 3px">Terry Cherry</h1>
         <div class="emscripten" id="status">Downloading...</div>
-        <span id='controls'>
-          <span><input type="button" value="🖵 FULLSCREEN" onclick="Module.requestFullscreen(false, false)"></span>
-          <span><input type="button" id="btn-audio" value="🔇 SUSPEND" onclick="toggleAudio()"></span>
-        </span>
-
         <div class="emscripten">
           <progress value="0" max="100" id="progress" hidden=0></progress>
         </div>
@@ -135,11 +99,17 @@
       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
 
+    <div style="display: flex; justify-content: space-around;">
+        <span id='controls'>
+          <span><input type="button" value="🖵 FULLSCREEN" onclick="Module.requestFullscreen(false, false)"></span>
+          <span><input type="button" id="btn-audio" value="🔇 SUSPEND" onclick="toggleAudio()"></span>
+        </span>
+    </div>
+
     <textarea id="output" rows="8"></textarea>
     <script type='text/javascript'>
         var statusElement = document.querySelector('#status');
         var progressElement = document.querySelector('#progress');
-        var spinnerElement = document.querySelector('#spinner');
         var Module = {
             preRun: [],
             postRun: [],
@@ -195,15 +165,17 @@
                     progressElement.value = parseInt(m[2])*100;
                     progressElement.max = parseInt(m[4])*100;
                     progressElement.hidden = true;
-                    spinnerElement.hidden = false;
                 } else {
                     progressElement.value = null;
                     progressElement.max = null;
                     progressElement.hidden = true;
-                    if (!text) spinnerElement.style.display = 'none';
                 }
 
-                statusElement.innerHTML = text;
+                if (text) {
+                    statusElement.innerHTML = '@version@: ' + text;
+                } else {
+                    statusElement.innerHTML = '@version@';
+                }
             },
             totalDependencies: 0,
             monitorRunDependencies: function(left) {
@@ -217,7 +189,6 @@
 
         window.onerror = function() {
             Module.setStatus('Exception thrown, see JavaScript console');
-            spinnerElement.style.display = 'none';
             Module.setStatus = function(text) { if (text) Module.printErr('[post-exception status] ' + text); };
         };
     </script>

feely_pona_entity_create.cpp

@@ -264,7 +264,7 @@ FP_EntityRenderData FP_Entity_GetRenderData(FP_Game *game, FP_EntityType type, u
         } break;
 
         case FP_EntityType_Billboard: {
-            result.height.meters = 12.f;
+            result.height.meters = 7.5f;
             FP_EntityBillboardState state = DQN_CAST(FP_EntityBillboardState)raw_state;
             switch (state) {
                 case FP_EntityBillboardState_Attack:      result.anim_name = g_anim_names.map_billboard_attack; break;

feely_pona_game.h

@@ -195,6 +195,7 @@ struct FP_GameEntity
     Dqn_V2                                attack_box_size;
     Dqn_V2                                attack_box_offset;
     bool                                  attack_processed;
+    Dqn_usize                             hit_on_frame;
     bool                                  is_dying;
     uint64_t                              last_attack_timestamp;
     uint64_t                              attack_cooldown_ms;
@@ -257,8 +258,11 @@ struct FP_GameCamera
 {
     Dqn_V2  size;
     Dqn_V2  world_pos;
+    Dqn_V2  world_pos_target;
     Dqn_f32 rotate_rads;
     Dqn_V2  scale;
+    Dqn_f32 shake_intensity;
+    Dqn_f64 shake_duration;
 };
 
 enum FP_GameAudio