05/18/2026 Catchup - linksync project work and TicTacToe evaluations on different coding LLMs with OpenCode.
This commit is contained in:
21
TicTacToe-Compare/cogito-14b/game.js
Normal file
21
TicTacToe-Compare/cogito-14b/game.js
Normal 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");}
|
||||
))))}}
|
||||
18
TicTacToe-Compare/cogito-14b/index.html
Normal file
18
TicTacToe-Compare/cogito-14b/index.html
Normal 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>
|
||||
127
TicTacToe-Compare/cogito-14b/styles.css
Normal file
127
TicTacToe-Compare/cogito-14b/styles.css
Normal 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 } }
|
||||
Reference in New Issue
Block a user