The new Ripple frontend.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
3.5KB

  1. {{ define "tpl" }}
  2. <div class="ui container">
  3. {{ if ne .Beatmapset.ID 0 }}
  4. <div class="ui floating icon labeled dropdown button" id="diff-menu">
  5. <i class="caret down icon"></i>
  6. <span class="text">
  7. <i class="attention icon"></i>
  8. {{ .Beatmap.DiffName }}
  9. (<i class="fitted star icon" style="margin-right:0"></i> {{ printf "%.2f" .Beatmap.DifficultyRating }})
  10. </span>
  11. <div class="menu">
  12. {{ range .Beatmapset.ChildrenBeatmaps }}
  13. <a href="/b/{{ .ID }}" class="item {{ if eq .ID $.Beatmap.ID }}active{{ end }}" data-bid="{{ .ID }}">
  14. <i class="attention icon"></i>
  15. {{ .DiffName }}
  16. (<i class="fitted star icon" style="margin-right:0"></i> {{ printf "%.2f" .DifficultyRating }})
  17. </a>
  18. {{ end }}
  19. </div>
  20. </div>
  21. <div class="ui segments">
  22. <div class="ui segment">
  23. <div class="ui four column divided stackable grid">
  24. <div class="row">
  25. <div class="column">
  26. <b>Artist:</b> {{ .Beatmapset.Artist }}<br />
  27. <b>Title:</b> {{ .Beatmapset.Title }}<br />
  28. <b>Creator:</b> {{ .Beatmapset.Creator }}<br />
  29. <b>Source:</b> {{ .Beatmapset.Source }}<br />
  30. </div>
  31. <div class="column">
  32. <b>Circle Size:</b> <span id="cs"></span><br />
  33. <b>HP Drain:</b> <span id="hp"></span><br />
  34. <b>Overall Difficulty:</b> <span id="od"></span><br />
  35. <b>Passes/Plays:</b> <span id="passcount"></span> / <span id="playcount"></span>
  36. </div>
  37. <div class="column">
  38. <b>Approach Rate:</b> <span id="ar"></span><br />
  39. <b>Star Difficulty:</b> <span id="stars"></span><br />
  40. <b>Length:</b> <span id="length"></span> (<span id="drainLength"></span> drain)<br />
  41. <b>BPM:</b> <span id="bpm"></span><br />
  42. </div>
  43. <div class="full-centered column">
  44. <div class="ui vertical buttons">
  45. <a href="osu://dl/{{ .Beatmapset.ID }}" class="ui pink labeled icon button"><i class="download icon"></i>osu!direct</a>
  46. <a href="http://storage.ripple.moe/d/{{ .Beatmapset.ID }}" class="ui green labeled icon button"><i class="download icon"></i>download</a>
  47. {{ if .Beatmapset.HasVideo }}
  48. <a href="http://storage.ripple.moe/d/{{ .Beatmapset.ID }}?novideo" class="ui gray labeled icon button"><i class="download icon"></i>download (no video)</a>
  49. {{ end }}
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <script>
  57. {{ $p := .Gin.Query "p" }}
  58. {{ $favModeRaw := .Get "users/self/favourite_mode" }}
  59. var beatmapID = {{ .Beatmap.ID }};
  60. var setData = JSON.parse({{ .SetJSON }});
  61. var page = {{ $p | atoint | atLeastOne }};
  62. // defaults to 0
  63. var currentMode = {{ atoi (.Gin.Query "mode") }};
  64. var currentModeChanged = false;
  65. var favMode = parseInt({{ $favModeRaw.favourite_mode }}) || 0;
  66. </script>
  67. <div class="ui four item menu" id="mode-menu">
  68. {{ range $k, $v := modes }}
  69. <a class="item" id="mode-{{ $k }}" data-mode="{{ $k }}" href="/b/{{ $.Beatmap.ID }}?mode={{ $k }}">{{ $v }}</a>
  70. {{ end }}
  71. </div>
  72. <table class="ui sortable fixed table">
  73. <thead>
  74. <tr>
  75. <th class="two wide">{{ .T "Rank" }} </th>
  76. <th class="four wide">{{ .T "Player" }} </th>
  77. <th class="three wide">{{ .T "Score" }} </th>
  78. <th class="one wide">{{ .T "Mods" }} </th>
  79. <th class="two wide">{{ .T "Accuracy" }} </th>
  80. <th class="two wide">{{ .T "Combo" }} </th>
  81. <th class="two wide">{{ .T "PP" }} </th>
  82. </tr>
  83. </thead>
  84. <tbody>
  85. </tbody>
  86. </table>
  87. {{ end }}
  88. </div>
  89. {{ end }}