Skip to content

Commit

Permalink
feat: switch different routes
Browse files Browse the repository at this point in the history
  • Loading branch information
13ruceYu committed Oct 24, 2024
1 parent 4cbce56 commit 1ab6cce
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 4 deletions.
40 changes: 40 additions & 0 deletions app/components/Dialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script lang="ts" setup>
const model = defineModel({ default: false })
const dialogRef = useTemplateRef<HTMLDivElement>('dialogRef')
onClickOutside(dialogRef, () => {
model.value = false
})
</script>

<template>
<transition>
<div v-show="model" class="dialog fixed bottom-0 left-0 right-0 top-0 z-999 flex items-center justify-center">
<div ref="dialogRef" class="h-[50vh] w-[60vw] border rounded-[6px] bg-base-bg p-1 shadow-sm">
<div class="h-8 flex justify-end">
<div
class="h-6 w-6 flex cursor-pointer items-center justify-center rounded-[5px] text-gray transition-all hover:bg-gray-2 hover:text-dark"
@click="model = false"
>
<div i-carbon-close />
</div>
</div>
<div class="h-[calc(50vh-3rem)] overflow-auto">
<slot />
</div>
</div>
</div>
</transition>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.2s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
19 changes: 19 additions & 0 deletions app/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,22 @@ export const BERLIN_ROUTE = 'M339 167.5L206.923 181.53C204.56 181.781 202.5 179.
export const HANGZHOU_ROUTE = 'M116.5 96V116.597C116.5 119.5 119.495 121.436 122.142 120.244L153.291 106.22C154.899 105.496 156.792 105.911 157.95 107.242L185.637 139.061C187.491 141.191 186.614 144.519 183.951 145.458L182.836 145.852C181.677 146.261 180.394 146.115 179.357 145.455L177.256 144.118C176.156 143.417 174.782 143.298 173.577 143.797L155.779 151.177C155.265 151.39 154.802 151.708 154.418 152.11L145.111 161.86C144.709 162.281 144.219 162.61 143.676 162.823L133.779 166.695C133.265 166.896 132.799 167.201 132.408 167.592L122.725 177.275C122.249 177.751 121.662 178.099 121.016 178.287L110.954 181.222C110.327 181.405 109.666 181.431 109.027 181.3L95.111 178.435C93.7932 178.163 92.4273 178.573 91.476 179.524L90.7231 180.277C89.9426 181.057 89.5142 182.121 89.5765 183.223C90.4 197.803 96.0233 225.904 97.5935 233.543C97.8492 234.787 97.5021 236.06 96.6584 237.009L87.2043 247.645C86.4389 248.506 86.0819 249.656 86.2248 250.799L86.8129 255.503C86.9335 256.468 87.4013 257.356 88.1288 258.001L108.549 276.1C108.848 276.365 109.106 276.674 109.313 277.016L123.394 300.18C124.085 301.318 124.165 302.725 123.607 303.934L121.637 308.204C121.546 308.401 121.471 308.605 121.413 308.814L115 332L110.262 343.845C110.089 344.278 109.993 344.739 109.978 345.205L109 376.5L107.606 389.511C107.536 390.161 107.627 390.817 107.869 391.423L112.965 404.163C113.311 405.027 113.947 405.744 114.764 406.189L117.24 407.54C118.348 408.144 119.675 408.19 120.822 407.665L130.332 403.306C130.774 403.104 131.248 402.983 131.733 402.951L145.396 402.04C145.796 402.014 146.191 401.927 146.565 401.783L165.142 394.638C165.38 394.546 165.626 394.478 165.878 394.433L185.323 390.976C186.939 390.689 188.566 391.417 189.428 392.814L200.55 410.839C201.649 412.621 203.938 413.254 205.797 412.289L268 380L284 371.5L316 350.5L343.5 333.5L360.238 323.162C360.412 323.054 360.578 322.933 360.734 322.8L384.5 302.5L409.5 279L419.5 268L438.5 242L450.366 223.981C451.292 222.575 450.995 220.696 449.681 219.645V219.645C448.223 218.479 446.087 218.773 444.998 220.289L416.5 260L387 291L355.5 317L321.5 338.5L294.636 355.962C292.871 357.109 290.519 356.692 289.256 355.008L286.036 350.714C284.861 349.148 282.726 348.662 280.99 349.565L274.811 352.778C272.946 353.748 272.15 355.995 272.988 357.922L281.5 377.5L311.679 433.067C312.416 434.424 314.095 434.952 315.476 434.262V434.262C316.876 433.562 317.455 431.868 316.776 430.458L313.119 422.862C312.207 420.969 312.916 418.693 314.742 417.652L365 389L388 377.5L405.5 368.5L415.013 362.316C415.336 362.107 415.627 361.851 415.877 361.558L442.638 330.183C443.652 328.994 443.469 327.198 442.235 326.238V326.238C441.012 325.287 440.819 323.513 441.808 322.321L481.5 274.5L505.371 236.119C506.256 234.696 508.154 234.308 509.527 235.269V235.269C510.879 236.215 512.747 235.854 513.649 234.471L576.913 137.434C577.809 136.06 579.611 135.606 581.051 136.391V136.391C582.647 137.262 583.173 139.301 582.199 140.836L530 223L507 251L500.521 259.999C499.16 261.888 499.695 264.536 501.681 265.749L505.806 268.27C506.579 268.743 507.489 268.939 508.388 268.826L513.059 268.243C514.284 268.09 515.511 268.511 516.383 269.383L519.5 272.5'
export const SHAOXIN_ROUTE = 'M451.5 199.5L456.43 223.657C456.477 223.885 456.543 224.109 456.629 224.326L478.721 280.292C478.905 280.76 479 281.258 479 281.761V325C479 327.209 480.791 329 483 329H521.516C521.837 329 522.158 329.039 522.47 329.115L550.5 336L581.19 340.721C584.519 341.234 585.763 345.381 583.265 347.641L569.412 360.175C568.831 360.7 568.5 361.447 568.5 362.23V362.23C568.5 363.76 569.74 365 571.27 365H571.752C572.555 365 573.33 365.297 573.928 365.835L576.676 368.308C577.519 369.067 578 370.148 578 371.281V375.739C578 376.56 577.748 377.361 577.277 378.033L575.223 380.967C574.752 381.639 574.5 382.44 574.5 383.261V390.289C574.5 391.079 574.734 391.851 575.172 392.508L579.241 398.611C580.022 399.783 580.129 401.278 579.524 402.55L577.428 406.951C576.401 409.108 573.601 409.724 571.219 409.914C570.286 409.988 569.34 410.3 568.5 411C566.795 412.421 562.802 413.253 559.497 413.675C557.503 413.93 555.885 415.499 555.731 417.503L555.273 423.457C555.117 425.478 553.475 427.063 551.449 427.147L498.335 429.342C496.192 429.43 494.5 431.193 494.5 433.338V484.5C494.333 487.167 491.9 492.6 483.5 493C475.68 493.372 469.276 492.618 466.546 492.109C466.182 492.041 465.812 492.024 465.443 491.996C462.84 491.794 458.628 489.044 459 479C459.306 470.751 460.019 461.782 460.562 455.926C460.782 453.558 458.926 451.5 456.549 451.5H441.114C439.791 451.5 438.554 452.154 437.809 453.247L425.492 471.312C424.588 472.638 422.977 473.295 421.403 472.981L415.441 471.788C413.267 471.353 411.862 469.234 412.306 467.063L419.016 434.303C419.524 431.822 417.629 429.5 415.098 429.5H407.715C405.62 429.5 403.88 427.884 403.726 425.795L402.031 402.919C402.01 402.641 402.019 402.36 402.057 402.083L406.5 369.5V349.5L409.33 270.735C409.419 268.259 407.259 266.299 404.804 266.626L387 269H357.867C357.623 269 357.379 268.978 357.139 268.933L257.5 250.5L239.878 248.119C239.3 248.04 238.745 247.837 238.254 247.522L76.3175 143.666C75.2626 142.989 74.8365 141.659 75.3019 140.495V140.495C75.919 138.952 77.8003 138.37 79.1814 139.294L146.991 184.653C148.897 185.928 151.484 185.342 152.655 183.369L176.953 142.423C177.311 141.818 177.504 141.13 177.512 140.427L178.46 57.9797C178.482 56.0515 180.052 54.5 181.98 54.5V54.5C183.924 54.5 185.5 56.076 185.5 58.0201V69C185.5 71.2091 187.291 73 189.5 73H230.286C232.38 73 234.12 74.6154 234.275 76.704L244.218 210.698C244.376 212.827 246.177 214.456 248.311 214.401L320.594 212.524C321.19 212.508 321.783 212.626 322.328 212.87L348.492 224.55C349.152 224.845 349.879 224.955 350.596 224.87L390.649 220.101C391.21 220.035 391.75 219.85 392.235 219.559L401.314 214.111C402.496 213.402 404 214.254 404 215.632V215.632C404 216.648 404.851 217.456 405.865 217.403L438.708 215.697C440.833 215.587 442.5 213.831 442.5 211.702V197.5'
export const SHANGHAI_ROUTE = 'M45.0655 167.663L57.8041 160.672C58.0447 160.54 58.271 160.384 58.4796 160.206L62.5329 156.739C62.6782 156.615 62.8144 156.481 62.9404 156.337L67.3362 151.325L71.5058 147.543C73.169 146.034 75.749 146.195 77.2122 147.898V147.898C78.0076 148.824 78.3295 150.066 78.1199 151.269C75.7466 164.883 77.1436 174.334 78.5864 179.621C79.2918 182.205 77.8039 185.234 75.1875 185.811L34.3961 194.796C32.0566 195.312 30.6917 197.754 31.4785 200.016L40.1062 224.828C40.5451 226.09 42.2152 226.351 43.0183 225.283V225.283C43.8525 224.173 45.5978 224.507 45.9639 225.846L50.9607 244.126L53.1968 260.301C53.4273 261.968 54.6887 263.288 56.2981 263.78C61.1396 265.262 63.8984 267.431 65.1659 268.664C65.7645 269.246 66.0262 270.063 66.0262 270.898V309.544C66.0262 309.934 66.082 310.319 66.1958 310.692C67.3739 314.555 69.6897 321.682 70.3995 323.861C70.54 324.292 70.7525 324.694 71.0288 325.053L85.3778 343.727C85.5764 343.985 85.7427 344.267 85.873 344.566L92.0515 358.744C92.1682 359.012 92.3139 359.266 92.486 359.502L97.2437 366.029C97.3924 366.233 97.5214 366.451 97.6291 366.679L102.707 377.446L110.951 391.702C111.878 393.306 113.786 394.063 115.56 393.531L132.183 388.556L138.271 386.127C138.578 386.004 138.869 385.843 139.137 385.649L145.939 380.714L148.77 379.019C149.065 378.842 149.381 378.705 149.711 378.609L169.248 372.95C169.428 372.898 169.599 372.818 169.755 372.715V372.715C170.674 372.103 170.85 370.825 170.131 369.988L167.91 367.403C167.674 367.129 167.477 366.823 167.323 366.496L116.325 257.822C115.338 255.719 116.344 253.22 118.513 252.388L122.592 250.823C122.872 250.715 123.163 250.64 123.46 250.597L128.766 249.841C130.564 249.585 131.712 247.788 131.189 246.048V246.048C130.674 244.335 131.78 242.559 133.545 242.266L134.461 242.113C136.478 241.778 137.864 239.903 137.593 237.877L136.883 232.568C136.808 232.002 136.612 231.458 136.308 230.974L134.372 227.882C133.863 227.071 132.847 226.739 131.957 227.094V227.094C130.981 227.483 130.479 228.566 130.812 229.563L131.099 230.422C131.371 231.239 131.273 232.133 130.829 232.871L128.015 237.551C127.74 238.008 127.559 238.516 127.484 239.045L127.254 240.648C127.06 242 126.19 243.16 124.946 243.724L116.129 247.723C114.135 248.627 111.785 247.761 110.856 245.779L100.1 222.853C99.0595 220.636 100.238 218.013 102.587 217.318L115.51 213.498C115.708 213.439 115.911 213.396 116.116 213.369L125.025 212.184C125.428 212.13 125.821 212.015 126.189 211.843L165.901 193.311C166.13 193.204 166.368 193.119 166.612 193.057L212.751 181.387L218.087 180.795C218.458 180.754 218.821 180.661 219.167 180.52L246.532 169.277C249.165 168.196 252.322 170.291 254.116 172.5C254.619 173.118 255.234 173.7 255.983 174.198C259.923 176.819 261.229 181.191 261.663 183.803C261.859 184.988 262.851 185.962 264.051 185.962V185.962C265.076 185.962 265.973 185.219 266.149 184.21C268.187 172.564 264.929 164.089 259.67 157.964C257.266 155.164 260.552 153.971 262.888 156.827V156.827C264.059 158.259 264.363 156.034 265.672 154.727L267.753 152.652C269.486 150.922 269.272 148.054 267.301 146.601L229.157 118.472C227.346 117.136 224.789 117.557 223.502 119.403L218.388 126.738C216.873 128.911 213.702 129.038 212.019 126.993L202.817 115.816C201.425 114.126 201.651 111.63 203.325 110.218L208.455 105.886C208.698 105.681 208.962 105.5 209.26 105.388C210.286 105.003 212.055 104.679 213.406 105.577C214.978 106.623 229.782 116.47 236.987 121.262L246.157 128.451L259.913 138.254L270.165 145.926C270.317 146.039 270.46 146.163 270.594 146.297L275.284 150.976C275.516 151.208 275.718 151.466 275.887 151.747L277.241 153.997C277.477 154.391 277.644 154.822 277.735 155.273L279.563 164.395L280.906 169.085C281.565 171.383 279.941 173.704 277.557 173.874V173.874C275.2 174.042 273.579 176.316 274.189 178.599L274.682 180.443C275.197 182.37 273.978 184.331 272.022 184.722V184.722C270.336 185.058 269.154 186.584 269.25 188.3L270.393 208.835L273.668 225.827L277.646 239.222C278.321 241.495 280.815 242.685 283.007 241.78L294.735 236.938C296.356 236.269 298.18 237.281 298.469 239.012V239.012C298.528 239.368 298.517 239.732 298.434 240.083L294.141 258.443C294.03 258.915 294.007 259.403 294.071 259.884L294.82 265.49C295.086 267.476 296.781 268.96 298.785 268.96H308.192C308.751 268.96 309.303 269.077 309.814 269.303L313.973 271.148C314.603 271.427 315.151 271.865 315.562 272.418L327.999 289.142C329.081 290.598 331.17 290.833 332.549 289.654V289.654C333.721 288.651 335.449 288.651 336.621 289.654L343.268 295.338C343.591 295.614 343.956 295.837 344.348 295.998L364.721 304.368C365.425 304.657 365.735 305.485 365.394 306.166V306.166C365.036 306.879 365.394 307.744 366.151 307.995L375.762 311.192C376.254 311.355 376.773 311.422 377.29 311.387L386.332 310.786L400.742 308.825L412.533 305.558L420.768 303.661C420.955 303.619 421.144 303.589 421.334 303.573L427.969 303.022C428.587 302.97 429.208 303.063 429.783 303.293L434.891 305.331C435.267 305.481 435.664 305.573 436.068 305.604L443.244 306.155C443.726 306.192 444.212 306.141 444.676 306.005L454.597 303.094C454.937 302.994 455.262 302.85 455.564 302.664L463.098 298.038C463.447 297.824 463.826 297.665 464.223 297.566L473.464 295.261C473.888 295.155 474.327 295.12 474.763 295.156L481.039 295.678C481.648 295.728 482.238 295.918 482.762 296.232L494.805 303.441C494.979 303.545 495.144 303.662 495.299 303.79L540.217 340.923C540.678 341.304 541.218 341.577 541.798 341.721L561.401 346.611C561.718 346.69 562.043 346.73 562.369 346.73H570.596C570.896 346.73 571.196 346.696 571.489 346.629L611.004 337.581L616.245 335.62L628.298 329.607C628.851 329.331 629.52 329.608 629.716 330.194V330.194C629.878 330.68 629.653 331.211 629.191 331.433L613.972 338.721C613.741 338.832 613.5 338.92 613.252 338.985L598.559 342.809L573.668 348.037L565.015 348.654C564.672 348.678 564.327 348.658 563.989 348.594L541.299 344.312C540.619 344.183 539.984 343.881 539.457 343.434L518.646 325.817L504.891 314.707L494.12 305.225C493.878 305.012 493.611 304.829 493.324 304.68L479.843 297.662C479.094 297.272 478.24 297.129 477.404 297.254L466.216 298.928C465.801 298.991 465.398 299.118 465.023 299.305L447.164 308.214C446.37 308.61 445.466 308.731 444.596 308.557L427.145 305.075C426.581 304.962 425.998 304.973 425.438 305.106L416.085 307.328C414.073 307.806 412.757 309.739 413.05 311.786L415.591 329.531C415.713 330.38 415.149 331.177 414.308 331.345V331.345C413.362 331.533 412.462 330.856 412.382 329.895L410.941 312.639C410.742 310.258 408.515 308.581 406.172 309.049L388.029 312.669C387.772 312.72 387.51 312.746 387.247 312.746H376.545C375.703 312.746 374.915 313.167 374.447 313.868V313.868C374.087 314.407 373.948 315.063 374.059 315.701L376.711 331.003C376.79 331.457 376.998 331.879 377.31 332.219V332.219C378.627 333.651 377.786 335.973 375.857 336.229L371.614 336.794C370.956 336.881 370.33 337.131 369.793 337.521L349.141 352.507C349.044 352.577 348.953 352.654 348.869 352.738V352.738C347.697 353.907 348.119 355.895 349.664 356.488L354.614 358.387C354.798 358.458 354.988 358.515 355.181 358.558L359.92 359.609C360.49 359.735 361.082 359.735 361.652 359.609L372.576 357.186L379.566 355.443C380.139 355.3 380.737 355.286 381.317 355.401L389.191 356.973C389.892 357.113 390.621 357.052 391.306 356.849C400.312 354.176 402.223 360.099 402.615 363.239C402.757 364.373 402.196 365.437 401.303 366.15L400.461 366.822C399.793 367.355 399.313 368.089 399.092 368.915L396.917 377.054C396.847 377.314 396.804 377.582 396.788 377.851L396.2 387.829C396.172 388.31 396.057 388.781 395.861 389.221L394.071 393.24C393.724 394.018 393.138 394.665 392.398 395.087L384.697 399.478C384.477 399.603 384.27 399.749 384.078 399.913L379.782 403.587L375.593 407.766C375.33 408.029 375.105 408.327 374.924 408.652L371.921 414.044L367.976 421.479C366.912 423.485 364.393 424.203 362.431 423.061L358.166 420.579'

