Skip to content

Larger photo area when uploading scores #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bennysghost wants to merge 2 commits into
base: master
Choose a base branch
from
+32 −46
Open

Larger photo area when uploading scores #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b71036
enlarge viewing area and improve initial rendering of match photo
bennysghost Apr 15, 2026
85bc4b8
change max width to 512. center canvas in available width
bennysghost Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion template/game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</table>
{{/editable}}

<canvas id="canvas" style="display:none;"></canvas>
<canvas id="canvas" style="display:none; width:100%; max-width:512px; margin:0 auto;"></canvas>

<table id="scores">
<tr>
Expand Down
76 changes: 31 additions & 45 deletions template/game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ var imageChanged = false;
var posChanged = false;
var scoreChanged = false;

var MAX_WIDTH = 512;

var adjustScale = 1;
var adjustDeltaX = 0;
var adjustDeltaY = 0;
Expand Down Expand Up @@ -231,7 +233,9 @@ console.log("setImageData()...");
resizeImage(data, function(resized) {
imageData = resized;
renderImage();
$('#canvas').show();
// Use css() instead of show(): canvas defaults to display:inline, so
// show() restores inline rather than block, breaking margin:0 auto centering.
$('#canvas').css('display', 'block');
$('#cell-left').show();
$('#cell-right').show();
});
Expand Down Expand Up @@ -269,61 +273,40 @@ function renderImage() {

function drawImage() {
var img = imgElm;
var MAX_WIDTH = 300;
var MAX_HEIGHT = 188;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ang = (imageRot + 360) % 360;

var w = img.width;
var h = img.height;

canvas.width = MAX_WIDTH;
canvas.height = MAX_HEIGHT;
// 2:1 canvas: width = min(rendered width, 1024px), height = width/2
var clientW = canvas.clientWidth || Math.min((canvas.parentElement || document.body).clientWidth || 300, MAX_WIDTH);
var canvasW = clientW;
var canvasH = Math.round(canvasW / 2);
canvas.width = canvasW;
canvas.height = canvasH;

var flip = (ang == 90 || ang == 270);
var dx = flip ? h/2 : w/2;
var dy = flip ? w/2 : h/2;

//Calc scale factor.
var scale = 1;
if(flip) {
if(w > h) {
// console.log("Case 1: flip,w>h,",MAX_HEIGHT + " / " + w);
scale = MAX_HEIGHT / w;
}
else {
// console.log("Case 2: flip,h>=w,",MAX_WIDTH + " / " + h);
scale = MAX_WIDTH / h;
}
}
else {
if(w > h) {
// console.log("Case 3: w>h,",MAX_WIDTH + " / " + w);
scale = MAX_WIDTH / w;
}
else {
// console.log("Case 4: h>=w,",MAX_HEIGHT + " / " + h);
scale = MAX_HEIGHT / h;
}
}
// console.log("ang:",ang,"flip:",flip,"w:",w,"h:",h,"dx:",dx,"dy:",dy,"scale:",scale);
// Effective image dimensions in canvas space after rotation
var effW = flip ? h : w;
var effH = flip ? w : h;

// Scale image to fill canvas width; height may overflow (cropped by canvas)
var baseScale = canvasW / effW;
var scale = baseScale * currentScale;

scale *= currentScale;
dx += currentDeltaX;
dy += currentDeltaY;
// console.log("trans -> scale:",scale,"dx:",dx,"dy:",dy);
//TODO: Clamp dx and dy to meaningful range.
// Position the image center at the canvas center (x and y computed separately)
var centerX = canvasW / (2 * baseScale);
var centerY = canvasH / (2 * baseScale);
var dx = centerX + currentDeltaX;
var dy = centerY + currentDeltaY;

ctx.scale(scale,scale);
ctx.scale(scale, scale);
ctx.translate(dx, dy);
ctx.rotate(ang * Math.PI / 180);
ctx.translate(-w/2, -h/2);
ctx.drawImage(img, 0, 0, w, h);
// var dataUrl = canvas.toDataURL("image/jpg");
// console.log("imageData: ",imageData.length);
// console.log("dataURL: ",dataUrl.length);
}

function rotatePhoto(degrees) {
Expand All @@ -347,10 +330,13 @@ console.log("preview(), files.length:",files.length);
var reader = new FileReader();
reader.onload = function(e) {
//Reset transform values for new images.
imageRot = 0;
adjustScale = 1;
adjustDeltaX = 0;
adjustDeltaY = 0;
imageRot = 0;
adjustScale = 1;
adjustDeltaX = 0;
adjustDeltaY = 0;
currentScale = 1;
currentDeltaX = 0;
currentDeltaY = 0;
setImageData(e.target.result);
//TODO: We should do sha or md5 to compare imageData
imageChanged = true;
Expand Down