fp: Make the website prettier, set the tab title

.gitignore

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

build.bat

@@ -6,11 +6,6 @@ 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, platform->core.epoch_time);
+    Dqn_PCG32_Seed(&play->rng, 0xABCDEF);
 
     // 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( 511,  451),  FP_EntityBillboardState_Dash,        "Dash Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(1311, -951), 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(1954,  855),  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(2047, -984),  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(2036, -700),  FP_EntityBillboardState_Monkey,      "Monkey Billboard");
-    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(1898,  771),  FP_EntityBillboardState_Strafe,      "Strafe Billboard");
+    FP_Entity_CreateBillboard(game, Dqn_V2_InitNx2(2098,  1171), FP_EntityBillboardState_Strafe,      "Strafe Billboard");
 
     // NOTE: Camera ================================================================================
-    play->camera.world_pos = {};
+    play->camera.world_pos = base_mid_p - Dqn_V2_InitV2I(platform->core.window_size * .5f);
     play->camera.scale     = Dqn_V2_InitNx1(1);
     play->camera.size      = Dqn_V2_InitNx2(1826, 1046);
 }
@@ -1996,25 +1996,7 @@ 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];
@@ -2263,19 +2245,12 @@ 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 += 2;
+                        coin_receiver->coins += 1;
                     }
                     defender->is_dying = true;
                 }
@@ -2315,12 +2290,11 @@ 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;
 
@@ -2328,13 +2302,12 @@ 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_target.x = DQN_MIN(camera->world_pos_target.x,  half_map_screen_size.w - (camera_size_screen.w * .5f));
+        camera->world_pos.x = DQN_MIN(camera->world_pos.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.x = DQN_MAX(camera->world_pos.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.y = DQN_MAX(camera->world_pos.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.y = DQN_MIN(camera->world_pos.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);
 }
 
@@ -2458,26 +2431,13 @@ 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*/,
-                                        sprite_colour);
+                                        TELY_Colour_V4Alpha(TELY_COLOUR_WHITE_V4, entity->action.sprite_alpha));
 
             if (entity->converted_faction) {
                 Dqn_V2 label_p = Dqn_Rect_InterpolatedPoint(dest_rect, Dqn_V2_InitNx2(0, -0.25f));
@@ -3640,8 +3600,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);
 
@@ -3696,15 +3656,14 @@ void FP_Render(FP_Game *game, TELY_Platform *platform, TELY_Renderer *renderer,
             player->inventory.kennels  += 1;
         }
 
-        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_1))
+        if (TELY_Platform_InputScanCodeIsPressed(input, TELY_PlatformInputScanCode_F12)) {
-            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,53 +465,11 @@ 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;
@@ -524,7 +482,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"), html_shell_path,
+                DQN_STRING8("--shell-file"), Dqn_FsPath_ConvertF(scratch.arena, "%.*s/feely_pona_emscripten_shell.html", DQN_STRING_FMT(code_dir)),
                 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,14 +19,10 @@
       }
 
       #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; }
@@ -41,12 +37,47 @@
         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;
-        font-weight: normal;
+        margin-top: 5px;
-        font-size: 0.8em;
+        margin-left: 5px;
-        color: darkgray;
+        font-weight: bold;
+        color: white;
       }
 
       #progress {
@@ -88,8 +119,13 @@
   </head>
   <body>
     <div id="header">
-        <h1 style="font-size: 1em; text-align: center; margin-top: 0; margin-bottom: 0; padding-bottom: 3px">Terry Cherry</h1>
+        <div class="spinner" id='spinner'></div>
         <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>
@@ -99,17 +135,11 @@
       <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: [],
@@ -165,17 +195,15 @@
                     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';
                 }
 
-                if (text) {
+                statusElement.innerHTML = text;
-                    statusElement.innerHTML = '@version@: ' + text;
-                } else {
-                    statusElement.innerHTML = '@version@';
-                }
             },
             totalDependencies: 0,
             monitorRunDependencies: function(left) {
@@ -189,6 +217,7 @@
 
         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 = 7.5f;
+            result.height.meters = 12.f;
             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,7 +195,6 @@ 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;
@@ -258,11 +257,8 @@ 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