export const ALL_ROUTES = [
{
name: 'Berlin',
route: BERLIN_ROUTE,
},
{
name: 'Hangzhou',
route: HANGZHOU_ROUTE,
},
{
name: 'Shaoxin',
route: SHAOXIN_ROUTE,
},
{
name: 'Shanghai',
route: SHANGHAI_ROUTE,
},
]
34 changes: 31 additions & 3 deletions app/pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { FULL_MARATHON_DISTANCE, SHANGHAI_ROUTE } from '~/constants'
import { ALL_ROUTES, FULL_MARATHON_DISTANCE } from '~/constants'
const trackRef = useTemplateRef<SVGPathElement>('trackRef')
const splitStart = ref(0)
Expand All @@ -20,6 +20,8 @@ const rangeOffset = computed(() => {
})
const { width: windowWidth } = useWindowSize()
const showSplitName = ref(true)
const currentMRoute = ref(ALL_ROUTES[0]!.route)
const currentMRouteName = ref(ALL_ROUTES[0]!.name)
const splitList = computed(() => {
const baseSplits = Array.from({ length: 42 }, (_, i) => i + 1)
Expand All @@ -39,6 +41,7 @@ const splitList = computed(() => {
}
})
})
const showDialog = ref(true)
onMounted(() => {
if (!trackRef.value)
Expand Down Expand Up @@ -74,6 +77,18 @@ function handleSplitNameClick(percentage: number) {
return
window.scrollTo(0, percentage * (scrollContainer.value.scrollHeight - window.innerHeight))
}
function handleRouteClick(route: any) {
currentMRoute.value = route.route
currentMRouteName.value = route.name
nextTick(() => {
trackPathLength.value = trackRef.value!.getTotalLength()
calcScrollPercentage()
setRange()
y.value = 0
})
showDialog.value = false
}
</script>

<template>
Expand All @@ -87,7 +102,7 @@ function handleSplitNameClick(percentage: number) {
<path
id="track"
ref="trackRef"
:d="SHANGHAI_ROUTE"
:d="currentMRoute"
/>
</defs>
<use href="#track" class="base stroke-width-4 stroke-base-text" />
Expand Down Expand Up @@ -121,8 +136,21 @@ function handleSplitNameClick(percentage: number) {
</div>
<div class="detail-info flex flex-col justify-between p-4 md:border-l">
<h1 class="flex text-3xl text-base-text">
Berlin Marathon <div class="i-ic-outline-unfold-more" />
{{ currentMRouteName }} Marathon <div class="i-ic-outline-unfold-more cursor-pointer" @click="showDialog = true" />
</h1>
<Dialog v-model="showDialog">
<div class="grid grid-cols-3 gap-2 p-2">
<div v-for="(route, key) in ALL_ROUTES" :key="key" class="cursor-pointer border border-gray rounded-md transition-all hover:shadow-md dark:hover:shadow-dark-1" @click="handleRouteClick(route)">
<svg class="h-full w-full" viewBox="0 0 660 530" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
:d="route.route"
stroke-base-text
stroke-width="4"
/>
</svg>
</div>
</div>
</Dialog>
<p><span class="km-text-shadow text-6xl font-bold tracking-tighter font-mono italic">{{ (FULL_MARATHON_DISTANCE * scrollPercentage).toFixed(3) }}</span><span class="ml-2 text-xl font-bold">KM</span></p>
<div>
<ToggleButton v-model="showSplitName">
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,4 @@
"resolutions": {
"@typescript-eslint/utils": "^8.6.0"
}
}
}

0 comments on commit 1ab6cce

Please sign in to comment.