index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. var RankItem = require('./rankitem.js').RankItem;
  2. var Label = require('./libs/label.js').Label;
  3. var Sprite = require('./libs/sprite.js').Sprite;
  4. var BottomScoreItem = require('./bottomscoreitem.js').BottomScoreItem;
  5. const PAGE_SIZE = 5;
  6. const ITEM_WIDTH =600;// 608;
  7. //100
  8. const ITEM_HEIGHT = 65;//126;
  9. //270
  10. const offsetY = 220;
  11. //间距
  12. const itemGap = 15;
  13. //1150
  14. const ownerY= 1150;
  15. const pageTextY=1250;
  16. var offsetX = 0;
  17. var canvawidth = 0;
  18. var canvaheight = 0;
  19. var normal_scale = 1;
  20. var swidth = 630;
  21. var sheight = 800;
  22. var friends_scores = [];
  23. //总排行数据 可为群或者好友
  24. var group_scores = [];
  25. //周排行数据 可为群或者好友
  26. var group_week_scores = [];
  27. var current_scores = [];
  28. var moveoffset = 0; //滑动偏移
  29. var allHeight = 0; //整个排行榜高
  30. var worldData;
  31. var isworldRank = false;
  32. const dataSorter = (gameDatas, filed = "Level") => {
  33. console.log("玩家信息----",gameDatas);
  34. return gameDatas.sort((a, b) => {
  35. const kvDataA = a.KVDataList.find(kvData => kvData.key == filed);
  36. const kvDataB = b.KVDataList.find(kvData => kvData.key == filed);
  37. console.log("玩家分数为------------");
  38. var stageA = JSON.parse(kvDataA.value).wxgame.Level;
  39. var stageB = JSON.parse(kvDataB.value).wxgame.Level;
  40. const gradeA = kvDataA ? parseInt(stageA || 0) : 0;
  41. const gradeB = kvDataB ? parseInt(stageB || 0) : 0;
  42. return gradeA > gradeB ? -1 : gradeA < gradeB ? 1 : 0;
  43. });
  44. }
  45. let myInfo;
  46. let avatarUrl;
  47. //获取个人信息
  48. wx.getUserInfo({
  49. openIdList: ["selfOpenId"],
  50. success: function (res) {
  51. myInfo = res.data[0];
  52. avatarUrl = myInfo.avatarUrl;
  53. console.log(myInfo);
  54. }
  55. })
  56. var adpater = 0;
  57. var h;//宽
  58. var v;//高
  59. class RankListRenderer {
  60. constructor() {
  61. this.totalPage = 0;
  62. this.currPage = 0;
  63. this.keyName = "";
  64. this.rankitemArr = [];
  65. this.init();
  66. this.sys_info = wx.getSystemInfoSync();
  67. }
  68. init() {
  69. this.canvas = wx.getSharedCanvas();
  70. this.ctx = this.canvas.getContext('2d');
  71. this.ctx.imageSmoothingEnabled = true;
  72. this.ctx.imageSmoothingQuality = "high";
  73. this.rankcanvas = wx.createCanvas();
  74. this.rankctx = this.rankcanvas.getContext('2d');
  75. }
  76. listen() {
  77. wx.onMessage(msg => {
  78. console.log(msg);
  79. switch (msg.action) {
  80. case "canvase_width_height":
  81. console.log(msg.data.width, msg.data.height);
  82. canvawidth = msg.data.width;
  83. canvaheight = msg.data.height;
  84. v = canvaheight / this.screenHeight;
  85. h = canvawidth / this.sys_info.screenWidth;
  86. offsetX = (canvawidth - ITEM_WIDTH) * 0.5 * normal_scale;
  87. this.rankcanvas.width = canvawidth;
  88. this.rankcanvas.height = canvaheight;
  89. break;
  90. case "clearctx":
  91. this.rankctx.clearRect(0, 0, canvawidth, canvaheight);
  92. break;
  93. case "get_friend_storage":
  94. this.getFriendStorage(msg.keyName);
  95. break;
  96. case "show_friend_rank":
  97. console.log("keyname111111", msg.keyName);
  98. this.keyName = msg.keyName;
  99. this.fetchFriendData(msg.keyName);
  100. isworldRank = false;
  101. this.currPage = 0;
  102. break;
  103. case "show_group_rank":
  104. console.log("show_group_rank", msg.data);
  105. if (!msg.data) return;
  106. this.keyName = msg.keyName;
  107. this.fetchGroupData(msg.keyName, msg.data);
  108. break;
  109. case "show_world_rank":
  110. console.log("show_group_rank", msg.data);
  111. if (!msg.data) return;
  112. this.keyName = msg.keyName;
  113. worldData = msg.data;
  114. this.totalPage = Math.ceil(worldData["list"].length / PAGE_SIZE);
  115. isworldRank = true;
  116. this.showWorldRanks(0);
  117. break;
  118. case "show_min_rank":
  119. this.keyName = msg.keyName;
  120. this.drawMinRank(msg.keyName, msg.data);
  121. break;
  122. case "show_up_page":
  123. if (!isworldRank && !current_scores.length) {
  124. return;
  125. }
  126. if (isworldRank && !worldData["list"].length) {
  127. return;
  128. } {
  129. let page = this.currPage;
  130. page -= 1;
  131. if (page < 0) page = 0;
  132. if (this.currPage > page) {
  133. this.currPage = page;
  134. if (isworldRank == false)
  135. this.showRanks(this.currPage);
  136. else this.showWorldRanks(this.currPage);
  137. }
  138. }
  139. break;
  140. case "show_next_page":
  141. if (!isworldRank) {
  142. if (!current_scores.length) return;
  143. } else {
  144. if (!worldData["list"].length) return;
  145. } {
  146. let page = this.currPage;
  147. page += 1;
  148. if (this.totalPage <= page) page = this.totalPage - 1;
  149. if (this.currPage < page) {
  150. this.currPage = page;
  151. if (isworldRank == false)
  152. this.showRanks(this.currPage);
  153. else this.showWorldRanks(this.currPage);
  154. }
  155. }
  156. break;
  157. default:
  158. console.log(`未知消息类型:msg.action=${msg.action}`);
  159. break;
  160. }
  161. });
  162. }
  163. fetchFriendData(keyName) {
  164. wx.getFriendCloudStorage({
  165. keyList: [
  166. keyName,
  167. ],
  168. success: res => {
  169. console.log("wx.getFriendCloudStorage success", res);
  170. const dataLen = res.data.length;
  171. friends_scores = dataSorter(res.data, keyName);
  172. console.log("Sort success", friends_scores);
  173. current_scores = friends_scores;
  174. this.totalPage = Math.ceil(current_scores.length / PAGE_SIZE);
  175. console.log(" this.totalPage", this.totalPage);
  176. if (dataLen) {
  177. this.showRanks(0);
  178. }
  179. },
  180. fail: res => {
  181. console.log("wx.getFriendCloudStorage fail", res);
  182. },
  183. });
  184. }
  185. showRanks(page) {
  186. const startIndex = page * PAGE_SIZE;
  187. const stopIndex = startIndex + PAGE_SIZE;
  188. const datas = current_scores.slice(startIndex, stopIndex);
  189. let x = 0;
  190. if (this.sys_info.model.match("iPhone X")) {
  191. x = 110
  192. }
  193. this.ctx.clearRect(0, 0, canvawidth, canvaheight);
  194. for (let i = 0, len = datas.length; i < len; i++) {
  195. let data = datas[i];
  196. const nick = data.nickname.length <= 5 ? data.nickname : data.nickname.substr(0, 5) + "...";
  197. const kvData = data.KVDataList.find(kvData => kvData.key == this.keyName);
  198. const itemGapY = (ITEM_HEIGHT + itemGap) * i + offsetY;
  199. const avatarUrl = data.avatarUrl;
  200. const grade = kvData ? this.max_crossed_stage(kvData.value) : 0;
  201. let rankItem = this.rankitemArr[i];
  202. if (rankItem == null) {
  203. rankItem = new RankItem(offsetX, itemGapY, ITEM_WIDTH, ITEM_HEIGHT);
  204. this.rankitemArr.push(rankItem);
  205. rankItem.create();
  206. }
  207. rankItem.setData(i + startIndex + 1, avatarUrl, nick, grade, this.keyName);
  208. rankItem.drawToCanvas(this.ctx);
  209. console.log("offsetY", offsetY);
  210. }
  211. // let page_y = canvaheight - 360;
  212. // let pageLabel = new Label(canvawidth * 0.5-40 , pageTextY);
  213. // pageLabel.fontSize = "45px"
  214. // pageLabel.fillStyle = "#ffffff";
  215. // pageLabel.text = `${this.currPage + 1} / ${this.totalPage}`;
  216. // pageLabel.drawToCanvas(this.ctx);
  217. this.showBottomOwner();
  218. }
  219. max_crossed_stage(value)
  220. {
  221. return parseInt(JSON.parse(value).wxgame.Level);
  222. }
  223. showBottomOwner() {
  224. let grade = 0;
  225. let mydata;
  226. let ranking=0;
  227. for (let i = current_scores.length - 1; i >= 0; i--) {
  228. let data = current_scores[i];
  229. if (data.avatarUrl == avatarUrl) {
  230. mydata = data;
  231. ranking=i+1;
  232. break;
  233. }
  234. }
  235. let kvData = mydata.KVDataList.find(kvData => kvData.key == this.keyName);
  236. grade = kvData ? this.max_crossed_stage(kvData.value) : 0;
  237. if (this.ownerItem == null) {
  238. //this.ownerItem = new BottomScoreItem(offsetX, 1040 + adpater, ITEM_WIDTH, ITEM_HEIGHT);
  239. this.ownerItem = new BottomScoreItem(offsetX, ownerY, ITEM_WIDTH, ITEM_HEIGHT);
  240. this.ownerItem.create();
  241. }
  242. console.log(mydata.nickname);
  243. console.log(grade);
  244. //this.ownerItem.setData( mydata.nickname, avatarUrl, grade);
  245. this.ownerItem.setData(ranking, mydata.nickname, avatarUrl, grade);
  246. this.ownerItem.drawToCanvas(this.ctx);
  247. }
  248. showWorldRanks(page) {
  249. const startIndex = page * PAGE_SIZE;
  250. const stopIndex = startIndex + PAGE_SIZE;
  251. const datas = worldData["list"].slice(startIndex, stopIndex);
  252. console.log("datas", datas);
  253. let x = 0;
  254. if (this.sys_info.model.match("iPhone X")) {
  255. x = 110
  256. }
  257. this.ctx.clearRect(0, 0, canvawidth, canvaheight);
  258. for (let i = 0, len = datas.length; i < len; i++) {
  259. let data = datas[i];
  260. let nick = data.nickname.length <= 10 ? data.nickname : data.nickname.substr(0, 10) + "...";
  261. nick = nick == "" ? "游客" : nick
  262. const itemGapY = (ITEM_HEIGHT + 6) * i + offsetY;
  263. const avatarUrl = data.avatar;
  264. const grade = data.score;
  265. let rankItem = this.rankitemArr[i];
  266. if (rankItem == null) {
  267. rankItem = new RankItem(offsetX, itemGapY, ITEM_WIDTH, ITEM_HEIGHT);
  268. this.rankitemArr.push(rankItem);
  269. rankItem.create();
  270. }
  271. rankItem.position(offsetX, itemGapY);
  272. rankItem.setData(i + startIndex + 1, avatarUrl, nick, grade, this.keyName);
  273. rankItem.drawToCanvas(this.ctx);
  274. console.log("offsetY", offsetY);
  275. }
  276. let page_y = canvaheight - 360;
  277. let pageLabel = new Label(canvawidth * 0.5 - 60, page_y);
  278. pageLabel.fontSize = "35px"
  279. pageLabel.fillStyle = "#ffffff";
  280. pageLabel.text = `${this.currPage + 1} / ${this.totalPage}`;
  281. pageLabel.drawToCanvas(this.ctx);
  282. this.showBottomOwner();
  283. }
  284. fetchGroupData(keyName, shareTicket) {
  285. //取出群同玩成员数据
  286. wx.getGroupCloudStorage({
  287. shareTicket,
  288. keyList: [
  289. keyName,
  290. ],
  291. success: res => {
  292. console.log("wx.getGroupCloudStorage success", res);
  293. const dataLen = res.data.length;
  294. group_scores = dataSorter(res.data, keyName);
  295. current_scores = group_scores;
  296. this.totalPage = Math.ceil(current_scores.length / PAGE_SIZE);
  297. console.log(" this.totalPage", this.totalPage);
  298. if (dataLen) {
  299. this.showRanks(0);
  300. }
  301. },
  302. fail: res => {
  303. console.log("wx.getGroupCloudStorage fail", res);
  304. },
  305. });
  306. }
  307. drawMinRank(keyName, shareTicket) {
  308. wx.getFriendCloudStorage({
  309. keyList: [
  310. keyName,
  311. ],
  312. success: res => {
  313. console.log("wx.getFriendCloudStorage success", res);
  314. const dataLen = res.data.length;
  315. friends_scores = dataSorter(res.data, keyName);
  316. current_scores = friends_scores;
  317. this.totalPage = Math.ceil(current_scores.length / PAGE_SIZE);
  318. console.log(" this.totalPage", this.totalPage);
  319. if (dataLen) this.showMinRanks();
  320. },
  321. fail: res => {
  322. console.log("wx.getFriendCloudStorage fail", res);
  323. },
  324. });
  325. }
  326. getFriendStorage(keyName) {
  327. wx.getFriendCloudStorage({
  328. keyList: [
  329. keyName,
  330. ],
  331. success: res => {
  332. console.log("wx.getFriendCloudStorage success", res);
  333. const dataLen = res.data.length;
  334. friends_scores = dataSorter(res.data, keyName);
  335. current_scores = friends_scores;
  336. console.log(" this.totalPage", this.totalPage);
  337. },
  338. fail: res => {
  339. console.log("wx.getFriendCloudStorage fail", res);
  340. },
  341. });
  342. }
  343. }
  344. let ranklist = new RankListRenderer();
  345. ranklist.listen();