// Learn cc.Class:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
cc.debug.setDisplayStats(false);
//cc.director.setClearColor(cc.color(255, 255, 255, 255));
console.log("challenge onload")
let windowSize=cc.view.getVisibleSize();
this._screenWidth = windowSize.width
this._screenHeight = windowSize.height
this._hwRate = this._screenHeight/this._screenWidth
console.log("屏幕長寬比:"+this._hwRate)
var common = require('Common');
this.UIStartY = common.loadBg(this.node)
this.loadTools(this._screenWidth,this._screenHeight)
//加載背景
var frame_bgRank = new cc.SpriteFrame(cc.url.raw('resources/bg1.png'));
this.frame_pk = new cc.SpriteFrame(cc.url.raw('resources/pks.png'));
var bgRank = new cc.Node()
var bgRankSp = bgRank.addComponent(cc.Sprite)
bgRankSp.sizeMode = 'CUSTOM'
bgRankSp.spriteFrame = frame_bgRank
var rankBgHeight = this._screenHeight*0.72
if(this._hwRate >= 1.8){
var rankBgHeight = this._screenHeight*0.65
}
var rankBgWidth = rankBgHeight*616/1002
bgRank.width = rankBgWidth
bgRank.height = rankBgHeight
bgRank.position = cc.p(0,0)
bgRank.parent = this.node
var title = new cc.Node()
this.titleLabel = title.addComponent(cc.Label)
this.titleLabel.string = "選擇對手"
this.titleLabel.fontSize = 50
this.titleLabel.lineHeight = 55
this.titleLabel.verticalAlign = "CENTER"
var outline = title.addComponent(cc.LabelOutline);
outline.color = new cc.color(148, 82,55,255)
outline.width = 4
title.position = cc.p(0,bgRank.height/2*0.85)
title.parent = bgRank
var random = new cc.Node()
var frame_btn = new cc.SpriteFrame(cc.url.raw('resources/btnBg.png'));
var btnWidth = bgRank.width*0.55
var btnHeight = 161/482*btnWidth
var btnSp = random.addComponent(cc.Sprite)
btnSp.spriteFrame = frame_btn
btnSp.sizeMode = 'CUSTOM'
random.width = btnWidth
random.height = btnHeight
random.position = cc.p(0,-bgRank.height/2)
random.parent = bgRank
var randTxt = new cc.Node()
this.randTxtLabel = randTxt.addComponent(cc.Label)
this.randTxtLabel.string = "隨機挑戰"
this.randTxtLabel.fontSize = 45
this.randTxtLabel.lineHeight = 50
this.randTxtLabel.verticalAlign = "CENTER"
var outline2 = randTxt.addComponent(cc.LabelOutline);
outline2.color = new cc.color(148, 82,55,255)
outline2.width = 4
randTxt.position = cc.p(0,0)
randTxt.parent = random
var maskNode = new cc.Node()
maskNode.width = bgRank.width*0.9
maskNode.height = bgRank.height*0.74
this.maskShowHeight = maskNode.height
this.maskShowWidth = maskNode.width
var maskGraph = maskNode.addComponent(cc.Graphics)
maskGraph.fillColor = new cc.color(30,130,30,255)
maskGraph.roundRect(-maskNode.width/2,-maskNode.height/2,maskNode.width,maskNode.height,0);
maskGraph.fill();
maskNode.position = cc.p(0,-bgRank.height*0.02)
maskNode.parent = bgRank
var mask = maskNode.addComponent(cc.Mask)
mask.type = cc.Mask.Type.RECT
/*
//test mask
var testContent = new cc.Node()
testContent.width = this._screenWidth
testContent.height = this._screenHeight
var testGraph = testContent.addComponent(cc.Graphics)
testGraph.fillColor = new cc.color(130,30,70,255)
testGraph.roundRect(-testContent.width/2,-testContent.height/2,testContent.width,testContent.height,0);
testGraph.fill();
testContent.position = cc.p(0,0)
testContent.parent = this.maskNode
*/
var mycontent = new cc.Node()
mycontent.width = this._screenWidth
mycontent.height = this._screenHeight*2
/*
var testGraph = mycontent.addComponent(cc.Graphics)
testGraph.fillColor = new cc.color(130,30,70,255)
testGraph.roundRect(-this._screenWidth/2,-this._screenHeight/2,this._screenWidth,this._screenHeight,0);
testGraph.fill();
*/
mycontent.position = cc.p(0,0)
mycontent.parent = maskNode
this.mycontent = mycontent
var scroll = maskNode.addComponent(cc.ScrollView)
scroll.content = mycontent
scroll.horizontal = false
var handler = new cc.Component.EventHandler();
handler.target = this.node; //這個 node 節點是你的事件處理代碼組件所屬的節點
handler.component = "Challenge";//這個是腳本文件名
handler.handler = "callback";
scroll.scrollEvents.push(handler);
cc.loader.loadRes("my.ttf", cc.Font, (err, res)=>{
this.titleLabel.font = res;
this.randTxtLabel.font = res;
})
this.dataFlag = {
type:'ab',//上下位置關係
unit:10,
pageAbove:0,//包含玩家本人且排名高的最近的unit人
pageBelow:-1,//低於玩家排名的最近的unit人
//>=0 返回的數據 exp 增長 玩家本人在第一個
//<0 返回的數據 exp 遞減
}
this.loadContent()
},
drawTables(data){
this.dataAbove = data['above'] //exp自增
this.dataBelow = data['below'] //exp自增
console.log("上半部分記錄數:"+this.dataAbove.length)
console.log("上半部分記錄數:"+this.dataBelow.length)
this.setLineHighlight()
this.aboveLines = []
this.belowLines = []
this.gapInLine = 20
this.contentHeight = (this.dataAbove.length+this.dataBelow.length)*this.lineHeight
var dataForA = []
var dataForB = []
if(this.dataFlag ['type'] == 'ab'){//a在上 b在下
dataForA = this.dataAbove
dataForB = this.dataBelow
}else{
dataForA = this.dataBelow
dataForB = this.dataAbove
}
//繪製a
this.drawHalfArea(dataForA,this.a,"a")
//繪製b
this.drawHalfArea(dataForB,this.b,"b")
//this.mycontent.height =
this.mycontent.position = cc.p(0,-this.maskShowHeight/2)
},
drawHalfArea(dataHalf,box,boxName){
var boxHeight = dataHalf.length * this.lineHeight
for(var i=0;i<dataHalf.length;i++){//exp自增，由下向上繪製
var item = dataHalf[i]
var line = new cc.Node()
if(boxName == "a"){
if(this.AEndLineHighlighted){
if(i%2 == 0){
var lineGraph = line.addComponent(cc.Graphics)
lineGraph.fillColor = new cc.color(235, 189, 86,255)
lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0);
lineGraph.fill();
}
}else{
if(i%2 == 1){
var lineGraph = line.addComponent(cc.Graphics)
lineGraph.fillColor = new cc.color(235, 189, 86,255)
lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0);
lineGraph.fill();
}
}
}else{
if(this.BEndLineHighlighted){
if(i%2 == 0){
var lineGraph = line.addComponent(cc.Graphics)
lineGraph.fillColor = new cc.color(235, 189, 86,255)
lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0);
lineGraph.fill();
}
}else{
if(i%2 == 1){
var lineGraph = line.addComponent(cc.Graphics)
lineGraph.fillColor = new cc.color(235, 189, 86,255)
lineGraph.roundRect(-this.maskShowWidth/2,-this.lineHeight/2,this.maskShowWidth,this.lineHeight,0);
lineGraph.fill();
}
}
}
var pk = new cc.Node()
var pkSp = pk.addComponent(cc.Sprite)
pkSp.spriteFrame = this.frame_pk
pkSp.sizeMode = "CUSTOM"
pk.width = this.lineHeight*0.7
pk.height = pk.width
pk.position = cc.p(this.maskShowWidth/2-this.gapInLine-pk.width/2,0)
pk.parent = line
var name = new cc.Node()
var nameLabel = name.addComponent(cc.Label)
nameLabel.string = item['nickName']
nameLabel.verticalAlign = "CENTER"
nameLabel.fontSize = Math.floor(this.lineHeight*0.3)
name.color = new cc.color(153, 63, 22,255)
name.position = cc.p((this.maskShowWidth/2-this.gapInLine*2-pk.width)/2,0)
name.parent = line
var pinji = new cc.Node()
var pinjiLabel = pinji.addComponent(cc.Label)
pinjiLabel.string = item['pinji']
pinjiLabel.verticalAlign = "CENTER"
pinjiLabel.fontSize = nameLabel.fontSize-3
pinji.color = name.color
pinji.position = cc.p((-this.maskShowWidth/2+this.gapInLine*2+pk.width)/2,this.lineHeight/4)
pinji.parent = line
var title = new cc.Node()
var titleLabel = title.addComponent(cc.Label)
titleLabel.string = item['title']
titleLabel.verticalAlign = "CENTER"
titleLabel.fontSize = nameLabel.fontSize-4
title.color = name.color
title.position = cc.p((-this.maskShowWidth/2+this.gapInLine*2+pk.width)/2,-this.lineHeight/4)
title.parent = line
var url = item['avatarUrl']+"?aaa=aa.jpg?idx="+i
cc.loader.load(url, function(err, tex){
//cc.log('Should load a texture from external url: ' + (tex instanceof cc.Texture2D));
var fullUrl = tex.toString()
var start = fullUrl.indexOf("?idx=")+5
var idx = parseInt(fullUrl.substr(start,fullUrl.length-start))
var frame = new cc.SpriteFrame(tex);
var avaMask = new cc.Node()
avaMask.width = this.lineHeight*0.7
avaMask.height = avaMask.width
avaMask.position = cc.p(-this.maskShowWidth/2+this.gapInLine+avaMask.width/2,0)
if(boxName == "a"){
avaMask.parent = this.aboveLines[idx]
}else{
avaMask.parent = this.belowLines[idx]
}
var mask = avaMask.addComponent(cc.Mask)
mask.type = cc.Mask.Type.ELLIPSE
var ava = new cc.Node()
var avaSp = ava.addComponent(cc.Sprite)
ava.width = avaMask.width
ava.height = avaMask.height
avaSp.spriteFrame = frame
avaSp.sizeMode = "CUSTOM"
ava.parent = avaMask
}.bind(this));
line.position = cc.p(0,-boxHeight/2+i*this.lineHeight+this.lineHeight/2)
//line.position = cc.p(0,this.lineHeight/2+i*this.lineHeight)
//boxHeight
line.parent = box
if(boxName == "a"){
this.aboveLines.push(line)
}else{
this.belowLines.push(line)
}
}
//console.log("boxName:"+boxName)
if(this.dataFlag ['type'] == 'ab'){//a在上 b在下
if(boxName == "a"){
box.position = cc.p(0,this.offset+boxHeight/2)
}else{
box.position = cc.p(0,-this.offset-boxHeight/2)
}
}else{
if(name == "b"){
box.position = cc.p(0,this.offset+boxHeight/2)
}else{
box.position = cc.p(0,-this.offset-boxHeight/2)
}
}
box.parent = this.mycontent
},
setLineHighlight(){
if(this.newLoaded == 0){//第一次加載
this.AEndLineHighlighted = true
this.BHeadLineHighlighted = false
if(this.dataAbove.length%2 == 0){
this.AHeadLineHighlighted = false
}else{
this.AHeadLineHighlighted = true
}
if(this.dataBelow.length%2 == 0){
this.BEndLineHighlighted = true
}else{
this.BEndLineHighlighted = false
}
}else if(this.newLoaded == 'a'){
//a是重置過的
if(this.dataFlag ['type'] == 'ab'){
this.AEndLineHighlighted = !this.BHeadLineHighlighted
if(this.dataAbove.length%2 == 0){
this.AHeadLineHighlighted = !this.AEndLineHighlighted
}else{
this.AHeadLineHighlighted = this.AEndLineHighlighted
}
}else{
this.AHeadLineHighlighted = !this.BEndLineHighlighted
if(this.dataBelow.length%2 == 0){
this.AEndLineHighlighted = !this.AHeadLineHighlighted
}else{
this.AEndLineHighlighted = this.AHeadLineHighlighted
}
}
}else if(this.newLoaded == 'b'){
if(this.dataFlag ['type'] == 'ab'){
this.BHeadLineHighlighted = !this.AEndLineHighlighted
if(this.dataBelow.length%2 == 0){
this.BEndLineHighlighted = !this.BHeadLineHighlighted
}else{
this.BEndLineHighlighted = this.BHeadLineHighlighted
}
}else{
this.BEndLineHighlighted = !this.AHeadLineHighlighted
if(this.dataAbove.length%2 == 0){
this.BHeadLineHighlighted = !this.BEndLineHighlighted
}else{
this.BHeadLineHighlighted = this.BEndLineHighlighted
}
}
}
},
showTable(data){
this.a = new cc.Node('a')
this.b = new cc.Node('b')
this.lineHeight = this.maskShowHeight/8
console.log("單行高度:"+this.lineHeight)
this.offset = 0
this.dataFlag ['type'] = 'ab'
this.firstShow = true
this.newLoaded = 0
this.drawTables(data)
},
loadContent(){
console.log("加載一次")
if (CC_WECHATGAME) {
console.log("請求對手列表信息")
var self = this
wx.cloud.init({env:'test-8fii9'})
wx.cloud.callFunction({
name: 'getChallengeList',
data:this.dataFlag,
success: function(res) {
self.showTable(res.result)
},
fail: console.error
})
}else{
console.log("這裏不是微信環境")
var aboveData=[
{
'nickName':'我',
'pinji':'正三品0',
'title':'御前侍衛',
},
{
'nickName':'雲山',
'pinji':'正三品1',
'title':'御前侍衛',
},
{
'nickName':'微信暱稱最長多',
'pinji':'正三品2',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品3',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品4',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品5',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品6',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品7',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品8',
'title':'御前侍衛',
},
{
'nickName':'卓爾',
'pinji':'正二品9',
'title':'御前侍衛',
}
]
var belowData=[
{
'nickName':'雲和山',
'pinji':'正五品0',
'title':'御前侍衛',
},
{
'nickName':'雲和山1',
'pinji':'正四品1',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品2',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品3',
'title':'御前侍衛4',
},
{
'nickName':'雲和山',
'pinji':'正四品4',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品5',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品6',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品7',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品8',
'title':'御前侍衛',
},
{
'nickName':'雲和山',
'pinji':'正四品9',
'title':'御前侍衛',
}
]
var localData={
'above':aboveData,
'below':belowData
}
this.showTable(localData)
}
},
callback: function (scrollview, eventType, customEventData) {
this.loading = false
var offset = scrollview.getScrollOffset().y
//console.log("偏移量:"+offset)
var startOffset = (this.mycontent.height-this.maskShowHeight)/2
//console.log("初始偏移:"+startOffset)
//內容部分下移的極限
var minOffset = startOffset-(this.dataAbove.length*this.lineHeight-this.maskShowHeight/2)
var maxOffset = startOffset+this.dataBelow.length*this.lineHeight-this.maskShowHeight/2
//如果內容不滿一屏高度，不觸發
//console.log(this.dataFlag['unit'])
if(offset >= maxOffset-20 && (this.dataBelow.length >= this.dataFlag['unit'])){
console.log("到底啦 需要刷新")
if(this.loading){
return
}
console.log("開始加載新頁面")
this.loading = true
if(this.dataFlag ['type'] == 'ab'){
//重置'a區域'
this.a.removeFromParent()
this.b.removeFromParent()
this.dataFlag['pageAbove'] -= 1
this.dataFlag['pageBelow'] -= 1
/*()
this.dataFlag = {
//type:'ab',//上下位置關係
unit:10,
pageAbove:0,//包含玩家本人且排名高的最近的unit人
pageBelow:-1,//低於玩家排名的最近的unit人
//>=0 返回的數據 exp 增長 玩家本人在第一個
//<0 返回的數據 exp 遞減
}
*/
this.loadContent()
this.loading = false
//this.dataFlag ['type'] == 'ba'
//this.newLoaded = 'a'
}else{//當前'ba'
//this.dataFlag ['type'] = 'ab'
//this.newLoaded = 'b'
}
}else if(offset <= Math.max(minOffset,0)+20 &&(this.dataAbove.length >= this.dataFlag['unit'])){
console.log("到頂啦 需要刷新")
}
},
loadTools(screenWidth,screenHeight){
var gap_toolBar = 20
var back = new cc.Node()
var backSp = back.addComponent(cc.Sprite)
var frame_back = new cc.SpriteFrame(cc.url.raw('resources/back.png'));
backSp.spriteFrame = frame_back
backSp.sizeMode = 'CUSTOM'//支持縮
var borWidth = screenWidth/8
var barWidth = borWidth*0.8
var barHeight = barWidth*95/92
back.width = barWidth
back.height = barHeight
back.position = cc.p(-screenWidth/2+barWidth+gap_toolBar,this.UIStartY)
//home.zIndex = 200
back.parent = this.node
back.on(cc.Node.EventType.TOUCH_START,
function(event){
cc.director.loadScene('question')
}
,this)
},
start () {
},
// update (dt) {},
});