Skip to content

Commit

Permalink
Entering the post superglide video era (#6)
Browse files Browse the repository at this point in the history 
* Updated svelte and sveltekit to latest
* Made the statistics box collapsible
* Tons of new and improved sentences
  • Loading branch information
@muckelba
muckelba committed Nov 9, 2023
1 parent 5b2c974 commit 77e43b1
Show file tree
Hide file tree
Showing 10 changed files with 3,021 additions and 2,448 deletions.
5,062 changes: 2,782 additions & 2,280 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
"devDependencies": {
"@creativebulma/bulma-divider": "^1.1.0",
"@sveltejs/adapter-static": "^2.0.1",
"@sveltejs/kit": "^1.5.0",
"@sveltejs/kit": "^1.20.4",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"bulma": "^0.9.4",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.53.0",
"svelte": "^3.54.0",
"svelte-preprocess": "^4.10.7",
"svelte": "^4.0.0",
"svelte-preprocess": "^5.0.3",
"vite": "^4.0.0"
},
"type": "module"
Expand Down
27 changes: 22 additions & 5 deletions src/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $body-overflow-y: auto;

$notification-padding-ltr: 0.8rem 1.5rem 0.8rem 1.5rem;
$modal-content-width: 66%;

$card-radius: $radius-large;
$orange-invert: findColorInvert($orange);

$custom-colors: (
Expand All @@ -25,6 +25,23 @@ button.setting-button {
display: block;
}

.tutorial-button {
background-image: url("/button_bg.jpg");
background-size: 105%;
background-position: center;
border-color: $grey !important;
border-width: 1px;
}

.tutorial-button:hover {
filter: brightness(0.9);
border-color: $grey-light !important;
}

.tutorial-button:active {
filter: brightness(0.8);
}

/* Import only what you need from Bulma */
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
Expand Down Expand Up @@ -62,7 +79,7 @@ $divider-margin-size: 0px;
position: relative;
display: inline-block;
width: 60px;
height: 34px;
height: 30px;
margin-right: 10px;
margin-left: 10px;

Expand All @@ -88,8 +105,8 @@ $divider-margin-size: 0px;
&:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
Expand All @@ -111,7 +128,7 @@ $divider-margin-size: 0px;
}

input:checked + .slider:before {
transform: translateX(26px);
transform: translateX(30px);
}
}
}
Expand Down
206 changes: 108 additions & 98 deletions src/lib/components/Analytics.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@
wrongInputCount,
crouchTooLateCount,
gradientArray,
analyticsHidden,
} from "$lib/stores";
import { percentageColor, toggleSharingModal } from "$lib/util";
import { percentageColor, toggleSharingModal, toggleAnalytics } from "$lib/util";
let historydiv;
Expand Down Expand Up @@ -47,119 +48,128 @@
});
</script>

<div class="level has-text-centered">
<p class="title is-3 level-item">
<span class="icon-text"><span class="icon"><i class="fas fa-chart-bar" /></span>&nbsp;<span>Analytics</span></span>
</p>
</div>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold is-size-5">
Overall superglide consistency: <code class="has-text-{computedPercentageColor}">{superglideConsistency.toFixed(2)}%</code>
</p>
<div class="divider" />
<p>
Attempts: <code class="has-text-white"> {$attempts.length}</code>
</p>
<p>
Potential superglides: <code class="has-text-white">{potentialSuperglidesPercentage.toFixed(2)}%</code>
</p>
<p>
Average successful chance: <code class="has-text-white">{potentialAvg.toFixed(2)}%</code>
</p>
<br />
<!-- <p>You got <code>0%</code> because:</p> -->
<p>
Wrong input first: <code>{wrongInputPercentage.toFixed(2)}%</code>
</p>
<p>
Crouch too late: <code>{crouchTooLatePercentage.toFixed(2)}%</code>
<div class="card">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<a class="card-header" on:click={() => toggleAnalytics(!$analyticsHidden)}>
<button class="button card-header-icon is-large" aria-label="collapse helpful tips">
<i class="fa fa-angle-{$analyticsHidden ? 'down' : 'up'}" />
</button>
<p class="card-header-title title is-3 is-centered">
<span class="icon-text"><span class="icon"><i class="fas fa-chart-bar" /></span>&nbsp;<span>Analytics</span></span>
</p>
<!-- <br />
</a>
<div class="card-content {$analyticsHidden ? 'is-hidden' : ''}">
<div class="columns">
<div class="column">
<p class="has-text-weight-bold is-size-5">
Overall superglide consistency: <code class="has-text-{computedPercentageColor}">{superglideConsistency.toFixed(2)}%</code>
</p>
<div class="divider" />
<p>
Attempts: <code class="has-text-white"> {$attempts.length}</code>
</p>
<p>
Potential superglides: <code class="has-text-white">{potentialSuperglidesPercentage.toFixed(2)}%</code>
</p>
<p>
Average successful chance: <code class="has-text-white">{potentialAvg.toFixed(2)}%</code>
</p>
<br />
<!-- <p>You got <code>0%</code> because:</p> -->
<p>
Wrong input first: <code>{wrongInputPercentage.toFixed(2)}%</code>
</p>
<p>
Crouch too late: <code>{crouchTooLatePercentage.toFixed(2)}%</code>
</p>
<!-- <br />
<p>
On a potential superglide your crouch is too
late by
<code>0.0134</code> ms or <code>0.4</code> FPS on
average
</p> -->
<div class="divider" />
<div class="notification">
<p>READ THE FAQ!!!</p>
<p>Seriously if you can't hit them,</p>
<p>
<strong>READ THE TIPS AND FAQ!!!</strong>
</p>
<p>ALL OF IT!</p>
</div>
<button class="button is-fullwidth" on:click={toggleSharingModal}>Show all stats</button>
</div>
<div class="divider is-vertical" />
<div class="column history" bind:this={historydiv}>
{#each $history as { line, color, finished }}
<p>
<span class="tag is-{color}">{line}</span>
</p>
{#if finished}
<div class="divider" />
{/if}
{/each}
</div>
</div>

<div class:is-active={$sharingModalActive} class="modal">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="modal-background" on:click={toggleSharingModal} />
<div class="modal-content">
<div class="box">
<p class="title has-text-centered">Statistics</p>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold is-size-5">
Overall superglide consistency: <code class="has-text-{computedPercentageColor}">{superglideConsistency.toFixed(2)}%</code>
</p>
<p>
Attempts: <code class="has-text-white"> {$attempts.length}</code>
</p>
<p>
Potential superglides: <code class="has-text-white">{potentialSuperglidesPercentage.toFixed(2)}%</code>
</p>
<div class="notification">
<p>READ THE FAQ!!!</p>
<p>Seriously if you can't hit them,</p>
<p>
Average successful chance: <code class="has-text-white">{potentialAvg.toFixed(2)}%</code>
</p>
<br />
<p>
Wrong input first: <code>{wrongInputPercentage.toFixed(2)}%</code>
<strong>READ THE TIPS AND FAQ!!!</strong>
</p>
<p>ALL OF IT!</p>
</div>
<button class="button is-fullwidth" on:click={toggleSharingModal}>Show all stats</button>
</div>
<div class="divider is-vertical" />
<div class="column history" bind:this={historydiv}>
{#each $history as { line, color, finished }}
<p>
Crouch too late: <code>{crouchTooLatePercentage.toFixed(2)}%</code>
<span class="tag is-{color}">{line}</span>
</p>
<div class="divider" />
{#if $isController}
<p>
Your browser is limiting our timing precision to <code class="has-text-white">{$loopDelayAvg.toFixed(2)}ms</code>. Your current FPS
setting is
<code class="has-text-white">{$settings.fps}</code>
</p>
<p class="has-text-weight-bold is-size-5">
Result: the % numbers we show you are wrong by an average of <code class="has-text-white">{averageErrorPerPoll.toFixed(2)}</code>%
</p>
{#if finished}
<div class="divider" />
{/if}
</div>
<div class="column history is-one-third">
{#each $history as { line, color, finished }}
<p>
<span class="tag is-{color}">{line}</span>
</p>
{#if finished}
{/each}
</div>
</div>

<div class:is-active={$sharingModalActive} class="modal">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="modal-background" on:click={toggleSharingModal} />
<div class="modal-content">
<div class="box">
<p class="title has-text-centered">Statistics</p>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold is-size-5">
Overall superglide consistency: <code class="has-text-{computedPercentageColor}">{superglideConsistency.toFixed(2)}%</code>
</p>
<p>
Attempts: <code class="has-text-white"> {$attempts.length}</code>
</p>
<p>
Potential superglides: <code class="has-text-white">{potentialSuperglidesPercentage.toFixed(2)}%</code>
</p>
<p>
Average successful chance: <code class="has-text-white">{potentialAvg.toFixed(2)}%</code>
</p>
<br />
<p>
Wrong input first: <code>{wrongInputPercentage.toFixed(2)}%</code>
</p>
<p>
Crouch too late: <code>{crouchTooLatePercentage.toFixed(2)}%</code>
</p>
<div class="divider" />
{/if}
{/each}
{#if $isController}
<p>
Your browser is limiting our timing precision to <code class="has-text-white">{$loopDelayAvg.toFixed(2)}ms</code>. Your current FPS
setting is
<code class="has-text-white">{$settings.fps}</code>
</p>
<p class="has-text-weight-bold is-size-5">
Result: the % numbers we show you are wrong by an average of <code class="has-text-white">{averageErrorPerPoll.toFixed(2)}</code>%
</p>
{/if}
</div>
<div class="column history is-one-third">
{#each $history as { line, color, finished }}
<p>
<span class="tag is-{color}">{line}</span>
</p>
{#if finished}
<div class="divider" />
{/if}
{/each}
</div>
</div>
<div class="box" style="background: linear-gradient(90deg, {$gradientArray.join(',')});" />
<footer>
<button class="button" on:click={toggleSharingModal}>Close</button>
</footer>
</div>
</div>
<div class="box" style="background: linear-gradient(90deg, {$gradientArray.join(',')});" />
<footer>
<button class="button" on:click={toggleSharingModal}>Close</button>
</footer>
</div>
</div>
</div>
Loading

0 comments on commit 77e43b1

Please sign in to comment.