Skip to content

T
Taiko Web
Commit 08fb3498 authored by LoveEevee's avatar LoveEevee
Browse files
Options

Titlescreen: Change logo

parent a7a26f0f
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 23 deletions
public/src/css/songbg.css
View file @ 08fb3498
......@@ -110,6 +110,10 @@
top: calc(50% + -1vw);
bottom: auto;
}
@keyframes donbg-scroll{
from{background-position-x: 0}
to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw) * -1)}
}
@keyframes donbg-scroll1{
from{background-position-x: 0}
to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw1) * -1)}
......@@ -138,7 +142,7 @@
30%{background-position-y: 0}
}
.donlayer1{
animation: 5s linear donbg-scroll1 infinite;
animation: 5s linear donbg-scroll infinite;
background-size: auto 100%;
}
.donlayer2{
......@@ -158,15 +162,15 @@
.donbg-4 .donlayer2,
.donbg-6 .donlayer2,
.donbg-raise .donlayer2{
animation: 5s linear donbg-scroll2 infinite, 1s linear donbg-raise infinite alternate;
animation: 5s linear donbg-scroll infinite, 1s linear donbg-raise infinite alternate;
}
.donbg-3 .donlayer2,
.donbg-anim3 .donlayer2{
animation: 3.4s linear donbg-scroll2 infinite, 1.8s linear donbg-anim3 infinite;
animation: 3.4s linear donbg-scroll infinite, 1.8s linear donbg-anim3 infinite;
}
.donbg-5 .donlayer2,
.donbg-anim5 .donlayer2{
animation: 2.7s linear donbg-scroll2 infinite, 2.2s linear donbg-anim5 infinite;
animation: 2.7s linear donbg-scroll infinite, 2.2s linear donbg-anim5 infinite;
}
.donbg-equalscroll .donlayer1{
animation: 5.3s linear donbg-scroll1 infinite;
......
public/src/css/titlescreen.css
View file @ 08fb3498
......@@ -21,13 +21,9 @@
background-size: cover;
cursor: pointer;
}
.logo-big{
width: 90vmin;
height: calc(90vmin / 754 * 400);
background-size: contain;
background-repeat: no-repeat;
text-align: center;
color: transparent;
#logo{
width: 100vmin;
height: calc(100vmin / 1170 * 390);
}
.click-to-continue{
position: absolute;
......
public/src/js/assets.js
View file @ 08fb3498
......@@ -26,7 +26,8 @@ var assets = {
"about.js",
"debug.js",
"session.js",
"importsongs.js"
"importsongs.js",
"logo.js"
],
"css": [
"main.css",
......@@ -38,7 +39,6 @@ var assets = {
],
"img": [
"title-screen.png",
"logo-big.png",
"notes.png",
"notes_drumroll.png",
"notes_hit.png",
......
public/src/js/logo.js 0 → 100644
View file @ 08fb3498
class Logo{
constructor(){
this.canvas = document.getElementById("logo")
this.ctx = this.canvas.getContext("2d")
this.symbols = [{
x: 315, y: 18, scale: true,
path: new Path2D("m52 6c11 0 18 4 24 13 7 10 4 23-2 32C61 71 52 83 46 87 40 91 32 91 23 87 21 86 17 83 13 81 9 78 13 76 17 76 29 75 37 68 43 60 53 48 59 39 64 28 67 21 62 16 56 20 44 27 35 37 22 40 13 42 0 36 0 28 0 26 1 25 3 24 6 23 8 27 12 25 32 15 38 6 52 6Zm43 5c2 7-5 9-8 4-1-2-2-5-3-7-1-3-3-3-4-1 2 4 4 10 0 12-5 2-7-4-8-7-1-3-2-5-4-6-2 0-2-3 0-4 2-1 6 0 8 1 9-7 17 1 19 8z")
}, {
x: 267, y: 50, scale: true,
path: new Path2D("m53 5c2 2 1 10-6 8-7-4-12 0-17 2 1 2 2 7 2 11v9c8-3 20 1 24 7 2 3 2 6-1 9-5 3-6 1-10-2C41 46 36 45 29 48 23 50 16 54 10 54 6 54 0 50 0 46 0 37 10 33 19 32 18 27 19 24 18 19 10 19 9 19 5 17-1 14 1 9 5 10 7 11 8 10 11 9L23 4C33-1 45-2 53 5ZM18 41C15 40 7 40 6 43c-1 5 6 2 12-2z")
}, {
x: 197, y: 7, scale: true,
path: new Path2D("m31 0c6 0 10 1 13 3 3 2 5 6 4 10 19-9 28 2 32 7 6 7 7 18-1 35-8 19-23 35-38 35-6 0-11-2-16-5-3-2-8-4-8-7 0-4 5 1 19-6 11-5 27-26 32-37 6-11 1-15-6-10-7 4-14 11-25 15-7 3-14 1-17 0-1 5 0 7 0 13 3 7 1 12-6 12C3 65 3 50 3 46 3 35 8 31 5 30 0 28-1 25 1 22c2-3 5-3 9-1 5 2 6 3 8 7 4-2 9-4 11-7V11C29 8 24 10 24 6 24 0 30 0 31 0Z")
}, {
x: 87, y: 7,
path: new Path2D("m51 48c1-4-5-3-6-6-1-2 1-8 3-6 1 1 2 1 12-1 15-2 5-6 17-4 3 3 7 5 7 6 0 2-2 3-3 5-2 6-3 10-10 16 3 3 6 8 10 13 5 6 5 5 5 7 0 2 3 2 0 4-1 1-2 1-3 2-1 1-2 1-6-1-3-1-9-8-11-11-1-1-2 0-3 1-1 1-3 1-4 2-1 1 0-2-7 1 11 2 5 6-2 7-3-1-7 0-13 0-9 1-14 4-21 5-2 2-4 2-8 0-1-6-6-7-5-9 3 2 8 1 12-1-2-3-4-6-4-9 0-3 0-2 4 0 4 1 4 4 7 3 2 0 1 2 2 5 6 0 7-1 7-4 0-3 1-4 0-11-1-3 4-1 6 2 2 2 4 4 5 7 1 1 2-1 8-4 4-1 8-3 7-6-6-7-7-9-6-13zm11 4c1 1 1 0 2-2 1-2 3-6 1-5-4 1-5 1-10 2 3 2 5 3 7 5zM43 15c4 0 9 1 17-1 9-1-1-9 5-13 3 0 4 4 6 5 5 3 1 7 6 8 1 0 3 2 3 3-2 3-3 3-4 4-1 3-3 1-4 4-1 3-2 4-4 5-1 1-2 0-3 1-5 1-1-5-5-5-3 0-4 1-7 0-3-2-5-2-6-3-1 0-3-2-4-3 0-1-3-1 0-5zM24 56c2 0 6 1 4-2-1-1-1-1-2-4-1-2-1-3-2-3-2 0-3 1-2 4 1 5 0 5 2 5zM13 44c0-2 0-3-1-4 4 1 6 4 9 2 1-1 3-1 4-2 2-2 2 0 4-2 3 1 6 3 8 5 2 1-1 2 0 5 0 2-2 7-3 8 0 3-3 3-8 7-4 2-4 5-7 4-1 0-4-2-6-3-5-2-4-5-3-6 1-1 1-1 5 0 4 0 0-1-1-5-1-2-2-5-1-9zM18 21C12 23 13 24 9 21 7 19 7 16 6 14 4 11 4 12 5 10 6 8 5 6 7 8c1 1 4 3 5 3 2 0 9-1 9-8 0-2 0-3 1-3 2 0 2 1 3 2 2 2 2 2 3 4 2 4 5 0 9 2 2 2 3 2 4 4 1 1 1 3-1 4-2 2-4 3-6 2-2-1-2-1-3 2 0 2-1 3-2 8 4 0 6 1 7-2 2 1 3 1 4 1 1 1 3 2 5 3 1 2 1 3 0 5-2 1-4 1-8 1-6 1-23 2-28 5-2 1-3 1-4 1 0-1 1-2 0-3-3-2-5-6-5-8 2 1 3 2 5 2 3-1 11-2 16-3-1-2-1-6-3-9z"),
shadow: new Path2D("m51 48c1-4-5-3-6-6-1-2 1-8 3-6 1 1 2 1 12-1 15-2 5-6 17-4 3 3 7 5 7 6 0 2-2 3-3 5-2 6-3 10-10 16 3 3 6 8 10 13 5 6 5 5 5 7 0 2 3 2 0 4-1 1-2 1-3 2-1 1-2 1-6-1-3-1-9-8-11-11-1-1-2 0-3 1-1 1-3 1-4 2-1 1 0-2-7 1 11 2 5 6-2 7-3-1-7 0-13 0-9 1-14 4-21 5-2 2-4 2-8 0-1-6-6-7-5-9 3 2 8 1 12-1-2-3-4-6-4-9 0-3 0-2 4 0 4 1 4 4 7 3 2 0 1 2 2 5 6 0 7-1 7-4 0-3 1-4 0-11-1-3 4-1 6 2 2 2 4 4 5 7 1 1 2-1 8-4 4-1 8-3 7-6-6-7-7-9-6-13zm11 4c1 1 1 0 2-2 1-2 3-6 1-5-4 1-5 1-10 2 3 2 5 3 7 5zM43 15c4 0 9 1 17-1 9-1-1-9 5-13 3 0 4 4 6 5 5 3 1 7 6 8l3 3-17 14c-2-1 0-5-3-5-3 0-4 1-7 0-3-2-5-2-6-3-1 0-3-2-4-3 0-1-3-1 0-5zM24 56c2 0 6 1 4-2-1-1-1-1-2-4-1-2-1-3-2-3-2 0-3 1-2 4 1 5 0 5 2 5zM13 44c0-2 0-3-1-4 4 1 6 4 9 2 1-1 3-1 4-2 2-2 2 0 4-2 3 1 5 2 7 4L35 53 18 66 13 64c-5-2-4-5-3-6 1-1 1-1 5 0 4 0 0-1-1-5-1-2-2-5-1-9zM18 21C12 23 13 24 9 21 7 19 7 16 6 14 4 11 4 12 5 10 6 8 5 6 7 8c1 1 4 3 5 3 2 0 9-1 9-8 0-2 0-3 1-3 2 0 2 1 3 2 2 2 2 2 3 4 2 4 5 0 9 2l4 3-10 9c0 2-1 3-2 8 4 0 6 1 7-2 2 1 3 1 4 1 1 1 3 2 5 3L42 34 26 36 9 38 5 42C5 41 6 40 5 39 2 37 0 33 0 31c2 1 3 2 5 2 3-1 11-2 16-3-1-2-1-6-3-9z")
}, {
x: 22, y: 16,
path: new Path2D("M0 83C11 65 5 65 16 43 6 45 9 43 6 39 3 37 1 37 1 34c1-5 2-4 2-7 4 2 6 3 9 2 9-3 10 1 13-9 1-4 0 0 4-11 2-4 1-9 3-9 3 1 6 5 8 8 1 2 4 4 5 6 2 4-2 2-3 10 10 0 9-4 12-4 2 0 4 2 7 4 4 3 8 4 9 6 1 3-3 8-6 9-4 1-1-3-17 0 0 1 0 1 1 3 5 12 10 20 14 30 2 6 2 4 6 6 2 1 3 1 2 3-2 3 1 3-1 5-2 1-3 2-5 4-6 2-9 0-12-4-3-8-4-8-5-12-3-5-4-9-8-17-4-5-2-8-7-14-1-2-3 4-4 6 0 3-2 6-4 9-1 2 2 1 4 3 1 1 3 2 4 4l5 5c2 2 2 2 2 4 0 2-2 4-5 3 0 3 2 8 1 8-5 0-10-7-15-18-3 3-1 4-2 6-2 5-5 11-4 13 2 3-1 6-4 6C4 91 7 89 0 83Z")
}]
pageEvents.add(window, "resize", this.update.bind(this))
}
updateSubtitle(){
this.subtitleGradient = ["#df600d", "#d8446f", "#b2147b", "#428ac2", "#1f9099"]
this.subtitle = []
this.subtitleW = 0
var index = 0
var latinLowercase = /[a-z]/
for(var i = 0; i < strings.taikoWeb.length; i++){
var letter = strings.taikoWeb[i]
var width = 57
if(letter === "ェ"){
width = 40
}else if(letter === " "){
width = 20
}else if(letter === "i"){
width = 22
}else if(letter === "T"){
width = 30
}else if(latinLowercase.test(letter)){
width = 38
}
this.subtitle.push({
letter: letter,
x: this.subtitleW + width / 2,
index: letter === " " ? index : index++
})
this.subtitleW += width
}
this.update()
}
update(){
var ctx = this.ctx
ctx.save()
this.width = 1170
this.height = 390
var pixelRatio = window.devicePixelRatio || 1
var winW = this.canvas.offsetWidth * pixelRatio
var winH = this.canvas.offsetHeight * pixelRatio
this.canvas.width = winW
this.canvas.height = winH
ctx.scale(winW / this.width, winH / this.height)
ctx.lineJoin = "round"
ctx.miterLimit = 1
ctx.font = this.bold(strings.font) + "55px " + strings.font
ctx.textBaseline = "top"
ctx.textAlign = "center"
for(var i = 0; i < this.symbols.length; i++){
ctx.strokeStyle = "#3f0406"
ctx.lineWidth = 13.5
this.drawSymbol(this.symbols[i], "stroke", 4)
}
this.subtitleIterate((letter, x) => {
ctx.lineWidth = strings.id === "en" ? 19 : 18.5
ctx.strokeStyle = "#3f0406"
ctx.strokeText(letter, x, 315)
})
ctx.fillStyle = "#3f0406"
ctx.fillRect(400, 180, 30, 50)
for(var i = 0; i < this.symbols.length; i++){
var symbol = this.symbols[i]
ctx.strokeStyle = "#7c361e"
ctx.lineWidth = 13.5
this.drawSymbol(symbol, "stroke")
ctx.strokeStyle = "#fff"
ctx.lineWidth = 7.5
this.drawSymbol(symbol, "stroke")
var grd = ctx.createLinearGradient(0, 55 - symbol.y, 0, 95 - symbol.y)
grd.addColorStop(0, "#a41f1e")
grd.addColorStop(1, "#a86a29")
ctx.fillStyle = grd
this.drawSymbol(symbol, "fill")
ctx.save()
ctx.scale(symbol.scale ? 2.8 : 3.2, 3.2)
ctx.translate(symbol.x, symbol.y)
ctx.clip(symbol.path)
grd = ctx.createLinearGradient(0, 55 - symbol.y, 0, 95 - symbol.y)
grd.addColorStop(0, "#d80e11")
grd.addColorStop(1, "#e08f19")
ctx.fillStyle = grd
ctx.translate(3, 2)
ctx.fill(symbol.shadow || symbol.path)
ctx.restore()
}
ctx.fillStyle = "#fff"
ctx.fillRect(382, 85, 30, 15)
ctx.fillRect(402, 145, 15, 15)
this.subtitleIterate((letter, x) => {
ctx.lineWidth = strings.id === "en" ? 19 : 18.5
ctx.strokeStyle = "#7c361e"
ctx.strokeText(letter, x, 305)
})
this.subtitleIterate((letter, x, i) => {
ctx.lineWidth = strings.id === "en" ? 11 : 9.5
ctx.strokeStyle = this.getSubtitleGradient(i)
ctx.fillStyle = "#fff"
ctx.strokeText(letter, x, 305)
ctx.fillText(letter, x, 305)
})
ctx.restore()
}
drawSymbol(symbol, action, y){
var ctx = this.ctx
ctx.save()
ctx.scale(symbol.scale ? 2.8 : 3.2, 3.2)
ctx.translate(symbol.x, symbol.y + (y || 0))
ctx[action](symbol.path)
ctx.restore()
}
subtitleIterate(func){
for(var i = this.subtitle.length; i--;){
var subtitleObj = this.subtitle[i]
var x = (this.width - this.subtitleW) / 2 + subtitleObj.x
func(subtitleObj.letter, x, subtitleObj.index)
}
}
getSubtitleGradient(index){
var sign = 1
var position = 0
var length = this.subtitleGradient.length - 1
while(index >= 0){
if(sign === 1){
position = index % length
}else{
position = length - (index % length)
}
sign *= -1
index -= length
}
return this.subtitleGradient[position]
}
bold(font){
return font === "Microsoft YaHei, sans-serif" ? "bold " : ""
}
clean(){
pageEvents.remove(window, "resize")
delete this.symbols
delete this.ctx
delete this.canvas
}
}
public/src/js/songselect.js
View file @ 08fb3498
......@@ -1687,11 +1687,16 @@ class SongSelect{
if("id" in currentSong){
var startLoad = this.getMS()
if(loadOnly){
var currentId = null
var resolveLoading
this.previewLoading = currentSong.id
}else{
var currentId = this.previewId
this.previewing = this.selectedSong
if(this.previewLoading === currentSong.id){
this.previewLoading = null
return
}
}
var currentId = this.previewId
var songObj = this.previewList.find(song => song && song.id === id)
if(songObj){
......@@ -1723,9 +1728,14 @@ class SongSelect{
}).then(sound => {
if(currentId === this.previewId){
songObj.preview_sound = sound
this.preview = sound
this.previewLoaded(startLoad, songObj.preview_time)
if(!loadOnly || !this.previewLoading){
this.previewing = this.selectedSong
this.preview = sound
this.previewLoaded(startLoad, songObj.preview_time)
}
if(loadOnly){
this.previewLoading = null
}
var oldPreview = this.previewList.shift()
if(oldPreview){
oldPreview.preview_sound.clean()
......
public/src/js/strings.js
View file @ 08fb3498
......@@ -4,6 +4,7 @@
this.regex = /^ja$/
this.font = "TnT, Meiryo, sans-serif"
this.taikoWeb = "たいこウェブ"
this.titleProceed = "クリックするかEnterを押す！"
this.categories = {
"J-POP": "J-POP",
......@@ -101,6 +102,7 @@ function StringsEn(){
this.regex = /^en$|^en-/
this.font = "TnT, Meiryo, sans-serif"
this.taikoWeb = "Taiko Web"
this.titleProceed = "Click or Press Enter!"
this.categories = {
"J-POP": "Pop",
......@@ -198,6 +200,7 @@ function StringsCn(){
this.regex = /^zh$|^zh-CN$|^zh-SG$/
this.font = "Microsoft YaHei, sans-serif"
this.taikoWeb = "太鼓网页"
this.titleProceed = "点击或按回车！"
this.categories = {
"J-POP": "流行音乐",
......@@ -295,6 +298,7 @@ function StringsTw(){
this.regex = /^zh-HK$|^zh-TW$/
this.font = "Microsoft YaHei, sans-serif"
this.taikoWeb = "太鼓網頁"
this.titleProceed = "點擊或按確認！"
this.categories = {
"J-POP": "流行音樂",
......@@ -392,6 +396,7 @@ function StringsKo(){
this.regex = /^ko$|^ko-/
this.font = "Microsoft YaHei, sans-serif"
this.taikoWeb = "태고 웹"
this.titleProceed = "클릭하거나 Enter를 누릅니다!"
this.categories = {
"J-POP": "POP",
......
public/src/js/titlescreen.js
View file @ 08fb3498
......@@ -7,6 +7,7 @@ class Titlescreen{
this.langDropdown = document.getElementById("lang-dropdown")
this.langId = document.getElementById("lang-id")
this.logo = new Logo()
this.lang = this.getLang()
this.setLang(allStrings[this.lang])
this.addLangs()
......@@ -101,6 +102,7 @@ class Titlescreen{
if(failedTests.length !== 0){
showUnsupported(strings)
}
this.logo.updateSubtitle()
}
addLangs(){
for(var i in allStrings){
......@@ -121,6 +123,7 @@ class Titlescreen{
clean(){
this.gamepad.clean()
this.logo.clean()
assets.sounds["title"].stop()
pageEvents.keyRemove(this, "all")
pageEvents.remove(this.titleScreen, ["mousedown", "touchstart"])
......
public/src/js/view.js
View file @ 08fb3498
......@@ -1062,8 +1062,11 @@
}
this.setLayers(donLayers, filename + songSkinName + (notStatic ? "_" : ""), notStatic)
}
this.donBg.style.setProperty("--sw1", assets.image[asset1].width)
this.donBg.style.setProperty("--sw2", assets.image[asset2].width)
var w1 = assets.image[asset1].width
var w2 = assets.image[asset2].width
this.donBg.style.setProperty("--sw", w1 > w2 ? w1 : w2)
this.donBg.style.setProperty("--sw1", w1)
this.donBg.style.setProperty("--sw2", w2)
this.donBg.style.setProperty("--sh1", assets.image[asset1].height)
this.donBg.style.setProperty("--sh2", assets.image[asset2].height)
}
......
public/src/views/titlescreen.html
View file @ 08fb3498
<div id="title-screen">
<div class="logo-big">太鼓の達人ウェブ</div>
<canvas id="logo"></canvas>
<div class="click-to-continue stroke-sub" id="title-proceed"></div>
</div>
<div id="lang">
......
templates/index.html
View file @ 08fb3498
......@@ -11,8 +11,6 @@
<link rel="stylesheet" href="{{config.assets_baseurl}}fonts/fonts.css?{{version.commit_short}}">
<link rel="stylesheet" href="{{config.assets_baseurl}}img/img.css?{{version.commit_short}}">
<script src="/src/js/lib/fontdetect.min.js?{{version.commit_short}}"></script>
<script src="/src/js/assets.js?{{version.commit_short}}"></script>
<script src="/src/js/strings.js?{{version.commit_short}}"></script>
<script src="/src/js/pageevents.js?{{version.commit_short}}"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment