05/18/2026 Catchup - linksync project work and TicTacToe evaluations on different coding LLMs with OpenCode.

This commit is contained in:
DavidSaylor
2026-05-18 19:55:48 -05:00
parent aed69afdfd
commit c5d3912070
544 changed files with 140434 additions and 364 deletions

View File

@@ -0,0 +1,21 @@
/* Modern Tic Tac Toe JavaScript file
* Copyright (c) David, 2024. */
// Get DOM elementsconst gridContainer = document.getElementById('board');
const squareButtons = Array.from(document.querySelectorAll('#board button'));
class Game {
constructor() {
this.board = [
[], [], []
];
this.gameOver = false;
this.currentPlayer = '';
this.movesCount = 0;
// Initialize game board squares
squareButtons.forEach(
(btn, idx) => (
btn.addEventListener('click', () => { if(this.moveIsValid(idx))
this.updateBoard({cell:btn,squareIndex:idx,mark:'X'});
else alert("Game is over");}
))))}}

View File

@@ -0,0 +1,18 @@
!<!DOCTYPE html>>
<html lang="en">
<head>
<title>Modern Tic-Tac-Toe</title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<main class="game-container">
<!-- Displays coin flip banner -->
<header>
<h1 id="banner">Coin Flip...</div></h1>
</header>
<table id="board" class="ttt-game-board">
<tr>
<col><button id='cell-0' data-square-index='0'>\<button></col>
<col><button>...</button></div></td>
</table>

View File

@@ -0,0 +1,127 @@
/* Modern Tic Tac Toe style sheet
* Copyright (c) David, 2024. */
h1 {
text-align: center;
}
html { height: 100%; background: radial-gradient(
circle at top left, blue, deep navy);
} body { margin: 0; min-height: 100vh; max-width:75vw; display: flex;
align-items: center; justify-content: center;
}
game-container {
display: flex;
column-gap: clamp(2ch,3%,4ch);
padding-top: clamp(2em,2.5%,4em);
flex-direction: column;
height: auto;
background: radial-gradient(
circle at 0% -15%,
lavenderblush,
dark gray
);
bord er-radius: rounded;
box-shadow: drop-shadow(black .3em 2vw .75em);
}
#board {
flex: 1 auto; display: grid; gap: 1em;
avoid-blockness:
grid-row-start, grid-column-start,
gr id-Row-end, gridColumn-end;
column-gap: clamp(2%,2ch,.86em);
row-gap: clamp(1.5%,1vw,.76em); border: solid .4em dark green;padding-top: 0;
padding-bottom: 0; padding-left: clamp(10px, 1%, 1.25em );padding-right: clamp(10px,1vw,1.5%);
}
td {
position:relative;height:fit-content;
min-height:.8375rem;justify-self: stretch;
padding:clamp(.375ch,4vw,.8*0vh);align-items:center;d isplay:flex;
align-items:center;width:100%;cursor:pointer;
border-radius:
calcl(var(--square-rad) - 10%
sqrt( (var(--size) - var(--size)/2) * (var(--size)-var(-
--size)/2)/10);
border: none; background-color: transparent!important;
onfocusout { border:none !important; outline:none!imp ortant}
padding: clamp(.375rem, .6*.475em,.8*3vh); box-shadow:
solid rgba(0, 0.2, 0.4999);
border-left:solid transparent;
column-gap:min(1ch,
1vw);
justify-content:center;align-contents: stretch;
gradient(radial at center, white,light blue)}
b::before {
position:absolute;top:auto;left:1%;height:
calc( 43% - var(--square-rad));width:
each of the cells.
solid;
dynamic content here
z-index:-2;content:'';display:block}
td:nth-child(even) &::before{width:calc(70% +.35em);
height:clamp(
1ch, (var(--grid-scale)), .87142rem);top:
calc(var(--square-rad)*-0.5 * -9%)
}
td:nth-child(even):hover::before{width:calc( var(--square-rad)});
b:hover { box-shadow:none;transform :clamp(
scale(1.3));z-index:2;
backface-visibility:auto; transition: transform .1s ease
out cubic-bezier(.68, -.61, .57,.94);
perspective:.01*2em!important;}
.square {
cursor:pointer;width:
clamp( 5vw ,4ch,40vh);height:clamp(3.59vw,9ch,3.795em)
}/*cell animations*/
.animating-move {
anotation-transform:"translateZ(0)";
perspective:.6em !important;
transform-origin:center center !important;}/*game status*/}#statsContainer {position:fixed bottom:2rem left: .3%
bottom: calc(.48 vw +3.57 rem);padding-bottom.calc(.1vmin+.3 vh);
padding top:calc(2px * var(--unitSize) /0.76vw)*100%;
display:fle d !important; background:radialgradient(
light coral,goldenrod)
l .5 ch .48em linear-gradient(90deg, rgba(0.35% 0%, 0%
.64% 8%) calc(.475rem),transparent calc(.211em) );
border-radius:calc( clamp( 1vh,.4*1vw . 16 rem)); box-shadow:none
solid silver
,rgba(0,0,3%,10) 3.997px)
z-index:clamp(100%,2em,54); transition:.8 s ease-in-out;
column-gap;calc(.5 % .66em ); row gap calc(.6*
, clamp(80px-.57*, 50vw) .66em)
display:flex !important flex-direction:column flex-wrap wrap
align-items flex-start;
/*Game Stats & Messages*/}
game-container #status-banner {
--animate-fraction:1; position:absolute;height
x;opacity:.65
pointer-events:none;visibility:hidden;z-index:61
callback with a .7rem gap; padding 0.2%.4 em
margin-top:clamp(1.38v h, .62 vh, -2%)
backgrou nds:gold
/*Banner Animations */
tic-tac animation for the coin flip banner*/
crossfade to show winner/caller after game ends etc.
@keyframes coin-flip-anime {
only of frames 0%,100%
{
box-shadow:none;}35% {height: calc(2.347vw .6
9 em);margin- top:.8rem
}
37.5% transform:none
} animation coinflap-animate ease infinite 5s;}}
/*Hover effects on cells*/:hover td {
display:flex;
align-items:center !important justify-content:center;
css transition transform .2s ease-out cubic-bezier(.35, -0.71 , -.64);
box-shadow:none;
borders: solid .482px transparent;
border-radius:.9em;--square-rad:var(--defaultSquareRad
/*Grid Layout & Responsive Adjustments*/#board {
display:block!important;
grid-template_rows: repeat(3,var(--square-size))auto}
@media ( max-width :768px){html {
bord er-color:light brown;
color:pale goldenrod; height:auto; background:white !important
border:none } }